diff --git a/.storybook/main.ts b/.storybook/main.ts
index ca904d3b..5698df3c 100644
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -1,7 +1,4 @@
 import type { StorybookConfig } from "@storybook/react-vite";
-
-const CHROMATIC_BASE_URL = process.env.CHROMATIC_BASE_URL || "https://www.chromatic.com";
-
 const config: StorybookConfig = {
   addons: [
     {
@@ -17,16 +14,13 @@ const config: StorybookConfig = {
       name: "../dist/index.js",
       options: {
         projectToken: "chpt_c4206d1157d8947",
+        projectId: "6480e1b0042842f149cfd74c", // Default to the the production project of this addon - WILL BE MOVED TO preview.tsx since we can't access options in the manager.
       },
     },
   ],
   docs: {
     autodocs: "tag",
   },
-  env: (config) => ({
-    ...config,
-    CHROMATIC_BASE_URL,
-  }),
   framework: {
     name: "@storybook/react-vite",
     options: {},
@@ -35,5 +29,4 @@ const config: StorybookConfig = {
   stories: ["../src/**/*.stories.@(js|jsx|ts|tsx)"],
   logLevel: "debug",
 };
-
 export default config;
diff --git a/package.json b/package.json
index 1caf85ab..d5db8597 100644
--- a/package.json
+++ b/package.json
@@ -51,9 +51,11 @@
     "lint": "eslint src --max-warnings 0 --report-unused-disable-directives",
     "release": "pnpm run build && auto shipit",
     "start": "run-p build:watch 'storybook --quiet'",
-    "storybook": "storybook dev -p 6006"
+    "prerelease": "zx scripts/prepublish-checks.mjs",
+    "storybook": "CHROMATIC_ADDON_NAME='../dist/index.js' storybook dev -p 6006"
   },
   "dependencies": {
+    "@storybook/csf-tools": "^7.1.0-alpha.34",
     "@storybook/design-system": "^7.15.11",
     "chromatic": "^6.19.8",
     "date-fns": "^2.30.0",
@@ -63,6 +65,7 @@
   "devDependencies": {
     "@graphql-codegen/cli": "^4.0.1",
     "@graphql-codegen/client-preset": "^4.0.1",
+    "@graphql-typed-document-node/core": "^3.2.0",
     "@storybook/addon-actions": "^7.1.0-alpha.34",
     "@storybook/addon-essentials": "^7.1.0-alpha.34",
     "@storybook/addon-interactions": "^7.1.0-alpha.34",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 180534b5..d42afe19 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -23,6 +23,9 @@ dependencies:
   '@storybook/core-events':
     specifier: ^7.1.0-alpha.34
     version: 7.1.0-alpha.34
+  '@storybook/csf-tools':
+    specifier: ^7.1.0-alpha.34
+    version: 7.1.0-alpha.34
   '@storybook/design-system':
     specifier: ^7.15.11
     version: 7.15.11(react-dom@18.0.0)(react@18.0.0)
@@ -52,6 +55,9 @@ devDependencies:
   '@graphql-codegen/client-preset':
     specifier: ^4.0.1
     version: 4.0.1(graphql@16.6.0)
+  '@graphql-typed-document-node/core':
+    specifier: ^3.2.0
+    version: 3.2.0(graphql@16.6.0)
   '@storybook/addon-actions':
     specifier: ^7.1.0-alpha.34
     version: 7.1.0-alpha.34(react-dom@18.0.0)(react@18.0.0)
@@ -332,7 +338,6 @@ packages:
     engines: {node: '>=6.9.0'}
     dependencies:
       '@babel/highlight': 7.22.5
-    dev: true
 
   /@babel/compat-data@7.22.5:
     resolution: {integrity: sha512-4Jc/YuIaYqKnDDz892kPIledykKg12Aw1PYX5i/TY28anJtacvM1Rrr8wbieB9GfEJwlzqT0hUEao0CxEebiDA==}
@@ -380,7 +385,6 @@ packages:
       '@jridgewell/gen-mapping': 0.3.3
       '@jridgewell/trace-mapping': 0.3.18
       jsesc: 2.5.2
-    dev: true
 
   /@babel/helper-annotate-as-pure@7.22.5:
     resolution: {integrity: sha512-LvBTxu8bQSQkcyKOU+a1btnNFQ1dMAd0R6PyW3arXes06F6QLWLIrd681bxRPIXlrMGR3XYnW9JyML7dP3qgxg==}
@@ -461,7 +465,6 @@ packages:
   /@babel/helper-environment-visitor@7.22.5:
     resolution: {integrity: sha512-XGmhECfVA/5sAt+H+xpSg0mfrHq6FzNr9Oxh7PSEBBRUb/mL7Kz3NICXb194rCqAEdxkhPT1a88teizAFyvk8Q==}
     engines: {node: '>=6.9.0'}
-    dev: true
 
   /@babel/helper-function-name@7.22.5:
     resolution: {integrity: sha512-wtHSq6jMRE3uF2otvfuD3DIvVhOsSNshQl0Qrd7qC9oQJzHvOL4qQXlQn2916+CXGywIjpGuIkoyZRRxHPiNQQ==}
@@ -469,14 +472,12 @@ packages:
     dependencies:
       '@babel/template': 7.22.5
       '@babel/types': 7.22.5
-    dev: true
 
   /@babel/helper-hoist-variables@7.22.5:
     resolution: {integrity: sha512-wGjk9QZVzvknA6yKIUURb8zY3grXCcOZt+/7Wcy8O2uctxhplmUPkOdlgoNhmdVee2c92JXbf1xpMtVNbfoxRw==}
     engines: {node: '>=6.9.0'}
     dependencies:
       '@babel/types': 7.22.5
-    dev: true
 
   /@babel/helper-member-expression-to-functions@7.22.5:
     resolution: {integrity: sha512-aBiH1NKMG0H2cGZqspNvsaBe6wNGjbJjuLy29aU+eDZjSbbN53BaxlpB02xm9v34pLTZ1nIQPFYn2qMZoa5BQQ==}
@@ -568,7 +569,6 @@ packages:
     engines: {node: '>=6.9.0'}
     dependencies:
       '@babel/types': 7.22.5
-    dev: true
 
   /@babel/helper-string-parser@7.22.5:
     resolution: {integrity: sha512-mM4COjgZox8U+JcXQwPijIZLElkgEpO5rsERVDJTc2qfCDfERyob6k5WegS14SX18IIjv+XD+GrqNumY5JRCDw==}
@@ -613,7 +613,6 @@ packages:
       '@babel/helper-validator-identifier': 7.22.5
       chalk: 2.4.2
       js-tokens: 4.0.0
-    dev: true
 
   /@babel/parser@7.21.9:
     resolution: {integrity: sha512-q5PNg/Bi1OpGgx5jYlvWZwAorZepEudDMCLtj967aeS7WMont7dUZI46M2XwcIQqvUlMxWfdLFu4S/qSxeUu5g==}
@@ -1719,7 +1718,6 @@ packages:
       '@babel/code-frame': 7.22.5
       '@babel/parser': 7.22.5
       '@babel/types': 7.22.5
-    dev: true
 
   /@babel/traverse@7.21.5:
     resolution: {integrity: sha512-AhQoI3YjWi6u/y/ntv7k48mcrCXmus0t79J9qPNlk/lAsFlCiJ047RmbfMOawySTHtywXhbXgpx/8nXMYd+oFw==}
@@ -1755,7 +1753,6 @@ packages:
       globals: 11.12.0
     transitivePeerDependencies:
       - supports-color
-    dev: true
 
   /@babel/types@7.21.5:
     resolution: {integrity: sha512-m4AfNvVF2mVC/F7fDEdH2El3HzUg9It/XsCxZiOTTA3m3qYfcSVSbTfM6Q9xG+hYDniZssYhlXKKUMD5m8tF4Q==}
@@ -3336,32 +3333,26 @@ packages:
       '@jridgewell/set-array': 1.1.2
       '@jridgewell/sourcemap-codec': 1.4.15
       '@jridgewell/trace-mapping': 0.3.18
-    dev: true
 
   /@jridgewell/resolve-uri@3.1.0:
     resolution: {integrity: sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==}
     engines: {node: '>=6.0.0'}
-    dev: true
 
   /@jridgewell/set-array@1.1.2:
     resolution: {integrity: sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==}
     engines: {node: '>=6.0.0'}
-    dev: true
 
   /@jridgewell/sourcemap-codec@1.4.14:
     resolution: {integrity: sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==}
-    dev: true
 
   /@jridgewell/sourcemap-codec@1.4.15:
     resolution: {integrity: sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==}
-    dev: true
 
   /@jridgewell/trace-mapping@0.3.18:
     resolution: {integrity: sha512-w+niJYzMHdd7USdiH2U6869nqhD2nbfZXND5Yp93qIbEmnDNk7PD48o+YchRVpzMU7M6jVCbenTR7PA1FLQ9pA==}
     dependencies:
       '@jridgewell/resolve-uri': 3.1.0
       '@jridgewell/sourcemap-codec': 1.4.14
-    dev: true
 
   /@juggle/resize-observer@3.4.0:
     resolution: {integrity: sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA==}
@@ -4134,11 +4125,11 @@ packages:
       '@storybook/channels': 7.1.0-alpha.34
       '@storybook/client-logger': 7.1.0-alpha.34
 
-  /@storybook/channel-postmessage@7.1.0-beta.1:
-    resolution: {integrity: sha512-0tz/kRI1uCtrVt9eeo/UI82yFIt8JTfcSv68DzErQO11k2HDAy7UrYZASghRfeAj5gH/p/pZ5txEBrPr7WfN8g==}
+  /@storybook/channel-postmessage@7.1.0-rc.2:
+    resolution: {integrity: sha512-XQQFN9xYdUwAdWcQopBaNPkj65bSwyBsGEDKFQd1zvwvEv4QKiMWqQVnx84yXfEUu9b4jVolyyB5tQGLS4/6Fw==}
     dependencies:
-      '@storybook/channels': 7.1.0-beta.1
-      '@storybook/client-logger': 7.1.0-beta.1
+      '@storybook/channels': 7.1.0-rc.2
+      '@storybook/client-logger': 7.1.0-rc.2
     dev: true
 
   /@storybook/channels@7.0.21:
@@ -4155,11 +4146,11 @@ packages:
       telejson: 7.1.0
       tiny-invariant: 1.3.1
 
-  /@storybook/channels@7.1.0-beta.1:
-    resolution: {integrity: sha512-QhmhEOjpeuhJ6vcwZhQmzjVu9Djcmhdh0t4UnHSb6DFfEnb/UtuUAyuk5pewjCIZxBtCDbg0V4AQa9dJkac93w==}
+  /@storybook/channels@7.1.0-rc.2:
+    resolution: {integrity: sha512-P9u0l5T0N2zMo387f0+eRBZ29Jg2+mfalBcsvTs2TYR9Kb/plQlEXhvIRxJm3W/OeEvS2vxixN2YOFeZGWlUYg==}
     dependencies:
-      '@storybook/client-logger': 7.1.0-beta.1
-      '@storybook/core-events': 7.1.0-beta.1
+      '@storybook/client-logger': 7.1.0-rc.2
+      '@storybook/core-events': 7.1.0-rc.2
       '@storybook/global': 5.0.0
       qs: 6.11.2
       telejson: 7.1.0
@@ -4225,8 +4216,8 @@ packages:
     dependencies:
       '@storybook/global': 5.0.0
 
-  /@storybook/client-logger@7.1.0-beta.1:
-    resolution: {integrity: sha512-ddIY35dCRf9YaLztOCJibtI3fmPimjdhJfvYl/z5KPgDsl0x7pqE9Wu22EWkk41R06hQxsZdmjKDaKp+m3hAig==}
+  /@storybook/client-logger@7.1.0-rc.2:
+    resolution: {integrity: sha512-O0JLRCFrL7YLMd8sBHdLCqbJBLxW8nCrj7cOwkxt1HY73vy4u/VRujmVZbElaG5QJIoZNUZERyL+oSChthKWlg==}
     dependencies:
       '@storybook/global': 5.0.0
     dev: true
@@ -4335,8 +4326,8 @@ packages:
   /@storybook/core-events@7.1.0-alpha.34:
     resolution: {integrity: sha512-b9+2dm8kz7d1DzyhCjhgWAwbOSvKakI/Jcnp/ml4CEZhOTx77fHgfRxEPwxMc1g+xHM8YZGSLgAb857ShJwfEw==}
 
-  /@storybook/core-events@7.1.0-beta.1:
-    resolution: {integrity: sha512-5Wjf9nOEv0EfVTS2LIO2xIBfXeddv5aB/VVrnjH9752NBOv0OqicN2mYoh4f+JTtYkhfT7CMbHZBDK2iM06EIA==}
+  /@storybook/core-events@7.1.0-rc.2:
+    resolution: {integrity: sha512-qoYLet2G2vNxpVKPTqLovGNoNSNjID7V2vk9hdUis51osOiVHlgJwXxkz33fUOI18y1JbYoVRM8LZaFaMHGF2g==}
     dev: true
 
   /@storybook/core-server@7.1.0-alpha.34:
@@ -4439,7 +4430,6 @@ packages:
       ts-dedent: 2.2.0
     transitivePeerDependencies:
       - supports-color
-    dev: true
 
   /@storybook/csf@0.1.1:
     resolution: {integrity: sha512-4hE3AlNVxR60Wc5KSC68ASYzUobjPqtSKyhV6G+ge0FIXU55N5nTY7dXGRZHQGDBPq+XqchMkIdlkHPRs8nTHg==}
@@ -4530,14 +4520,14 @@ packages:
       '@storybook/preview-api': 7.1.0-alpha.34
     dev: true
 
-  /@storybook/instrumenter@7.1.0-beta.1:
-    resolution: {integrity: sha512-St56g0Mb2XdMmnC0o0YoSOut/rQwrBZimTC3iJspoCTODxhVi9xk2O2y2t1hc7ros/1YimGpx2EnlbgqhP0qKQ==}
+  /@storybook/instrumenter@7.1.0-rc.2:
+    resolution: {integrity: sha512-xmtSNDfSWRkaMIcAlm3ga6ZjHoZgs0xBR3wEgDBtcygaWewvTtuBK4MxgT5NpJjPxGpjVakzjxGoITLQgrk0Kw==}
     dependencies:
-      '@storybook/channels': 7.1.0-beta.1
-      '@storybook/client-logger': 7.1.0-beta.1
-      '@storybook/core-events': 7.1.0-beta.1
+      '@storybook/channels': 7.1.0-rc.2
+      '@storybook/client-logger': 7.1.0-rc.2
+      '@storybook/core-events': 7.1.0-rc.2
       '@storybook/global': 5.0.0
-      '@storybook/preview-api': 7.1.0-beta.1
+      '@storybook/preview-api': 7.1.0-rc.2
     dev: true
 
   /@storybook/linter-config@3.1.2(@typescript-eslint/parser@5.59.11)(eslint@8.42.0)(prettier@2.8.8)(remark@13.0.0)(typescript@4.9.5):
@@ -4694,16 +4684,16 @@ packages:
       ts-dedent: 2.2.0
       util-deprecate: 1.0.2
 
-  /@storybook/preview-api@7.1.0-beta.1:
-    resolution: {integrity: sha512-dxr7BMAfNk/z7t9XTMccXOCAPOp3bHsZ2PQSetbFMxShpB0JoEKon0qKhguAHPau06td4748241xUaJup12M0g==}
+  /@storybook/preview-api@7.1.0-rc.2:
+    resolution: {integrity: sha512-E+X5I1BzFF5aTmclkmoVBYQB+JMx1SUCdkzl+GGX9Wxh5JmyTQDI90ynv0k1aJNvPmC5mS2EMmeqcYoz+AuYZA==}
     dependencies:
-      '@storybook/channel-postmessage': 7.1.0-beta.1
-      '@storybook/channels': 7.1.0-beta.1
-      '@storybook/client-logger': 7.1.0-beta.1
-      '@storybook/core-events': 7.1.0-beta.1
+      '@storybook/channel-postmessage': 7.1.0-rc.2
+      '@storybook/channels': 7.1.0-rc.2
+      '@storybook/client-logger': 7.1.0-rc.2
+      '@storybook/core-events': 7.1.0-rc.2
       '@storybook/csf': 0.1.1
       '@storybook/global': 5.0.0
-      '@storybook/types': 7.1.0-beta.1
+      '@storybook/types': 7.1.0-rc.2
       '@types/qs': 6.9.7
       dequal: 2.0.3
       lodash: 4.17.21
@@ -4846,8 +4836,8 @@ packages:
   /@storybook/testing-library@0.0.14-next.1:
     resolution: {integrity: sha512-1CAl40IKIhcPaCC4pYCG0b9IiYNymktfV/jTrX7ctquRY3akaN7f4A1SippVHosksft0M+rQTFE0ccfWW581fw==}
     dependencies:
-      '@storybook/client-logger': 7.1.0-beta.1
-      '@storybook/instrumenter': 7.1.0-beta.1
+      '@storybook/client-logger': 7.1.0-rc.2
+      '@storybook/instrumenter': 7.1.0-rc.2
       '@testing-library/dom': 8.20.0
       '@testing-library/user-event': 13.5.0(@testing-library/dom@8.20.0)
       ts-dedent: 2.2.0
@@ -4883,10 +4873,10 @@ packages:
       '@types/express': 4.17.17
       file-system-cache: 2.3.0
 
-  /@storybook/types@7.1.0-beta.1:
-    resolution: {integrity: sha512-TyhnLEdFrwuNJS/MBpjKhrY9eoHwKgGWSpHrpv/YK6f7SXSCjropnHvulVoaevSYh0r/WIHlVVYFh6n0gLGUHQ==}
+  /@storybook/types@7.1.0-rc.2:
+    resolution: {integrity: sha512-pd19JdNEE+yuqBNlvk61423ZWQHrbsVafEmiJLD0wL4oWBZts7dijZPYiyrw+Fhw/EuXWsLg0edizBk2Id+JmA==}
     dependencies:
-      '@storybook/channels': 7.1.0-beta.1
+      '@storybook/channels': 7.1.0-rc.2
       '@types/babel__core': 7.20.1
       '@types/express': 4.17.17
       file-system-cache: 2.3.0
@@ -5748,7 +5738,6 @@ packages:
     engines: {node: '>=4'}
     dependencies:
       color-convert: 1.9.3
-    dev: true
 
   /ansi-styles@4.3.0:
     resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
@@ -5905,7 +5894,6 @@ packages:
       is-nan: 1.3.2
       object-is: 1.1.5
       util: 0.12.5
-    dev: true
 
   /ast-types-flow@0.0.7:
     resolution: {integrity: sha512-eBvWn1lvIApYMhzQMsu9ciLfkBY499mFZlNqG+/9WR7PVlroQw0vG30cOQQbaKz3sCEc44TAOu2ykzqXSNnwag==}
@@ -5930,7 +5918,6 @@ packages:
     engines: {node: '>=4'}
     dependencies:
       tslib: 2.5.3
-    dev: true
 
   /astral-regex@2.0.0:
     resolution: {integrity: sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==}
@@ -5984,7 +5971,6 @@ packages:
   /available-typed-arrays@1.0.5:
     resolution: {integrity: sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw==}
     engines: {node: '>= 0.4'}
-    dev: true
 
   /await-to-js@2.1.1:
     resolution: {integrity: sha512-CHBC6gQGCIzjZ09tJ+XmpQoZOn4GdWePB4qUweCaKNJ0D3f115YdhmYVTZ4rMVpiJ3cFzZcTYK1VMYEICV4YXw==}
@@ -6431,7 +6417,6 @@ packages:
       ansi-styles: 3.2.1
       escape-string-regexp: 1.0.5
       supports-color: 5.5.0
-    dev: true
 
   /chalk@3.0.0:
     resolution: {integrity: sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==}
@@ -6651,7 +6636,6 @@ packages:
     resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==}
     dependencies:
       color-name: 1.1.3
-    dev: true
 
   /color-convert@2.0.1:
     resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
@@ -6661,7 +6645,6 @@ packages:
 
   /color-name@1.1.3:
     resolution: {integrity: sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==}
-    dev: true
 
   /color-name@1.1.4:
     resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
@@ -7344,7 +7327,6 @@ packages:
 
   /es6-object-assign@1.1.0:
     resolution: {integrity: sha512-MEl9uirslVwqQU369iHNWZXsI8yaZYGg/D65aOgZkeyFJwHYSxilf7rQzXKI7DdDuBPrBXbfk3sl9hJhmd5AUw==}
-    dev: true
 
   /esbuild-plugin-alias@0.2.1:
     resolution: {integrity: sha512-jyfL/pwPqaFXyKnj8lP8iLk6Z0m099uXR45aSN8Av1XD4vhvQutxxPzgA2bTcAwQpa1zCXDcWOlhFgyP3GKqhQ==}
@@ -7472,7 +7454,6 @@ packages:
   /escape-string-regexp@1.0.5:
     resolution: {integrity: sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==}
     engines: {node: '>=0.8.0'}
-    dev: true
 
   /escape-string-regexp@2.0.0:
     resolution: {integrity: sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w==}
@@ -7891,7 +7872,6 @@ packages:
     resolution: {integrity: sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==}
     engines: {node: '>=4'}
     hasBin: true
-    dev: true
 
   /esquery@1.5.0:
     resolution: {integrity: sha512-YQLXUplAwJgCydQ78IMJywZCceoqk1oH01OERdSAJc/7U2AylwjhSCLDEtqwg811idIS/9fIU5GjG73IgjKMVg==}
@@ -8275,7 +8255,6 @@ packages:
     resolution: {integrity: sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==}
     dependencies:
       is-callable: 1.2.7
-    dev: true
 
   /foreground-child@2.0.0:
     resolution: {integrity: sha512-dCIq9FpEcyQyXKCkyzmlPTFNgrCzPudOe+mhvJU5zAtlBnGVy2yKxtfsxK2tQBThwq225jcvBjpw1Gr40uzZCA==}
@@ -8560,7 +8539,6 @@ packages:
   /globals@11.12.0:
     resolution: {integrity: sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==}
     engines: {node: '>=4'}
-    dev: true
 
   /globals@13.20.0:
     resolution: {integrity: sha512-Qg5QtVkCy/kv3FUSlu4ukeZDVf9ee0iXLAUYX13gbR17bnejFTzr4iS9bY7kwCf1NztRNm1t91fjOiyx4CSwPQ==}
@@ -8618,7 +8596,6 @@ packages:
     resolution: {integrity: sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==}
     dependencies:
       get-intrinsic: 1.2.1
-    dev: true
 
   /graceful-fs@4.2.11:
     resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
@@ -8730,7 +8707,6 @@ packages:
   /has-flag@3.0.0:
     resolution: {integrity: sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==}
     engines: {node: '>=4'}
-    dev: true
 
   /has-flag@4.0.0:
     resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==}
@@ -9068,7 +9044,6 @@ packages:
   /is-callable@1.2.7:
     resolution: {integrity: sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==}
     engines: {node: '>= 0.4'}
-    dev: true
 
   /is-core-module@2.12.1:
     resolution: {integrity: sha512-Q4ZuBAe2FUsKtyQJoQHlvP8OvBERxO3jEmy1I7hcRXcJBGGHFh/aJBswbXuS9sgrDH2QUO8ilkwNPHvHMd8clg==}
@@ -9119,7 +9094,6 @@ packages:
     engines: {node: '>= 0.4'}
     dependencies:
       has-tostringtag: 1.0.0
-    dev: true
 
   /is-glob@4.0.3:
     resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
@@ -9154,7 +9128,6 @@ packages:
     dependencies:
       call-bind: 1.0.2
       define-properties: 1.2.0
-    dev: true
 
   /is-negative-zero@2.0.2:
     resolution: {integrity: sha512-dqJvarLawXsFbNDeJW7zAz8ItJ9cd28YufuuFzh0G8pNHjJMnY08Dv7sYX2uF5UpQOwieAeOExEYAWWfu7ZZUA==}
@@ -9252,7 +9225,6 @@ packages:
       for-each: 0.3.3
       gopd: 1.0.1
       has-tostringtag: 1.0.0
-    dev: true
 
   /is-unc-path@1.0.0:
     resolution: {integrity: sha512-mrGpVd0fs7WWLfVsStvgF6iEJnbjDFZh9/emhRDcGWTduTfNHd9CHeUwH3gYIjdbwo4On6hunkztwOaAw0yllQ==}
@@ -9865,7 +9837,6 @@ packages:
     resolution: {integrity: sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==}
     engines: {node: '>=4'}
     hasBin: true
-    dev: true
 
   /json-parse-better-errors@1.0.2:
     resolution: {integrity: sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==}
@@ -11589,7 +11560,6 @@ packages:
       esprima: 4.0.1
       source-map: 0.6.1
       tslib: 2.5.3
-    dev: true
 
   /reduce-flatten@2.0.0:
     resolution: {integrity: sha512-EJ4UNY/U1t2P/2k6oqotuX2Cc3T6nxJwsM0N0asT7dhrtH1ltUxDn4NalSYmPE2rCkVpcf/X6R0wDwcFpzhd4w==}
@@ -12568,7 +12538,6 @@ packages:
     engines: {node: '>=4'}
     dependencies:
       has-flag: 3.0.0
-    dev: true
 
   /supports-color@6.1.0:
     resolution: {integrity: sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==}
@@ -12833,7 +12802,6 @@ packages:
 
   /tslib@2.5.3:
     resolution: {integrity: sha512-mSxlJJwl3BMEQCUNnxXBU9jP4JBktcEGhURcPR6VQVlnP0FdDEsIaz0C35dXNGLyRfrATNofF0F5p2KPxQgB+w==}
-    dev: true
 
   /tsup@6.6.3(typescript@4.9.5):
     resolution: {integrity: sha512-OLx/jFllYlVeZQ7sCHBuRVEQBBa1tFbouoc/gbYakyipjVQdWy/iQOvmExUA/ewap9iQ7tbJf9pW0PgcEFfJcQ==}
@@ -13260,7 +13228,6 @@ packages:
       is-generator-function: 1.0.10
       is-typed-array: 1.1.10
       which-typed-array: 1.1.9
-    dev: true
 
   /utils-merge@1.0.1:
     resolution: {integrity: sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==}
@@ -13520,7 +13487,6 @@ packages:
       gopd: 1.0.1
       has-tostringtag: 1.0.0
       is-typed-array: 1.1.10
-    dev: true
 
   /which@1.3.1:
     resolution: {integrity: sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==}
diff --git a/scripts/prepublish-checks.mjs b/scripts/prepublish-checks.mjs
index 5860052a..9546d906 100644
--- a/scripts/prepublish-checks.mjs
+++ b/scripts/prepublish-checks.mjs
@@ -55,4 +55,4 @@ if ((await $`cat README.md | grep -E ${readmeTestStrings}`.exitCode) == 0) {
   exitCode = 1;
 }
 
-process.exit(exitCode);
\ No newline at end of file
+process.exit(exitCode);
diff --git a/src/Panel.tsx b/src/Panel.tsx
index c125bf6a..df5e5de9 100644
--- a/src/Panel.tsx
+++ b/src/Panel.tsx
@@ -3,16 +3,22 @@ import React, { useCallback } from "react";
 
 import { ADDON_ID, PANEL_ID, START_BUILD } from "./constants";
 import { Authentication } from "./screens/Authentication/Authentication";
+import { LinkedProject } from "./screens/LinkProject/LinkedProject";
+import { LinkProject } from "./screens/LinkProject/LinkProject";
 import { VisualTests } from "./screens/VisualTests/VisualTests";
 import { AddonState } from "./types";
 import { client, Provider, useAccessToken } from "./utils/graphQLClient";
+import { useProjectId } from "./utils/useProjectId";
 
 interface PanelProps {
   active: boolean;
 }
 
+const { GIT_BRANCH, GIT_SLUG } = process.env;
+
 export const Panel = ({ active }: PanelProps) => {
   const [accessToken, setAccessToken] = useAccessToken();
+
   const [state, setAddonState] = useAddonState<AddonState>(ADDON_ID, { isOutdated: true });
   const { storyId } = useStorybookState();
 
@@ -33,6 +39,8 @@ export const Panel = ({ active }: PanelProps) => {
     emit(START_BUILD);
   }, [emit, state, setAddonState]);
 
+  const [projectId, updateProject, projectIdChanged, clearProjectIdChanged] = useProjectId();
+
   // Render a hidden element when the addon panel is not active.
   // Storybook's AddonPanel component does the same but it's not styleable so we don't use it.
   if (!active) return <div hidden key={PANEL_ID} />;
@@ -40,9 +48,26 @@ export const Panel = ({ active }: PanelProps) => {
   // Render the Authentication flow if the user is not signed in.
   if (!accessToken) return <Authentication key={PANEL_ID} setAccessToken={setAccessToken} />;
 
+  if (!projectId)
+    return (
+      <Provider key={PANEL_ID} value={client}>
+        <LinkProject onUpdateProject={updateProject} />
+      </Provider>
+    );
+
+  if (projectIdChanged) {
+    return (
+      <Provider key={PANEL_ID} value={client}>
+        <LinkedProject projectId={projectId} goToNext={clearProjectIdChanged} />
+      </Provider>
+    );
+  }
   return (
     <Provider key={PANEL_ID} value={client}>
       <VisualTests
+        projectId={projectId}
+        branch={GIT_BRANCH}
+        slug={GIT_SLUG}
         isOutdated={state.isOutdated}
         isRunning={state.isRunning}
         lastDevBuildId={state.lastBuildId}
diff --git a/src/constants.ts b/src/constants.ts
index 175852d0..a6e7ced1 100644
--- a/src/constants.ts
+++ b/src/constants.ts
@@ -8,3 +8,11 @@ export const DEV_BUILD_ID_KEY = `${ADDON_ID}/dev-build-id`;
 
 export const START_BUILD = `${ADDON_ID}/startBuild`;
 export const BUILD_STARTED = `${ADDON_ID}/buildStarted`;
+
+export const UPDATE_PROJECT = `${ADDON_ID}/updateProject`;
+export type UpdateProjectPayload = {
+  projectId: string;
+  projectToken: string;
+};
+
+export const PROJECT_UPDATED = `${ADDON_ID}/projectUpdated`;
diff --git a/src/gql/gql.ts b/src/gql/gql.ts
index dadf3944..692dd02b 100644
--- a/src/gql/gql.ts
+++ b/src/gql/gql.ts
@@ -13,8 +13,9 @@ import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/
  * Therefore it is highly recommended to use the babel or swc plugin for production.
  */
 const documents = {
+    "\n  query SelectProjectsQuery {\n    viewer {\n      accounts {\n        id\n        name\n        avatarUrl\n        projects {\n          id\n          name\n          webUrl\n          projectToken\n          lastBuild {\n            branch\n            number\n          }\n        }\n      }\n    }\n  }\n": types.SelectProjectsQueryDocument,
     "\n  query ProjectQuery($projectId: ID!) {\n    project(id: $projectId) {\n      id\n      name\n      webUrl\n      lastBuild {\n        branch\n        number\n      }\n    }\n  }\n": types.ProjectQueryDocument,
-    "\n  query Build($hasBuildId: Boolean!, $buildId: ID!, $projectId: ID!, $branch: String!) {\n    build(id: $buildId) @include(if: $hasBuildId) {\n      ...BuildFields\n    }\n    project(id: $projectId) @skip(if: $hasBuildId) {\n      lastBuild(branches: [$branch]) {\n        ...BuildFields\n      }\n    }\n  }\n": types.BuildDocument,
+    "\n  query Build($hasBuildId: Boolean!, $buildId: ID!, $projectId: ID!, $branch: String!) {\n    build(id: $buildId) @include(if: $hasBuildId) {\n      ...BuildFields\n    }\n    project(id: $projectId) @skip(if: $hasBuildId) {\n      name\n      lastBuild(branches: [$branch]) {\n        ...BuildFields\n      }\n    }\n  }\n": types.BuildDocument,
     "\n  fragment BuildFields on Build {\n    __typename\n    id\n    number\n    branch\n    commit\n    status\n    browsers {\n      id\n      key\n      name\n    }\n    ... on StartedBuild {\n      changeCount: testCount(results: [ADDED, CHANGED, FIXED])\n      startedAt\n      tests {\n        nodes {\n          ...TestFields\n        }\n      }\n    }\n    ... on CompletedBuild {\n      result\n      changeCount: testCount(results: [ADDED, CHANGED, FIXED])\n      startedAt\n      tests {\n        nodes {\n          ...TestFields\n        }\n      }\n    }\n  }\n": types.BuildFieldsFragmentDoc,
     "\n  fragment TestFields on Test {\n    id\n    status\n    result\n    webUrl\n    comparisons {\n      id\n      result\n      browser {\n        id\n        key\n        name\n        version\n      }\n      captureDiff {\n        diffImage {\n          imageUrl\n        }\n      }\n      headCapture {\n        captureImage {\n          imageUrl\n        }\n      }\n      viewport {\n        id\n        name\n        width\n        isDefault\n      }\n    }\n    parameters {\n      viewport {\n        id\n        name\n        width\n        isDefault\n      }\n    }\n    story {\n      storyId\n    }\n  }\n": types.TestFieldsFragmentDoc,
 };
@@ -33,6 +34,10 @@ const documents = {
  */
 export function graphql(source: string): unknown;
 
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function graphql(source: "\n  query SelectProjectsQuery {\n    viewer {\n      accounts {\n        id\n        name\n        avatarUrl\n        projects {\n          id\n          name\n          webUrl\n          projectToken\n          lastBuild {\n            branch\n            number\n          }\n        }\n      }\n    }\n  }\n"): (typeof documents)["\n  query SelectProjectsQuery {\n    viewer {\n      accounts {\n        id\n        name\n        avatarUrl\n        projects {\n          id\n          name\n          webUrl\n          projectToken\n          lastBuild {\n            branch\n            number\n          }\n        }\n      }\n    }\n  }\n"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
@@ -40,7 +45,7 @@ export function graphql(source: "\n  query ProjectQuery($projectId: ID!) {\n
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export function graphql(source: "\n  query Build($hasBuildId: Boolean!, $buildId: ID!, $projectId: ID!, $branch: String!) {\n    build(id: $buildId) @include(if: $hasBuildId) {\n      ...BuildFields\n    }\n    project(id: $projectId) @skip(if: $hasBuildId) {\n      lastBuild(branches: [$branch]) {\n        ...BuildFields\n      }\n    }\n  }\n"): (typeof documents)["\n  query Build($hasBuildId: Boolean!, $buildId: ID!, $projectId: ID!, $branch: String!) {\n    build(id: $buildId) @include(if: $hasBuildId) {\n      ...BuildFields\n    }\n    project(id: $projectId) @skip(if: $hasBuildId) {\n      lastBuild(branches: [$branch]) {\n        ...BuildFields\n      }\n    }\n  }\n"];
+export function graphql(source: "\n  query Build($hasBuildId: Boolean!, $buildId: ID!, $projectId: ID!, $branch: String!) {\n    build(id: $buildId) @include(if: $hasBuildId) {\n      ...BuildFields\n    }\n    project(id: $projectId) @skip(if: $hasBuildId) {\n      name\n      lastBuild(branches: [$branch]) {\n        ...BuildFields\n      }\n    }\n  }\n"): (typeof documents)["\n  query Build($hasBuildId: Boolean!, $buildId: ID!, $projectId: ID!, $branch: String!) {\n    build(id: $buildId) @include(if: $hasBuildId) {\n      ...BuildFields\n    }\n    project(id: $projectId) @skip(if: $hasBuildId) {\n      name\n      lastBuild(branches: [$branch]) {\n        ...BuildFields\n      }\n    }\n  }\n"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
diff --git a/src/gql/graphql.ts b/src/gql/graphql.ts
index cdc78706..5c86b367 100644
--- a/src/gql/graphql.ts
+++ b/src/gql/graphql.ts
@@ -158,6 +158,12 @@ export enum BuildStatus {
   Published = 'PUBLISHED'
 }
 
+export type BuildSupersededError = UserError & {
+  __typename?: 'BuildSupersededError';
+  build: Build;
+  message: Scalars['String']['output'];
+};
+
 export type Capture = {
   __typename?: 'Capture';
   /** Metadata about the error if the capture failed. */
@@ -550,6 +556,7 @@ export type Mutation = {
   bulkRemoveFigmaMetadata: Array<FigmaMetadata>;
   createFigmaMetadata?: Maybe<FigmaMetadata>;
   removeFigmaMetadata?: Maybe<FigmaMetadata>;
+  reviewTest?: Maybe<ReviewTestPayload>;
 };
 
 
@@ -574,6 +581,11 @@ export type MutationRemoveFigmaMetadataArgs = {
   id: Scalars['ID']['input'];
 };
 
+
+export type MutationReviewTestArgs = {
+  input: ReviewTestInput;
+};
+
 export type Node = {
   /** GraphQL node identifier */
   id: Scalars['ID']['output'];
@@ -829,6 +841,40 @@ export type QueryStorybookArgs = {
   url: Scalars['URL']['input'];
 };
 
+export enum ReviewTestBatch {
+  Build = 'BUILD',
+  Component = 'COMPONENT',
+  Spec = 'SPEC'
+}
+
+export type ReviewTestError = BuildSupersededError | TestNotFoundError | TestUnreviewableError;
+
+export type ReviewTestInput = {
+  /** Apply review to all tests for the same story, component, or the whole build. */
+  batch?: InputMaybe<ReviewTestBatch>;
+  /** The new status of the test. */
+  status: ReviewTestInputStatus;
+  /** The ID of the test to review. */
+  testId: Scalars['ID']['input'];
+};
+
+export enum ReviewTestInputStatus {
+  /** Accept the changes on the test. */
+  Accepted = 'ACCEPTED',
+  /** Deny the changes on the test. */
+  Denied = 'DENIED',
+  /** Reset the test back to unreviewed. */
+  Pending = 'PENDING'
+}
+
+export type ReviewTestPayload = {
+  __typename?: 'ReviewTestPayload';
+  /** The test(s) that were updated, if succesful. */
+  updatedTests?: Maybe<Array<Test>>;
+  /** User errors preventing the test from being reviewed. Empty if successful. */
+  userErrors: Array<ReviewTestError>;
+};
+
 /** A build that has started but not completed testing. */
 export type StartedBuild = Build & Node & Temporal & {
   __typename?: 'StartedBuild';
@@ -1068,6 +1114,11 @@ export enum TestKind {
   Visual = 'VISUAL'
 }
 
+export type TestNotFoundError = UserError & {
+  __typename?: 'TestNotFoundError';
+  message: Scalars['String']['output'];
+};
+
 export type TestParameters = {
   __typename?: 'TestParameters';
   /** Delay in milliseconds before taking the snapshot. */
@@ -1130,6 +1181,12 @@ export enum TestStatus {
   Pending = 'PENDING'
 }
 
+export type TestUnreviewableError = UserError & {
+  __typename?: 'TestUnreviewableError';
+  message: Scalars['String']['output'];
+  test: Test;
+};
+
 export type User = Node & {
   __typename?: 'User';
   accounts: Array<Account>;
@@ -1144,6 +1201,11 @@ export type User = Node & {
   username: Scalars['String']['output'];
 };
 
+export type UserError = {
+  /** A message describing the error. */
+  message: Scalars['String']['output'];
+};
+
 export type ViewportInfo = {
   __typename?: 'ViewportInfo';
   /** Identifier for this viewport. */
@@ -1156,6 +1218,11 @@ export type ViewportInfo = {
   width: Scalars['Int']['output'];
 };
 
+export type SelectProjectsQueryQueryVariables = Exact<{ [key: string]: never; }>;
+
+
+export type SelectProjectsQueryQuery = { __typename?: 'Query', viewer?: { __typename?: 'User', accounts: Array<{ __typename?: 'Account', id: string, name: string, avatarUrl?: string | null, projects?: Array<{ __typename?: 'Project', id: string, name: string, webUrl: any, projectToken: string, lastBuild?: { __typename?: 'AnnouncedBuild', branch: string, number: number } | { __typename?: 'CompletedBuild', branch: string, number: number } | { __typename?: 'PreparedBuild', branch: string, number: number } | { __typename?: 'PublishedBuild', branch: string, number: number } | { __typename?: 'StartedBuild', branch: string, number: number } | null } | null> | null }> } | null };
+
 export type ProjectQueryQueryVariables = Exact<{
   projectId: Scalars['ID']['input'];
 }>;
@@ -1186,7 +1253,7 @@ export type BuildQuery = { __typename?: 'Query', build?: (
   ) | (
     { __typename?: 'StartedBuild' }
     & { ' $fragmentRefs'?: { 'BuildFields_StartedBuild_Fragment': BuildFields_StartedBuild_Fragment } }
-  ) | null, project?: { __typename?: 'Project', lastBuild?: (
+  ) | null, project?: { __typename?: 'Project', name: string, lastBuild?: (
       { __typename?: 'AnnouncedBuild' }
       & { ' $fragmentRefs'?: { 'BuildFields_AnnouncedBuild_Fragment': BuildFields_AnnouncedBuild_Fragment } }
     ) | (
@@ -1225,5 +1292,6 @@ export type TestFieldsFragment = { __typename?: 'Test', id: string, status: Test
 
 export const TestFieldsFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"TestFields"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Test"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"status"}},{"kind":"Field","name":{"kind":"Name","value":"result"}},{"kind":"Field","name":{"kind":"Name","value":"webUrl"}},{"kind":"Field","name":{"kind":"Name","value":"comparisons"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"result"}},{"kind":"Field","name":{"kind":"Name","value":"browser"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"key"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"version"}}]}},{"kind":"Field","name":{"kind":"Name","value":"captureDiff"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"diffImage"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"imageUrl"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"headCapture"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"captureImage"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"imageUrl"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"viewport"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"width"}},{"kind":"Field","name":{"kind":"Name","value":"isDefault"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"parameters"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"viewport"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"width"}},{"kind":"Field","name":{"kind":"Name","value":"isDefault"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"story"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"storyId"}}]}}]}}]} as unknown as DocumentNode<TestFieldsFragment, unknown>;
 export const BuildFieldsFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"BuildFields"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Build"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"__typename"}},{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"number"}},{"kind":"Field","name":{"kind":"Name","value":"branch"}},{"kind":"Field","name":{"kind":"Name","value":"commit"}},{"kind":"Field","name":{"kind":"Name","value":"status"}},{"kind":"Field","name":{"kind":"Name","value":"browsers"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"key"}},{"kind":"Field","name":{"kind":"Name","value":"name"}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"StartedBuild"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","alias":{"kind":"Name","value":"changeCount"},"name":{"kind":"Name","value":"testCount"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"results"},"value":{"kind":"ListValue","values":[{"kind":"EnumValue","value":"ADDED"},{"kind":"EnumValue","value":"CHANGED"},{"kind":"EnumValue","value":"FIXED"}]}}]},{"kind":"Field","name":{"kind":"Name","value":"startedAt"}},{"kind":"Field","name":{"kind":"Name","value":"tests"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"nodes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"TestFields"}}]}}]}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"CompletedBuild"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"result"}},{"kind":"Field","alias":{"kind":"Name","value":"changeCount"},"name":{"kind":"Name","value":"testCount"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"results"},"value":{"kind":"ListValue","values":[{"kind":"EnumValue","value":"ADDED"},{"kind":"EnumValue","value":"CHANGED"},{"kind":"EnumValue","value":"FIXED"}]}}]},{"kind":"Field","name":{"kind":"Name","value":"startedAt"}},{"kind":"Field","name":{"kind":"Name","value":"tests"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"nodes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"TestFields"}}]}}]}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"TestFields"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Test"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"status"}},{"kind":"Field","name":{"kind":"Name","value":"result"}},{"kind":"Field","name":{"kind":"Name","value":"webUrl"}},{"kind":"Field","name":{"kind":"Name","value":"comparisons"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"result"}},{"kind":"Field","name":{"kind":"Name","value":"browser"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"key"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"version"}}]}},{"kind":"Field","name":{"kind":"Name","value":"captureDiff"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"diffImage"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"imageUrl"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"headCapture"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"captureImage"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"imageUrl"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"viewport"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"width"}},{"kind":"Field","name":{"kind":"Name","value":"isDefault"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"parameters"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"viewport"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"width"}},{"kind":"Field","name":{"kind":"Name","value":"isDefault"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"story"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"storyId"}}]}}]}}]} as unknown as DocumentNode<BuildFieldsFragment, unknown>;
+export const SelectProjectsQueryDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"SelectProjectsQuery"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"viewer"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"accounts"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"avatarUrl"}},{"kind":"Field","name":{"kind":"Name","value":"projects"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"webUrl"}},{"kind":"Field","name":{"kind":"Name","value":"projectToken"}},{"kind":"Field","name":{"kind":"Name","value":"lastBuild"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"branch"}},{"kind":"Field","name":{"kind":"Name","value":"number"}}]}}]}}]}}]}}]}}]} as unknown as DocumentNode<SelectProjectsQueryQuery, SelectProjectsQueryQueryVariables>;
 export const ProjectQueryDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"ProjectQuery"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"projectId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"ID"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"project"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"projectId"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"webUrl"}},{"kind":"Field","name":{"kind":"Name","value":"lastBuild"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"branch"}},{"kind":"Field","name":{"kind":"Name","value":"number"}}]}}]}}]}}]} as unknown as DocumentNode<ProjectQueryQuery, ProjectQueryQueryVariables>;
