Color trace lines with VS Code theme variables

test/trace-line-style.test.ts

@@ -0,0 +1,44 @@
+import { describe, expect, it } from 'vitest'
+import { getTraceDurationColor, getTraceLineAccent, getTraceLineStyle } from '../ui/src/traceLineStyle'
+
+describe('trace line styles', () => {
+  it('uses semantic vscode color variables for common trace categories', () => {
+    expect(getTraceLineAccent({
+      pid: 1,
+      tid: 1,
+      ph: 'X',
+      cat: 'checkTypes',
+      ts: 0,
+      name: 'structuredTypeRelatedTo',
+    })).toContain('--vscode-charts-blue')
+
+    expect(getTraceLineAccent({
+      pid: 1,
+      tid: 1,
+      ph: 'X',
+      cat: 'program',
+      ts: 0,
+      name: 'createProgram',
+    })).toContain('--vscode-charts-purple')
+  })
+
+  it('highlights slow trace lines with warning and error colors', () => {
+    expect(getTraceDurationColor(4_999)).toContain('--vscode-descriptionForeground')
+    expect(getTraceDurationColor(5_000)).toContain('--vscode-editorWarning-foreground')
+    expect(getTraceDurationColor(50_000)).toContain('--vscode-errorForeground')
+  })
+
+  it('returns a border and subtle background accent', () => {
+    const style = getTraceLineStyle({
+      pid: 1,
+      tid: 1,
+      ph: 'X',
+      cat: 'emit',
+      ts: 0,
+      name: 'emitFile',
+    })
+
+    expect(style.borderLeftColor).toContain('--vscode-charts-green')
+    expect(style.background).toContain('linear-gradient')
+  })
+})

ui/components/TreeNode.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { Tree } from '../../src/traceTree'
+import { getTraceDurationColor, getTraceLineStyle } from '~/src/traceLineStyle'
 import { childrenById, typesById } from '~/src/appState'
 
 const props = defineProps<{ tree: Tree, depth: number }>()
@@ -8,6 +9,8 @@ const sendMessage = useNuxtApp().$sendMessage
 
 const children = computed(() => childrenById.get(props.tree.id) ?? [])
 const types = computed(() => typesById.get(props.tree.id) ?? [])
+const traceLineStyle = computed(() => getTraceLineStyle(props.tree.line))
+const durationStyle = computed(() => ({ color: getTraceDurationColor(props.tree.line.dur) }))
 
 function fetchChildren() {
   if (children.value.length === 0)
@@ -42,11 +45,14 @@ const insetClass = `border-e min-w-2 border-[var(--vscode-tree-inactiveIndentGui
         <!-- <div :class="insetClass" :style="{ minWidth: `${props.depth / 2}rem` }" /> -->
       </template>
       <template #label>
-        <div class="flex flex-row gap-5 w-full pl-1">
+        <div class="flex flex-row gap-5 w-full pl-1 border-l-2" :style="traceLineStyle">
           <div class="flex flex-row justify-start gap-2 grow text-left">
+            <span class="rounded-sm px-1 text-xs opacity-80" :title="tree.line.cat">
+              {{ tree.line.cat }}
+            </span>
             <span class="min-w-48">
               {{ tree.line.name }} ({{ tree.childCnt }}):
-            </span><span>
+            </span><span :style="durationStyle">
               {{ Math.round(props.tree.line.dur ?? 0 / 1000) / 1000 }}ms
             </span>
             <div class="grow opacity-20 hover:opacity-100 h-full">

ui/src/traceLineStyle.ts

@@ -0,0 +1,45 @@
+import type { TraceLine } from '../../shared/src/traceData'
+
+const CATEGORY_COLORS = [
+  {
+    match: /check|type/i,
+    color: 'var(--vscode-charts-blue, var(--vscode-terminal-ansiBlue, #3794ff))',
+  },
+  {
+    match: /parse|bind|program/i,
+    color: 'var(--vscode-charts-purple, var(--vscode-terminal-ansiMagenta, #b180d7))',
+  },
+  {
+    match: /emit|transform/i,
+    color: 'var(--vscode-charts-green, var(--vscode-terminal-ansiGreen, #89d185))',
+  },
+  {
+    match: /io|file|module/i,
+    color: 'var(--vscode-charts-yellow, var(--vscode-terminal-ansiYellow, #cca700))',
+  },
+] as const
+
+export function getTraceLineAccent(line: TraceLine) {
+  const searchable = `${line.cat} ${line.name}`
+  return CATEGORY_COLORS.find(({ match }) => match.test(searchable))?.color
+    ?? 'var(--vscode-foreground, #cccccc)'
+}
+
+export function getTraceDurationColor(duration = 0) {
+  if (duration >= 50_000)
+    return 'var(--vscode-errorForeground, #f48771)'
+
+  if (duration >= 5_000)
+    return 'var(--vscode-editorWarning-foreground, var(--vscode-terminal-ansiYellow, #cca700))'
+
+  return 'var(--vscode-descriptionForeground, #8b949e)'
+}
+
+export function getTraceLineStyle(line: TraceLine) {
+  const accent = getTraceLineAccent(line)
+
+  return {
+    borderLeftColor: accent,
+    background: `linear-gradient(90deg, ${accent}22 0, transparent 1.5rem)`,
+  }
+}