Space Widgets

Use this skill for widget work in the current open space

storage

• ~/spaces//space.yaml = space meta + live layout
• ~/spaces//widgets/.yaml = widget meta + renderer
• ~/spaces//data/ and assets/ = widget-owned files
• ~/spaces//scripts/ = current-space shared JS modules loaded through context.import("scripts/...")

transient

• Current Space Widgets in _____transient lists id|name|col|row|cols|rows|state|render status
• Current Widget appears after patchWidget(), renderWidget(), or reloadWidget()
• Current Widget is one envelope with rendered↓ for stripped live HTML and source↓ for the numbered readback

main helpers

• listWidgets()
• readWidget(id)
• seeWidget(id, full=false)
• patchWidget(id, { name?, cols?, rows?, col?, row?, metadata?, edits? })
• renderWidget({ id, name, cols, rows, metadata?, renderer })
• reloadWidget(id)
• reposition(), removeWidget(...), removeWidgets(...), removeAllWidgets()
• rearrangeWidgets(...), toggleWidgets(...), repairLayout(), rearrange(), reload(options?)

catalog and readback

• Prefer space.current.* for widget work in the current open space
• Current Space Widgets is the live layout summary. Use it before rediscovering ids manually
• Use listWidgets() when you need the compact widget catalog. It returns: widgets (id|name|description)↓ example|Example|expanded, 4x3 widget
• That catalog is plain text, not JSON. Do not expect widgets, items, or other object fields from it
• If the user already named the target widget clearly, for example snake, tetris, or minesweeper, do not ask which widget. Read that widget directly by id or display name
• On the next turn, read the visible id row directly, for example snake-game|Snake|... means use readWidget("snake-game")
• Use that id for readWidget(), seeWidget(), patchWidget(), and reloadWidget(). Name is fallback only
• readWidget() returns the numbered source directly in _____framework result↓
• when widget YAML carries metadata, readWidget() includes a compact metadata: ... line before renderer↓
• seeWidget() returns the current rendered widget HTML directly in _____framework result↓
• seeWidget(id) strips script/style tags, inline handlers, class lists, ids, and data attrs by default
• Use seeWidget(id, true) only when you explicitly need the full live innerHTML
• Current Widget format after a write or reload↓ rendered↓

source↓ id: example name: Example cols: 4 rows: 3 renderer↓ 0 async (parent, currentSpace, context) => { 1 console.log("hello"); 2 }

• Patch numbers come only from numbered renderer lines after renderer↓ inside source↓
• Do not copy displayed line numbers into patch content
• In prepared input, optional example turns may appear before live history, _user = human, _framework = runtime output, and _transient = trailing current-space widget context

staged turns

• listWidgets(), readWidget(), and seeWidget() are discovery calls. If the next step depends on them, end the execution there
• If Current Space Widgets or _____framework already showed the widget id you need, skip another discovery call and move to the next step
• After readWidget() or seeWidget(), patch on the next turn, not in the same JS block
• After patchWidget(), renderWidget(), or reloadWidget(), use the refreshed Current Widget on the next turn if another edit is needed: rendered↓ for what mounted and source↓ for the next patch
• Start every execution block with one short sentence saying the immediate step
• Put that sentence on its own line. Then put _javascript alone on the next line
• Do not execute silently
• Do not send only a staging sentence such as Checking widget source or Loading widget source. If you announce a widget read, list, patch, reload, or render step, the same message must execute it
• After a successful patch or render that satisfies the request, stop and answer normally. Do not keep making more visual tweaks unless the user asked for another iteration or the runtime reported failure
• After a successful patch or render, the next assistant turn should usually be the final user-facing answer. Do not output another promise line such as Updating... or Applying... without execution
• Never answer with raw JS or a code fence after a widget error. Either send a proper execution message or a normal user-facing answer