-export const BuildDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"Build"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"hasBuildId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"Boolean"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"buildId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"ID"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"projectId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"ID"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"branch"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"build"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"buildId"}}}],"directives":[{"kind":"Directive","name":{"kind":"Name","value":"include"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"if"},"value":{"kind":"Variable","name":{"kind":"Name","value":"hasBuildId"}}}]}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"BuildFields"}}]}},{"kind":"Field","name":{"kind":"Name","value":"project"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"projectId"}}}],"directives":[{"kind":"Directive","name":{"kind":"Name","value":"skip"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"if"},"value":{"kind":"Variable","name":{"kind":"Name","value":"hasBuildId"}}}]}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"lastBuild"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"branches"},"value":{"kind":"ListValue","values":[{"kind":"Variable","name":{"kind":"Name","value":"branch"}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"BuildFields"}}]}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"TestFields"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Test"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"status"}},{"kind":"Field","name":{"kind":"Name","value":"result"}},{"kind":"Field","name":{"kind":"Name","value":"webUrl"}},{"kind":"Field","name":{"kind":"Name","value":"comparisons"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"result"}},{"kind":"Field","name":{"kind":"Name","value":"browser"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"key"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"version"}}]}},{"kind":"Field","name":{"kind":"Name","value":"captureDiff"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"diffImage"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"imageUrl"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"headCapture"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"captureImage"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"imageUrl"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"viewport"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"width"}},{"kind":"Field","name":{"kind":"Name","value":"isDefault"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"parameters"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"viewport"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"width"}},{"kind":"Field","name":{"kind":"Name","value":"isDefault"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"story"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"storyId"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"BuildFields"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Build"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"__typename"}},{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"number"}},{"kind":"Field","name":{"kind":"Name","value":"branch"}},{"kind":"Field","name":{"kind":"Name","value":"commit"}},{"kind":"Field","name":{"kind":"Name","value":"status"}},{"kind":"Field","name":{"kind":"Name","value":"browsers"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"key"}},{"kind":"Field","name":{"kind":"Name","value":"name"}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"StartedBuild"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","alias":{"kind":"Name","value":"changeCount"},"name":{"kind":"Name","value":"testCount"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"results"},"value":{"kind":"ListValue","values":[{"kind":"EnumValue","value":"ADDED"},{"kind":"EnumValue","value":"CHANGED"},{"kind":"EnumValue","value":"FIXED"}]}}]},{"kind":"Field","name":{"kind":"Name","value":"startedAt"}},{"kind":"Field","name":{"kind":"Name","value":"tests"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"nodes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"TestFields"}}]}}]}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"CompletedBuild"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"result"}},{"kind":"Field","alias":{"kind":"Name","value":"changeCount"},"name":{"kind":"Name","value":"testCount"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"results"},"value":{"kind":"ListValue","values":[{"kind":"EnumValue","value":"ADDED"},{"kind":"EnumValue","value":"CHANGED"},{"kind":"EnumValue","value":"FIXED"}]}}]},{"kind":"Field","name":{"kind":"Name","value":"startedAt"}},{"kind":"Field","name":{"kind":"Name","value":"tests"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"nodes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"TestFields"}}]}}]}}]}}]}}]} as unknown as DocumentNode<BuildQuery, BuildQueryVariables>;
\ No newline at end of file
+export const BuildDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"Build"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"hasBuildId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"Boolean"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"buildId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"ID"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"projectId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"ID"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"branch"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"build"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"buildId"}}}],"directives":[{"kind":"Directive","name":{"kind":"Name","value":"include"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"if"},"value":{"kind":"Variable","name":{"kind":"Name","value":"hasBuildId"}}}]}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"BuildFields"}}]}},{"kind":"Field","name":{"kind":"Name","value":"project"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"projectId"}}}],"directives":[{"kind":"Directive","name":{"kind":"Name","value":"skip"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"if"},"value":{"kind":"Variable","name":{"kind":"Name","value":"hasBuildId"}}}]}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"lastBuild"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"branches"},"value":{"kind":"ListValue","values":[{"kind":"Variable","name":{"kind":"Name","value":"branch"}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"BuildFields"}}]}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"TestFields"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Test"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"status"}},{"kind":"Field","name":{"kind":"Name","value":"result"}},{"kind":"Field","name":{"kind":"Name","value":"webUrl"}},{"kind":"Field","name":{"kind":"Name","value":"comparisons"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"result"}},{"kind":"Field","name":{"kind":"Name","value":"browser"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"key"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"version"}}]}},{"kind":"Field","name":{"kind":"Name","value":"captureDiff"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"diffImage"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"imageUrl"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"headCapture"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"captureImage"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"imageUrl"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"viewport"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"width"}},{"kind":"Field","name":{"kind":"Name","value":"isDefault"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"parameters"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"viewport"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"width"}},{"kind":"Field","name":{"kind":"Name","value":"isDefault"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"story"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"storyId"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"BuildFields"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Build"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"__typename"}},{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"number"}},{"kind":"Field","name":{"kind":"Name","value":"branch"}},{"kind":"Field","name":{"kind":"Name","value":"commit"}},{"kind":"Field","name":{"kind":"Name","value":"status"}},{"kind":"Field","name":{"kind":"Name","value":"browsers"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"key"}},{"kind":"Field","name":{"kind":"Name","value":"name"}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"StartedBuild"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","alias":{"kind":"Name","value":"changeCount"},"name":{"kind":"Name","value":"testCount"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"results"},"value":{"kind":"ListValue","values":[{"kind":"EnumValue","value":"ADDED"},{"kind":"EnumValue","value":"CHANGED"},{"kind":"EnumValue","value":"FIXED"}]}}]},{"kind":"Field","name":{"kind":"Name","value":"startedAt"}},{"kind":"Field","name":{"kind":"Name","value":"tests"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"nodes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"TestFields"}}]}}]}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"CompletedBuild"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"result"}},{"kind":"Field","alias":{"kind":"Name","value":"changeCount"},"name":{"kind":"Name","value":"testCount"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"results"},"value":{"kind":"ListValue","values":[{"kind":"EnumValue","value":"ADDED"},{"kind":"EnumValue","value":"CHANGED"},{"kind":"EnumValue","value":"FIXED"}]}}]},{"kind":"Field","name":{"kind":"Name","value":"startedAt"}},{"kind":"Field","name":{"kind":"Name","value":"tests"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"nodes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"TestFields"}}]}}]}}]}}]}}]} as unknown as DocumentNode<BuildQuery, BuildQueryVariables>;
\ No newline at end of file
diff --git a/src/index.ts b/src/index.ts
index 52c8dae4..93f60338 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,8 +1,17 @@
 import type { Channel } from "@storybook/channels";
