@syncended/dsh-automations 0.3.1 → 0.5.0

package/lib/client.js

@@ -11,6 +11,7 @@ window.__ModuleLoader__.load({
     // the same-origin HTTP API at /api/automations; every mutation carries the
     // x-dsh-automation-client fence header plus an application/json body.
     const React = require("react");
+    const { createPortal } = require("react-dom");
     const h = React.createElement;
     const { useCallback, useEffect, useId, useRef, useState, useSyncExternalStore } = React;
     const {
@@ -23,10 +24,12 @@ window.__ModuleLoader__.load({
       IconChevronDownOutline14,
       IconChevronLeftOutline14,
       IconEditOutline16,
+      IconGlobeOutline14,
       IconPlayOutline16,
       IconPlusOutline16,
       IconRefreshOutline16,
       IconSettingsOutline16,
+      IconThinkOutline14,
       IconTrashOutline16,
       IconWarningOutline16,
     } = require("@deepseek-ai/dsh-client-ui-primitives");
@@ -50,26 +53,77 @@ window.__ModuleLoader__.load({
       }
     })();
 
-    const TIMEZONES = Array.from(
-      new Set([
-        BROWSER_TIMEZONE,
-        "UTC",
-        "America/New_York",
-        "America/Chicago",
-        "America/Denver",
-        "America/Los_Angeles",
-        "Europe/London",
-        "Europe/Paris",
-        "Europe/Berlin",
-        "Asia/Shanghai",
-        "Asia/Tokyo",
-        "Asia/Singapore",
-        "Asia/Kolkata",
-        "Australia/Sydney",
-      ]),
+    const POPULAR_TIMEZONE_CANDIDATES = [
+      BROWSER_TIMEZONE,
+      "UTC",
+      "America/New_York",
+      "America/Los_Angeles",
+      "America/Sao_Paulo",
+      "Europe/London",
+      "Europe/Berlin",
+      "Europe/Moscow",
+      "Asia/Dubai",
+      "Asia/Kolkata",
+      "Asia/Shanghai",
+      "Asia/Tokyo",
+      "Australia/Sydney",
+    ];
+    const PREFERRED_TIMEZONE_ALIASES = [
+      "Africa/Asmara",
+      "America/Argentina/Buenos_Aires",
+      "America/Atikokan",
+      "America/Indiana/Indianapolis",
+      "America/Kentucky/Louisville",
+      "America/Nuuk",
+      "Asia/Ho_Chi_Minh",
+      "Asia/Kathmandu",
+      "Asia/Kolkata",
+      "Asia/Yangon",
+      "Atlantic/Faroe",
+      "Europe/Kyiv",
+      "Pacific/Chuuk",
+      "Pacific/Kanton",
+      "Pacific/Pohnpei",
+    ];
+    const TIMEZONE_ALIASES_BY_ZONE = new Map();
+    for (const alias of PREFERRED_TIMEZONE_ALIASES) {
+      const zone = canonicalTimezone(alias);
+      if (!zone || zone === alias) continue;
+      const aliases = TIMEZONE_ALIASES_BY_ZONE.get(zone) || [];
+      aliases.push(alias);
+      TIMEZONE_ALIASES_BY_ZONE.set(zone, aliases);
+    }
+    const POPULAR_TIMEZONES = Array.from(
+      new Set(POPULAR_TIMEZONE_CANDIDATES.map(canonicalTimezone).filter(Boolean)),
     );
+    const SUPPORTED_TIMEZONES = (() => {
+      let discovered = [];
+      try {
+        discovered = typeof Intl.supportedValuesOf === "function"
+          ? Intl.supportedValuesOf("timeZone")
+          : [];
+      } catch {
+        discovered = [];
+      }
+      return Array.from(
+        new Set([
+          ...POPULAR_TIMEZONES,
+          ...TIMEZONE_ALIASES_BY_ZONE.keys(),
+          ...discovered.filter((zone) => typeof zone === "string" && zone !== ""),
+        ]),
+      ).sort((left, right) => left.localeCompare(right));
+    })();
+    const TIMEZONE_SEARCH_INDEX = SUPPORTED_TIMEZONES.map((zone) => {
+      const aliases = TIMEZONE_ALIASES_BY_ZONE.get(zone) || [];
+      const preferred = aliases[0] || zone;
+      return {
+        zone,
+        city: timezoneCityLabel(preferred),
+        search: timezoneSearchKey([zone, ...aliases].join(" ")),
+      };
+    });
 
-    const REASONING_EFFORTS = ["low", "medium", "high"];
+    const MODEL_METADATA_CACHE = new Map();
     const OVERLAP_OPTIONS = [
       { value: "skip", label: "skip", hint: "Skip the run if a previous run is still active." },
       { value: "queue", label: "queue", hint: "Defer the run until the previous run finishes." },
@@ -147,6 +201,138 @@ window.__ModuleLoader__.load({
       });
     }
 
+    function canonicalTimezone(value) {
+      const timezone = String(value || "").trim();
+      if (timezone === "") return null;
+      try {
+        return new Intl.DateTimeFormat("en-US", { timeZone: timezone }).resolvedOptions().timeZone;
+      } catch {
+        return null;
+      }
+    }
+
+    function timezoneCityLabel(zone) {
+      if (zone === "UTC") return "UTC";
+      const segments = zone.split("/");
+      return (segments[segments.length - 1] || zone).replace(/_/g, " ");
+    }
+
+    function timezonePreferredValue(zone) {
+      return TIMEZONE_ALIASES_BY_ZONE.get(zone)?.[0] || zone;
+    }
+
+    function timezoneSearchKey(zone) {
+      const literal = zone.toLowerCase();
+      const expanded = literal
+        .normalize("NFKD")
+        .replace(/[\u0300-\u036f]/g, "")
+        .replace(/[\/_\-.]+/g, " ")
+        .replace(/\s+/g, " ")
+        .trim();
+      return expanded;
+    }
+
+    function timezoneOffsetLabel(zone, at = new Date()) {
+      try {
+        const formatter = new Intl.DateTimeFormat("en-US", {
+          timeZone: zone,
+          timeZoneName: "longOffset",
+          hour: "2-digit",
+        });
+        const value = formatter.formatToParts(at).find((part) => part.type === "timeZoneName")?.value;
+        if (!value) return "UTC offset unavailable";
+        if (value === "GMT") return "UTC+00:00";
+        return value.replace(/^GMT/, "UTC");
+      } catch {
+        return "UTC offset unavailable";
+      }
+    }
+
+    function timezoneSearchResults(query, currentValue, limit = 30) {
+      const rawQuery = String(query || "").trim().toLowerCase();
+      const current = canonicalTimezone(currentValue);
+      if (rawQuery === "") {
+        return Array.from(
+          new Set([current, BROWSER_TIMEZONE, ...POPULAR_TIMEZONES].filter(Boolean)),
+        ).slice(0, 12);
+      }
+      const normalizedQuery = timezoneSearchKey(rawQuery);
+      if (normalizedQuery === "") return [];
+      const terms = normalizedQuery.split(" ").filter(Boolean);
+      return TIMEZONE_SEARCH_INDEX
+        .filter((entry) => terms.every((term) => entry.search.includes(term)))
+        .map((entry) => {
+          const canonical = entry.zone.toLowerCase();
+          const preferred = timezonePreferredValue(entry.zone).toLowerCase();
+          const city = timezoneSearchKey(entry.city);
+          let score = 5;
+          if (canonical === rawQuery || preferred === rawQuery) score = 0;
+          else if (city === normalizedQuery) score = 1;
+          else if (city.startsWith(normalizedQuery)) score = 2;
+          else if (canonical.split("/").some((segment) => timezoneSearchKey(segment).startsWith(normalizedQuery))) score = 3;
+          else if (entry.search.startsWith(normalizedQuery)) score = 4;
+          return { ...entry, score };
+        })
+        .sort((left, right) => left.score - right.score || left.city.localeCompare(right.city) || left.zone.localeCompare(right.zone))
+        .slice(0, limit)
+        .map((entry) => entry.zone);
+    }
+
+    function comboboxSearchResults(options, query, limit = 30) {
+      const rawQuery = String(query || "").trim().toLowerCase();
+      if (rawQuery === "") return options.slice(0, limit);
+      const normalizedQuery = timezoneSearchKey(rawQuery);
+      if (normalizedQuery === "") return [];
+      const terms = normalizedQuery.split(" ").filter(Boolean);
+      return options
+        .map((option, order) => {
+          const identifier = String(option.value ?? option.id).toLowerCase();
+          const label = timezoneSearchKey(option.label || "");
+          const search = timezoneSearchKey(
+            [option.label, option.detail, option.value, ...(option.aliases || [])].filter(Boolean).join(" "),
+          );
+          if (!terms.every((term) => search.includes(term))) return null;
+          let score = option.custom ? 6 : 5;
+          if (!option.custom && identifier === rawQuery) score = 0;
+          else if (!option.custom && label === normalizedQuery) score = 1;
+          else if (!option.custom && label.startsWith(normalizedQuery)) score = 2;
+          else if (!option.custom && identifier.split(/[\/:._-]+/).some((segment) => segment.startsWith(rawQuery))) score = 3;
+          else if (!option.custom && search.startsWith(normalizedQuery)) score = 4;
+          return { option, order, score };
+        })
+        .filter(Boolean)
+        .sort((left, right) => left.score - right.score || left.order - right.order)
+        .slice(0, limit)
+        .map((entry) => entry.option);
+    }
+
+    function timezoneNavigationIndex(key, current, resultCount, reopening) {
+      if (resultCount === 0) return -1;
+      if (reopening) return key === "ArrowDown" ? 0 : resultCount - 1;
+      if (key === "ArrowDown") return current < 0 || current >= resultCount - 1 ? 0 : current + 1;
+      return current <= 0 ? resultCount - 1 : current - 1;
+    }
+
+    function timezoneOptionPresentation(zone, offsetCache) {
+      let offset = offsetCache?.get(zone);
+      if (!offset) {
+        offset = timezoneOffsetLabel(zone);
+        offsetCache?.set(zone, offset);
+      }
+      const current = BROWSER_TIMEZONE === zone;
+      const preferred = timezonePreferredValue(zone);
+      if (zone === "UTC") {
+        return {
+          label: "UTC",
+          detail: offset + " now · Coordinated Universal Time" + (current ? " · Your browser time zone" : ""),
+        };
+      }
+      return {
+        label: timezoneCityLabel(preferred),
+        detail: preferred + " · " + offset + " now" + (current ? " · Your browser time zone" : ""),
+      };
+    }
+
     function browserTimezone() {
       return BROWSER_TIMEZONE;
     }
@@ -203,6 +389,7 @@ window.__ModuleLoader__.load({
       try {
         response = await fetch(API_PREFIX + path, Object.assign({}, options, { headers }));
       } catch (error) {
+        if (error && error.name === "AbortError") throw error;
         throw new Error("Network error: " + errMessage(error));
       }
       const text = await response.text();
@@ -446,6 +633,588 @@ window.__ModuleLoader__.load({
       );
     }
 
+    function useComboboxPopoverLayout(open, anchorRef, panelRef) {
+      const [layout, setLayout] = useState(null);
+      useEffect(() => {
+        if (!open) {
+          setLayout(null);
+          return undefined;
+        }
+        const place = () => {
+          const anchor = anchorRef.current;
+          if (!anchor) return;
+          const rect = anchor.getBoundingClientRect();
+          const panel = panelRef.current;
+          const margin = 12;
+          const gap = 4;
+          const width = Math.min(Math.max(rect.width, 280), window.innerWidth - margin * 2);
+          const left = Math.min(Math.max(rect.left, margin), window.innerWidth - width - margin);
+          const desiredHeight = Math.min(360, panel?.scrollHeight || 360);
+          const below = window.innerHeight - rect.bottom - gap - margin;
+          const above = rect.top - gap - margin;
+          const side = below >= Math.min(desiredHeight, 220) || below >= above ? "bottom" : "top";
+          const available = Math.max(80, side === "bottom" ? below : above);
+          const maxHeight = Math.min(360, available);
+          const renderedHeight = Math.min(panel?.offsetHeight || desiredHeight, maxHeight);
+          const top = side === "bottom"
+            ? rect.bottom + gap
+            : Math.max(margin, rect.top - gap - renderedHeight);
+          setLayout((current) => {
+            const next = { left, top, width, maxHeight, side };
+            return current
+              && current.left === next.left
+              && current.top === next.top
+              && current.width === next.width
+              && current.maxHeight === next.maxHeight
+              && current.side === next.side
+              ? current
+              : next;
+          });
+        };
+        const frame = requestAnimationFrame(place);
+        window.addEventListener("scroll", place, true);
+        window.addEventListener("resize", place);
+        const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(place);
+        if (anchorRef.current) observer?.observe(anchorRef.current);
+        if (panelRef.current) observer?.observe(panelRef.current);
+        return () => {
+          cancelAnimationFrame(frame);
+          observer?.disconnect();
+          window.removeEventListener("scroll", place, true);
+          window.removeEventListener("resize", place);
+        };
+      }, [open, anchorRef, panelRef]);
+      return layout;
+    }
+
+    function EditableCombobox(props) {
+      const {
+        id,
+        value,
+        onChange,
+        optionsForQuery,
+        selectedId,
+        commitExactValue,
+        placeholder,
+        Icon,
+        listboxLabel,
+        initialTitle,
+        searchTitle,
+        emptyText,
+        hintText,
+        resultNoun,
+        invalidMessage,
+        invalid = false,
+        disabled = false,
+        resumeSearch: resumeSearchProp,
+        panelNotice = null,
+        onOpen,
+      } = props;
+      const [open, setOpen] = useState(false);
+      const [searching, setSearching] = useState(false);
+      const [activeIndex, setActiveIndex] = useState(-1);
+      const [announcement, setAnnouncement] = useState("");
+      const anchorRef = useRef(null);
+      const inputRef = useRef(null);
+      const panelRef = useRef(null);
+      const listboxId = id + "-options";
+      const query = searching ? value : "";
+      const results = optionsForQuery(query);
+      const active = activeIndex >= 0 && activeIndex < results.length ? activeIndex : -1;
+      const resumeSearch = resumeSearchProp === undefined
+        ? value.trim() !== "" && selectedId === null
+        : resumeSearchProp;
+      const popoverLayout = useComboboxPopoverLayout(open, anchorRef, panelRef);
+      const close = () => {
+        setOpen(false);
+        setSearching(false);
+        setActiveIndex(-1);
+        setAnnouncement("");
+      };
+      const show = () => {
+        setAnnouncement("");
+        setOpen(true);
+        onOpen?.();
+      };
+      const choose = (option) => {
+        if (option.disabled) return;
+        if (option.value !== value) onChange(option.value);
+        close();
+        requestAnimationFrame(() => inputRef.current?.focus());
+      };
+
+      useEffect(() => {
+        if (!open) return undefined;
+        const dismiss = (event) => {
+          const target = event.target;
+          if (!(target instanceof Node)) return;
+          if (anchorRef.current?.contains(target) || panelRef.current?.contains(target)) return;
+          close();
+        };
+        document.addEventListener("pointerdown", dismiss, true);
+        return () => document.removeEventListener("pointerdown", dismiss, true);
+      }, [open]);
+
+      useEffect(() => {
+        if (!open) return undefined;
+        const timer = window.setTimeout(() => {
+          setAnnouncement(
+            results.length === 0
+              ? "No matching " + resultNoun + "s."
+              : results.length + " " + resultNoun + (results.length === 1 ? " suggestion available." : " suggestions available."),
+          );
+        }, 250);
+        return () => window.clearTimeout(timer);
+      }, [open, query, results.length]);
+
+      useEffect(() => {
+        if (!open || active < 0) return;
+        document.getElementById(listboxId + "-option-" + active)?.scrollIntoView({ block: "nearest" });
+      }, [open, active, listboxId]);
+
+      const onInputKeyDown = (event) => {
+        if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+          event.preventDefault();
+          const navigationResults = !open && resumeSearch
+            ? optionsForQuery(value)
+            : results;
+          if (!open) {
+            setSearching(resumeSearch);
+            show();
+          }
+          if (navigationResults.length === 0) {
+            setActiveIndex(-1);
+            return;
+          }
+          setActiveIndex((current) =>
+            timezoneNavigationIndex(event.key, current, navigationResults.length, !open),
+          );
+          return;
+        }
+        if (event.key === "Enter" && open) {
+          event.preventDefault();
+          if (active >= 0) {
+            choose(results[active]);
+            return;
+          }
+          const exact = commitExactValue(value);
+          if (exact !== null) choose({ id: exact, value: exact });
+          else setAnnouncement(invalidMessage);
+          return;
+        }
+        if (event.key === "Escape" && open) {
+          event.preventDefault();
+          event.stopPropagation();
+          (event.nativeEvent || event).__dshAutomationsNested = true;
+          close();
+          return;
+        }
+        if (event.key === "Tab" && open) close();
+      };
+
+      const panel = open
+        ? h(
+            "div",
+            {
+              ref: panelRef,
+              className: "dsh-auto-combobox-popover",
+              style: popoverLayout
+                ? {
+                    left: popoverLayout.left,
+                    top: popoverLayout.top,
+                    width: popoverLayout.width,
+                    maxHeight: popoverLayout.maxHeight,
+                  }
+                : { left: 12, top: 12, width: 320, visibility: "hidden" },
+              "data-side": popoverLayout?.side,
+              "data-dsh-auto-combobox-popover": "true",
+            },
+            h(
+              "div",
+              { className: "dsh-auto-combobox-popover-title" },
+              searching && query.trim() !== "" ? searchTitle : initialTitle,
+            ),
+            panelNotice
+              ? h("div", { className: "dsh-auto-combobox-notice", role: "status" }, panelNotice)
+              : null,
+            h(
+              "div",
+              {
+                id: listboxId,
+                className: "dsh-auto-combobox-list",
+                role: "listbox",
+                "aria-label": listboxLabel,
+              },
+              results.length > 0
+                ? results.map((option, index) => {
+                    const optionId = listboxId + "-option-" + index;
+                    const OptionIcon = option.Icon || Icon;
+                    const isSelected = selectedId === option.id;
+                    return h(
+                      "div",
+                      {
+                        key: option.id,
+                        id: optionId,
+                        className: "dsh-auto-combobox-option",
+                        role: "option",
+                        "aria-selected": isSelected,
+                        "aria-disabled": option.disabled ? "true" : undefined,
+                        "data-active": active === index ? "true" : undefined,
+                        "data-disabled": option.disabled ? "true" : undefined,
+                        onPointerMove: () => {
+                          if (!option.disabled) setActiveIndex(index);
+                        },
+                        onPointerDown: (event) => event.preventDefault(),
+                        onClick: () => choose(option),
+                      },
+                      OptionIcon
+                        ? h("span", { className: "dsh-auto-combobox-option-icon", "aria-hidden": "true" }, h(OptionIcon))
+                        : null,
+                      h(
+                        "span",
+                        { className: "dsh-auto-picker-item-copy" },
+                        h("span", { className: "dsh-auto-picker-item-label" }, option.label),
+                        option.detail
+                          ? h("span", { className: "dsh-auto-picker-item-detail" }, option.detail)
+                          : null,
+                      ),
+                      isSelected
+                        ? h("span", { className: "dsh-auto-combobox-option-check", "aria-hidden": "true" }, h(IconCheckOutline16))
+                        : null,
+                    );
+                  })
+                : h(
+                    "div",
+                    {
+                      className: "dsh-auto-combobox-empty",
+                      role: "option",
+                      "aria-disabled": "true",
+                      "aria-selected": false,
+                    },
+                    emptyText,
+                  ),
+            ),
+            hintText ? h("p", { className: "dsh-auto-combobox-popover-hint" }, hintText) : null,
+          )
+        : null;
+
+      return h(
+        React.Fragment,
+        null,
+        h(
+          "span",
+          {
+            ref: anchorRef,
+            className: "dsh-auto-combobox-control" + (Icon ? "" : " dsh-auto-combobox-control-no-icon"),
+            "data-open": open ? "true" : undefined,
+            onPointerDown: (event) => {
+              if (disabled) return;
+              if (event.target === inputRef.current) return;
+              event.preventDefault();
+              if (open) close();
+              else {
+                setSearching(resumeSearch);
+                show();
+                requestAnimationFrame(() => {
+                  inputRef.current?.focus();
+                  inputRef.current?.select();
+                });
+              }
+            },
+          },
+          Icon
+            ? h("span", { className: "dsh-auto-combobox-control-icon", "aria-hidden": "true" }, h(Icon))
+            : null,
+          h("input", {
+            ref: inputRef,
+            id,
+            className: "dsh-auto-combobox-input",
+            type: "text",
+            role: "combobox",
+            value,
+            placeholder,
+            disabled,
+            autoComplete: "off",
+            spellCheck: false,
+            "aria-autocomplete": "list",
+            "aria-haspopup": "listbox",
+            "aria-expanded": open,
+            "aria-controls": open ? listboxId : undefined,
+            "aria-activedescendant": open && active >= 0 ? listboxId + "-option-" + active : undefined,
+            "aria-invalid": !open && invalid ? "true" : undefined,
+            onFocus: (event) => {
+              setSearching(resumeSearch);
+              setActiveIndex(-1);
+              show();
+              event.currentTarget.select();
+            },
+            onClick: () => {
+              if (open) return;
+              setSearching(resumeSearch);
+              setActiveIndex(-1);
+              show();
+            },
+            onBlur: (event) => {
+              const next = event.relatedTarget;
+              if (next instanceof Node && (anchorRef.current?.contains(next) || panelRef.current?.contains(next))) return;
+              close();
+            },
+            onChange: (event) => {
+              setSearching(true);
+              setActiveIndex(0);
+              show();
+              onChange(event.target.value);
+            },
+            onKeyDown: onInputKeyDown,
+          }),
+          h(
+            "span",
+            {
+              className: "dsh-auto-combobox-chevron" + (open ? " dsh-auto-combobox-chevron-open" : ""),
+              "aria-hidden": "true",
+            },
+            h(IconChevronDownOutline14),
+          ),
+        ),
+        open && typeof document !== "undefined" ? createPortal(panel, document.body) : null,
+        h("span", { className: "dsh-auto-sr-only", role: "status", "aria-live": "polite" }, announcement),
+      );
+    }
+
+    function TimeZonePicker({ id, value, onChange }) {
+      const offsetCacheRef = useRef(new Map());
+      const selected = canonicalTimezone(value);
+      const optionsForQuery = (query) => timezoneSearchResults(query, value).map((zone) => {
+        const copy = timezoneOptionPresentation(zone, offsetCacheRef.current);
+        return {
+          id: zone,
+          value: timezonePreferredValue(zone),
+          label: copy.label,
+          detail: copy.detail,
+        };
+      });
+      return h(EditableCombobox, {
+        id,
+        value,
+        onChange,
+        optionsForQuery,
+        selectedId: selected,
+        commitExactValue: (raw) => {
+          const canonical = canonicalTimezone(raw);
+          return canonical ? timezonePreferredValue(canonical) : null;
+        },
+        placeholder: "Search city or time zone",
+        Icon: IconGlobeOutline14,
+        listboxLabel: "Time zones",
+        initialTitle: "Suggested time zones",
+        searchTitle: "Matching time zones",
+        emptyText: "No matching time zones. You can still enter a recognized IANA time zone, such as Europe/Berlin.",
+        hintText: "Type a city, region, or IANA time zone.",
+        resultNoun: "time zone",
+        invalidMessage: "Enter a valid IANA time zone, such as Europe/Berlin.",
+        invalid: value.trim() !== "" && selected === null,
+        resumeSearch: value.trim() !== "" && selected === null,
+        onOpen: () => offsetCacheRef.current.clear(),
+      });
+    }
+
+    function normalizedProviders(providers) {
+      return (Array.isArray(providers) ? providers : [])
+        .filter((provider) => provider && typeof provider.id === "string" && provider.id !== "")
+        .map((provider) => ({
+          id: provider.id,
+          name: typeof provider.name === "string" && provider.name !== "" ? provider.name : provider.id,
+          models: (Array.isArray(provider.models) ? provider.models : [])
+            .map((model) => typeof model === "string"
+              ? { id: model, name: model }
+              : model && typeof model.id === "string"
+                ? {
+                    id: model.id,
+                    name: typeof model.name === "string" && model.name !== "" ? model.name : model.id,
+                    ...(typeof model.description === "string" ? { description: model.description } : {}),
+                  }
+                : null)
+            .filter(Boolean),
+        }));
+    }
+
+    function ProviderPicker({ id, value, providers, defaultModel, onChange }) {
+      const catalog = normalizedProviders(providers);
+      const known = value === "" || catalog.some((provider) => provider.id === value);
+      const options = [
+        {
+          id: "",
+          value: "",
+          label: "Harness default",
+          detail: defaultModel && defaultModel.provider && defaultModel.model
+            ? "Use " + defaultModel.provider + " / " + defaultModel.model + "."
+            : "Resolve the current Harness provider at run time.",
+          Icon: IconSettingsOutline16,
+        },
+        ...catalog.map((provider) => ({
+          id: provider.id,
+          value: provider.id,
+          label: provider.name,
+          detail: (provider.name === provider.id ? "Provider route" : provider.id)
+            + " · " + provider.models.length + (provider.models.length === 1 ? " model" : " models"),
+          aliases: [provider.id],
+          Icon: IconSettingsOutline16,
+        })),
+        ...(value.trim() !== "" && !known
+          ? [{
+              id: "custom-provider:" + value,
+              value,
+              label: value,
+              detail: "Custom provider route · Press Enter to keep this value.",
+              custom: true,
+              Icon: IconSettingsOutline16,
+            }]
+          : []),
+      ];
+      return h(EditableCombobox, {
+        id,
+        value,
+        onChange,
+        optionsForQuery: (query) => comboboxSearchResults(options, query),
+        selectedId: value === "" ? "" : known ? value : "custom-provider:" + value,
+        commitExactValue: (raw) => raw.trim(),
+        placeholder: "Harness default",
+        Icon: IconSettingsOutline16,
+        listboxLabel: "Providers",
+        initialTitle: "Available providers",
+        searchTitle: "Matching providers",
+        emptyText: "No matching providers. Press Enter to keep this custom provider route.",
+        hintText: "Choose a configured provider or enter an adapter-supported route.",
+        resultNoun: "provider",
+        invalidMessage: "Enter a provider route.",
+        resumeSearch: value.trim() !== "" && !known,
+      });
+    }
+
+    function useExactModelMetadata(provider, model) {
+      const cacheKey = provider && model ? provider + "\u0000" + model : "";
+      const [state, setState] = useState(() => {
+        const cached = cacheKey ? MODEL_METADATA_CACHE.get(cacheKey) : null;
+        return cached
+          ? { key: cacheKey, status: "ready", data: cached, error: null }
+          : { key: cacheKey, status: cacheKey ? "loading" : "idle", data: null, error: null };
+      });
+      useEffect(() => {
+        if (!cacheKey) {
+          setState({ key: "", status: "idle", data: null, error: null });
+          return undefined;
+        }
+        const cached = MODEL_METADATA_CACHE.get(cacheKey);
+        if (cached) {
+          setState({ key: cacheKey, status: "ready", data: cached, error: null });
+          return undefined;
+        }
+        const controller = new AbortController();
+        let active = true;
+        setState({ key: cacheKey, status: "loading", data: null, error: null });
+        const timer = window.setTimeout(() => {
+          apiFetch(
+            "/meta/model?provider=" + encodeURIComponent(provider) + "&model=" + encodeURIComponent(model),
+            { signal: controller.signal },
+          ).then((data) => {
+            MODEL_METADATA_CACHE.set(cacheKey, data);
+            if (active) setState({ key: cacheKey, status: "ready", data, error: null });
+          }).catch((error) => {
+            if (!active || (error && error.name === "AbortError")) return;
+            setState({ key: cacheKey, status: "error", data: null, error: errMessage(error) });
+          });
+        }, 180);
+        return () => {
+          active = false;
+          window.clearTimeout(timer);
+          controller.abort();
+        };
+      }, [cacheKey, provider, model]);
+      if (state.key === cacheKey) return state;
+      const cached = cacheKey ? MODEL_METADATA_CACHE.get(cacheKey) : null;
+      return cached
+        ? { key: cacheKey, status: "ready", data: cached, error: null }
+        : { key: cacheKey, status: cacheKey ? "loading" : "idle", data: null, error: null };
+    }
+
+    function ReasoningEffortPicker({ id, value, provider, model, defaultModel, onChange }) {
+      const inherited = provider.trim() === "" && model.trim() === "";
+      const exactProvider = inherited ? String(defaultModel?.provider || "") : provider.trim();
+      const exactModel = inherited ? String(defaultModel?.model || "") : model.trim();
+      const modelState = useExactModelMetadata(exactProvider, exactModel);
+      const reasoning = modelState.status === "ready" && modelState.data
+        ? modelState.data.reasoning
+        : undefined;
+      const efforts = reasoning && Array.isArray(reasoning.efforts) ? reasoning.efforts : [];
+      const known = value === "" || efforts.some((effort) => effort.id === value);
+      const advertisedDefault = inherited
+        ? defaultModel?.reasoningEffort
+        : reasoning?.defaultEffort;
+      const defaultEffort = efforts.find((effort) => effort.id === advertisedDefault);
+      const defaultDetail = advertisedDefault
+        ? "Use " + (defaultEffort?.name || advertisedDefault) + (inherited ? " from the current Harness selection." : " as this model's default.")
+        : inherited
+          ? "Use the current Harness reasoning setting at run time."
+          : "Let the selected model or provider choose.";
+      const options = [
+        {
+          id: "",
+          value: "",
+          label: "Default",
+          detail: defaultDetail,
+          Icon: IconThinkOutline14,
+        },
+        ...efforts.map((effort) => ({
+          id: effort.id,
+          value: effort.id,
+          label: effort.name || effort.id,
+          detail: effort.description || (effort.name === effort.id ? "Adapter-owned effort level." : effort.id),
+          aliases: [effort.id],
+          Icon: IconThinkOutline14,
+        })),
+        ...(value.trim() !== "" && !known
+          ? [{
+              id: "custom-effort:" + value,
+              value,
+              label: value,
+              detail: "Custom effort ID · Availability is checked when the automation runs.",
+              custom: true,
+              Icon: IconThinkOutline14,
+            }]
+          : []),
+      ];
+      let panelNotice = null;
+      if (!exactProvider || !exactModel) {
+        panelNotice = "Choose a model to load its effort levels.";
+      } else if (modelState.status === "loading") {
+        panelNotice = "Loading effort levels for " + exactProvider + " / " + exactModel + "…";
+      } else if (modelState.status === "error") {
+        panelNotice = "Effort metadata is unavailable. You can still enter an adapter-supported ID.";
+      } else if (modelState.status === "ready" && !reasoning) {
+        panelNotice = "This model does not advertise selectable effort levels. Custom IDs remain available.";
+      }
+      return h(EditableCombobox, {
+        id,
+        value,
+        onChange,
+        optionsForQuery: (query) => comboboxSearchResults(options, query),
+        selectedId: value === "" ? "" : known ? value : "custom-effort:" + value,
+        commitExactValue: (raw) => raw.trim(),
+        placeholder: "Default",
+        Icon: IconThinkOutline14,
+        listboxLabel: "Reasoning effort levels",
+        initialTitle: "Reasoning effort",
+        searchTitle: "Matching effort levels",
+        emptyText: "No matching effort levels. Press Enter to keep this custom effort ID.",
+        hintText: "Options come from the exact model; custom adapter-owned IDs remain accepted.",
+        resultNoun: "effort level",
+        invalidMessage: "Enter an effort ID or choose Default.",
+        resumeSearch: value.trim() !== "" && !known,
+        panelNotice,
+        disabled: provider.trim() !== "" && model.trim() === "" && value.trim() === "",
+      });
+    }
+
     function AgentPresetPicker({ id, value, presets, onChange }) {
       const [open, setOpen] = useState(false);
       const ownerId = useId();
@@ -608,7 +1377,7 @@ window.__ModuleLoader__.load({
 
     function JobForm(props) {
       const { meta, draft, editing, saving, error, onChange, onIdTouched, onSubmit, onCancel } = props;
-      const providers = meta && Array.isArray(meta.providers) ? meta.providers : [];
+      const providers = normalizedProviders(meta && Array.isArray(meta.providers) ? meta.providers : []);
       const providerModels = providers.find((provider) => provider.id === draft.provider);
       const models = providerModels ? providerModels.models : [];
       const permissionPresets =
@@ -692,21 +1461,17 @@ window.__ModuleLoader__.load({
           ),
           h(
             Field,
-            { label: "Timezone", htmlFor: fieldId("timezone"), required: true },
-            h("input", {
+            {
+              label: "Time zone",
+              htmlFor: fieldId("timezone"),
+              required: true,
+              hint: "Enter an IANA time zone. Current UTC offsets may change with daylight saving time.",
+            },
+            h(TimeZonePicker, {
               id: fieldId("timezone"),
-              className: "dsh-auto-input",
-              type: "text",
-              list: fieldId("timezone-list"),
               value: draft.timezone,
-              spellCheck: false,
-              onChange: (event) => onChange("timezone", event.target.value),
+              onChange: (value) => onChange("timezone", value),
             }),
-            h(
-              "datalist",
-              { id: fieldId("timezone-list") },
-              TIMEZONES.map((zone) => h("option", { key: zone, value: zone })),
-            ),
           ),
           h(
             Field,
@@ -740,21 +1505,13 @@ window.__ModuleLoader__.load({
           h(
             Field,
             { label: "Provider", htmlFor: fieldId("provider"), hint: "Blank uses the current Harness default. You may type an unlisted provider route." },
-            h("input", {
+            h(ProviderPicker, {
               id: fieldId("provider"),
-              className: "dsh-auto-input",
-              type: "text",
-              list: fieldId("provider-list"),
               value: draft.provider,
-              spellCheck: false,
-              placeholder: "Harness default",
-              onChange: (event) => onChange("provider", event.target.value),
+              providers,
+              defaultModel: meta?.defaultModel,
+              onChange: (value) => onChange("provider", value),
             }),
-            h(
-              "datalist",
-              { id: fieldId("provider-list") },
-              providers.map((provider) => h("option", { key: provider.id, value: provider.id })),
-            ),
           ),
           h(
             Field,
@@ -780,27 +1537,24 @@ window.__ModuleLoader__.load({
             h(
               "datalist",
               { id: fieldId("model-list") },
-              models.map((model) => h("option", { key: model, value: model })),
+              models.map((model) => h("option", {
+                key: model.id,
+                value: model.id,
+                label: model.name === model.id ? undefined : model.name,
+              })),
             ),
           ),
           h(
             Field,
-            { label: "Reasoning effort", htmlFor: fieldId("effort"), hint: "Blank uses the provider default." },
-            h("input", {
+            { label: "Reasoning effort", htmlFor: fieldId("effort"), hint: "Default follows the selected model. Custom adapter-owned IDs remain supported." },
+            h(ReasoningEffortPicker, {
               id: fieldId("effort"),
-              className: "dsh-auto-input",
-              type: "text",
-              list: fieldId("effort-list"),
               value: draft.reasoningEffort,
-              spellCheck: false,
-              placeholder: "e.g. medium",
-              onChange: (event) => onChange("reasoningEffort", event.target.value),
+              provider: draft.provider,
+              model: draft.model,
+              defaultModel: meta?.defaultModel,
+              onChange: (value) => onChange("reasoningEffort", value),
             }),
-            h(
-              "datalist",
-              { id: fieldId("effort-list") },
-              REASONING_EFFORTS.map((effort) => h("option", { key: effort, value: effort })),
-            ),
           ),
           h(
             Field,
@@ -1348,7 +2102,9 @@ window.__ModuleLoader__.load({
               next = Object.assign({}, next, { id: slugifyJobId(value) });
             }
             if (key === "provider") {
-              next = Object.assign({}, next, { model: "" });
+              next = Object.assign({}, next, { model: "", reasoningEffort: "" });
+            } else if (key === "model") {
+              next = Object.assign({}, next, { reasoningEffort: "" });
             }
             return next;
           });
@@ -1657,7 +2413,7 @@ window.__ModuleLoader__.load({
         const onKeyDown = (event) => {
           if (event.key !== "Escape" || event.defaultPrevented || event.__dshAutomationsNested) return;
           if (event.target?.closest?.('[role="dialog"],[role="menu"]')) return;
-          if (document.querySelector('.dsh-auto-picker-trigger[aria-expanded="true"]')) return;
+          if (document.querySelector('.dsh-auto-picker-trigger[aria-expanded="true"],.dsh-auto-combobox-input[aria-expanded="true"]')) return;
           event.preventDefault();
           disclosure.close();
         };
@@ -1745,7 +2501,34 @@ window.__ModuleLoader__.load({
       ".dsh-auto-picker-chevron-open{transform:rotate(180deg);}",
       ".dsh-auto-picker-item-copy{min-width:0;display:flex;flex-direction:column;white-space:normal;}",
       ".dsh-auto-picker-item-label{color:inherit;font-size:14px;line-height:20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}",
-      ".dsh-auto-picker-item-detail{color:var(--dsh-auto-muted);font-size:12px;line-height:18px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}",
+      ".dsh-auto-picker-item-detail{color:var(--dsh-auto-muted,var(--dsw-alias-label-tertiary,#81858c));font-size:12px;line-height:18px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}",
+      ".dsh-auto-combobox-control{width:100%;height:34px;padding:0 8px;display:flex;align-items:center;gap:7px;border:1px solid var(--dsh-auto-border);border-radius:8px;background:var(--dsh-auto-input-bg);color:var(--dsh-auto-text);cursor:text;}",
+      ".dsh-auto-combobox-control:hover{background:var(--dsw-alias-interactive-bg-hover,var(--dsh-auto-input-bg));}",
+      ".dsh-auto-combobox-control:focus-within,.dsh-auto-combobox-control[data-open=\"true\"]{border-color:var(--dsh-auto-accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--dsh-auto-accent) 18%,transparent);}",
+      ".dsh-auto-combobox-control:has(.dsh-auto-combobox-input[aria-invalid=\"true\"]){border-color:var(--dsh-auto-danger);}",
+      ".dsh-auto-combobox-control:has(.dsh-auto-combobox-input:disabled){background:var(--dsh-auto-surface-active);color:var(--dsh-auto-muted);cursor:default;}",
+      ".dsh-auto-combobox-control-icon,.dsh-auto-combobox-chevron{width:16px;height:16px;flex:none;display:inline-flex;align-items:center;justify-content:center;color:var(--dsh-auto-muted);pointer-events:none;}",
+      ".dsh-auto-combobox-input{appearance:none;min-width:0;height:100%;flex:1;padding:0;border:0;outline:0;background:transparent;color:inherit;font:inherit;font-size:13px;line-height:20px;}",
+      ".dsh-auto-combobox-input::placeholder{color:var(--dsh-auto-caption);}",
+      ".dsh-auto-combobox-input:disabled{cursor:default;}",
+      ".dsh-auto-combobox-chevron{transition:transform .12s ease;}",
+      ".dsh-auto-combobox-chevron-open{transform:rotate(180deg);}",
+      ".dsh-auto-combobox-popover{box-sizing:border-box;position:fixed;z-index:1100;max-height:min(360px,calc(100vh - 24px));padding:4px;display:flex;flex-direction:column;border:1px solid var(--dsw-alias-border-inverted,var(--dsw-alias-border-l2,rgba(15,17,21,.16)));border-radius:12px;background:var(--dsw-specific-menu,var(--dsw-alias-bg-layer-2,#fff));box-shadow:var(--dsw-shadow-lv3,0 12px 32px rgba(15,17,21,.16));color:var(--dsw-alias-label-primary,#0f1115);font-family:inherit;}",
+      ".dsh-auto-combobox-popover *,.dsh-auto-combobox-popover *::before,.dsh-auto-combobox-popover *::after{box-sizing:border-box;}",
+      ".dsh-auto-combobox-popover-title{flex:none;padding:7px 10px 5px;color:var(--dsw-alias-label-tertiary,#81858c);font-size:11px;font-weight:600;line-height:16px;text-transform:uppercase;letter-spacing:.04em;}",
+      ".dsh-auto-combobox-notice{flex:none;margin:2px 4px 4px;padding:7px 9px;border-radius:8px;background:var(--dsw-alias-bg-module-platform,var(--dsw-alias-interactive-bg-hover,rgba(38,49,72,.06)));color:var(--dsw-alias-label-secondary,#4f5661);font-size:12px;line-height:18px;}",
+      ".dsh-auto-combobox-list{min-height:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;--dsh-scrollbar-thumb:var(--dsw-alias-scrollbar-bg-l2);--dsh-scrollbar-thumb-hover:var(--dsw-alias-scrollbar-hover-l2);}",
+      ".dsh-auto-combobox-option{width:100%;min-height:48px;padding:6px 9px;display:flex;align-items:center;gap:8px;border-radius:9px;cursor:pointer;user-select:none;}",
+      ".dsh-auto-combobox-option:hover,.dsh-auto-combobox-option[data-active=\"true\"]{background:var(--dsw-alias-interactive-bg-hover,rgba(38,49,72,.06));}",
+      ".dsh-auto-combobox-option[data-disabled=\"true\"]{cursor:default;color:var(--dsw-alias-label-dimmed,var(--dsh-auto-caption));}",
+      ".dsh-auto-combobox-option[data-disabled=\"true\"]:hover{background:transparent;}",
+      ".dsh-auto-combobox-option[aria-selected=\"true\"]{color:var(--dsw-alias-state-business-primary,#4176e6);}",
+      ".dsh-auto-combobox-option-icon,.dsh-auto-combobox-option-check{width:16px;height:16px;flex:none;display:inline-flex;align-items:center;justify-content:center;color:var(--dsw-alias-label-tertiary,#81858c);}",
+      ".dsh-auto-combobox-option>.dsh-auto-picker-item-copy{min-width:0;flex:1;}",
+      ".dsh-auto-combobox-option .dsh-auto-picker-item-detail{color:var(--dsw-alias-label-tertiary,#81858c);}",
+      ".dsh-auto-combobox-option-check{color:var(--dsw-alias-state-business-primary,#4176e6);}",
+      ".dsh-auto-combobox-empty{margin:0;padding:16px 12px;color:var(--dsw-alias-label-secondary,#4f5661);font-size:12px;line-height:18px;text-align:center;}",
+      ".dsh-auto-combobox-popover-hint{flex:none;margin:4px 0 0;padding:7px 10px 5px;border-top:1px solid var(--dsw-alias-border-l2,rgba(15,17,21,.12));color:var(--dsw-alias-label-tertiary,#81858c);font-size:11px;line-height:16px;}",
       ".dsh-auto-permission-glyph{flex:none;}",
       ".dsh-auto-permission-glyph-read{color:var(--dsh-auto-muted);}",
       ".dsh-auto-permission-glyph-write{color:var(--dsh-auto-accent);}",
@@ -1888,7 +2671,21 @@ window.__ModuleLoader__.load({
     exports.agentPresetDisplayLabel = agentPresetDisplayLabel;
     exports.permissionPresetPresentation = permissionPresetPresentation;
     exports.PermissionPresetPicker = PermissionPresetPicker;
-    exports.__testing = Object.freeze({ nextFormInstancePrefix });
+    exports.EditableCombobox = EditableCombobox;
+    exports.ProviderPicker = ProviderPicker;
+    exports.ReasoningEffortPicker = ReasoningEffortPicker;
+    exports.TimeZonePicker = TimeZonePicker;
+    exports.__testing = Object.freeze({
+      nextFormInstancePrefix,
+      canonicalTimezone,
+      comboboxSearchResults,
+      normalizedProviders,
+      timezoneOffsetLabel,
+      timezoneNavigationIndex,
+      timezoneOptionPresentation,
+      timezonePreferredValue,
+      timezoneSearchResults,
+    });
     exports.inject = inject;
     exports.apply = apply;
     return module.exports;