Add agentic task log demo with reusable treebark templates #145

Original file line number	Diff line number	Diff line change
Expand Up		@@ -306,7 +306,7 @@ function groupMarkdown(group: ElementGroup, variables: Variable[], vegaScope: Ve
		break;
		}
		case 'treebark': {
	const { template, data, variableId } = element;
	const { template, data, variableId, setTemplate, getTemplate } = element;
		const treebarkSpec: Plugins.TreebarkSpec = {
		template,
		};
Expand All		@@ -316,6 +316,12 @@ function groupMarkdown(group: ElementGroup, variables: Variable[], vegaScope: Ve
		if (variableId) {
		treebarkSpec.variableId = variableId;
		}
	if (setTemplate) {
	treebarkSpec.setTemplate = setTemplate;
	}
	if (getTemplate) {
	treebarkSpec.getTemplate = getTemplate;
	}
		addSpec('treebark', treebarkSpec);
		break;
		}
Expand Down

43 changes: 38 additions & 5 deletions packages/compiler/src/validate/element.ts

Show comments View file Open in desktop

Original file line number	Diff line number	Diff line change
Expand Up		@@ -137,11 +137,34 @@ export async function validateElement(element: PageElement, groupIndex: number,
		case 'treebark': {
		const treebarkElement = element as TreebarkElement;

	// Template is required
	if (!treebarkElement.template) {
	errors.push('Treebark element must have a template property');
	} else {
	errors.push(...validateOptionalObject(treebarkElement.template, 'template', 'Treebark'));
	// Validate: setTemplate and getTemplate are mutually exclusive (check first)
	if (treebarkElement.setTemplate && treebarkElement.getTemplate) {
	errors.push('Treebark element cannot have both setTemplate and getTemplate');
	}

	// Validate: setTemplate requires template
	if (treebarkElement.setTemplate && !treebarkElement.template) {
	errors.push('Treebark element with setTemplate must have a template property');
	}

	// Validate: getTemplate should not have template
	if (treebarkElement.getTemplate && treebarkElement.template) {
	errors.push('Treebark element with getTemplate should not have a template property (it references an existing template)');
	}

	// Validate: at least one of template, setTemplate, or getTemplate must be present
	// (Check this after setTemplate/getTemplate-specific validations to avoid confusing messages)
	if (!treebarkElement.template && !treebarkElement.setTemplate && !treebarkElement.getTemplate) {
	errors.push('Treebark element must have at least one of: template, setTemplate, or getTemplate');
	}

	// Validate template if present - can be object or string
	if (treebarkElement.template !== undefined) {
	if (typeof treebarkElement.template !== 'object' && typeof treebarkElement.template !== 'string') {
	errors.push('Treebark element template must be an object or a string');
	} else if (typeof treebarkElement.template === 'object' && treebarkElement.template !== null) {
	errors.push(...validateOptionalObject(treebarkElement.template, 'template', 'Treebark'));
	}
		}

		// Validate data if present
Expand All		@@ -153,6 +176,16 @@ export async function validateElement(element: PageElement, groupIndex: number,
		if (treebarkElement.variableId) {
		errors.push(...validateVariableID(treebarkElement.variableId));
		}

	// Validate setTemplate if present
	if (treebarkElement.setTemplate) {
	errors.push(...validateRequiredString(treebarkElement.setTemplate, 'setTemplate', 'Treebark'));
	}

	// Validate getTemplate if present
	if (treebarkElement.getTemplate) {
	errors.push(...validateRequiredString(treebarkElement.getTemplate, 'getTemplate', 'Treebark'));
	}

		break;
		}
Expand Down

117 changes: 70 additions & 47 deletions packages/markdown/src/plugins/treebark.ts

Show comments View file Open in desktop

Original file line number	Diff line number	Diff line change
		@@ -1,57 +1,26 @@
		/**
	* Copyright (c) Microsoft Corporation.
	* Licensed under the MIT License.
	*/

	/*
	* Treebark Plugin - Renders cards and structured HTML using Treebark templates
	*
	* USAGE EXAMPLES:
	*
	* 1. Static Data:
	* ```treebark
	* {
	* "template": {
	* "div": {
	* "class": "card",
	* "$children": ["Hello {{name}}!"]
	* }
	* },
	* "data": { "name": "World" }
	* }
	* ```
	*
	* 2. Dynamic Data via Signal (data source → cards):
	* ```treebark
	* {
	* "template": {
	* "div": {
	* "class": "card",
	* "$bind": ".",
	* "$children": [
	* { "h3": "{{Title}}" },
	* { "p": "{{Director}}" }
	* ]
	* }
	* },
	* "variableId": "movieData"
	* }
	* ```
	*/
	* Copyright (c) Microsoft Corporation.
	* Licensed under the MIT License.
	*/

	/**
	* Treebark Plugin - Renders cards and structured HTML using Treebark templates
	*/

		import { Plugin, RawFlaggableSpec, IInstance } from '../factory.js';
		import { ErrorHandler } from '../renderer.js';
		import { flaggablePlugin } from './config.js';
		import { pluginClassName } from './util.js';
		import { PluginNames } from './interfaces.js';
		import { TreebarkElementProps } from '@microsoft/chartifact-schema';
	import { renderToDOM } from 'treebark';
	import { renderToDOM, TemplateElement } from 'treebark';

		interface TreebarkInstance {
		id: string;
		spec: TreebarkElementProps;
		container: Element;
		lastRenderedData: string;
	resolvedTemplate: TemplateElement;
		}

		export interface TreebarkSpec extends TreebarkElementProps { }
Expand All		@@ -63,10 +32,34 @@ function inspectTreebarkSpec(spec: TreebarkSpec): RawFlaggableSpec<TreebarkSpec>
		const reasons: string[] = [];
		let hasFlags = false;

	// Validate template
	if (!spec.template \|\| typeof spec.template !== 'object') {
	// Validate: either template, setTemplate, or getTemplate must be present
	if (!spec.template && !spec.setTemplate && !spec.getTemplate) {
	hasFlags = true;
	reasons.push('Either template, setTemplate, or getTemplate is required');
	}

	// Validate: setTemplate and getTemplate are mutually exclusive
	if (spec.setTemplate && spec.getTemplate) {
	hasFlags = true;
	reasons.push('setTemplate and getTemplate cannot both be specified');
	}

	// Validate: setTemplate requires template
	if (spec.setTemplate && !spec.template) {
		hasFlags = true;
	reasons.push('template must be an object');
	reasons.push('setTemplate requires template to be provided');
	}

	// Validate: getTemplate should not have template
	if (spec.getTemplate && spec.template) {
	hasFlags = true;
	reasons.push('getTemplate should not have template (it references an existing template)');
	}

	// If template is provided, it must be object or string
	if (spec.template && typeof spec.template !== 'object' && typeof spec.template !== 'string') {
	hasFlags = true;
	reasons.push('template must be an object or a string');
		}

		// If both data and variableId are provided, warn but allow it
Expand All		@@ -84,8 +77,11 @@ function inspectTreebarkSpec(spec: TreebarkSpec): RawFlaggableSpec<TreebarkSpec>
		export const treebarkPlugin: Plugin<TreebarkSpec> = {
		...flaggablePlugin<TreebarkSpec>(pluginName, className, inspectTreebarkSpec),
		hydrateComponent: async (renderer, errorHandler, specs) => {
	const { signalBus } = renderer;
	const { signalBus, document } = renderer;
		const treebarkInstances: TreebarkInstance[] = [];

	// Template registry: starts empty, adds inline-defined templates during hydration
	const templateRegistry: Record<string, TemplateElement> = {};

		for (let index = 0; index < specs.length; index++) {
		const specReview = specs[index];
Expand All		@@ -98,6 +94,32 @@ export const treebarkPlugin: Plugin<TreebarkSpec> = {
		}

		const spec = specReview.approvedSpec;

	let resolvedTemplate: TemplateElement;

	// Explicit SET/GET semantics
	if (spec.setTemplate) {
	// SET: Register and use the template
	templateRegistry[spec.setTemplate] = spec.template;
	resolvedTemplate = spec.template;
	} else if (spec.getTemplate) {
	// GET: Lookup the template
	resolvedTemplate = templateRegistry[spec.getTemplate];
	if (!resolvedTemplate) {
	container.innerHTML = `<div class="error">Template '${spec.getTemplate}' not found</div>`;
	errorHandler(
	new Error(`Template '${spec.getTemplate}' not found`),
	pluginName,
	index,
	'resolve',
	container
	);
	continue;
	}
	} else {
	// INLINE: Use template directly (can be object or string)
	resolvedTemplate = spec.template;
	}

		// Create container for the rendered content
		container.innerHTML = `<div class="treebark-loading">Loading...</div>`;
Expand All		@@ -107,6 +129,7 @@ export const treebarkPlugin: Plugin<TreebarkSpec> = {
		spec,
		container,
		lastRenderedData: null,
	resolvedTemplate,
		};
		treebarkInstances.push(treebarkInstance);

Expand Down Expand Up		@@ -155,7 +178,7 @@ async function renderTreebark(
		errorHandler: ErrorHandler,
		index: number
		) {
	const { spec, container } = instance;
	const { container, resolvedTemplate } = instance;

		try {
		// Create a stable key for caching based on data content
Expand All		@@ -166,9 +189,9 @@ async function renderTreebark(
		return;
		}

	// Render using treebark
	// Render using treebark with resolved template
		const html = renderToDOM({
	template: spec.template,
	template: resolvedTemplate,
		data: data as any,
		});

Expand Down

8 changes: 7 additions & 1 deletion packages/schema-doc/src/interactive.ts

Show comments View file Open in desktop

Original file line number	Diff line number	Diff line change
Expand Up		@@ -147,11 +147,17 @@ export interface TreebarkElement extends TreebarkElementProps {

		export interface TreebarkElementProps extends OptionalVariableControl {
		/** Treebark template object for rendering HTML structure */
	template: TemplateElement;
	template?: TemplateElement;

		/** Static data object (optional) */
		data?: object;

	/** Register a template with this name for reuse (SET operation) */
	setTemplate?: string;

	/** Use a previously registered template by name (GET operation) */
	getTemplate?: string;

		/** Dynamic option: variableId to intake a signal and behave as data */
		}

Expand Down

2 changes: 1 addition & 1 deletion packages/schema-doc/src/page.ts

Show comments View file Open in desktop

Original file line number	Diff line number	Diff line change
Expand Up		@@ -31,7 +31,7 @@ export interface InteractiveDocument {
		style?: PageStyle;

		resources?: {
	charts?: { [chartKey: string]: Vega_or_VegaLite_spec }
	charts?: { [chartKey: string]: Vega_or_VegaLite_spec };
		};

		/** Optional comments from the author */
Expand Down

Navigation Menu

Search code, repositories, users, issues, pull requests...

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Add agentic task log demo with reusable treebark templates #145

Are you sure you want to change the base?

Uh oh!

Add agentic task log demo with reusable treebark templates #145

Filter by extension

Uh oh!

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!