+import { readConfig, writeConfig } from "@storybook/csf-tools";
+import { exec } from "child_process";
 // eslint-disable-next-line import/no-unresolved
 import { run } from "chromatic/node";
+import { promisify } from "util";
 
-import { BUILD_STARTED, START_BUILD } from "./constants";
+import { BUILD_STARTED, START_BUILD, UPDATE_PROJECT, UpdateProjectPayload } from "./constants";
+import { findConfig } from "./utils/storybook.config.utils";
+
+const {
+  CHROMATIC_BASE_URL = "https://www.chromatic.com",
+  CHROMATIC_ADDON_NAME = "@chromaui/addon-visual-tests",
+} = process.env;
 
 /**
  * to load the built addon in this test Storybook
@@ -11,7 +20,11 @@ function managerEntries(entry: string[] = []) {
   return [...entry, require.resolve("./manager.mjs")];
 }
 
-async function serverChannel(channel: Channel, { projectToken }: { projectToken: string }) {
+async function serverChannel(
+  channel: Channel,
+  { projectToken: initialProjectToken }: { projectToken: string }
+) {
+  let projectToken = initialProjectToken;
   channel.on(START_BUILD, async () => {
     let sent = false;
     await run({
@@ -33,10 +46,69 @@ async function serverChannel(channel: Channel, { projectToken }: { projectToken:
     });
   });
 
+  channel.on(
+    UPDATE_PROJECT,
+    async ({ projectId, projectToken: updatedProjectToken }: UpdateProjectPayload) => {
+      projectToken = updatedProjectToken;
+
+      const mainPath = await findConfig("main");
+      const MainConfig = await readConfig(mainPath);
+
+      const addonsConfig = MainConfig.getFieldValue(["addons"]);
+      const updatedAddonsConfig = addonsConfig.map(
+        (addonConfig: string | { name: string; options?: Record<string, string> }) => {
+          const fullConfig = typeof addonConfig === "string" ? { name: addonConfig } : addonConfig;
+          if (fullConfig.name === CHROMATIC_ADDON_NAME) {
+            return {
+              ...fullConfig,
+              options: { projectId, projectToken, ...fullConfig.options },
+            };
+          }
+          return addonConfig;
+        }
+      );
+
+      MainConfig.setFieldValue(["addons"], updatedAddonsConfig);
+      await writeConfig(MainConfig);
+    }
+  );
+
   return channel;
 }
 
-module.exports = {
+// TODO: use the chromatic CLI to get this info?
+const execPromise = promisify(exec);
+async function getGitInfo() {
+  const branch = (await execPromise("git rev-parse --abbrev-ref HEAD")).stdout.trim();
+  const commit = (await execPromise("git log -n 1 HEAD --format='%H'")).stdout.trim();
+  const origin = (await execPromise("git config --get remote.origin.url")).stdout.trim();
+
+  const [, slug] = origin.toLowerCase().match(/([^/:]+\/[^/]+?)(\.git)?$/) || [];
+  const [ownerName, repoName, ...rest] = slug ? slug.split("/") : [];
+  const isValidSlug = !!ownerName && !!repoName && !rest.length;
+
+  return { branch, commit, slug: isValidSlug ? slug : "" };
+}
+
+const config = {
   managerEntries,
   experimental_serverChannel: serverChannel,
+  env: async (
+    env: Record<string, string>,
+    { projectId, configType }: { projectId: string; configType: "development" | "production" }
+  ) => {
+    if (configType === "production") return env;
+
+    const { branch, commit, slug } = await getGitInfo();
+    return {
+      ...env,
+      CHROMATIC_BASE_URL,
+      CHROMATIC_PROJECT_ID: projectId || "",
+      GIT_BRANCH: branch,
+      GIT_COMMIT: commit,
+      GIT_SLUG: slug,
+    };
+  },
 };
+
+export default config;
diff --git a/src/screens/LinkProject/LinkProject.stories.tsx b/src/screens/LinkProject/LinkProject.stories.tsx
index 679b9077..a2358aca 100644
--- a/src/screens/LinkProject/LinkProject.stories.tsx
+++ b/src/screens/LinkProject/LinkProject.stories.tsx
@@ -1,29 +1,76 @@
+import { action } from "@storybook/addon-actions";
 import type { Meta, StoryObj } from "@storybook/react";
 import { graphql } from "msw";
+import React from "react";
 
+import { Build, ProjectQueryQuery, SelectProjectsQueryQuery } from "../../gql/graphql";
 import { storyWrapper } from "../../utils/graphQLClient";
 import { withFigmaDesign } from "../../utils/withFigmaDesign";
+import { LinkedProject } from "./LinkedProject";
 import { LinkProject } from "./LinkProject";
 
 const meta = {
   component: LinkProject,
   decorators: [storyWrapper],
+  args: {
+    onUpdateProject: action("updateProject"),
+  },
   parameters: {
     msw: {
       handlers: [
+        graphql.query("SelectProjectsQuery", (req, res, ctx) =>
+          res(
+            ctx.data({
+              viewer: {
+                accounts: [
+                  {
+                    id: "account:123",
+                    name: "yummly",
+                    projects: [
+                      {
+                        id: "123",
+                        name: "optics",
+                        webUrl: "https://www.chromatic.com/builds?appId=123",
+                        projectToken: "randomcode",
+                      },
+                      {
+                        id: "456",
+                        name: "design-system",
+                        webUrl: "https://www.chromatic.com/builds?appId=456",
+                        projectToken: "randomcode",
+                      },
+                    ],
+                  },
+                  {
+                    id: "account:456",
+                    name: "acme corp",
+                    projects: [
+                      {
+                        id: "789",
+                        name: "acme",
+                        webUrl: "https://www.chromatic.com/builds?appId=789",
+                        projectToken: "randomcode",
+                      },
+                    ],
+                  },
+                ],
+              },
+            } satisfies SelectProjectsQueryQuery)
+          )
+        ),
         graphql.query("ProjectQuery", (req, res, ctx) =>
           res(
             ctx.data({
               project: {
-                id: "123",
+                id: "789",
                 name: "acme",
-                webUrl: "https://www.chromatic.com/builds?appId=123",
+                webUrl: "https://www.chromatic.com/builds?appId=789",
                 lastBuild: {
                   branch: "main",
                   number: 123,
                 },
               },
-            })
+            } satisfies ProjectQueryQuery)
           )
         ),
       ],
@@ -34,20 +81,17 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Default: Story = {
+export const SelectProject: Story = {
   parameters: withFigmaDesign(
     "https://www.figma.com/file/GFEbCgCVDtbZhngULbw2gP/Visual-testing-in-Storybook?type=design&node-id=304-318196&t=3EAIRe8423CpOQWY-4"
   ),
 };
 
-export const Adding: Story = {
-  parameters: withFigmaDesign(
-    "https://www.figma.com/file/GFEbCgCVDtbZhngULbw2gP/Visual-testing-in-Storybook?type=design&node-id=304-318252&t=3EAIRe8423CpOQWY-4"
-  ),
-};
-
 export const Linked: Story = {
-  parameters: withFigmaDesign(
-    "https://www.figma.com/file/GFEbCgCVDtbZhngULbw2gP/Visual-testing-in-Storybook?type=design&node-id=330-472759&t=3EAIRe8423CpOQWY-4"
-  ),
+  render: () => <LinkedProject projectId="789" goToNext={action("goToNext")} />,
+  parameters: {
+    ...withFigmaDesign(
+      "https://www.figma.com/file/GFEbCgCVDtbZhngULbw2gP/Visual-testing-in-Storybook?type=design&node-id=330-472759&t=3EAIRe8423CpOQWY-4"
+    ),
+  },
 };
diff --git a/src/screens/LinkProject/LinkProject.tsx b/src/screens/LinkProject/LinkProject.tsx
index d9512fbe..df85af38 100644
--- a/src/screens/LinkProject/LinkProject.tsx
+++ b/src/screens/LinkProject/LinkProject.tsx
@@ -1,52 +1,171 @@
-import React from "react";
-import { gql, useQuery } from "urql";
+import { Avatar, Icon, ListItem } from "@storybook/design-system";
+import { styled } from "@storybook/theming";
+import React, { useMemo, useState } from "react";
+import { useQuery } from "urql";
 
 import { Container } from "../../components/Container";
 import { Heading } from "../../components/Heading";
-import { Stack } from "../../components/Stack";
 import { Text } from "../../components/Text";
+import { graphql } from "../../gql";
+import { SelectProjectsQueryQuery } from "../../gql/graphql";
 
-const ProjectQuery = gql`
-  query ProjectQuery($projectId: ID!) {
-    project(id: $projectId) {
-      id
-      name
-      webUrl
-      lastBuild {
-        branch
-        number
+const SelectProjectsQuery = graphql(/* GraphQL */ `
+  query SelectProjectsQuery {
+    viewer {
+      accounts {
+        id
+        name
+        avatarUrl
+        projects {
+          id
+          name
+          webUrl
+          projectToken
+          lastBuild {
+            branch
+            number
+          }
+        }
       }
     }
   }
+`);
+
+export const LinkProject = ({
+  onUpdateProject,
+}: {
+  onUpdateProject: (projectId: string, projectToken: string) => void;
+}) => {
+  const onSelectProjectId = React.useCallback(
+    async (selectedProjectId: string, projectToken: string) => {
+      await onUpdateProject(selectedProjectId, projectToken);
+    },
+    [onUpdateProject]
+  );
+
+  return <SelectProject onSelectProjectId={onSelectProjectId} />;
+};
+
+const ListHeading = styled.div`
+  font-size: ${({ theme }) => theme.typography.size.s1}px;
+  font-weight: ${({ theme }) => theme.typography.weight.bold};
+  color: ${({ theme }) => theme.color.dark};
+  background-color: inherit;
+  padding: 9px 15px;
+  border-bottom: 1px solid ${({ theme }) => theme.color.mediumlight};
+`;
+
+const ListHeadingText = styled.h1`
+  font-size: ${({ theme }) => theme.typography.size.l2} px;
+  font-weight: ${({ theme }) => theme.typography.weight.bold};
+  color: ${({ theme }) => theme.color.mediumdark};
+  background-color: inherit;
+  padding: 9px 15px;
+`;
+
+const Left = styled.div`
+  flex: 1;
+  background-color: white;
+`;
+const Right = styled.div`
+  flex: 1;
+  background-color: ${({ theme }) => theme.color.lighter};
 `;
 
