Add agentic task log demo with reusable treebark templates

[Copilot]

Create a demo showing an agentic task log output with alternating chat and execution phases, including chart visualizations of the agent's own execution metrics. Additionally implements reusable treebark templates feature to eliminate template duplication.

Completed Tasks

• All previous tasks completed
• Fix execution phases data structure to use flat arrays instead of nested objects
• Add phase headers directly in markdown text elements
• Split executionPhases into three separate data sources (executionLogs1, executionLogs2, executionLogs3)

Data Structure Fix

Changed from nested structure:

{
  "content": [
    {"phase": "...", "logs": [...]}
  ]
}

To flat arrays:

{
  "content": [
    {"timestamp": "...", "level": "...", "message": "..."}
  ]
}

Phase headers now appear as HTML text elements in markdown, keeping data sources simple and schema-compliant.

Preview

Live Preview: https://microsoft.github.io/chartifact/view/?load=https://raw.githubusercontent.com/microsoft/chartifact/copilot/add-demo-log-output/packages/web-deploy/json/agentic-task-log.idoc.json

Original prompt

Create a demo of a log output of an agentic task. it starts with a chat, then an execution of some work, then maybe another chat etc. you can use treebark for chat bubbles.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[danmarshall]

@copilot my user bubbles arent right-aligned or blue:

[Copilot]

@danmarshall Unfortunately I hit an unexpected error while processing your comment. I've automatically reported this to GitHub.

You can ask me to try again later by mentioning me in a new comment.

If you want to contact GitHub about this error, please mention the following identifier so they can better serve you: f53f37b5-a542-4489-af65-d73f2115716c

Sorry for the inconvenience!

[danmarshall]

@copilot my user bubbles aren't blue or right-aligned:

[Copilot]

@copilot my user bubbles aren't blue or right-aligned:

Fixed in commit 23dbc8c. The issue was:

1. Treebark template was using $concat syntax instead of direct template strings - changed to "chat-bubble bubble-{{type}}"
2. User bubble sender text was blue instead of white - changed to rgba(255,255,255,0.9) for visibility on blue background

User bubbles are now properly styled with blue background, right-aligned, and white text.

[danmarshall]

@copilot nice work! can you also envision a job where some work is best visualized as a chart?

[Copilot]

@copilot nice work! can you also envision a job where some work is best visualized as a chart?

Added chart visualizations in commit 9222ce3. The demo now includes:

Regional Revenue Analysis - Bar chart showing revenue by region (North: $950K, South: $850K, East: $1.1M, West: $1.3M)

Monthly Revenue Trend - Line chart displaying Q4 progression (Oct: $1.2M → Nov: $1.4M → Dec: $1.6M)

The charts appear after the assistant's analysis phase, demonstrating how agentic work can be visualized with actual data charts in Chartifact.

[danmarshall]

@copilot whatvisualizations did you add? they should actually be something the agent itself did. so lets find some way to chart some kind of thing the agent did.

[Copilot]

@copilot whatvisualizations did you add? they should actually be something the agent itself did. so lets find some way to chart some kind of thing the agent did.

Changed in commit af9d770. The charts now show what the agent itself did during execution:

Execution Time by Phase - Bar chart showing time spent: Data Loading (6s), Analysis (13s), Report Generation (13s)

Log Activity Over Time - Line chart showing cumulative log entries produced by the agent as it worked (18 total logs across ~4 minutes)

The visualizations now track the agent's own performance and activity patterns, not the business data it analyzed.

[danmarshall]

@copilot this is great work, and it highlights a need for Treebark templates to be reusable within a document. Give me 3 proposals for how we might go about this. Think of the problem/solution like an architect. Mostly, we should be concerned about the ergonomics from the markdown flavor. (In JSON, I think its straightforward, we would use the resources section).

[Copilot]

@copilot this is great work, and it highlights a need for Treebark templates to be reusable within a document. Give me 3 proposals for how we might go about this. Think of the problem/solution like an...

Here are 3 architectural proposals for reusable Treebark templates:

Proposal 1: Named Template References (Recommended)

Problem: Template duplication leads to maintenance burden and verbosity.

Solution: Store templates in resources.templates and reference them by name.

JSON syntax:

{
  "resources": {
    "templates": {
      "chatBubble": {
        "div": {
          "class": "chat-bubble bubble-{{type}}",
          "$children": [...]
        }
      }
    }
  },
  "groups": [{
    "elements": [
      {"type": "treebark", "templateRef": "chatBubble", "variableId": "chatMessages"}
    ]
  }]
}

Markdown syntax (fenced block with template reference):

:::treebark{template=chatBubble data=chatMessages}
:::

