Page Comparison

...

It also provides a small set of APIs (/api) and two developer web pages. Web pages are in the public folder of the pico-engine GitHub repository.

The developer pages include "the UI" (/index.html) and the "Engine Rulesets" (/rulesets.html). This document explains how the UI page works.

...

1. Write the HTML for the content of the new tab, as a Handlebars template, and add it to /index.html. A glance at this file will show that this has been done several times. Over time, the number of Handlebar templates has increased, and they are basically in the order they were added (as opposed to the order they appear in the horizontal tab list).
2. Add an li entry into the horizontal menu of the UI template (still within the /index.html file). Only the tab names listed in the ul of lines 115-124 will be shown when the developer clicks on a pico.
3. Add a line of JS to /js/index.js to compile your new Handlebars template. This will be like the existing lines 75-85.
4. Add a branch to the if-then-else switch in the specDB function of /js/index.js including code to obtain the information you need to render your tab UI.
5. Add a branch to the if-then-else switch in the renderTab function of /js/index.js including code to apply your Handlebars template (created in step 3) to the data (created by the code added in step 4).
6. Add any needed styles to /css/index.css for your tab UI.

For an example, look at the few dozen commits starting with "start Agent tab" in the history of changes to /index.html. See also the recent change which made the use of Handlebars much clearer (and matches what is documented here).