-export const LinkProject = () => {
-  const [{ data, fetching, error }] = useQuery({
-    query: ProjectQuery,
-    variables: { projectId: "5fa3f227c1c504002259feba" },
+const ProjectPicker = styled.div`
+  background: ${({ theme }) => theme.color.lightest};
+  border-radius: 5px;
+  border: 1px solid ${({ theme }) => theme.color.mediumlight};
+  height: 260px;
+  width: 420px;
+  overflow: hidden;
+  text-align: left;
+  position: relative;
+  display: flex;
+`;
+
+const List = styled.div({
+  height: "100%",
+  overflowY: "auto",
+});
+
+const RepositoryOwnerAvatar = styled(Avatar)`
+  margin-right: 10px;
+`;
+
+function SelectProject({
+  onSelectProjectId,
+}: {
+  onSelectProjectId: (projectId: string, projectToken: string) => Promise<void>;
+}) {
+  const [selectedAccount, setSelectedAccount] =
+    useState<SelectProjectsQueryQuery["viewer"]["accounts"][number]>(null);
+  const [{ data, fetching, error }] = useQuery<SelectProjectsQueryQuery>({
+    query: SelectProjectsQuery,
   });
+  const onSelectAccount = React.useCallback(
+    (account: SelectProjectsQueryQuery["viewer"]["accounts"][number]) => {
+      setSelectedAccount(account);
+    },
+    [setSelectedAccount]
+  );
+
+  const [isSelectingProject, setSelectingProject] = useState(false);
+
+  const handleSelectProject = React.useCallback(
+    (project: SelectProjectsQueryQuery["viewer"]["accounts"][number]["projects"][number]) => {
+      setSelectingProject(true);
+      const { id: projectId, projectToken } = project;
+      onSelectProjectId(projectId, projectToken);
+      const timer = setTimeout(() => {
+        setSelectingProject(false);
+      }, 1000);
+      return () => clearTimeout(timer);
+    },
+    [onSelectProjectId, setSelectingProject]
+  );
 
   return (
     <Container>
-      <Stack>
-        {fetching && <p>Loading...</p>}
-        {error && <p>{error.message}</p>}
-        {data?.project && (
-          <div>
-            <Heading>Selected project</Heading>
-            <Text>Baselines will be used with this project.</Text>
-            <b>
-              <a href={data.project.webUrl}>{data.project.name}</a>
-            </b>
-            {data.project.lastBuild && (
-              <p>
-                Last build: {data.project.lastBuild.number} on branch{" "}
-                {data.project.lastBuild.branch}
-              </p>
-            )}
-          </div>
-        )}
-      </Stack>
+      {fetching && <p>Loading...</p>}
+      {error && <p>{error.message}</p>}
+      {!fetching && data.viewer?.accounts && (
+        <>
+          <Heading>Select a Project</Heading>
+          <Text>Baselines will be used with this project.</Text>
+          <ProjectPicker>
+            <Left>
+              <ListHeading>Accounts</ListHeading>
+              <List>
+                {data.viewer.accounts?.map((account) => (
+                  <ListItem
+                    key={account.id}
+                    title={account.name}
+                    left={<RepositoryOwnerAvatar src={account.avatarUrl} size="tiny" />}
+                    onClick={() => onSelectAccount(account)}
+                    active={selectedAccount?.id === account.id}
+                  />
+                ))}
+              </List>
+            </Left>
+            <Right>
+              <ListHeading>Projects</ListHeading>
+              <List>
+                {selectedAccount?.projects?.map((project) => (
+                  <ListItem
+                    appearance="secondary"
+                    key={project.id}
+                    title={project.name}
+                    right={<Icon icon="add" aria-label={project.name} />}
+                    onClick={() => handleSelectProject(project)}
+                    disabled={isSelectingProject}
+                  />
+                ))}
+              </List>
+            </Right>
+          </ProjectPicker>
+        </>
+      )}
     </Container>
   );
-};
+}
diff --git a/src/screens/LinkProject/LinkedProject.tsx b/src/screens/LinkProject/LinkedProject.tsx
new file mode 100644
index 00000000..22a8962d
--- /dev/null
+++ b/src/screens/LinkProject/LinkedProject.tsx
@@ -0,0 +1,79 @@
+import { Icon } from "@storybook/design-system";
+import React from "react";
+import { useQuery } from "urql";
+
+import { Button } from "../../components/Button";
+import { Container } from "../../components/Container";
+import { Heading } from "../../components/Heading";
+import { Stack } from "../../components/Stack";
+import { Text } from "../../components/Text";
+import { graphql } from "../../gql";
+import { ProjectQueryQuery } from "../../gql/graphql";
+
+const ProjectQuery = graphql(/* GraphQL */ `
+  query ProjectQuery($projectId: ID!) {
+    project(id: $projectId) {
+      id
+      name
+      webUrl
+      lastBuild {
+        branch
+        number
+      }
+    }
+  }
+`);
+
+export const LinkedProject = ({
+  projectId,
+  goToNext,
+}: {
+  projectId: string;
+  goToNext: () => void;
+}) => {
+  const [{ data, fetching, error }] = useQuery<ProjectQueryQuery>({
+    query: ProjectQuery,
+    variables: { projectId },
+  });
+
+  return (
+    <Container>
+      <Stack>
+        {fetching && <p>Loading...</p>}
+        {error && <p>{error.message}</p>}
+        {data?.project && (
+          <Stack>
+            <Icon icon="check" />
+            <Heading>Project linked!</Heading>
+            <p>
+              We added project ID to main.js. The {data.project.name} app ID will be used to
+              reference prior tests. Please commit this change to continue using this addon.
+            </p>
+            <Button secondary onClick={() => goToNext()}>
+              Next
+            </Button>
+            <p>
+              What is the app ID for? <a href="https://www.chromatic.com/docs/cli">Learn More »</a>
+            </p>
+            {data?.project && (
+              <div>
+                <Heading>Selected project</Heading>
+                <Text>Baselines will be used with this project.</Text>
+                <b>
+                  <a href={data.project.webUrl}>{data.project.name}</a>
+                </b>
+              </div>
+            )}
+            {data.project.lastBuild && (
+              <p>
+                Last build: {data.project.lastBuild.number} on branch{" "}
+                {data.project.lastBuild.branch}
+              </p>
+            )}
+          </Stack>
+        )}
+        ;
+      </Stack>
+    </Container>
+  );
+};
diff --git a/src/screens/VisualTests/RenderSettings.stories.tsx b/src/screens/VisualTests/RenderSettings.stories.tsx
index 32b5d7d2..b397847d 100644
--- a/src/screens/VisualTests/RenderSettings.stories.tsx
+++ b/src/screens/VisualTests/RenderSettings.stories.tsx
@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { graphql } from "msw";
 
+import { ProjectQueryQuery } from "../../gql/graphql";
 import { storyWrapper } from "../../utils/graphQLClient";
 import { withFigmaDesign } from "../../utils/withFigmaDesign";
 import { RenderSettings } from "./RenderSettings";
@@ -23,7 +24,7 @@ const meta = {
                   number: 123,
                 },
               },
-            })
+            } satisfies ProjectQueryQuery)
           )
         ),
       ],
