From ed64887eda1c441e775b6778fa0fcb8d96c734ee Mon Sep 17 00:00:00 2001
From: dazzatronus <derkzomer@gmail.com>
Date: Mon, 28 Sep 2026 12:47:38 +1000
Subject: [PATCH] fix: open generation settings from the toolbar Options button

---
 src/core/ui/generate-toolbar.ts    | 144 +++--------------------------
 src/styles/ui/generate-toolbar.css |  69 --------------
 tests/generate-toolbar.test.ts     |  99 +++-----------------
 3 files changed, 23 insertions(+), 289 deletions(-)

diff --git a/src/core/ui/generate-toolbar.ts b/src/core/ui/generate-toolbar.ts
index 1c91bd56..fa306c9f 100644
--- a/src/core/ui/generate-toolbar.ts
+++ b/src/core/ui/generate-toolbar.ts
@@ -1,11 +1,5 @@
 import { EditEvent, InternalEvent } from "@core/events/edit-events";
-import {
-	isGenerationOptionValueValid,
-	missingGenerationOptions,
-	reconcileGenerationOptions,
-	type GenerationModelDefinition,
-	type GenerationOptionDefinition
-} from "@core/generation/model-catalogue";
+import { missingGenerationOptions, reconcileGenerationOptions, type GenerationModelDefinition } from "@core/generation/model-catalogue";
 import { MERGE_FIELD_TEST_PATTERN } from "@core/merge/merge-field-service";
 import { canCarryPrompt, GENERATION_TYPE, promptProperty } from "@core/shared/ai-asset-utils";
 import { injectShotstackStyles } from "@styles/inject";
@@ -14,12 +8,6 @@ import { BaseToolbar, TOOLBAR_ICONS } from "./base-toolbar";
 
 const PROMPT_DEBOUNCE_MS = 300;
 
-const OPTION_INPUT_TYPE: Readonly<Record<GenerationOptionDefinition["type"], string>> = {
-	boolean: "checkbox",
-	integer: "number",
-	string: "text"
-};
-
 const record = (value: unknown): Record<string, unknown> =>
 	typeof value === "object" && value !== null && !Array.isArray(value) ? (value as Record<string, unknown>) : {};
 
