feat(ui): basic error display

packages/ui/client/App.vue

@@ -2,7 +2,7 @@
   <div grid="~ cols-[15rem_15rem_auto]" h-screen w-screen overflow="hidden">
     <Navigation />
     <Suites />
-    <Editor />
-    <ConnectionOverlay />
+    <FileDetails />
   </div>
+  <ConnectionOverlay />
 </template>

packages/ui/client/components.d.ts

@@ -7,6 +7,7 @@ declare module 'vue' {
     CodeMirror: typeof import('./components/CodeMirror.vue')['default']
     ConnectionOverlay: typeof import('./components/ConnectionOverlay.vue')['default']
     Editor: typeof import('./components/Editor.vue')['default']
+    FileDetails: typeof import('./components/FileDetails.vue')['default']
     IconButton: typeof import('./components/IconButton.vue')['default']
     Navigation: typeof import('./components/Navigation.vue')['default']
     StatusIcon: typeof import('./components/StatusIcon.vue')['default']

packages/ui/client/components/Editor.vue

@@ -2,49 +2,21 @@
 import { client, current } from '~/composables/state'
 
 const code = ref('')
-
 watch(current, async() => {
-  if (!current.value || !current.value.filepath)
+  if (!current.value || !current.value.filepath) {
+    code.value = ''
     return
+  }
   code.value = await client.rpc.getSourceCode(current.value.filepath)
-})
-
-function open() {
-  if (current.value?.filepath)
-    fetch(`/__open-in-editor?file=${encodeURIComponent(current.value.filepath)}`)
-}
+}, { immediate: true })
 const ext = computed(() => current.value?.filepath?.split(/\./g).pop() || 'js')
 </script>
 
 <template>
-  <div v-if="current" h-full w-full overflow="hidden">
-    <div
-      p="2"
-      h-10
-      text-sm
-      flex="~ gap-2"
-      items-center
-      bg-header
-      border="b base"
-    >
-      <div flex-1 font-light op-50 ws-nowrap tuncate>
-        {{ current?.filepath }}
-      </div>
-      <div class="flex text-lg">
-        <IconButton
-          icon="i-carbon-launch"
-          :disabled="!current?.filepath"
-          :onclick="open"
-        />
-      </div>
-    </div>
-    <div>
-      <CodeMirror
-        v-model="code"
-        v-bind="{ lineNumbers: true }"
-        :read-only="true"
-        :mode="ext"
-      />
-    </div>
-  </div>
+  <CodeMirror
+    v-model="code"
+    v-bind="{ lineNumbers: true }"
+    :read-only="true"
+    :mode="ext"
+  />
 </template>

packages/ui/client/components/FileDetails.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { client, current } from '~/composables/state'
+
+function open() {
+  if (current.value?.filepath)
+    fetch(`/__open-in-editor?file=${encodeURIComponent(current.value.filepath)}`)
+}
+
+const failed = computed(() => current.value?.tasks.filter(i => i.result?.state === 'fail') || [])
+</script>
+
+<template>
+  <div v-if="current" h-full w-full overflow="hidden">
+    <div
+      p="2"
+      h-10
+      flex="~ gap-2"
+      items-center
+      bg-header
+      border="b base"
+    >
+      <StatusIcon :task="current" />
+      <div flex-1 font-light op-50 ws-nowrap tuncate text-sm>
+        {{ current?.filepath }}
+      </div>
+      <div class="flex text-lg">
+        <IconButton
+          icon="i-carbon-launch"
+          :disabled="!current?.filepath"
+          :onclick="open"
+        />
+      </div>
+    </div>
+    <div>
+      <template v-if="failed.length">
+        <div v-for="task of failed" :key="task.id">
+          <div bg="red-500/10" text="red-500 sm" p="x3 y2" m-2 rounded>
+            {{ task.name }}
+            <!-- TODO: show diff and better stacktrace -->
+            <pre op80>{{ (task.result?.error as any).stackStr }}</pre>
+          </div>
+        </div>
+      </template>
+      <template v-else>
+        <div bg="green-500/10" text="green-500 sm" p="x4 y2" m-2 rounded>
+          All tests passed in this file
+        </div>
+      </template>
+    </div>
+    <div overflow="auto">
+      <!-- <Editor /> -->
+    </div>
+  </div>
+</template>

packages/ui/client/components/TaskItem.vue

@@ -21,7 +21,7 @@ const duration = computed(() => {
     cursor-pointer
     hover="bg-active"
   >
-    <StatusIcon :task="task" mr-2 flex-shrink-0 text-lg />
+    <StatusIcon :task="task" mr-2 />
     <div flex items-end gap-2 :text="task?.result?.state === 'fail' ? 'red-500' : ''">
       <span text-sm truncate font-light>{{ task.name }}</span>
       <span v-if="task.result?.end" text="xs" op20>

packages/ui/client/composables/state.ts

@@ -3,6 +3,14 @@ import type { WebSocketStatus } from '@vueuse/core'
 import { reactive } from 'vue'
 import type { ResolvedConfig } from '#types'
 
+export const {
+  file: activeFileIdRef,
+} = toRefs(useUrlSearchParams<{ file: string }>('hash-params', {
+  initialValue: {
+    file: '',
+  },
+}))
+
 export const ENTRY_URL = 'ws://localhost:51204/__vitest_api__'
 
 export const client = createClient(ENTRY_URL, {
@@ -12,7 +20,6 @@ export const client = createClient(ENTRY_URL, {
 export const config = shallowRef<ResolvedConfig>({} as any)
 export const status = ref<WebSocketStatus>('CONNECTING')
 export const files = computed(() => client.state.getFiles())
-export const activeFileIdRef = ref('')
 export const current = computed(() => files.value.find(file => file.id === activeFileIdRef.value))
 
 export const isConnected = computed(() => status.value === 'OPEN')