Refine Python tools task interface

python-tools/static/app.js

@@ -37,8 +37,15 @@ const refreshArtifacts = async (container) => {
   for (const artifact of artifacts) {
     const item = document.createElement("li");
     const link = document.createElement("a");
-    link.href = artifact.url;
-    link.textContent = artifact.name;
+    if (artifact.view_url) {
+      link.href = artifact.view_url;
+      link.target = "_blank";
+      link.rel = "noopener";
+      link.textContent = `Open ${artifact.name}`;
+    } else {
+      link.href = artifact.url;
+      link.textContent = `Download ${artifact.name}`;
+    }
     item.append(link);
     list.append(item);
   }
@@ -51,15 +58,24 @@ for (const container of document.querySelectorAll("#run-artifacts")) {
   window.setInterval(() => refreshArtifacts(container), 2000);
 }
 
-for (const control of document.querySelectorAll("select[data-execution-mode]")) {
-  const buttonLabel = control.closest("form")?.querySelector(".task-action .button-label");
-  const updateButtonLabel = () => {
-    if (buttonLabel && control.selectedOptions[0]) {
-      buttonLabel.textContent = control.selectedOptions[0].textContent;
+for (const choice of document.querySelectorAll("button[data-execution-choice]")) {
+  choice.addEventListener("click", () => {
+    const control = choice.closest(".split-button");
+    const value = control?.querySelector("input[data-execution-value]");
+    const label = control?.querySelector(".button-label");
+    if (!control || !value || !label) {
+      return;
     }
-  };
-  control.addEventListener("change", updateButtonLabel);
-  updateButtonLabel();
+    value.value = choice.dataset.value || "";
+    label.textContent = choice.dataset.label || "Run";
+    control.querySelectorAll("button[data-execution-choice]").forEach((option) => {
+      option.setAttribute("aria-pressed", String(option === choice));
+    });
+    const menu = control.querySelector("details");
+    if (menu) {
+      menu.open = false;
+    }
+  });
 }
 
 for (const form of document.querySelectorAll("form[data-wait-for-result]")) {
@@ -78,6 +94,9 @@ for (const form of document.querySelectorAll("form[data-wait-for-result]")) {
     controls.forEach((control) => {
       control.disabled = value;
     });
+    form.querySelectorAll("details.split-menu").forEach((menu) => {
+      menu.open = false;
+    });
     if (value) {
       window.addEventListener("beforeunload", warnBeforeLeaving);
     } else {
@@ -103,11 +122,12 @@ for (const form of document.querySelectorAll("form[data-wait-for-result]")) {
       return;
     }
     const artifacts = (await response.json()).artifacts;
-    if (!artifacts.length) {
+    const artifact = artifacts.find((item) => !item.view_url);
+    if (!artifact) {
       return;
     }
     const link = document.createElement("a");
-    link.href = artifacts[0].url;
+    link.href = artifact.url;
     link.download = "";
     document.body.append(link);
     link.click();

python-tools/static/favicon.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+  <rect width="64" height="64" rx="10" fill="#17372d"/>
+  <path d="M15 20 29 32 15 44" fill="none" stroke="#b7f0cd" stroke-linecap="round" stroke-linejoin="round" stroke-width="6"/>
+  <path d="M35 43h14" fill="none" stroke="#b7f0cd" stroke-linecap="round" stroke-width="6"/>
+</svg>

python-tools/static/style.css

@@ -48,7 +48,7 @@ a {
   border-top: 1px solid color-mix(in srgb, currentColor 15%, transparent);
   display: grid;
   gap: 1rem;
-  grid-template-columns: minmax(14rem, 1fr) minmax(0, 3fr);
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
   padding: .8rem 0;
 }
 
@@ -61,19 +61,26 @@ a {
   align-items: end;
   display: grid;
   gap: .75rem;
-  grid-template-columns: minmax(20rem, 1fr) auto;
+  grid-template-columns: minmax(0, 1fr) auto;
   min-width: 0;
 }
 
 .task-options {
   display: grid;
   gap: .75rem;
+  justify-items: start;
   min-width: 0;
 }
 
 .task-input { margin: 0; }
 
 .task-input label,
+.task-input fieldset {
+  display: block;
+  max-width: 100%;
+  width: fit-content;
+}
+
 .task-input fieldset label {
   display: block;
 }
@@ -85,9 +92,16 @@ a {
   max-width: 100%;
 }
 
-.task-input input:not([type="checkbox"]),
+.task-input input[type="date"],
+.task-input input[type="datetime-local"],
+.task-input input[type="number"],
 .task-input select {
-  width: 100%;
+  field-sizing: content;
+}
+
+.task-input input[type="text"],
+.task-input input[type="password"] {
+  width: min(15rem, 100%);
 }
 
 .task-input fieldset {
@@ -118,24 +132,63 @@ button {
 
 .split-button {
   display: inline-flex;
+  position: relative;
 }
 
-.split-button select,
 .split-button button,
 .task-action > button {
   margin: 0;
   white-space: nowrap;
 }
 
-.split-button select {
+.split-primary {
   border-bottom-right-radius: 0;
-  border-right: 0;
   border-top-right-radius: 0;
 }
 
-.split-button button {
+.split-menu summary {
+  align-items: center;
+  border: 1px solid currentColor;
   border-bottom-left-radius: 0;
   border-top-left-radius: 0;
+  box-sizing: border-box;
+  cursor: pointer;
+  display: flex;
+  height: 100%;
+  justify-content: center;
+  list-style: none;
+  min-width: 2.25rem;
+}
+
+.split-menu summary::-webkit-details-marker {
+  display: none;
+}
+
+.split-menu-options {
+  background: Canvas;
+  border: 1px solid currentColor;
+  display: grid;
+  gap: .2rem;
+  min-width: max-content;
+  padding: .25rem;
+  position: absolute;
+  right: 0;
+  top: calc(100% + .25rem);
+  z-index: 1;
+}
+
+.split-menu:not([open]) .split-menu-options {
+  display: none;
+}
+
+.split-menu-options button {
+  text-align: left;
+  width: 100%;
+}
+
+.is-waiting .split-menu {
+  opacity: .6;
+  pointer-events: none;
 }
 
 .visually-hidden {