Tracer serving invalid JS code?

[asousa-link]

I am trying to setup a tracer using the play.tsx prompt from the examples folder in microsoft/vscode-extension-samples:

async function renderUserPrompt<P extends BasePromptElementProps>(
  ctor: PromptElementCtor<P, any>,
  props: P,
  endpoint: IChatEndpointInfo,
  stream: vscode.ChatResponseStream | undefined,
  model: vscode.LanguageModelChat,
  serveTrace: boolean
) {
  const renderer = new PromptRenderer(
    endpoint,
    ctor,
    props,
    new AnyTokenizer(model.countTokens)
  );
  const tracer = new HTMLTracer();
  renderer.tracer = tracer;
  const result = await renderer.render();
  if (serveTrace) {
    const server = await tracer.serveHTML();
    if (stream) {
      const md = new vscode.MarkdownString(
        "$(info) [View prompt trace](" + server.address + ")"
      );
      md.supportThemeIcons = true;
      stream.markdown(md);
    } else {
      console.log("Prompt trace address:", server.address);
    }
  }

  return {
    messages: toVsCodeChatMessages(
      result.messages
    ) as vscode.LanguageModelChatMessage[],
    references: result.references,
  };
}

// ...

const participant = vscode.chat.createChatParticipant(
    "...",
    async (
      request: vscode.ChatRequest,
      context: vscode.ChatContext,
      stream: vscode.ChatResponseStream,
      token: vscode.CancellationToken
    ) => {

// ...

const { messages } = await renderUserPrompt(
        PlayPrompt,
        { userQuery: request.prompt },
        { modelMaxPromptTokens: request.model.maxInputTokens },
        stream,
        chatModel,
        true)

But every time I launch the server I can never get it to correctly render the page; JS console output:

Uncaught TypeError: Cannot read properties of undefined (reading 'bg') at B.De [as constructor] (66d58d29-6ad7-40bb-ab04-db7537f19f67:9:14159) at B.We [as render] (66d58d29-6ad7-40bb-ab04-db7537f19f67:9:9075) at Q (66d58d29-6ad7-40bb-ab04-db7537f19f67:9:6239) at pe (66d58d29-6ad7-40bb-ab04-db7537f19f67:9:1824) at Q (66d58d29-6ad7-40bb-ab04-db7537f19f67:9:6458) at pe (66d58d29-6ad7-40bb-ab04-db7537f19f67:9:1824) at $e (66d58d29-6ad7-40bb-ab04-db7537f19f67:9:8199) at Q (66d58d29-6ad7-40bb-ab04-db7537f19f67:9:6851) at pe (66d58d29-6ad7-40bb-ab04-db7537f19f67:9:1824) at Q (66d58d29-6ad7-40bb-ab04-db7537f19f67:9:6458)

the same thing seems to happen when I try to toggle and open the tracer in other open-source chat extension examples like https://github.com/[microsoft/vscode-websearchforcopilot](https://github.com/microsoft/vscode-websearchforcopilot). Yet chat-extension-utils extensions seem to be working correctly. What could be the issue?

[porucznikswext-source]

It looks like the issue is caused by a version mismatch between the HTMLTracer bundle and the current VS Code prompt-rendering APIs.

The error:

Code
Cannot read properties of undefined (reading 'bg')
usually happens when the tracer’s generated JS expects a theme/style object that no longer exists in the current renderer version.

A few notes:

The examples in vscode-extension-samples are outdated and use an older build of @vscode/prompt-renderer.

HTMLTracer hasn’t been updated to match the newer prompt element contracts.

Extensions built with chat-extension-utils work because they bundle a newer renderer version.

The same issue appears in other Microsoft sample repos (e.g. vscode-websearchforcopilot), so it’s not a local bug.

Workarounds:

Use the latest @vscode/prompt-renderer instead of the bundled tracer version.

Avoid HTMLTracer for now — JSONTracer still works.

If you need HTML output, manually serve the trace using your own renderer instead of the sample tracer.

So the root cause is not your code — it’s the sample tracer being out of sync with the current VS Code prompt rendering API.