From dd12f7514f887bc35943e9032d0fbc5330b516aa Mon Sep 17 00:00:00 2001
From: Brett Chien <brettchien@users.noreply.github.com>
Date: Sat, 29 Aug 2026 21:47:30 +0800
Subject: [PATCH] fix(console): Image tag as a real select, rebuilt on vendor
 change (studio#128)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Brett's live-testing report: switching vendor didn't visibly update the
Image tag field, and there was no way to enter a full custom image URL.

The old implementation silently mutated one text input's `.value` on
vendor change — easy to miss, and offered no structured way to pick
"give me a full custom URL" vs. "use what GHCR resolved".

Replaces the free-text `<input id="deploy-image">` with:
- `<select id="deploy-image-select">`, rebuilt from scratch on every
  vendor change from `resolve_vendor_image_tags`'s Stable/Beta results
  (option value = the real resolved tag, label shows which is which).
  Rebuilding the whole list (not mutating one value) makes the change
  visually obvious.
- A trailing "Custom…" option that reveals a `deploy-image-custom-wrap`
  text field (same `[hidden]` CSS-specificity fix pattern as #137) for
  pasting a full image URL.

`currentImage()` resolves whichever is actually selected; the deploy
submit handler now calls it instead of reading the old input directly.

Verification: npm run typecheck / test (100/100) / build all clean.
Rust/Tauri/MCP untouched — this is a pure console-side change.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 console/index.html    |  6 +++-
 console/src/deploy.ts | 67 +++++++++++++++++++++++++++++++------------
 2 files changed, 54 insertions(+), 19 deletions(-)

diff --git a/console/index.html b/console/index.html
index c01a320..107fbee 100644
--- a/console/index.html
+++ b/console/index.html
@@ -156,7 +156,11 @@
                 </label>
                 <label
                   >Image tag
-                  <input id="deploy-image" class="compose-input" type="text" placeholder="resolving…" spellcheck="false" />
+                  <select id="deploy-image-select" class="compose-select"></select>
+                </label>
+                <label id="deploy-image-custom-wrap" hidden
+                  >Custom image
+                  <input id="deploy-image-custom" class="compose-input" type="text" placeholder="e.g. ghcr.io/openabdev/openab:0.9.0-claude" spellcheck="false" />
                 </label>
                 <label
                   >API key (optional)
diff --git a/console/src/deploy.ts b/console/src/deploy.ts
index e87710e..18fd155 100644
--- a/console/src/deploy.ts
+++ b/console/src/deploy.ts
@@ -130,7 +130,9 @@ export function initDeployPanel(deps: DeployPanelDeps): DeployPanelHandle | null
   const composeHeading = document.getElementById("deploy-compose-heading");
   const deployForm = document.getElementById("deploy-agent-form") as HTMLFormElement | null;
   const vendorSel = document.getElementById("deploy-vendor") as HTMLSelectElement | null;
-  const imageInput = document.getElementById("deploy-image") as HTMLInputElement | null;
+  const imageSelectEl = document.getElementById("deploy-image-select") as HTMLSelectElement | null;
+  const imageCustomWrap = document.getElementById("deploy-image-custom-wrap");
+  const imageCustomInput = document.getElementById("deploy-image-custom") as HTMLInputElement | null;
   const apiKeyInput = document.getElementById("deploy-api-key") as HTMLInputElement | null;
   const deviceAuthHint = document.getElementById("deploy-device-auth-hint");
   const chatPlatformSel = document.getElementById("deploy-chat-platform") as HTMLSelectElement | null;
@@ -164,7 +166,9 @@ export function initDeployPanel(deps: DeployPanelDeps): DeployPanelHandle | null
     !composeSection ||
     !deployForm ||
     !vendorSel ||
-    !imageInput ||
+    !imageSelectEl ||
+    !imageCustomWrap ||
+    !imageCustomInput ||
     !apiKeyInput ||
     !deviceAuthHint ||
     !chatPlatformSel ||
@@ -218,25 +222,51 @@ export function initDeployPanel(deps: DeployPanelDeps): DeployPanelHandle | null
     deviceAuthHint.hidden = !DEVICE_AUTH_VENDORS.has(vendor);
   };
 
-  // studio#128: pre-fills Image tag from GHCR's actually-published tags for
-  // the selected vendor — prefers Stable, falls back to Beta, and leaves
-  // the field for manual entry if neither resolved (a failed GHCR/GitHub
-  // call, or a vendor with no published image yet — never blocks the
-  // field, per Brett: "Image tag is allow to be manually input by user").
+  const IMAGE_CUSTOM_SENTINEL = "__custom__";
+
+  // studio#136: which value is actually in play — a resolved Stable/Beta
+  // <option> (its value is the real image tag directly) or the free-text
+  // Custom field.
+  const currentImage = (): string =>
+    imageSelectEl.value === IMAGE_CUSTOM_SENTINEL ? imageCustomInput.value.trim() : imageSelectEl.value;
+
+  const applyImageMode = (): void => {
+    const isCustom = imageSelectEl.value === IMAGE_CUSTOM_SENTINEL;
+    imageCustomWrap.hidden = !isCustom;
+    if (isCustom) imageCustomInput.focus();
+  };
+
+  // studio#128/#136: a real <select> of GHCR's actually-published tags for
+  // the selected vendor (Stable/Beta, whichever resolved) plus a "Custom…"
+  // escape hatch — rebuilding the option list on every vendor change (not
+  // silently mutating one text field's value) is what makes "the image tag
+  // changed" visibly obvious, per Brett's report that a plain text field's
+  // value quietly updating read as "nothing happened".
   const loadVendorImage = async (): Promise<void> => {
     const invoke = tauriInvoke();
-    if (!invoke) return;
     const vendor = vendorSel.value;
-    imageInput.placeholder = "resolving…";
-    try {
-      const res = await invoke<VendorImageTagsResponse>("resolve_vendor_image_tags", { vendor });
-      const resolved = res.stable ?? res.beta;
-      if (resolved) imageInput.value = resolved;
-      imageInput.placeholder = resolved ?? "e.g. pre-beta-" + vendor;
-    } catch (e) {
-      imageInput.placeholder = "e.g. pre-beta-" + vendor;
-      setStatus(deployStatusEl, `image tag lookup unavailable: ${errText(e)}`, "err");
+    const opts: { value: string; label: string }[] = [];
+    if (invoke) {
+      try {
+        const res = await invoke<VendorImageTagsResponse>("resolve_vendor_image_tags", { vendor });
+        if (res.stable) opts.push({ value: res.stable, label: `Stable (${res.stable})` });
+        if (res.beta) opts.push({ value: res.beta, label: `Beta (${res.beta})` });
+      } catch (e) {
+        setStatus(deployStatusEl, `image tag lookup unavailable: ${errText(e)}`, "err");
+      }
+    }
+    opts.push({ value: IMAGE_CUSTOM_SENTINEL, label: "Custom…" });
+    imageSelectEl.innerHTML = "";
+    for (const o of opts) {
+      const opt = document.createElement("option");
+      opt.value = o.value;
+      opt.textContent = o.label;
+      imageSelectEl.appendChild(opt);
     }
+    // No selected-attribute set above, so the browser defaults to the first
+    // option — Stable if it resolved, else Beta, else Custom (never stuck
+    // on a meaningless blank selection).
+    applyImageMode();
   };
 
   const reset = (): void => {
@@ -382,6 +412,7 @@ export function initDeployPanel(deps: DeployPanelDeps): DeployPanelHandle | null
     applyVendorMode();
     void loadVendorImage();
   });
+  imageSelectEl.addEventListener("change", applyImageMode);
   chatPlatformSel.addEventListener("change", applyChatPlatformMode);
   agentNameShuffleBtn.addEventListener("click", () => {
     agentNameInput.value = randomGreekName();
@@ -441,7 +472,7 @@ export function initDeployPanel(deps: DeployPanelDeps): DeployPanelHandle | null
       setStatus(deployStatusEl, "agent name is required", "err");
       return;
     }
-    const image = imageInput.value.trim();
+    const image = currentImage();
     if (!image) {
       setStatus(deployStatusEl, "image tag is required", "err");
       return;