Add agentic task log demo with chat bubbles, execution phases, and agent execution metrics

[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.

Completed Tasks

• Create JSON document structure for agentic task log demo
• Design chat bubble styles using CSS for user/assistant messages
• Create treebark template for chat bubbles
• Add execution log sections between chat phases
• Add sample data showing multi-phase task execution
• Style execution logs with monospace font and appropriate coloring
• Test and validate JSON against schema
• Generate visual preview/screenshot
• Verify rendering in browser
• Fix user bubble styling (blue background, right-aligned, white text)
• Add chart visualizations showing agent execution metrics

Latest Changes (commit: showing agent execution metrics)

Enhanced the demo to include chart visualizations that track the agent's own execution metrics:

1. Execution Time by Phase Chart: Bar chart showing time spent by the agent in each phase (Data Loading: 6s, Analysis: 13s, Report Generation: 13s)
2. Log Activity Over Time Chart: Line chart displaying cumulative log entries produced by the agent during execution (18 logs across ~4 minutes)

These charts visualize what the agent itself did - its performance and activity patterns - rather than the business data it analyzed. This demonstrates agent observability and monitoring.

Demo Features

The demo showcases a realistic agentic task workflow with:

Chat Bubbles (using Treebark)

• User messages: Blue bubbles (#007bff) aligned to the right with white text ✓
• Assistant messages: Gray bubbles (#e9ecef) aligned to the left with dark text ✓
• Smooth fade-in animations
• Sender labels for clarity
• Support for multi-line messages with proper formatting

Execution Logs

• Dark theme terminal-style logs with monospace font
• Color-coded log levels:
  • Info (cyan): Standard operations
  • Success (green): Completed operations
  • Warning (orange): Cautions
  • Error (red): Failures
• Timestamps for each log entry
• Phase headers with icons for visual organization

Agent Execution Metrics 🤖

• Execution Time by Phase: Bar chart showing time spent in each execution phase
• Log Activity Over Time: Line chart showing cumulative log output progression
• Charts visualize the agent's own performance and activity, not the business data
• Demonstrates agent observability and monitoring capabilities

Task Flow

The demo simulates a Q4 sales analysis task with 3 execution phases:

1. Data Loading & Validation: Loading CSV, validation checks (6 seconds, 5 operations)
2. Analysis & Visualization: Regional analysis, chart generation (13 seconds, 7 operations)
3. Report Generation: PDF compilation and export (13 seconds, 6 operations)

Summary Statistics

• Total execution time: 4:20
• Number of execution phases: 3
• Data volume processed: 15.2K rows
• Completion status: ✓

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

Screenshots:

Chat bubbles working correctly:

With agent execution metrics charts:

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.