@@ -45,8 +33,6 @@ export class GenerateToolbar extends BaseToolbar {
 	private modelLabel: HTMLElement | null = null;
 	private modelPopup: HTMLElement | null = null;
 	private optionsBtn: HTMLButtonElement | null = null;
-	private optionsPopup: HTMLElement | null = null;
-	private optionRows = new Map<string, HTMLElement>();
 	private promptDebounceTimer: ReturnType<typeof setTimeout> | null = null;
 	private generationUnsubscribers: (() => void)[] = [];
 	private abortController: AbortController | null = null;
@@ -90,10 +76,7 @@ export class GenerateToolbar extends BaseToolbar {
 				</button>
 				<div class="ss-media-toolbar-popup ss-ai-model-popup" data-model-popup role="menu"></div>
 			</div>
-			<div class="ss-ai-picker-wrap">
-				<button class="ss-media-toolbar-btn ss-ai-picker" data-options-picker type="button" aria-haspopup="dialog">Options</button>
-				<div class="ss-media-toolbar-popup ss-ai-options-popup" data-options-popup></div>
-			</div>
+			<button class="ss-media-toolbar-btn ss-ai-picker" data-options-picker type="button">Options</button>
 			<div class="ss-ai-generate-group" data-generate-group>
 				<button class="ss-media-toolbar-btn ss-ai-generate-btn" data-action="generate">
 					<span data-generate-label>Generate</span>
@@ -116,7 +99,6 @@ export class GenerateToolbar extends BaseToolbar {
 		this.modelLabel = this.container.querySelector("[data-model-label]");
 		this.modelPopup = this.container.querySelector("[data-model-popup]");
 		this.optionsBtn = this.container.querySelector("[data-options-picker]");
-		this.optionsPopup = this.container.querySelector("[data-options-popup]");
 
 		this.setupEventListeners();
 		this.subscribeToEditState();
@@ -168,7 +150,11 @@ export class GenerateToolbar extends BaseToolbar {
 		}, { signal });
 		this.optionsBtn?.addEventListener("click", e => {
 			e.stopPropagation();
-			this.togglePopup(this.optionsPopup);
+			const clipId = this.getSelectedClipId();
+			const { model } = record(this.edit.getResolvedClip(this.selectedTrackIdx, this.selectedClipIdx)?.asset);
+			if (!clipId || typeof model !== "string") return;
+			this.closeAllPopups();
+			this.edit.generationSettings?.({ clipId, model });
 		}, { signal });
 		this.generateNoteAction?.addEventListener("click", e => {
 			e.stopPropagation();
@@ -286,108 +272,10 @@ export class GenerateToolbar extends BaseToolbar {
 		}
 	}
 
-	private createOptionControl(option: GenerationOptionDefinition, value: unknown): HTMLInputElement | HTMLSelectElement {
-		if (option.values) {
-			const select = document.createElement("select");
-			const empty = document.createElement("option");
-			empty.value = "";
-			empty.textContent = "Select…";
-			select.appendChild(empty);
-			for (const candidate of option.values) {
-				const item = document.createElement("option");
-				item.value = candidate;
-				item.textContent = candidate;
-				select.appendChild(item);
-			}
-			select.value = typeof value === "string" ? value : "";
-			return select;
-		}
-
-		const input = document.createElement("input");
-		input.type = option.format === "uri" ? "url" : OPTION_INPUT_TYPE[option.type];
-		if (input.type === "checkbox") input.checked = value === true;
-		else input.value = value === undefined ? "" : String(value);
-		if (option.minimum !== undefined) input.min = String(option.minimum);
-		if (option.maximum !== undefined) input.max = String(option.maximum);
-		return input;
-	}
-
-	private readOptionControl(control: HTMLInputElement | HTMLSelectElement, option: GenerationOptionDefinition): unknown {
-		if (control instanceof HTMLInputElement && control.type === "checkbox") return control.checked;
-		if (control.value === "") return undefined;
-		return option.type === "integer" ? Number(control.value) : control.value;
-	}
-
-	private renderOptions(model: GenerationModelDefinition, values: Record<string, unknown>): void {
-		if (!this.optionsPopup) return;
-		this.optionsPopup.replaceChildren();
-		this.optionRows.clear();
-		for (const option of model.options) {
-			const row = document.createElement("label");
-			row.className = "ss-ai-option-row";
-			row.dataset["optionRow"] = option.name;
-			const title = document.createElement("span");
-			title.textContent = option.title;
-			const value = values[option.name] ?? (option.hasDefault ? option.defaultValue : undefined);
-			const control = this.createOptionControl(option, value);
-			control.dataset["option"] = option.name;
-			// A required boolean is satisfied by false, which an unchecked required checkbox reports as invalid.
-			control.required = option.required && option.type !== "boolean";
-			control.addEventListener("change", () => {
-				// An empty required field is the missing-option state and must commit; malformed input must not.
-				if (!control.validity.valid && !control.validity.valueMissing) return;
-				const next = this.readOptionControl(control, option);
-				this.edit.updateClip(this.selectedTrackIdx, this.selectedClipIdx, { asset: { options: { [option.name]: next } } } as never);
-				this.syncMissingOptions(model, { ...values, [option.name]: next });
-			});
-			row.append(title, control);
-			this.optionRows.set(option.name, row);
-			this.optionsPopup.appendChild(row);
-		}
-
-		for (const option of model.unsupported) {
-			const row = document.createElement("div");
-			row.className = "ss-ai-option-row is-unsupported";
-			this.optionRows.set(option.name, row);
-			row.title = this.edit.generationSettings ? "Use Generation settings to configure this option." : "This option can only be set outside the editor.";
-			const title = document.createElement("span");
-			title.textContent = option.title;
-			const state = document.createElement("span");
-			state.className = "ss-ai-option-state";
-			state.textContent = values[option.name] === undefined ? "Not set" : "Configured";
-			row.append(title, state);
-			this.optionsPopup.appendChild(row);
-		}
-
-		if (this.edit.generationSettings) {
-			const button = document.createElement("button");
-			button.type = "button";
-			button.className = "ss-media-toolbar-btn";
-			button.dataset["action"] = "generation-options";
-			button.textContent = "Generation settings";
-			button.addEventListener("click", () => {
-				const clipId = this.getSelectedClipId();
-				if (!clipId) return;
-				this.closeAllPopups();
-				this.edit.generationSettings?.({ clipId, model: model.model });
-			});
-			this.optionsPopup.appendChild(button);
-		}
-	}
-
 	private syncMissingOptions(model: GenerationModelDefinition | undefined, values: Record<string, unknown>): readonly string[] {
 		const missing = model ? missingGenerationOptions(model, values) : [];
 		this.optionsBtn?.classList.toggle("has-error", missing.length > 0);
-		if (this.optionsBtn) this.optionsBtn.title = missing.length > 0 ? `Missing: ${missing.join(", ")}` : "Generation options";
-		if (model) {
-			for (const option of model.options) {
-				const row = this.optionRows.get(option.name);
-				row?.toggleAttribute("data-missing", option.required && !isGenerationOptionValueValid(option, values[option.name]));
-			}
-			for (const option of model.unsupported) {
-				this.optionRows.get(option.name)?.toggleAttribute("data-missing", option.required === true && values[option.name] === undefined);
-			}
-		}
+		if (this.optionsBtn) this.optionsBtn.title = missing.length > 0 ? `Missing: ${missing.join(", ")}` : "Generation settings";
 		return missing;
 	}
 
@@ -406,18 +294,10 @@ export class GenerateToolbar extends BaseToolbar {
 		this.renderModelPopup(models ?? [], selected);
 
 		if (this.optionsBtn) {
-			const empty = selectedModel !== undefined && selectedModel.options.length === 0 && selectedModel.unsupported.length === 0;
-			this.optionsBtn.hidden = models === undefined || models.length === 0 || (empty && !this.edit.generationSettings);
+			this.optionsBtn.hidden = models === undefined || models.length === 0 || !this.edit.generationSettings;
 			this.optionsBtn.disabled = selectedModel === undefined;
 		}
-		const values = record(asset["options"]);
-		if (selectedModel) {
-			this.renderOptions(selectedModel, values);
-		} else {
-			this.optionsPopup?.replaceChildren();
-			this.optionRows.clear();
-		}
-		return this.syncMissingOptions(selectedModel, values);
+		return this.syncMissingOptions(selectedModel, record(asset["options"]));
 	}
 
 	protected override syncState(): void {
@@ -490,7 +370,7 @@ export class GenerateToolbar extends BaseToolbar {
 	}
 
 	protected override getPopupList(): (HTMLElement | null)[] {
-		return [this.modelPopup, this.optionsPopup];
+		return [this.modelPopup];
 	}
 
 	override dispose(): void {
@@ -515,7 +395,5 @@ export class GenerateToolbar extends BaseToolbar {
 		this.modelLabel = null;
 		this.modelPopup = null;
 		this.optionsBtn = null;
-		this.optionsPopup = null;
-		this.optionRows.clear();
 	}
 }
diff --git a/src/styles/ui/generate-toolbar.css b/src/styles/ui/generate-toolbar.css
index 31fc6711..a91f7823 100644
--- a/src/styles/ui/generate-toolbar.css
+++ b/src/styles/ui/generate-toolbar.css
@@ -196,72 +196,3 @@
 	font-family: inherit;
 	text-align: left;
 }
-
-.ss-ai-options-popup {
-	min-width: 240px;
-	display: none;
-	flex-direction: column;
-	gap: 8px;
-}
-
-.ss-ai-options-popup.visible {
-	display: flex;
-}
-
-.ss-ai-option-row {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	gap: 12px;
-	padding: 4px 8px;
-	font-size: 12px;
-	color: rgba(255, 255, 255, 0.85);
-}
-
-.ss-ai-option-row[data-missing] {
-	color: #fca5a5;
-}
-
-.ss-ai-option-row input:not([type="checkbox"]),
-.ss-ai-option-row select {
-	width: 120px;
-	height: 26px;
-	box-sizing: border-box;
-	padding: 0 8px;
-	background: rgba(0, 0, 0, 0.3);
-	border: 1px solid rgba(255, 255, 255, 0.1);
-	border-radius: 6px;
-	color: #fafafa;
-	font-family: inherit;
-	font-size: 12px;
-}
-
-.ss-ai-option-row input:focus,
-.ss-ai-option-row select:focus {
-	outline: none;
-	border-color: rgba(255, 255, 255, 0.28);
-}
-
-.ss-ai-option-row[data-missing] input:not([type="checkbox"]),
-.ss-ai-option-row[data-missing] select {
-	border-color: rgba(248, 113, 113, 0.5);
-}
-
-.ss-ai-option-row input[type="checkbox"] {
-	width: 14px;
-	height: 14px;
-	accent-color: #fafafa;
-}
-
-/* Published but uneditable: legible enough to confirm the value survives, quiet enough
-   not to read as a control. */
-.ss-ai-option-row.is-unsupported:not([data-missing]) {
-	color: rgba(255, 255, 255, 0.45);
-	cursor: default;
-}
-
-.ss-ai-option-state {
-	font-size: 11px;
-	font-variant-numeric: tabular-nums;
-	color: rgba(255, 255, 255, 0.35);
-}
diff --git a/tests/generate-toolbar.test.ts b/tests/generate-toolbar.test.ts
index e8080827..b752b0f4 100644
--- a/tests/generate-toolbar.test.ts
+++ b/tests/generate-toolbar.test.ts
@@ -203,14 +203,6 @@ describe("GenerateToolbar", () => {
 		toolbar.dispose();
 	});
 
-	it("hides Options for a selected model with no controls", () => {
-		const edit = createMockEdit({ type: "image", prompt: "a cat", model: "flux-schnell" });
-		edit.getGenerationModels.mockReturnValue([model("flux-schnell")]);
-		const { toolbar, container } = mountToolbar(edit);
-		expect(container.querySelector<HTMLButtonElement>("[data-options-picker]")?.hidden).toBe(true);
-		toolbar.dispose();
-	});
-
 	it("preserves an unavailable model until an available model is selected", () => {
 		const asset = { type: "image", prompt: "a cat", model: "host-model", options: { seed: 7 } };
 		const edit = createMockEdit(asset);
@@ -240,31 +232,6 @@ describe("GenerateToolbar", () => {
 		toolbar.dispose();
 	});
 
-	it("renders each supported schema shape as a native control", () => {
-		const options = [
-			option("resolution", "string", { values: ["720p", "1080p"] }),
-			option("generateAudio", "boolean"),
-			option("musicLengthMs", "integer", { minimum: 1000, maximum: 60000 }),
-			option("compositionPlan", "string"),
-			option("inputSrc", "string", { format: "uri" })
-		];
-		const edit = createMockEdit({ type: "video", prompt: "a cat", model: "video-model", options: {} });
-		edit.getGenerationModels.mockReturnValue([model("video-model", "video", options)]);
-		const { toolbar, container } = mountToolbar(edit);
-
-		expect(container.querySelector('[data-option="resolution"]')?.tagName).toBe("SELECT");
-		expect(container.querySelector<HTMLInputElement>('[data-option="generateAudio"]')?.type).toBe("checkbox");
-		const number = container.querySelector<HTMLInputElement>('[data-option="musicLengthMs"]');
-		expect([number?.type, number?.min, number?.max]).toEqual(["number", "1000", "60000"]);
-		expect(container.querySelector<HTMLInputElement>('[data-option="compositionPlan"]')?.type).toBe("text");
-		expect(container.querySelector<HTMLInputElement>('[data-option="inputSrc"]')?.type).toBe("url");
-
-		number!.value = "5000";
-		number?.dispatchEvent(new Event("change", { bubbles: true }));
-		expect(edit.updateClip).toHaveBeenCalledWith(0, 0, { asset: { options: { musicLengthMs: 5000 } } });
-		toolbar.dispose();
-	});
-
 	it("requires configured model options but permits the backend default model", () => {
 		const voice = option("voice", "string", { title: "Voice", required: true });
 		const asset = { type: "audio", prompt: "hello", model: "speech", options: {} };
@@ -276,8 +243,7 @@ describe("GenerateToolbar", () => {
 
 		expect(generate?.disabled).toBe(true);
 		expect(optionsButton?.classList.contains("has-error")).toBe(true);
-		expect(optionsButton?.title).toContain("Voice");
-		expect(container.querySelector('[data-option-row="voice"]')?.hasAttribute("data-missing")).toBe(true);
+		expect(optionsButton?.title).toBe("Missing: Voice");
 
 		asset.model = undefined as never;
 		toolbar.show(0, 0);
@@ -285,38 +251,7 @@ describe("GenerateToolbar", () => {
 		toolbar.dispose();
 	});
 
-	it("commits a cleared required option and marks it missing", () => {
-		const voice = option("voice", "string", { title: "Voice", required: true });
-		const edit = createMockEdit({ type: "audio", prompt: "hello", model: "speech", options: { voice: "Matthew" } });
-		edit.getGenerationModels.mockReturnValue([model("speech", "audio", [voice])]);
-		const { toolbar, container } = mountToolbar(edit);
-		const control = container.querySelector<HTMLInputElement>('[data-option="voice"]');
-
-		control!.value = "";
-		control?.dispatchEvent(new Event("change", { bubbles: true }));
-
-		expect(edit.updateClip).toHaveBeenCalledWith(0, 0, { asset: { options: { voice: undefined } } });
-		expect(container.querySelector('[data-option-row="voice"]')?.hasAttribute("data-missing")).toBe(true);
-		expect(container.querySelector<HTMLButtonElement>("[data-options-picker]")?.classList.contains("has-error")).toBe(true);
-		toolbar.dispose();
-	});
-
-	it("shows a published option it cannot render instead of dropping it", () => {
-		const plan = { name: "compositionPlan", title: "Composition plan" };
-		const edit = createMockEdit({ type: "audio", prompt: "a score", model: "music", options: { compositionPlan: { sections: [] } } });
-		edit.getGenerationModels.mockReturnValue([model("music", "audio", [option("forceInstrumental", "boolean", { title: "Instrumental only" })], [plan])]);
-		const { toolbar, container } = mountToolbar(edit);
-
-		const row = container.querySelector<HTMLElement>(".ss-ai-option-row.is-unsupported");
-		expect(row?.textContent).toContain("Composition plan");
-		expect(row?.textContent).toContain("Configured");
-		expect(container.querySelector('[data-action="generation-options"]')).toBeNull();
-		expect(row?.querySelector("input, select")).toBeNull();
-		expect(container.querySelector<HTMLButtonElement>("[data-options-picker]")?.hidden).toBe(false);
-		toolbar.dispose();
-	});
-
-	it("shows settings for every model only while a host hook is installed", () => {
+	it("opens the host's generation settings from Options only while a host hook is installed", () => {
 		const edit = createMockEdit({ type: "image", prompt: "a cat", model: "simple" });
 		edit.getGenerationModels.mockReturnValue([model("simple")]);
 		const { toolbar, container } = mountToolbar(edit);
@@ -324,15 +259,15 @@ describe("GenerateToolbar", () => {
 		Object.assign(edit, { generationSettings: openSettings });
 		const changed = edit.getInternalEvents().on.mock.calls.find(([name]) => name === "assetGenerator:changed")?.[1];
 		changed?.();
-		expect(container.querySelector<HTMLButtonElement>("[data-options-picker]")?.hidden).toBe(false);
-		const button = container.querySelector<HTMLButtonElement>('[data-action="generation-options"]');
-		expect(button?.textContent).toBe("Generation settings");
-		button?.click();
+		const options = container.querySelector<HTMLButtonElement>("[data-options-picker]");
+		expect(options?.hidden).toBe(false);
+		expect(options?.title).toBe("Generation settings");
+		options?.click();
 		expect(openSettings).toHaveBeenCalledWith({ clipId: "clip-1", model: "simple" });
+		expect(container.querySelector("[data-options-popup]")).toBeNull();
 		Object.assign(edit, { generationSettings: undefined });
 		changed?.();
-		expect(container.querySelector('[data-action="generation-options"]')).toBeNull();
-		expect(container.querySelector<HTMLButtonElement>("[data-options-picker]")?.hidden).toBe(true);
+		expect(options?.hidden).toBe(true);
 		toolbar.dispose();
 	});
 
@@ -347,9 +282,9 @@ describe("GenerateToolbar", () => {
 		Object.assign(edit, { generationSettings: openSettings });
 		edit.getGenerationModels.mockReturnValue([advancedModel]);
 		const { toolbar, container } = mountToolbar(edit);
-		const button = container.querySelector<HTMLButtonElement>('[data-action="generation-options"]');
-		expect(button?.textContent).toBe("Generation settings");
-		button?.click();
+		const options = container.querySelector<HTMLButtonElement>("[data-options-picker]");
+		expect(options?.title).toBe("Missing: Reference images");
+		options?.click();
 		expect(openSettings).toHaveBeenCalledWith({ clipId: "clip-1", model: "nano-banana-2-edit" });
 		expect(edit.updateClip).not.toHaveBeenCalled();
 		const prompt = container.querySelector<HTMLInputElement>("[data-prompt-input]")!;
@@ -363,21 +298,11 @@ describe("GenerateToolbar", () => {
 		edit.getGenerationModels.mockReturnValue([model("flux-schnell")]);
 		asset["model"] = "flux-schnell";
 		toolbar.show(0, 0);
-		container.querySelector<HTMLButtonElement>('[data-action="generation-options"]')?.click();
+		options?.click();
 		expect(openSettings).toHaveBeenLastCalledWith({ clipId: "clip-1", model: "flux-schnell" });
 		toolbar.dispose();
 	});
 
-	it("keeps Options reachable when every published option is unrenderable", () => {
-		const edit = createMockEdit({ type: "audio", prompt: "a score", model: "music", options: {} });
-		edit.getGenerationModels.mockReturnValue([model("music", "audio", [], [{ name: "compositionPlan", title: "Composition plan" }])]);
-		const { toolbar, container } = mountToolbar(edit);
-
-		expect(container.querySelector<HTMLButtonElement>("[data-options-picker]")?.hidden).toBe(false);
-		expect(container.querySelector(".ss-ai-option-row.is-unsupported")?.textContent).toContain("Not set");
-		toolbar.dispose();
-	});
-
 	it("generates the selected clip when the action is pressed", () => {
 		const edit = createMockEdit();
 		const { toolbar, container } = mountToolbar(edit);