From 30dc9259975fb343c1524fca814a23859068f74b Mon Sep 17 00:00:00 2001
From: Vladimir Sheremet <sleuths.slews0s@icloud.com>
Date: Mon, 12 Aug 2024 22:57:53 +0200
Subject: [PATCH 1/6] feat: render project name as a background, allow custom
 colors

---
 packages/vitest/src/node/reporters/renderers/utils.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/vitest/src/node/reporters/renderers/utils.ts b/packages/vitest/src/node/reporters/renderers/utils.ts
index 9c8212944a70..4422ec0dd9d7 100644
--- a/packages/vitest/src/node/reporters/renderers/utils.ts
+++ b/packages/vitest/src/node/reporters/renderers/utils.ts
@@ -254,6 +254,6 @@ export function formatProjectName(name: string | undefined, suffix = ' ') {
   const index = name
     .split('')
     .reduce((acc, v, idx) => acc + v.charCodeAt(0) + idx, 0)
-  const colors = [c.blue, c.yellow, c.cyan, c.green, c.magenta]
-  return colors[index % colors.length](`|${name}|`) + suffix
+  const colors = [c.bgBlue, c.bgYellow, c.bgCyan, c.bgGreen, c.bgMagenta]
+  return colors[index % colors.length](` ${c.white(name)} `) + suffix
 }

From 42b3ecbb65a3176011fe61bd2a56d45ad897541b Mon Sep 17 00:00:00 2001
From: Vladimir Sheremet <sleuths.slews0s@icloud.com>
Date: Mon, 12 Aug 2024 23:04:20 +0200
Subject: [PATCH 2/6] feat(ui): render project name as a pill in ui

---
 packages/ui/client/components/FileDetails.vue | 27 ++++++++++++++-----
 .../components/explorer/ExplorerItem.vue      |  2 +-
 2 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/packages/ui/client/components/FileDetails.vue b/packages/ui/client/components/FileDetails.vue
index 7cd54f94ed33..b0ba0590b25c 100644
--- a/packages/ui/client/components/FileDetails.vue
+++ b/packages/ui/client/components/FileDetails.vue
@@ -111,6 +111,21 @@ debouncedWatch(
   },
   { debounce: 100, immediate: true },
 )
+
+const projectNameColor = computed(() => {
+  return getProjectNameColor(current.value?.file.projectName)
+})
+
+const projectNameTextColor = computed(() => {
+  switch (projectNameColor.value) {
+    case 'blue':
+    case 'green':
+    case 'magenta':
+      return 'white'
+    default:
+      return 'black'
+  }
+})
 </script>
 
 <template>
