`; chips in `
`. + - Extension `comfyassets.ModelResolutionPicker` in `web/model_resolution_picker.js`: `beforeRegisterNodeDef` for `nodeData.name === 'ModelResolutionPicker'`; in `onNodeCreated`: `this.setSize([340, 600])`, create scope, mount view with `this.addDOMWidget('resolution_picker', 'div', view.element, { serialize: false, hideOnZoom: false, getMinHeight: () => 320 })`, `mountTheme`, `this.swapDimensions = () => { swapDimensions(this, app); render(); }`, `this.createSwapButton = () => mountDimensionSwap(this, app)` then call it, wrap the `model`/`width`/`height` widget callbacks to call the original then `render()`, `onRemoved` disposes the scope and preserves the previous hook's return. Families are loaded once per page via a module-level `loadFamilies(api)` promise using `api.fetchApi('/kikotools/model_resolution/families')`; while loading the view renders `disabled: true` with header `Loading sizesβ¦`; on failure header `Sizes unavailable; type width and height` via `setStatus(β¦, true)` and chips stay disabled. Custom-ratio open flag and pending text live on the node instance (`this.resolutionCustom = { open, text }`), never serialized. Wired-in check: `node.inputs?.some(input => input.widget?.name === name && input.link != null)` for `width` or `height` β `disabled: true`, header `Dimensions are wired in`, and the swap button `disabled`. + - Writing a size: set `width.value`/`height.value`, call each widget's `callback(value, app.canvas, node, [0, 0], null)` once, `node.graph?.setDirtyCanvas?.(true, true)`. + +- [ ] **Step 1: Write the failing browser tests** (append to `tests/browser/workflows.spec.mjs`; the fixture host creates text inputs for the initial keys and serves the real route because `node.py` registered it on the stubbed `PromptServer`) + +```js +test('resolution picker renders chips from the families route and writes sizes to native widgets', async ({ page, request }) => { + await openHost(page); + const payload = await (await request.get('/kikotools/model_resolution/families')).json(); + expect(payload.default).toBe('SDXL'); + await createNode(page, 'ModelResolutionPicker', { model: 'SDXL', width: 1024, height: 1024, batch_size: 1 }); + const panel = page.locator('.ca-resolution-picker'); + await expect(panel.getByRole('button', { name: '1:1', exact: true })).toHaveAttribute('aria-pressed', 'true'); + await expect(panel.locator('.ca-resolution-header')).toHaveText('1024 Γ 1024 Β· 1:1 Β· 1.0 MP'); + await panel.getByRole('button', { name: '3:2', exact: true }).click(); + const node = page.locator('[data-node="ModelResolutionPicker"]'); + await expect(node.getByLabel('width', { exact: true })).toHaveValue('1216'); + await expect(node.getByLabel('height', { exact: true })).toHaveValue('832'); + await expect(panel.getByRole('button', { name: '1216 Γ 832', exact: true })).toHaveAttribute('aria-pressed', 'true'); + await expect(panel.getByRole('button', { name: '21:9', exact: true })).toBeEnabled(); + for (const theme of ['light', 'dark']) { + await page.evaluate(theme => document.body.style.setProperty('--bg-color', theme === 'light' ? '#fff' : '#202020'), theme); + await expect(panel).toHaveAttribute('data-ca-theme', theme); + } + expect(await panel.evaluate(element => element.scrollWidth <= element.clientWidth)).toBe(true); +}); + +test('resolution picker mounting is idempotent and removal disposes its scope', async ({ page }) => { + await openHost(page); + const id = await createNode(page, 'ModelResolutionPicker', { model: 'SDXL', width: 1024, height: 1024, batch_size: 1 }); + await page.evaluate(id => { const node = kikoHost.nodes.get(String(id)); node.createSwapButton(); node.createSwapButton(); }, id); + await expect(page.locator('.ca-resolution-picker')).toHaveCount(1); + await expect(page.locator('.ca-dimension-swap')).toHaveCount(1); + const aborted = await page.evaluate(id => { const node = kikoHost.nodes.get(String(id)); kikoHost.removeNode(id); return node.resolutionScope.signal.aborted; }, id); + expect(aborted).toBe(true); + await expect(page.locator('.ca-resolution-picker')).toHaveCount(0); +}); +``` + +- [ ] **Step 2: Run to verify failure** β `npm run --prefix tools/testing test:browser -- --project chromium -g "resolution picker"` β FAIL (no panel) + +- [ ] **Step 3: Implement the view, the CSS and the extension** + +CSS: chips grid `grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px`; active chip and active size use `--ca-accent` background with `#fff` text (same as `.ca-primary`); size list is a single column of full-width buttons; header uses `--ca-muted`; everything inherits the `.ca-tools` tokens so light/dark follow `data-ca-theme`. Expose the scope as `node.resolutionScope` for the disposal test. + +- [ ] **Step 4: Run the browser suite and the JS unit suite** β `npm run --prefix tools/testing test:browser -- --project chromium` and `npm test --prefix tools/testing` β all pass, no page errors + +- [ ] **Step 5: Commit** + +```bash +git add web/views/resolution-picker.js web/model_resolution_picker.js web/ui/controls.css tests/browser/workflows.spec.mjs +git commit -m "feat(model_resolution_picker): add the chip grid panel and extension" +``` + +--- + +### Task 7: Swap, model change, custom ratio, wired-in, route failure; coverage floors + +**Files:** +- Modify: `web/model_resolution_picker.js`, `web/views/resolution-picker.js` (only as the tests demand), `tests/browser/workflows.spec.mjs`, `tools/testing/frontend-coverage-baseline.json` + +**Interfaces:** +- Consumes: Task 6 extension and view; `sizeOnModelChange`, `sizesForRatio`, `parseRatio` (Task 5). + +- [ ] **Step 1: Write the failing browser tests** + +```js +test('resolution picker swap lands on the mirrored chip and entry', async ({ page }) => { + await openHost(page); + await createNode(page, 'ModelResolutionPicker', { model: 'SDXL', width: 1344, height: 768, batch_size: 1 }); + const panel = page.locator('.ca-resolution-picker'); + await page.locator('.ca-dimension-swap').getByRole('button', { name: 'Swap width and height', exact: true }).click(); + await expect(panel.getByRole('button', { name: '9:16', exact: true })).toHaveAttribute('aria-pressed', 'true'); + await expect(panel.getByRole('button', { name: '768 Γ 1344', exact: true })).toHaveAttribute('aria-pressed', 'true'); +}); + +test('resolution picker model change keeps listed sizes or falls back to the chip default', async ({ page }) => { + await openHost(page); + const id = await createNode(page, 'ModelResolutionPicker', { model: 'SDXL', width: 1344, height: 768, batch_size: 1 }); + const node = page.locator('[data-node="ModelResolutionPicker"]'); + await node.getByLabel('model', { exact: true }).fill('HunyuanImage 2.1'); + await node.getByLabel('model', { exact: true }).dispatchEvent('change'); + await expect(node.getByLabel('width', { exact: true })).toHaveValue('2560'); + await expect(node.getByLabel('height', { exact: true })).toHaveValue('1536'); + await expect(page.locator('.ca-resolution-header')).toHaveText('2560 Γ 1536 Β· 16:9 Β· 3.8 MP'); +}); + +test('resolution picker custom ratio field computes tiers and rejects bad input', async ({ page }) => { + await openHost(page); + await createNode(page, 'ModelResolutionPicker', { model: 'Flux.1', width: 1024, height: 1024, batch_size: 1 }); + const panel = page.locator('.ca-resolution-picker'); + await panel.getByRole('button', { name: 'Custom ratio', exact: true }).click(); + const field = panel.getByLabel('Custom ratio', { exact: true }); + await expect(field).toHaveValue('1:1'); + await field.fill('16:10'); await field.press('Enter'); + await expect(panel.getByRole('button', { name: '1296 Γ 816', exact: true })).toBeVisible(); // 1.0 MP, step 16 + await panel.getByRole('button', { name: '1296 Γ 816', exact: true }).click(); + await expect(page.locator('[data-node="ModelResolutionPicker"]').getByLabel('width', { exact: true })).toHaveValue('1296'); + await field.fill('a:b'); await field.press('Enter'); + await expect(panel.locator('.ca-resolution-status')).toHaveText(/Enter a ratio like 16:9/); + await expect(panel.getByRole('button', { name: '1296 Γ 816', exact: true })).toBeVisible(); +}); + +test('wired-in dimensions disable the picker and swap', async ({ page }) => { + await openHost(page); + const id = await createNode(page, 'ModelResolutionPicker', { model: 'SDXL', width: 1024, height: 1024, batch_size: 1 }); + await page.evaluate(id => { const node = kikoHost.nodes.get(String(id)); node.inputs.push({ name: 'width', widget: { name: 'width' }, link: 7 }); node.widgets.find(w => w.name === 'width').callback('1024', kikoHost.app.canvas, node, [0, 0], null); }, id); + const panel = page.locator('.ca-resolution-picker'); + await expect(panel.locator('.ca-resolution-header')).toHaveText('Dimensions are wired in'); + await expect(panel.getByRole('button', { name: '3:2', exact: true })).toBeDisabled(); + await expect(page.locator('.ca-dimension-swap').getByRole('button')).toBeDisabled(); +}); + +test('route failure keeps native widgets usable', async ({ page }) => { + await page.route('**/kikotools/model_resolution/families', route => route.fulfill({ status: 500, body: 'nope' })); + await openHost(page); + await createNode(page, 'ModelResolutionPicker', { model: 'SDXL', width: 1024, height: 1024, batch_size: 1 }); + const panel = page.locator('.ca-resolution-picker'); + await expect(panel.locator('.ca-resolution-status')).toHaveText('Sizes unavailable; type width and height'); + await expect(panel.getByRole('button', { name: '1:1', exact: true })).toBeDisabled(); + await page.locator('.ca-dimension-swap').getByRole('button').click(); + await expect(page.locator('[data-node="ModelResolutionPicker"]').getByLabel('width', { exact: true })).toHaveValue('1024'); +}); +``` + +The 500 response must not be counted as a page error: the fixture's `afterEach` collects responses β₯ 500, so this test registers its route before `openHost` and removes the 500 URL from `page.errors` at the end (`page.errors = page.errors.filter(e => !e.includes('families'))`). + +- [ ] **Step 2: Run to verify failure** β `npm run --prefix tools/testing test:browser -- --project chromium -g "resolution picker|wired-in|route failure"` β the new tests FAIL + +- [ ] **Step 3: Implement the remaining behavior** β model-change handler uses `sizeOnModelChange`; custom field uses `parseRatio` + `sizesForRatio`, error copy `Enter a ratio like 16:9`; the fixture model widget is a text input, so the extension must listen to the widget callback, not to a ``. + +- [ ] **Step 4: Add coverage floors and run everything frontend** + +Add rows for `model_resolution_picker.js`, `ui/resolution-picker.js`, `views/resolution-picker.js` to `tools/testing/frontend-coverage-baseline.json`, then: +Run: `npm test --prefix tools/testing && npm run --prefix tools/testing test:browser -- --project chromium && npm run --prefix tools/testing test:coverage` +Expected: all pass; set each new row to the measured values rounded down to the nearest whole percent (never below 80 for lines/statements). + +- [ ] **Step 5: Commit** + +```bash +git add web/model_resolution_picker.js web/views/resolution-picker.js tests/browser/workflows.spec.mjs tools/testing/frontend-coverage-baseline.json +git commit -m "feat(model_resolution_picker): model change, custom ratio, wired-in and failure handling" +``` + +--- + +### Task 8: Real-host coverage (both renderers, workflow round-trip) + +**Files:** +- Create: `tests/comfyui/host-setup.mjs`, `tests/comfyui/resolution-picker.spec.mjs` +- Modify: `tests/comfyui/image-browser.spec.mjs:1-60` (import the shared `beforeEach` instead of its inline copy) + +**Interfaces:** +- Produces: `installHost(test, expect)` in `host-setup.mjs` that registers exactly the existing `beforeEach` (versions check, fixture reset, route proxying, settings override, extension filter, `app.graph.clear()`), with `/kikotools/model_resolution/` added to the list of prefixes proxied to the fixture server so the route is deterministic. + +- [ ] **Step 1: Extract the shared setup and confirm the existing spec still passes** + +Run: `KIKO_COMFY_ROOT=β¦ npm run --prefix tools/testing test:comfyui` (or against `KIKO_COMFY_URL`; see `TESTING.md`). Expected: unchanged results for `image-browser.spec.mjs`. + +- [ ] **Step 2: Write the failing real-host test** (mirrors the sibling swap test at `image-browser.spec.mjs:61-150`) + +```js +test('resolution picker survives renderers, swap, themes and workflow reload', async ({ page }, testInfo) => { + await page.evaluate(async () => { const { app } = await import('/scripts/app.js'); const node = LiteGraph.createNode('ModelResolutionPicker'); app.graph.add(node); app.canvas.centerOnNode(node); }); + const panel = page.locator('.ca-resolution-picker'); + await expect(panel.getByRole('button', { name: '1:1', exact: true })).toHaveAttribute('aria-pressed', 'true'); + await panel.getByRole('button', { name: '16:9', exact: true }).click(); + for (const renderer of [false, true, false]) { + await page.evaluate(async renderer => { const { app } = await import('/scripts/app.js'); await app.ui.settings.setSettingValue('Comfy.VueNodes.Enabled', renderer); }, renderer); + await expect.poll(() => page.evaluate(() => LiteGraph.vueNodesMode)).toBe(renderer); + await expect(panel).toHaveCount(1); + await page.locator('.ca-dimension-swap').getByRole('button', { name: 'Swap width and height', exact: true }).click(); + } + await expect(panel.getByRole('button', { name: '9:16', exact: true })).toHaveAttribute('aria-pressed', 'true'); // three swaps from 16:9 + for (const theme of ['light', 'dark']) { + await page.evaluate(async theme => { const { app } = await import('/scripts/app.js'); await app.ui.settings.setSettingValue('Comfy.ColorPalette', theme); }, theme); + await expect(panel).toHaveAttribute('data-ca-theme', theme); + await page.screenshot({ path: testInfo.outputPath(`ModelResolutionPicker-${theme}.png`) }); + } + const restored = await page.evaluate(async () => { + const { app } = await import('/scripts/app.js'); + const workflow = app.graph.serialize(); + const saved = workflow.nodes.find(node => node.type === 'ModelResolutionPicker'); + if (saved.widgets_values.slice(4).some(value => value !== '' && value != null)) throw new Error('Picker UI leaked into workflow values'); + await app.loadGraphData(workflow); + const node = app.graph._nodes.find(node => node.type === 'ModelResolutionPicker'); + return { saved: saved.widgets_values.slice(0, 4), restored: node.widgets.filter(w => ['model', 'width', 'height', 'batch_size'].includes(w.name)).map(w => w.value), size: Array.from(node.size), savedSize: Array.from(saved.size) }; + }); + expect(restored.restored).toEqual(restored.saved); + expect(restored.size).toEqual(restored.savedSize); + await expect(panel.getByRole('button', { name: '9:16', exact: true })).toHaveAttribute('aria-pressed', 'true'); + await page.evaluate(async () => { const { app } = await import('/scripts/app.js'); const node = app.graph._nodes.find(node => node.type === 'ModelResolutionPicker'); window.removedPicker = node; app.graph.remove(node); }); + await expect(panel).toHaveCount(0); + expect(await page.evaluate(() => removedPicker.resolutionScope.signal.aborted)).toBe(true); +}); +``` + +- [ ] **Step 3: Run it against the pinned host for both projects** β `npm run --prefix tools/testing test:comfyui` β `classic-start` and `nodes2-start` pass. Fix extension behavior if a renderer differs; do not special-case the test. + +- [ ] **Step 4: Copy the two screenshots** from the test output to `docs/screenshots/resolution-picker/ModelResolutionPicker-{light,dark}.png` (used by Task 9). + +- [ ] **Step 5: Commit** + +```bash +git add tests/comfyui/host-setup.mjs tests/comfyui/resolution-picker.spec.mjs tests/comfyui/image-browser.spec.mjs docs/screenshots/resolution-picker +git commit -m "test(model_resolution_picker): cover both renderers and workflow round-trip on the pinned host" +``` + +--- + +### Task 9: Documentation + +**Files:** +- Modify: `README.md` (tools table after the `Empty Latent Batch` row at line 44; a `#### π― Model Resolution Picker` section after `#### π¦ Empty Latent Batch`; the status table near line 801), `docs/ui-migration.md` (table row `Model Resolution Picker | views/resolution-picker.js, ui/resolution-picker.js, shared swap | [Picker](screenshots/resolution-picker/)`), `web/ui/README.md` (a short "Model Resolution Picker" section stating: derived state only, in-memory custom-ratio flag, families route, disabled chips for empty lists) +- Create: `examples/documentation/model_resolution_picker.md` (inputs, outputs, the family table with labels and steps, the keyframe note for video families, the manual GPU check procedure from the spec's "Verification before merge") + +- [ ] **Step 1: Write the docs** β copy the family labels and steps from `families.py`; README section bullets: model dropdown; chips and list; Swap; custom ratio and custom resolution rounding; outputs; "video rows are keyframe sizes, the latent is an image latent". + +- [ ] **Step 2: Verify links** β `grep -n "resolution-picker\|model_resolution_picker" README.md docs/ui-migration.md web/ui/README.md` shows every referenced path exists (`ls` each). + +- [ ] **Step 3: Commit** + +```bash +git add README.md docs/ui-migration.md web/ui/README.md examples/documentation/model_resolution_picker.md +git commit -m "docs(model_resolution_picker): document the node, families and keyframe use" +``` + +--- + +### Task 10: Full verification and manual GPU check + +**Files:** none new. + +- [ ] **Step 1: Run every suite** + +``` +$V/bin/python -m pytest tests -p no:cacheprovider -q --cov=kikotools | tail -3 +$V/bin/black --check . && $V/bin/flake8 kikotools +npm test --prefix tools/testing && npm run --prefix tools/testing test:coverage +npm run --prefix tools/testing test:browser +npm run --prefix tools/testing test:comfyui +``` +Expected: all green; Python coverage β₯ 85%; frontend floors met; Width Height Selector and Empty Latent Batch tests untouched and passing. + +- [ ] **Step 2: Manual generation check on the user's ComfyUI** (spec: "Verification before merge"): one queued image each for `Flux.2 / Klein / MOSS` at 1248Γ832 and `HunyuanImage 2.1` at 2560Γ1536 through this node β KSampler β VAE Decode β Save; confirm the saved PNGs are exactly those sizes. Record both results in the PR description. This step needs the user's GPU box; if it cannot run, say so in the PR and mark it as a pre-merge TODO. + +- [ ] **Step 3: Hand off** β use `superpowers:finishing-a-development-branch` (push with the explicit refspec, PR against `main`).