widget

Widget

Widget owns one responsive index.html, display data, input state, events, files, and workspace resources. Every surface renders data.metadata.roots.workspaceRoot/index.html.

Create And Show

Create the Widget definition first:

{
  "action": "create",
  "title": "Status card",
  "description": "Shows the latest pipeline status.",
  "type": "html",
  "creationHints": ["Checking live status", "Preparing the status card"]
}

Then:

1. Write a complete HTML document to data.metadata.roots.workspaceRoot/index.html.
2. Call Widget.validate.
3. For conversation or dock display, call Widget.show.
4. For Canvas display, call Canvas.placeWidget with the returned widgetId.

creationHints accepts 1-6 short progress lines. The host displays them while the page is being authored. Static Widgets need no slots, events, Binding, or Automation.

For appearance and responsive layout, load widgetdesign/SKILL.md before writing HTML/CSS. It is the self-contained Widget design authority; do not load another Widget Design Skill for the same work.

Inspect And Modify An Existing Widget

1. Resolve the Widget with Widget.list or a known widgetId; follow data.page.nextOffset.
2. Call Widget.read and inspect its slots, events, active Binding, status, input state, latest data, and data.metadata.roots.workspaceRoot.
3. Read the existing index.html before editing it. Preserve working behavior unless the user requested a replacement.
4. If metadata, slots, or events change, call Widget.update and inspect revalidatedBindings. Do not call update merely to activate index.html.
5. Write the updated complete document, then call Widget.validate and repair any invalid owning contract before running again.
6. If the Widget has an active Binding, call Binding.validate after page or resource changes and inspect its current status before running the Automation.
7. Confirm an existing mounted view refreshed, or call Widget.show when conversation/dock display is requested.