@@ -127,15 +142,13 @@ debouncedWatch(
       <div p="2" h-10 flex="~ gap-2" items-center bg-header border="b base">
         <StatusIcon :state="current.result?.state" :mode="current.mode" :failed-snapshot="failedSnapshot" />
         <div v-if="isTypecheck" v-tooltip.bottom="'This is a typecheck test. It won\'t report results of the runtime tests'" class="i-logos:typescript-icon" flex-shrink-0 />
-        <div
+        <span
           v-if="current?.file.projectName"
-          font-light
-          op-50
-          text-sm
-          :style="{ color: getProjectNameColor(current?.file.projectName) }"
+          class="rounded-full py-0.5 px-1 text-xs font-light"
+          :style="{ backgroundColor: projectNameColor, color: projectNameTextColor }"
         >
-          [{{ current?.file.projectName || "" }}]
-        </div>
+          {{ current.file.projectName }}
+        </span>
         <div flex-1 font-light op-50 ws-nowrap truncate text-sm>
           {{ current?.name }}
         </div>
diff --git a/packages/ui/client/components/explorer/ExplorerItem.vue b/packages/ui/client/components/explorer/ExplorerItem.vue
index 211680de2776..8cb5b95c189e 100644
--- a/packages/ui/client/components/explorer/ExplorerItem.vue
+++ b/packages/ui/client/components/explorer/ExplorerItem.vue
@@ -176,7 +176,7 @@ const projectNameTextColor = computed(() => {
     <div flex items-end gap-2 overflow-hidden>
       <div v-if="type === 'file' && typecheck" v-tooltip.bottom="'This is a typecheck test. It won\'t report results of the runtime tests'" class="i-logos:typescript-icon" flex-shrink-0 />
       <span text-sm truncate font-light>
-        <span v-if="type === 'file' && projectName" class="rounded-full p-1 mr-1 text-xs" :style="{ backgroundColor: projectNameColor, color: projectNameTextColor }">
+        <span v-if="type === 'file' && projectName" class="rounded-full py-0.5 px-1 mr-1 text-xs" :style="{ backgroundColor: projectNameColor, color: projectNameTextColor }">
           {{ projectName }}
         </span>
         <span :text="state === 'fail' ? 'red-500' : ''" v-html="highlighted" />

From 6d36d619e01c53491b5d80fb7cb3cd6a020e5385 Mon Sep 17 00:00:00 2001
From: Vladimir Sheremet <sleuths.slews0s@icloud.com>
Date: Mon, 12 Aug 2024 23:08:03 +0200
Subject: [PATCH 3/6] chore: update ui dev scripts

---
 package.json          | 2 +-
 packages/ui/README.md | 8 +-------
 2 files changed, 2 insertions(+), 8 deletions(-)

diff --git a/package.json b/package.json
index 2a3c601b0ccd..0c603794a3e4 100644
--- a/package.json
+++ b/package.json
@@ -30,7 +30,7 @@
     "typecheck": "tsc -p tsconfig.check.json --noEmit",
     "typecheck:why": "tsc -p tsconfig.check.json --noEmit --explainFiles > explainTypes.txt",
     "ui:build": "vite build packages/ui",
-    "ui:dev": "vite packages/ui",
+    "ui:dev": "npm -C packages/ui run dev:client",
     "ui:test": "npm -C packages/ui run test:run",
     "test:browser:webdriverio": "pnpm -C test/browser run test:webdriverio",
     "test:browser:playwright": "pnpm -C test/browser run test:playwright"
diff --git a/packages/ui/README.md b/packages/ui/README.md
index 0208622e0d53..ae9d1e81a475 100644
--- a/packages/ui/README.md
+++ b/packages/ui/README.md
@@ -2,20 +2,14 @@
 
 This package is for UI interface of Vitest.
 
-> Work in progress.
-
 ## Development Setup
 
 At project root, create terminals with each of the following commands:
 
 ```bash
-nr dev
+nr ui:dev
 ```
 
 ```bash
 nr test --api
 ```
-
-```bash
-nr ui:dev
-```

From e64ebafd880ff1ecd22fbaea42f209cd676144a1 Mon Sep 17 00:00:00 2001
From: Vladimir Sheremet <sleuths.slews0s@icloud.com>
Date: Thu, 12 Sep 2024 13:57:16 +0200
Subject: [PATCH 4/6] chore: render provider name in cli

---
 packages/vitest/src/node/logger.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/vitest/src/node/logger.ts b/packages/vitest/src/node/logger.ts
index 475a74619d20..d00d137b53bd 100644
--- a/packages/vitest/src/node/logger.ts
+++ b/packages/vitest/src/node/logger.ts
@@ -228,10 +228,12 @@ export class Logger {
 
       const resolvedUrls = project.browser.vite.resolvedUrls
       const origin = resolvedUrls?.local[0] ?? resolvedUrls?.network[0]
+      const provider = project.browser.provider.name
+      const providerString = provider === 'preview' ? '' : `by ${provider} `
       this.log(
         c.dim(
           c.green(
-            `     ${output} Browser runner started at ${new URL('/', origin)}`,
+            `     ${output} Browser runner started${providerString} at ${new URL('/', origin)}`,
           ),
         ),
       )

From 2e6e96aca29604aa1330d3c89fb98490d4cd21fa Mon Sep 17 00:00:00 2001
From: Vladimir Sheremet <sleuths.slews0s@icloud.com>
Date: Thu, 12 Sep 2024 13:58:28 +0200
Subject: [PATCH 5/6] chore: undo project colors in cli

---
 packages/vitest/src/node/reporters/renderers/utils.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/vitest/src/node/reporters/renderers/utils.ts b/packages/vitest/src/node/reporters/renderers/utils.ts
index 4422ec0dd9d7..9c8212944a70 100644
--- a/packages/vitest/src/node/reporters/renderers/utils.ts
+++ b/packages/vitest/src/node/reporters/renderers/utils.ts
@@ -254,6 +254,6 @@ export function formatProjectName(name: string | undefined, suffix = ' ') {
   const index = name
     .split('')
     .reduce((acc, v, idx) => acc + v.charCodeAt(0) + idx, 0)
-  const colors = [c.bgBlue, c.bgYellow, c.bgCyan, c.bgGreen, c.bgMagenta]
-  return colors[index % colors.length](` ${c.white(name)} `) + suffix
+  const colors = [c.blue, c.yellow, c.cyan, c.green, c.magenta]
+  return colors[index % colors.length](`|${name}|`) + suffix
 }

From 1e86d15b4aa465e593861b12effc445034796d68 Mon Sep 17 00:00:00 2001
From: Vladimir Sheremet <sleuths.slews0s@icloud.com>
Date: Thu, 12 Sep 2024 14:04:42 +0200
Subject: [PATCH 6/6] chore: fix provider string

---
 packages/vitest/src/node/logger.ts    | 2 +-
 test/browser/specs/server-url.test.ts | 8 ++++----
 test/browser/specs/utils.ts           | 5 +++--
 3 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/packages/vitest/src/node/logger.ts b/packages/vitest/src/node/logger.ts
index d00d137b53bd..74109cd42ed4 100644
--- a/packages/vitest/src/node/logger.ts
+++ b/packages/vitest/src/node/logger.ts
@@ -229,7 +229,7 @@ export class Logger {
       const resolvedUrls = project.browser.vite.resolvedUrls
       const origin = resolvedUrls?.local[0] ?? resolvedUrls?.network[0]
       const provider = project.browser.provider.name
-      const providerString = provider === 'preview' ? '' : `by ${provider} `
+      const providerString = provider === 'preview' ? '' : ` by ${provider}`
       this.log(
         c.dim(
           c.green(
diff --git a/test/browser/specs/server-url.test.ts b/test/browser/specs/server-url.test.ts
index da129589c9f1..3428b6aaadf8 100644
--- a/test/browser/specs/server-url.test.ts
+++ b/test/browser/specs/server-url.test.ts
@@ -6,19 +6,19 @@ afterEach(() => {
 })
 
 test('server-url http', async () => {
-  const { stdout, stderr } = await runBrowserTests({
+  const { stdout, stderr, provider } = await runBrowserTests({
     root: './fixtures/server-url',
   })
   expect(stderr).toBe('')
-  expect(stdout).toContain('Browser runner started at http://localhost:5173/')
+  expect(stdout).toContain(`Browser runner started by ${provider} at http://localhost:5173/`)
 })
 
 test('server-url https', async () => {
   process.env.TEST_HTTPS = '1'
-  const { stdout, stderr } = await runBrowserTests({
+  const { stdout, stderr, provider } = await runBrowserTests({
     root: './fixtures/server-url',
   })
   expect(stderr).toBe('')
-  expect(stdout).toContain('Browser runner started at https://localhost:5173/')
+  expect(stdout).toContain(`Browser runner started by ${provider} at https://localhost:5173/`)
   expect(stdout).toContain('Test Files  1 passed')
 })
diff --git a/test/browser/specs/utils.ts b/test/browser/specs/utils.ts
index 7aeeee30c76a..53f1757d21e0 100644
--- a/test/browser/specs/utils.ts
+++ b/test/browser/specs/utils.ts
@@ -3,7 +3,8 @@ import type { UserConfig as ViteUserConfig } from 'vite'
 import type { UserConfig } from 'vitest'
 import { runVitest } from '../../test-utils'
 
-export const browser = process.env.BROWSER || (process.env.PROVIDER !== 'playwright' ? 'chromium' : 'chrome')
+const provider = process.env.PROVIDER || 'playwright'
+export const browser = process.env.BROWSER || (provider !== 'playwright' ? 'chromium' : 'chrome')
 
 export async function runBrowserTests(
   config?: Omit<UserConfig, 'browser'> & { browser?: Partial<UserConfig['browser']> },
@@ -29,5 +30,5 @@ export async function runBrowserTests(
   const passedTests = getPassed(browserResultJson.testResults)
   const failedTests = getFailed(browserResultJson.testResults)
 
-  return { ...result, browserResultJson, passedTests, failedTests, browser }
+  return { ...result, browserResultJson, passedTests, failedTests, browser, provider }
 }