check-ui

---
name: check-ui
description: "Audit Python-to-JavaScript UI bindings for Gradio _js calls, global window exposure, and ui/globals.d.ts registration."
argument-hint: "Optionally focus on a specific extension or module path"
---

# Check Python-JavaScript UI Bindings

Audit SD.Next UI integration points where Python uses Gradio `_js=...` bindings to call JavaScript. Verify each JavaScript callback is exposed on the global `window` object and included in `ui/globals.d.ts`.

## When To Use

- The user changes or reviews Python UI code under `modules/`, `scripts/`, or `extensions/` with `_js=` callbacks.
- A UI integration bug involves Python-triggered JavaScript functions.
- You need to validate UI contract consistency for Gradio-bound JS methods.
- User adds or updates extension with JavaScript code in `extensions/*/javascript`.

## Guidance

- Consult `.github/instructions/core.instructions.md` for relevant core runtime guidance before proceeding.

## Primary Files

- `ui/globals.d.ts`
- `wiki/Dev-UI.md`
- `modules/**` and `scripts/**` Python files that declare `_js=` values
- `extensions/*/javascript/**` TypeScript/JavaScript source files

## Secondary Files To Inspect

- `ui/**/*.ts`
- `extensions-builtin/sdnext-modernui/src/**/*.ts`
- `extensions-builtin/sdnext-kanvas/src/**/*.ts`
- `extensions-builtin/sdnext-kanvas/javascript/kanvas.mjs`

## Audit Goals

For every Python `_js` usage, confirm:

1. The referenced JS callback exists in code.
2. The callback is assigned to `window.<name>` or otherwise accessible as a global function.
3. The callback name is declared in `ui/globals.d.ts`.
4. JavaScript-only methods called from Python are not implemented only as module-local exports.

For all extension JavaScript code under `extensions/*/javascript`, confirm:

- No missing JS callback registrations for Python-bound names.
- Global names are only used for Python bindings, not for code that should instead be imported.
- `ui/globals.d.ts` remains the source of truth for Python-visible UI globals.

## Procedure

### 1. Enumerate Python `_js=` Bindings

- Search `modules/`, `scripts/`, and `extensions/` for `_js=` occurrences.
- Capture the literal callback string values, including direct names and arrow-function expressions.
- For formatted strings, enumerate all possible callback names generated by the formatting pattern.
- Flag dynamic cases where the callback cannot be statically resolved.

This is the most complex part as `_js` can be assigned a direct string, a formatted string, or an inline function. Focus on extracting the intended callback name(s) for verification in the next steps.

Examples:

```python
_js="send_to_kanvas"
_js=f"switch_to_{binding.tabname}"
_js=f'(x, y, i, j) => [x, y, ...selected_gallery_files("{tabname}")]'
_js='() => gallerySort("name")'
```

### 2. Enumerate any additional Extension JavaScript Sources

- Review `extensions/*/javascript`, `extensions-builtin/*/src`, and the specific entry point `extensions-builtin/sdnext-kanvas/javascript/kanvas.mjs` for functions that attach to `window`.
- Confirm extension source files are the authoritative implementation, not generated build artifacts.
- Validate that any new JS entry points are registered by package build or extension initialization.

### 3. Verify JavaScript Exposure

- Search `ui/`, `extensions-builtin/sdnext-modernui/src/`, `extensions-builtin/sdnext-kanvas/src/`, and `extensions/*/javascript/` for each callback name.
- Confirm the callback is attached to `window` as `window.<name> = ...` or equivalent.
- If the callback is an inline function string like `() => quickSaveStyle()`, ensure the referenced helper exists and any helper used for Python integration is also globally available if needed.

### 4. Check TypeScript Declarations

- Open `ui/globals.d.ts` and verify each Python-visible global callback name is declared.
- Confirm the declaration shape is compatible with its usage if type annotations are present.
- If an extension exposes its own additional global helpers, verify the declaration file is updated accordingly.

### 5. Propose Fixes for Any Issues Found

- For missing global registrations, add `window.<name> = <function>` in the appropriate JavaScript source file.
- For missing `ui/globals.d.ts` entries, add a declaration like `declare global { function <name>(...args: any[]): any; }` with appropriate types if possible.

### 6. Run UI Typecheck and Lint tests

- Run `pnpm eslint` to ensure there are no linting errors.
- Run `pnpm tsc` to ensure there are no type errors, which can catch missing or mismatched declarations.
- Run `pnpm build` to ensure the extension builds correctly with the new or updated JavaScript code.

And fix any issues that arise from these checks.

## Reporting Format

Report findings with:

- Python file and `_js` reference
- JavaScript location and global registration status
- `ui/globals.d.ts` declaration status
- Severity: missing global, missing declaration, stale declaration, or dynamic/ambiguous binding

If no issues are found, state that the Python/JS UI binding audit is clear and mention whether any dynamic `_js` strings remain unresolved.

## Output Expectations

When this skill is used, return:

- Total `_js` bindings inspected
- Total missing or invalid global registrations
- Total missing or stale `ui/globals.d.ts` entries
- Summary of any ambiguous `_js` cases that require manual review
- A short summary of whether the UI binding contract is intact

More agent context in vladmandic/sdnext

20 other files this repository gives its agents.