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:

_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