feat: enhance HTML tracer to visualize prune order (#103)

* wip

* wip

* finish up

* rm gitignored

.gitignore

@@ -131,3 +131,5 @@ dist
 .yarn/build-state.yml
 .yarn/install-state.gz
 .pnp.*
+
+src/base/htmlTracerSrc.ts

CHANGELOG.md

@@ -1,5 +1,18 @@
 # Changelog
 
+## 0.3.0-alpha.4
+
+- **feat:** enhance the `HTMLTracer` to allow consumers to visualize element pruning order
+
+## 0.3.0-alpha.3
+
+- **feat:** add `MetadataMap.getAll()`
+- **fix:** don't drop empty messages that have tool calls
+
+## 0.3.0-alpha.2
+
+- **fix:** update to match proposed VS Code tools API
+
 ## 0.3.0-alpha.1
 
 - ⚠️ **breaking refactor:** `priority` is now local within tree elements

README.md

@@ -232,15 +232,17 @@ It's important to note that all of the `flex*` properties allow for cooperative
 
 #### Debugging Budgeting
 
-You can set a `tracer` property on the `PromptElement` to debug how your elements are rendered and how this library allocates your budget. We include a basic `HTMLTracer` you can use:
+You can set a `tracer` property on the `PromptElement` to debug how your elements are rendered and how this library allocates your budget. We include a basic `HTMLTracer` you can use, which can be served on an address:
 
 ```js
 const renderer = new PromptRenderer(/* ... */);
 const tracer = new HTMLTracer();
 renderer.tracer = tracer;
 renderer.render(/* ... */);
 
-fs.writeFile('debug.html', tracer.toHTML());
+tracer.serveHTML().then(server => {
+  console.log('Server address:', server.address);
+});
 ```
 
 ### Usage in Tools

build/build-tracer.ts

@@ -0,0 +1,54 @@
+import * as assert from 'assert';
+import * as chokidar from 'chokidar';
+import * as esbuild from 'esbuild';
+import { writeFileSync } from 'fs';
+
+const watch = process.argv.includes("--watch");
+const minify = watch ? process.argv.includes("--minify") : !process.argv.includes("--no-minify");
+
+const ctx = esbuild.context({
+	entryPoints: [
+		"src/tracer/index.tsx",
+	],
+	tsconfig: "src/tracer/tsconfig.json",
+	bundle: true,
+	sourcemap: minify ? false : 'inline',
+	minify,
+	platform: "browser",
+	outdir: "out",
+	write: false,
+});
+
+function build() {
+	return ctx.then(ctx => ctx.rebuild())
+		.then(bundle => {
+			assert.strictEqual(bundle.outputFiles.length, 2, 'expected to have 2 output files');
+
+			const css = bundle.outputFiles.find(o => o.path.endsWith('.css'));
+			assert.ok(css, 'expected to have css');
+			const js = bundle.outputFiles.find(o => o.path.endsWith('.js'));
+			assert.ok(js, 'expected to have js');
+			writeFileSync("src/base/htmlTracerSrc.ts", `export const tracerSrc = ${JSON.stringify(js.text)};\nexport const tracerCss = ${JSON.stringify(css.text)};`);
+		})
+		.catch(err => {
+			if (err.errors) {
+				console.error(err.errors.join('\n'));
+			} else {
+				console.error(err);
+			}
+		});
+}
+
+if (watch) {
+	let timeout: NodeJS.Timeout | null = null;
+	chokidar.watch("src/tracer/**/*.{tsx,ts,css}", {}).on('all', () => {
+		if (timeout) {
+			clearTimeout(timeout);
+		}
+		timeout = setTimeout(build, 600);
+	})
+} else {
+	build().then(() => {
+		process.exit(0);
+	});
+}