@redstone-labs/redkit-ai.visual-responses

Shared widget code of the visual-responses agent skill: tree, graph, recap and status widgets. In a widget, the model writes only a placeholder, its data and one script tag:

<div data-vr="tree"></div>
<script>var DATA = { title: '…', root: { … } };</script>
<script src="https://cdn.jsdelivr.net/npm/@redstone-labs/[email protected]/dist/vr.js"></script>

Placeholders: tree, graph, recap, status. Data variables: DATA (tree, graph), RECAP, STATE. Set var VZ_LANG = 'en' for English labels. The data format is documented in plugin/skills/visual-responses/references/.

How CDN mode works

• A fragment is <div data-vr="…"> placeholders, one data script, and the vr.js script tag from jsDelivr at an exact version.
• vr.js injects the CSS once (core, layers, widgets), replaces the placeholders with the markup, and runs the renderers. It loads cytoscape on demand and applies the English labels when VZ_LANG = 'en'.
• If the script fails to load, an onerror message tells the person to ask « sans CDN ». The model then falls back to inline mode, which is still fully documented in the references.
• The skill switches itself: SKILL.md's CDN version: line is written when the version is bumped, and the tagged tree is tested again before anything is published.

Development

bun install, then bun run test. See AGENTS.md.

License

AGPL-3.0-only. Copyright Redstone Labs.