diff --git a/src/screens/VisualTests/VisualTests.stories.tsx b/src/screens/VisualTests/VisualTests.stories.tsx
index 6ad51449..fc7ea32e 100644
--- a/src/screens/VisualTests/VisualTests.stories.tsx
+++ b/src/screens/VisualTests/VisualTests.stories.tsx
@@ -251,6 +251,7 @@ const meta = {
   parameters: withBuild(passedBuild),
   args: {
     storyId: "button--primary",
+    projectId: "Project:id123",
   },
 } satisfies Meta<typeof VisualTests>;
 
@@ -277,6 +278,14 @@ export const NoChanges: Story = {
   },
 };
 
+export const NoBuild: Story = {
+  parameters: {
+    ...withGraphQLQuery("Build", (req, res, ctx) => res(ctx.data({ build: null } as BuildQuery))),
+    // No design for this state
+    // ...withFigmaDesign(""),
+  },
+};
+
 export const Outdated: Story = {
   args: {
     isOutdated: true,
diff --git a/src/screens/VisualTests/VisualTests.tsx b/src/screens/VisualTests/VisualTests.tsx
index 149ac4b7..23d6d333 100644
--- a/src/screens/VisualTests/VisualTests.tsx
+++ b/src/screens/VisualTests/VisualTests.tsx
@@ -15,6 +15,7 @@ import {
   TestStatus,
 } from "../../gql/graphql";
 import { aggregateResult } from "../../utils/aggregateResult";
+import { useProjectId } from "../../utils/useProjectId";
 import { BuildInfo } from "./BuildInfo";
 import { RenderSettings } from "./RenderSettings";
 import { SnapshotComparison } from "./SnapshotComparison";
@@ -28,6 +29,7 @@ const QueryBuild = graphql(/* GraphQL */ `
       ...BuildFields
     }
     project(id: $projectId) @skip(if: $hasBuildId) {
+      name
       lastBuild(branches: [$branch]) {
         ...BuildFields
       }
@@ -116,6 +118,9 @@ const FragmentTestFields = graphql(/* GraphQL */ `
 `);
 
 interface VisualTestsProps {
+  projectId: string;
+  branch?: string;
+  slug?: string;
   isOutdated?: boolean;
   isRunning?: boolean;
   lastDevBuildId?: string;
@@ -134,15 +139,20 @@ export const VisualTests = ({
   setAccessToken,
   setIsOutdated,
   setIsRunning,
+  projectId,
+  branch,
+  slug,
   storyId,
 }: VisualTestsProps) => {
+  // TODO: Replace hardcoded projectId with useProjectId hook and parameters
   const [{ data, fetching, error }, rerun] = useQuery<BuildQuery, BuildQueryVariables>({
     query: QueryBuild,
     variables: {
       hasBuildId: !!lastDevBuildId,
       buildId: lastDevBuildId || "",
-      projectId: "643d59b4f51c48601c1df552",
-      branch: "test",
+      projectId,
+      branch: branch || "",
+      ...(slug ? { slug } : {}),
     },
   });
 
@@ -153,7 +163,7 @@ export const VisualTests = ({
     }
   }, [isRunning, setIsOutdated, setIsRunning, data]);
 
-  const build = getFragment(FragmentBuildFields, data?.build || data?.project.lastBuild);
+  const build = getFragment(FragmentBuildFields, data?.build || data?.project?.lastBuild);
 
   useEffect(() => {
     let interval: any;
@@ -177,6 +187,18 @@ export const VisualTests = ({
             </Row>
           )}
           {fetching && <Loader />}
+          {!build && !fetching && !error && (
+            <Section grow>
+              <Row>
+                <Col>
+                  <Text>
+                    Your project {data.project?.name} does not have any builds yet. Run a build a to
+                    begin.
+                  </Text>
+                </Col>
+              </Row>
+            </Section>
+          )}
         </Section>
         <Section>
           <Bar>
diff --git a/src/utils/storybook.config.utils.ts b/src/utils/storybook.config.utils.ts
new file mode 100644
index 00000000..8cd6917f
--- /dev/null
+++ b/src/utils/storybook.config.utils.ts
@@ -0,0 +1,18 @@
+import fs from "node:fs/promises";
+
+const SUPPORTED_EXTENSIONS = ["js", "ts", "tsx", "jsx"] as const;
+
+const pathExists = (f: string) =>
+  fs.stat(f).then(
+    () => true,
+    () => false
+  );
+
+export const findConfig = async (prefix: string) => {
+  const filenames = SUPPORTED_EXTENSIONS.map((ext) => `.storybook/${prefix}.${ext}`);
+  const exists = await Promise.all(filenames.map(pathExists));
+
+  const idx = exists.findIndex((e) => e);
+  if (idx === -1) return filenames[0]; // create a JS file
+  return filenames[idx];
+};
diff --git a/src/utils/useProjectId.ts b/src/utils/useProjectId.ts
new file mode 100644
index 00000000..894915bd
--- /dev/null
+++ b/src/utils/useProjectId.ts
@@ -0,0 +1,25 @@
+import { useChannel } from "@storybook/manager-api";
+import React from "react";
+
+import { UPDATE_PROJECT, UpdateProjectPayload } from "../constants";
+
+const { CHROMATIC_PROJECT_ID } = process.env;
+
+export const useProjectId = (): [
+  projectId: string,
+  updateProject: (projectId: string, projectToken?: string) => void,
+  projectIdChanged: boolean,
+  clearProjectIdChanged: () => void
+] => {
+  const [projectId, setProjectId] = React.useState<string | null>(CHROMATIC_PROJECT_ID);
+  const [projectIdChanged, setProjectIdChanged] = React.useState(false);
+
+  const emit = useChannel({});
+
+  const updateProject = (newProjectId: string, projectToken: string) => {
+    emit(UPDATE_PROJECT, { projectId: newProjectId, projectToken } as UpdateProjectPayload);
+    setProjectId(newProjectId);
+    setProjectIdChanged(true);
+  };
+  return [projectId, updateProject, projectIdChanged, () => setProjectIdChanged(false)];
+};