check-ui

# 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