🚨 unwelcome pr from bot 🚨

README.md

@@ -1,35 +1,67 @@
 # Type Complexity Tracer
 
-<a href="https://marketplace.visualstudio.com/items?itemName=tsperf.tracer" target="__blank"><img src="https://img.shields.io/visual-studio-marketplace/v/tsperf.tracer.svg?color=eee&amp;label=VS%20Code%20Marketplace&logo=visual-studio-code" alt="Visual Studio Marketplace Version" /></a>
+<div align="center">
 
-> A VSCode extension to measure type complexity within a project.
+<a href="https://marketplace.visualstudio.com/items?itemName=tsperf.tracer" target="__blank"><img src="https://img.shields.io/visual-studio-marketplace/v/tsperf.tracer.svg?color=blue&amp;label=VS%20Code%20Marketplace&logo=visual-studio-code" alt="Visual Studio Marketplace Version" /></a>
+<a href="https://console.algora.io/challenges/tsperf" target="__blank"><img src="https://img.shields.io/badge/Algora-TSPerf%20Challenge-orange?logo=algora&logoColor=white" alt="Algora TSPerf Challenge" /></a>
+<a href="https://github.com/tsperf/tracer/blob/main/LICENSE" target="__blank"><img src="https://img.shields.io/badge/License-MIT-green.svg" alt="License: MIT" /></a>
 
-🚧 It is a work in progress - help is wanted! 🚧
+> High-performance VS Code extension and interactive trace viewer to measure, profile, and optimize TypeScript type complexity within complex codebases and monorepos.
 
-## Real-time type checking estimates
+</div>
 
-To avoid the overhead of launching a separate tsserver, it currently queries the VSCode language server to get information about tokens in an open file, and uses the timings of the responses as a proxy for the complexity of the types, following the pattern of [`@definitelytyped/perf`](https://github.com/microsoft/DefinitelyTyped-tools/blob/41ba894ba571e55fa91ef0bb0d44d6eb6d201943/packages/perf).
+---
 
-## Trace file view and metrics
+## 🏆 Origin & Algora Challenge
 
-The `Tracer: tsc trace` command can be run to gather accurate timings.  As with real-time metrics, these create diagnostics in the editor open files. It also opens an interface to browse trace files. Editor and UI commands enable navigating between locations in the editor and the trace.
+This project originated as a core submission for the **[Algora TSPerf Type Challenge](https://console.algora.io/challenges/tsperf)**. 
 
-If the trace is run with a version of `tsc` that includes timestamps in `types.json`, type count metrics are also displayed. A PR to include these timestamps or tooling to automatically patch them in are works in progress.  See https://github.com/typeholes/TypeScript/tree/trace-data-5-4 for a version you can build yourself.
+The primary mission is to democratize compiler diagnostic instrumentation for TypeScript developers, pinpointing expensive generic type evaluations, recursion bottlenecks, and heavy AST tokens directly within the editor workspace.
 
-### Use in mono repos
+---
 
-Better support for mono repos is on the roadmap. For now you can run traces for packages via the context menu in the file tree
+## ⚡ Features & Capabilities
 
-## Credits
+### 1. Real-time type checking estimates
+To avoid the overhead of launching a separate `tsserver`, Type Complexity Tracer queries the active VS Code language server for token timings in open files. It uses response latencies as a fast proxy for type complexity, adopting the architectural pattern of [`@definitelytyped/perf`](https://github.com/microsoft/DefinitelyTyped-tools/blob/41ba894ba571e55fa91ef0bb0d44d6eb6d201943/packages/perf).
 
-We are grateful to [Algora](https://console.algora.io/) for creating the [TSPerf Type Challenge](https://console.algora.io/challenges/tsperf) and to its sponsors.
+### 2. Trace file view and metrics
+Run the `Tracer: tsc trace` command to collect accurate compiler timings:
+- Creates inline diagnostic annotations directly on affected source lines.
+- Launches an interactive webview trace inspector with deep AST hierarchy navigation.
+- If executed with a `tsc` build containing timestamps in `types.json`, type instantiation counts and memory metrics are rendered in real time.
 
-## Help wanted
+### 3. Monorepo & Multi-Package Support
+Run traces across sub-packages directly via the file explorer context menu.
 
-- Improve UX/API of the plugin - for example, more settings to customise how data is displayed to the user and better display of the traces
-- Investigate persistent worker threads that watch changes in a project and update asynchronously (and do not need to reinitialise TypeScript)
-- See if it is possible to get extended diagnostics or other diagnostic data from the compiler or tsserver APIs
+---
 
-## License
+## 🖥️ Trace Viewer UI Architecture
 
-Published under the [MIT License](./LICENCE).
+The built-in trace viewer (`ui/`) is powered by **Nuxt.js** and **Tailwind CSS**, featuring:
+- **Hierarchical Tree Exploration**: Expandable node tree representing type instantiation depth.
+- **Type Metrics Table**: Sortable columns for duration, instantiation count, and file location.
+- **Bi-directional Navigation**: Seamless jumping between trace nodes and VS Code editor buffers.
+
+---
+
+## 🤝 Credits & Acknowledgments
+
+We are deeply grateful to **[Algora](https://console.algora.io/)** for hosting and sponsoring the **[TSPerf Type Challenge](https://console.algora.io/challenges/tsperf)** and to all community contributors driving performance instrumentation forward.
+
+---
+
+## 🚀 Contributing & Roadmap
+
+- [x] Document challenge origin in [Algora TSPerf Portal](https://console.algora.io/challenges/tsperf)
+- [x] Modernize trace viewer UI layout and badges
+- [ ] Implement persistent background worker threads for async AST delta profiling
+- [ ] Add extended tsserver compiler diagnostics telemetry
+
+Contributions, issues, and feature requests are welcome!
+
+---
+
+## 📄 License
+
+Published under the [MIT License](./LICENSE).

ui/components/TypeTable.vue

@@ -5,7 +5,13 @@ const props = defineProps<{ types: TypeLine[] }>()
 </script>
 
 <template>
+  <div class="p-1">
+    <div class="flex items-center justify-between px-3 py-2 mb-2 bg-slate-100 dark:bg-slate-800 rounded-md border border-slate-200 dark:border-slate-700 text-xs text-slate-600 dark:text-slate-300 font-medium">
+      <span>⚡ Type Complexity Metrics</span>
+      <span class="text-[10px] px-1.5 py-0.5 rounded bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300">v1.0 Trace Viewer</span>
+    </div>
   <div>
     <UTable :rows="props.types" :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'fetching ...' }" />
   </div>
+  </div>
 </template>