@syncended/dsh-automations 0.3.0 → 0.4.0

package/README.md

@@ -56,7 +56,7 @@ dsh plugin --profile web remove @syncended/dsh-automations
 |---|---|
 | Name | Human-readable job name. |
 | Cron | Five fields: `minute hour day-of-month month day-of-week`. Example: `0 9 * * 1-5`. |
-| Timezone | `UTC` or an IANA name such as `Europe/Berlin`. DST is handled by `cron-parser`. |
+| Time zone | Search by city or region in the picker, or enter `UTC` / an IANA name such as `Europe/Berlin`. Current UTC offsets are shown; DST is handled by `cron-parser`. |
 | Project | Existing absolute directory. Its canonical filesystem identity becomes the Session cwd and `workspace-write` root. |
 | Prompt | The user message sent to a fresh Harness Agent. |
 | Provider / model | Leave both blank to resolve the current Harness default at dispatch time. Set both to pin a route. |

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,9 +24,11 @@ window.__ModuleLoader__.load({
       IconChevronDownOutline14,
       IconChevronLeftOutline14,
       IconEditOutline16,
+      IconGlobeOutline14,
       IconPlayOutline16,
       IconPlusOutline16,
       IconRefreshOutline16,
+      IconSearchOutline16,
       IconSettingsOutline16,
       IconTrashOutline16,
       IconWarningOutline16,
@@ -40,6 +43,7 @@ window.__ModuleLoader__.load({
     const MIN_TIMEOUT_MS = 1000;
     const MAX_TIMEOUT_MS = 86400000;
     const JOB_ID_PATTERN = /^[a-z0-9][a-z0-9-]{0,62}$/;
+    let formInstanceSerial = 0;
 
     const BROWSER_TIMEZONE = (() => {
       try {
@@ -49,24 +53,75 @@ 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 OVERLAP_OPTIONS = [
@@ -146,6 +201,110 @@ 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 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;
     }
@@ -445,6 +604,310 @@ window.__ModuleLoader__.load({
       );
     }
 
+    function useTimeZonePopoverLayout(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 TimeZonePicker({ id, value, onChange }) {
+      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 offsetCacheRef = useRef(new Map());
+      const listboxId = id + "-options";
+      const query = searching ? value : "";
+      const results = timezoneSearchResults(query, value);
+      const active = activeIndex >= 0 && activeIndex < results.length ? activeIndex : -1;
+      const selected = canonicalTimezone(value);
+      const resumeSearch = value.trim() !== "" && selected === null;
+      const popoverLayout = useTimeZonePopoverLayout(open, anchorRef, panelRef);
+      const close = () => {
+        setOpen(false);
+        setSearching(false);
+        setActiveIndex(-1);
+        setAnnouncement("");
+      };
+      const show = () => {
+        offsetCacheRef.current.clear();
+        setAnnouncement("");
+        setOpen(true);
+      };
+      const choose = (zone) => {
+        onChange(timezonePreferredValue(zone));
+        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 time zones."
+              : results.length + (results.length === 1 ? " time zone suggestion available." : " time zone 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
+            ? timezoneSearchResults(value, 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 canonical = canonicalTimezone(value);
+          if (canonical) choose(canonical);
+          else setAnnouncement("Enter a valid IANA time zone, such as Europe/Berlin.");
+          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-timezone-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-timezone-popover": "true",
+            },
+            h(
+              "div",
+              { className: "dsh-auto-timezone-popover-title" },
+              searching && query.trim() !== "" ? "Matching time zones" : "Suggested time zones",
+            ),
+            h(
+              "div",
+              {
+                id: listboxId,
+                className: "dsh-auto-timezone-list",
+                role: "listbox",
+                "aria-label": "Time zones",
+              },
+              results.length > 0
+                ? results.map((zone, index) => {
+                    const copy = timezoneOptionPresentation(zone, offsetCacheRef.current);
+                    const optionId = listboxId + "-option-" + index;
+                    return h(
+                      "div",
+                      {
+                        key: zone,
+                        id: optionId,
+                        className: "dsh-auto-timezone-option",
+                        role: "option",
+                        "aria-selected": selected === zone,
+                        "data-active": active === index ? "true" : undefined,
+                        onPointerMove: () => setActiveIndex(index),
+                        onPointerDown: (event) => event.preventDefault(),
+                        onClick: () => choose(zone),
+                      },
+                      h("span", { className: "dsh-auto-timezone-option-icon", "aria-hidden": "true" }, h(IconGlobeOutline14)),
+                      h(
+                        "span",
+                        { className: "dsh-auto-picker-item-copy" },
+                        h("span", { className: "dsh-auto-picker-item-label" }, copy.label),
+                        h("span", { className: "dsh-auto-picker-item-detail" }, copy.detail),
+                      ),
+                      selected === zone
+                        ? h("span", { className: "dsh-auto-timezone-option-check", "aria-hidden": "true" }, h(IconCheckOutline16))
+                        : null,
+                    );
+                  })
+                : h(
+                    "div",
+                    {
+                      className: "dsh-auto-timezone-empty",
+                      role: "option",
+                      "aria-disabled": "true",
+                      "aria-selected": false,
+                    },
+                    "No matching time zones. You can still enter a recognized IANA time zone, such as Europe/Berlin.",
+                  ),
+            ),
+            h("p", { className: "dsh-auto-timezone-popover-hint" }, "Type a city, region, or IANA time zone."),
+          )
+        : null;
+
+      return h(
+        React.Fragment,
+        null,
+        h(
+          "span",
+          {
+            ref: anchorRef,
+            className: "dsh-auto-timezone-control",
+            "data-open": open ? "true" : undefined,
+            onPointerDown: (event) => {
+              if (event.target === inputRef.current) return;
+              event.preventDefault();
+              if (open) close();
+              else {
+                setSearching(resumeSearch);
+                show();
+                requestAnimationFrame(() => {
+                  inputRef.current?.focus();
+                  inputRef.current?.select();
+                });
+              }
+            },
+          },
+          h("span", { className: "dsh-auto-timezone-control-icon", "aria-hidden": "true" }, h(IconGlobeOutline14)),
+          h("input", {
+            ref: inputRef,
+            id,
+            className: "dsh-auto-timezone-input",
+            type: "text",
+            role: "combobox",
+            value,
+            placeholder: "Search city or time zone",
+            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 && value.trim() !== "" && selected === null ? "true" : undefined,
+            onFocus: (event) => {
+              setSearching(resumeSearch);
+              setActiveIndex(-1);
+              show();
+              event.currentTarget.select();
+            },
+            onClick: () => {
+              if (open) return;
+              setSearching(resumeSearch);
+              setActiveIndex(-1);
+              show();
+            },
+            onChange: (event) => {
+              setSearching(true);
+              setActiveIndex(0);
+              show();
+              onChange(event.target.value);
+            },
+            onKeyDown: onInputKeyDown,
+          }),
+          h(
+            "span",
+            {
+              className: "dsh-auto-timezone-chevron" + (open ? " dsh-auto-timezone-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 AgentPresetPicker({ id, value, presets, onChange }) {
       const [open, setOpen] = useState(false);
       const ownerId = useId();
@@ -600,6 +1063,11 @@ window.__ModuleLoader__.load({
       return h("span", { className: "dsh-auto-status dsh-auto-status-" + props.status }, props.status);
     }
 
+    function nextFormInstancePrefix(reactFormId) {
+      formInstanceSerial += 1;
+      return "dsh-auto-form-" + formInstanceSerial + "-" + reactFormId;
+    }
+
     function JobForm(props) {
       const { meta, draft, editing, saving, error, onChange, onIdTouched, onSubmit, onCancel } = props;
       const providers = meta && Array.isArray(meta.providers) ? meta.providers : [];
@@ -611,8 +1079,12 @@ window.__ModuleLoader__.load({
           : ["workspace-write"];
       const agentPresets = meta && Array.isArray(meta.agentPresets) ? meta.agentPresets : [];
       const creating = editing === null;
-      const formPrefix = "dsh-auto-form-" + String(useId()).replace(/[^A-Za-z0-9_-]/g, "");
-      const fieldId = (name) => formPrefix + "-" + name;
+      const reactFormId = String(useId()).replace(/[^A-Za-z0-9_-]/g, "");
+      const formPrefixRef = useRef(null);
+      if (formPrefixRef.current === null) {
+        formPrefixRef.current = nextFormInstancePrefix(reactFormId);
+      }
+      const fieldId = (name) => formPrefixRef.current + "-" + name;
 
       return h(
         "form",
@@ -682,21 +1154,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,
@@ -1647,7 +2115,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-timezone-input[aria-expanded="true"]')) return;
           event.preventDefault();
           disclosure.close();
         };
@@ -1735,7 +2203,29 @@ 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-timezone-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-timezone-control:hover{background:var(--dsw-alias-interactive-bg-hover,var(--dsh-auto-input-bg));}",
+      ".dsh-auto-timezone-control:focus-within,.dsh-auto-timezone-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-timezone-control:has(.dsh-auto-timezone-input[aria-invalid=\"true\"]){border-color:var(--dsh-auto-danger);}",
+      ".dsh-auto-timezone-control-icon,.dsh-auto-timezone-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-timezone-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-timezone-input::placeholder{color:var(--dsh-auto-caption);}",
+      ".dsh-auto-timezone-chevron{transition:transform .12s ease;}",
+      ".dsh-auto-timezone-chevron-open{transform:rotate(180deg);}",
+      ".dsh-auto-timezone-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-timezone-popover *,.dsh-auto-timezone-popover *::before,.dsh-auto-timezone-popover *::after{box-sizing:border-box;}",
+      ".dsh-auto-timezone-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-timezone-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-timezone-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-timezone-option:hover,.dsh-auto-timezone-option[data-active=\"true\"]{background:var(--dsw-alias-interactive-bg-hover,rgba(38,49,72,.06));}",
+      ".dsh-auto-timezone-option[aria-selected=\"true\"]{color:var(--dsw-alias-state-business-primary,#4176e6);}",
+      ".dsh-auto-timezone-option-icon,.dsh-auto-timezone-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-timezone-option>.dsh-auto-picker-item-copy{min-width:0;flex:1;}",
+      ".dsh-auto-timezone-option .dsh-auto-picker-item-detail{color:var(--dsw-alias-label-tertiary,#81858c);}",
+      ".dsh-auto-timezone-option-check{color:var(--dsw-alias-state-business-primary,#4176e6);}",
+      ".dsh-auto-timezone-empty{margin:0;padding:16px 12px;color:var(--dsw-alias-label-secondary,#4f5661);font-size:12px;line-height:18px;text-align:center;}",
+      ".dsh-auto-timezone-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);}",
@@ -1878,6 +2368,16 @@ window.__ModuleLoader__.load({
     exports.agentPresetDisplayLabel = agentPresetDisplayLabel;
     exports.permissionPresetPresentation = permissionPresetPresentation;
     exports.PermissionPresetPicker = PermissionPresetPicker;
+    exports.TimeZonePicker = TimeZonePicker;
+    exports.__testing = Object.freeze({
+      nextFormInstancePrefix,
+      canonicalTimezone,
+      timezoneOffsetLabel,
+      timezoneNavigationIndex,
+      timezoneOptionPresentation,
+      timezonePreferredValue,
+      timezoneSearchResults,
+    });
     exports.inject = inject;
     exports.apply = apply;
     return module.exports;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@syncended/dsh-automations",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Durable cron automations for DeepSeek Harness",
   "type": "module",
   "main": "dist/index.js",
@@ -91,7 +91,8 @@
     "@deepseek-ai/dsh-llm": "^0.1.1-rc.2",
     "@deepseek-ai/dsh-permission-presets": "^0.1.1-rc.2",
     "@deepseek-ai/dsh-session": "^0.1.1-rc.2",
-    "react": "^18.2.0"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
     "@deepseek-ai/cordis": "4.0.1",
@@ -110,6 +111,7 @@
     "@deepseek-ai/dsh-session": "0.1.1-rc.2",
     "@types/node": "^22.0.0",
     "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "typescript": "^5.9.3"
   }
 }