Pros: Clean separation, easy to maintain, mirrors chart pattern
Cons: Requires new templateRef property

---

Proposal 2: Inline Template Definition with Reuse

Problem: First use requires full template, subsequent uses are verbose.

Solution: First treebark element with an id defines template, later elements reference it.

JSON syntax:

{"type": "treebark", "templateId": "chat", "variableId": "chatMessages", "template": {...}},
{"type": "treebark", "templateId": "chat", "variableId": "chatMessages2"}

Markdown syntax:

:::treebark{id=chat data=chatMessages}
```json
{"div": {...}}

:::

:::treebark{template=chat data=chatMessages2}
:::

**Pros**: No resources section needed, progressive enhancement  
**Cons**: Order-dependent, less explicit

---

## Proposal 3: Template Inheritance/Mixins

**Problem**: Templates often need slight variations.

**Solution**: Templates can extend/override base templates.

**JSON syntax**:
```json
{
  "resources": {
    "templates": {
      "baseLog": {"div": {"class": "execution-log", "$children": [...]}},
      "phaseLog": {"extends": "baseLog", "overrides": {"h3": {"$children": ["{{title}}"]}}}
    }
  }
}

Markdown syntax:

:::treebark{extends=baseLog title="Phase 1"}
:::

Pros: Maximum flexibility, DRY for variations
Cons: Most complex to implement and understand

---

Recommendation: Proposal 1 for clearest ergonomics. The resources section already exists for charts, making this pattern familiar. Markdown syntax :::treebark{template=name data=variable} is concise and declarative.

[danmarshall]

@copilot ok now the schema changes we made need to be codified into the compiler package's validation.

[Copilot]

@copilot ok now the schema changes we made need to be codified into the compiler package's validation.

Updated in commit e3cacf9. The compiler validation now enforces:

• Either template, setTemplate, or getTemplate required
• setTemplate and getTemplate are mutually exclusive
• setTemplate requires template property
• getTemplate should not have template property
• template can be object or string
• setTemplate and getTemplate must be strings

Updated file: packages/compiler/src/validate/element.ts

[danmarshall]

@copilot we also might need to relax the validation for the new rules, I'm getting "Treebark element must have a template property"

[Copilot]

@copilot we also might need to relax the validation for the new rules, I'm getting "Treebark element must have a template property"

Fixed in commit 2299b47. Reordered the validation checks so that:

1. setTemplate/getTemplate specific validations run first
2. The general "must have at least one of template/setTemplate/getTemplate" check runs last

This prevents the confusing "must have a template property" error when using getTemplate, since the more specific validation for getTemplate will catch the issue if there's a problem with the getTemplate usage specifically.

[danmarshall]

@copilot can you demonstrate the new reusable template in the primer doc 11.treebark.idoc

[Copilot]

@copilot can you demonstrate the new reusable template in the primer doc 11.treebark.idoc

Added in commit 583e076. The primer document now includes a new "Reusable Templates" section demonstrating:

• SET operation: setTemplate: "memberCard" with full template definition
• GET operation: getTemplate: "memberCard" to reuse the template
• Benefits explanation: DRY principle, maintainability, pure presentation, clear intent

The example uses the existing teamMembers data and shows how the same template can be registered once and reused multiple times with the same or different data sources.

[danmarshall]

@copilot thanks. Now it seems the compiler isnt outputting the new properties.

[Copilot]

@copilot thanks. Now it seems the compiler isnt outputting the new properties.

Fixed in commit 5f5b6db. Added setTemplate and getTemplate to the compiler's JSON-to-markdown serialization in packages/compiler/src/json-to-markdown/element.ts. The compiler now properly outputs these properties when converting JSON documents to markdown format.

[danmarshall]

@copilot the page isnt working. I think its because youre data loaders are objects not arrays. just make them arrays. we can just print the phase in the markdown.

[Copilot]

@copilot the page isnt working. I think its because youre data loaders are objects not arrays. just make them arrays. we can just print the phase in the markdown.

Fixed in commit 3f0e8c7. Changed execution phases from nested objects to flat arrays, and moved phase headers to markdown text elements instead of including them in the data. Now uses proper array structure for all data sources as required by the schema.

@copilot the page isnt working. I think its because youre data loaders are objects not arrays. just make them arrays. we can just print the phase in the markdown.

Fixed in commit 1f3d7c2. Changed execution phases from nested objects with {phase, logs} structure to flat arrays of log entries. Phase headers are now rendered as HTML text elements in markdown (using <div class="phase-indicator">) instead of being in the data. This keeps all data sources as simple arrays as required by the schema.