@syncended/dsh-automations 0.2.0 → 0.2.2

package/docs/architecture.md

@@ -32,6 +32,8 @@ Sidebar / Settings UI / HTTP API
 
 The same automation page is available through two additive DSH extension points: `settings.section` keeps the configuration page inside Settings, while `sidebar.footer.action` opens a frame-wide `shell.overlay`. A small client-only disclosure store coordinates the sidebar trigger and overlay; neither surface owns scheduler state, and both read the same package HTTP API.
 
+Interactive chrome uses the ambient `@deepseek-ai/dsh-client-ui-primitives` `Button`, `Menu`, and icon components. Package CSS is limited to the automation-specific layout and composes only public DSH semantic tokens, so theme, menu, focus, and button behavior stay aligned with the host UI.
+
 ### AutomationService
 
 Cordis service `ctx.automations`. It owns input validation, canonical project authorization, metadata discovery, the Web route, and the public executor-registration seam.

package/lib/client.js

@@ -13,6 +13,23 @@ window.__ModuleLoader__.load({
     const React = require("react");
     const h = React.createElement;
     const { useCallback, useEffect, useId, useRef, useState, useSyncExternalStore } = React;
+    const {
+      Button,
+      Menu,
+      RiskConfirmation,
+      IconAgentPresetOutline16,
+      IconBrowseOutline16,
+      IconCheckOutline16,
+      IconChevronDownOutline14,
+      IconCloseOutline16,
+      IconEditOutline16,
+      IconPlayOutline16,
+      IconPlusOutline16,
+      IconRefreshOutline16,
+      IconSettingsOutline16,
+      IconTrashOutline16,
+      IconWarningOutline16,
+    } = require("@deepseek-ai/dsh-client-ui-primitives");
     const inject = ["slots"];
 
     const API_PREFIX = "/api/automations";
@@ -66,6 +83,69 @@ window.__ModuleLoader__.load({
       return error instanceof Error ? error.message : String(error);
     }
 
+    const CJK_LABEL_PATTERN = /[\u3040-\u30ff\u3400-\u4dbf\u4e00-\u9fff\uf900-\ufaff\uac00-\ud7af]/;
+    const BUILTIN_AGENT_PRESET_LABELS = {
+      standard: "Standard mode",
+      code: "PTC mode",
+      minimal: "Minimal mode",
+      cordis: "Creator mode",
+    };
+    const PERMISSION_PRESET_PRESENTATION = {
+      "read-only": {
+        label: "Read Only",
+        detail: "Read files without modifying the workspace.",
+        icon: IconBrowseOutline16,
+        tone: "read",
+      },
+      "workspace-write": {
+        label: "Workspace Write",
+        detail: "Write inside the workspace; wider retries require approval.",
+        icon: IconEditOutline16,
+        tone: "write",
+      },
+      "danger-full-access": {
+        label: "Full access",
+        detail: "Full file access without approval prompts.",
+        icon: IconWarningOutline16,
+        tone: "danger",
+      },
+    };
+
+    function humanizePresetId(id) {
+      return id
+        .split(/[-_]+/)
+        .filter(Boolean)
+        .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+        .join(" ");
+    }
+
+    function agentPresetDisplayLabel(preset) {
+      const id = preset && typeof preset.id === "string" ? preset.id.trim() : "";
+      const name = preset && typeof preset.name === "string" ? preset.name.trim() : "";
+      if (id === "") return name !== "" && !CJK_LABEL_PATTERN.test(name) ? name : "Unknown preset";
+      if (name !== "" && name !== id && !CJK_LABEL_PATTERN.test(name)) return name + " (" + id + ")";
+      const readableId = BUILTIN_AGENT_PRESET_LABELS[id] || humanizePresetId(id) || id;
+      return readableId === id ? id : readableId + " (" + id + ")";
+    }
+
+    function permissionPresetPresentation(value) {
+      const known = PERMISSION_PRESET_PRESENTATION[value];
+      if (known) return known;
+      return {
+        label: humanizePresetId(value) || value || "Unknown permission",
+        detail: "Host-provided permission preset.",
+        icon: IconSettingsOutline16,
+        tone: "custom",
+      };
+    }
+
+    function PermissionPresetIcon({ value, className }) {
+      const presentation = permissionPresetPresentation(value);
+      return h(presentation.icon, {
+        className: (className ? className + " " : "") + "dsh-auto-permission-glyph dsh-auto-permission-glyph-" + presentation.tone,
+      });
+    }
+
     function browserTimezone() {
       return BROWSER_TIMEZONE;
     }
@@ -233,6 +313,285 @@ window.__ModuleLoader__.load({
       );
     }
 
+    function pickerMenuFor(ownerId) {
+      return Array.from(document.querySelectorAll('[role="menu"]')).find((menu) =>
+        Array.from(menu.querySelectorAll("[data-dsh-auto-picker-owner]")).some((item) =>
+          item.getAttribute("data-dsh-auto-picker-owner") === ownerId,
+        ),
+      ) || null;
+    }
+
+    function focusPickerTrigger(triggerRef) {
+      requestAnimationFrame(() => triggerRef.current?.focus());
+    }
+
+    function focusAfterPickerTab(trigger, backwards) {
+      requestAnimationFrame(() => {
+        const panel = trigger?.closest('[role="dialog"]');
+        if (!panel) {
+          trigger?.focus();
+          return;
+        }
+        const focusables = modalFocusables(panel);
+        const index = focusables.indexOf(trigger);
+        const target = index < 0 ? trigger : focusables[index + (backwards ? -1 : 1)];
+        (target || trigger)?.focus();
+      });
+    }
+
+    function usePickerMenuNavigation({ open, setOpen, ownerId, selectedId, triggerRef }) {
+      useEffect(() => {
+        if (!open) return;
+        const focusSelected = () => {
+          const menu = pickerMenuFor(ownerId);
+          if (!menu) return;
+          const buttons = Array.from(menu.querySelectorAll('button[role="menuitem"]:not(:disabled)'));
+          const selected = buttons.find((button) =>
+            button.querySelector("[data-dsh-auto-picker-item]")?.getAttribute("data-dsh-auto-picker-item") === selectedId,
+          );
+          (selected || buttons[0])?.focus();
+        };
+        const frame = requestAnimationFrame(focusSelected);
+        const onKeyDown = (event) => {
+          const menu = pickerMenuFor(ownerId);
+          if (!menu || !(event.target instanceof Node) || !menu.contains(event.target)) return;
+          const buttons = Array.from(menu.querySelectorAll('button[role="menuitem"]:not(:disabled)'));
+          const index = buttons.indexOf(event.target.closest('button[role="menuitem"]'));
+          let target;
+          if (event.key === "ArrowDown") target = buttons[(Math.max(index, -1) + 1) % buttons.length];
+          else if (event.key === "ArrowUp") target = buttons[(index <= 0 ? buttons.length : index) - 1];
+          else if (event.key === "Home") target = buttons[0];
+          else if (event.key === "End") target = buttons[buttons.length - 1];
+          else if (event.key === "Escape") {
+            event.preventDefault();
+            event.stopImmediatePropagation();
+            setOpen(false);
+            focusPickerTrigger(triggerRef);
+            return;
+          } else if (event.key === "Tab") {
+            event.preventDefault();
+            event.stopImmediatePropagation();
+            setOpen(false);
+            focusAfterPickerTab(triggerRef.current, event.shiftKey);
+            return;
+          } else return;
+          if (!target) return;
+          event.preventDefault();
+          target.focus();
+        };
+        document.addEventListener("keydown", onKeyDown, true);
+        return () => {
+          cancelAnimationFrame(frame);
+          document.removeEventListener("keydown", onKeyDown, true);
+        };
+      }, [open, ownerId, selectedId, setOpen, triggerRef]);
+    }
+
+    function openPickerFromKeyboard(event, setOpen) {
+      if (event.key !== "ArrowDown" && event.key !== "ArrowUp") return;
+      event.preventDefault();
+      setOpen(true);
+    }
+
+    function useRiskConfirmationFocus(open) {
+      useEffect(() => {
+        if (!open) return;
+        const riskDialog = () => Array.from(document.querySelectorAll('[role="dialog"]')).find((dialog) =>
+          dialog.getAttribute("aria-label") === "Enable Full access?",
+        ) || null;
+        let innerFrame;
+        const frame = requestAnimationFrame(() => {
+          innerFrame = requestAnimationFrame(() => {
+            riskDialog()?.querySelector('input[type="checkbox"]')?.focus();
+          });
+        });
+        const onKeyDown = (event) => {
+          if (event.key !== "Tab") return;
+          const dialog = riskDialog();
+          if (!dialog) return;
+          const focusables = modalFocusables(dialog);
+          if (focusables.length === 0) return;
+          const index = focusables.indexOf(event.target);
+          const next = event.shiftKey
+            ? focusables[index <= 0 ? focusables.length - 1 : index - 1]
+            : focusables[index < 0 || index === focusables.length - 1 ? 0 : index + 1];
+          event.preventDefault();
+          event.stopImmediatePropagation();
+          next.focus();
+        };
+        document.addEventListener("keydown", onKeyDown, true);
+        return () => {
+          cancelAnimationFrame(frame);
+          if (innerFrame !== undefined) cancelAnimationFrame(innerFrame);
+          document.removeEventListener("keydown", onKeyDown, true);
+        };
+      }, [open]);
+    }
+
+    function PickerItemCopy({ label, detail, ownerId, itemId }) {
+      return h(
+        "span",
+        {
+          className: "dsh-auto-picker-item-copy",
+          "data-dsh-auto-picker-owner": ownerId,
+          "data-dsh-auto-picker-item": itemId,
+        },
+        h("span", { className: "dsh-auto-picker-item-label" }, label),
+        detail ? h("span", { className: "dsh-auto-picker-item-detail" }, detail) : null,
+      );
+    }
+
+    function AgentPresetPicker({ id, value, presets, onChange }) {
+      const [open, setOpen] = useState(false);
+      const ownerId = useId();
+      const triggerRef = useRef(null);
+      usePickerMenuNavigation({ open, setOpen, ownerId, selectedId: value, triggerRef });
+      const selected = presets.find((preset) => preset.id === value);
+      const label = value === ""
+        ? "Harness default"
+        : agentPresetDisplayLabel(selected || { id: value, name: value });
+      const items = [
+        {
+          id: "",
+          label: h(PickerItemCopy, {
+            label: "Harness default",
+            detail: "Use the current Harness agent preset.",
+            ownerId,
+            itemId: "",
+          }),
+          icon: h(IconAgentPresetOutline16),
+        },
+        ...presets.map((preset) => ({
+          id: preset.id,
+          label: h(PickerItemCopy, {
+            label: agentPresetDisplayLabel(preset),
+            detail: preset.broken ? "Failed to load: " + preset.broken : null,
+            ownerId,
+            itemId: preset.id,
+          }),
+          icon: h(IconAgentPresetOutline16),
+          disabled: Boolean(preset.broken),
+        })),
+      ];
+      return h(Menu, {
+        open,
+        onClose: () => setOpen(false),
+        items,
+        selectedId: value,
+        onSelect: (next) => {
+          setOpen(false);
+          onChange(next);
+          focusPickerTrigger(triggerRef);
+        },
+        side: "top",
+        portal: true,
+        className: "dsh-auto-picker-root",
+        anchor: h(
+          "button",
+          {
+            ref: triggerRef,
+            id,
+            type: "button",
+            className: "dsh-auto-picker-trigger",
+            "aria-haspopup": "menu",
+            "aria-expanded": open,
+            onKeyDown: (event) => openPickerFromKeyboard(event, setOpen),
+            onClick: () => setOpen((current) => !current),
+          },
+          h(IconAgentPresetOutline16, { className: "dsh-auto-picker-trigger-icon" }),
+          h("span", { className: "dsh-auto-picker-trigger-label" }, label),
+          h(IconChevronDownOutline14, { className: "dsh-auto-picker-chevron" + (open ? " dsh-auto-picker-chevron-open" : "") }),
+        ),
+      });
+    }
+
+    function PermissionPresetPicker({ id, value, presets, onChange }) {
+      const [open, setOpen] = useState(false);
+      const [confirmingFullAccess, setConfirmingFullAccess] = useState(false);
+      const [acknowledged, setAcknowledged] = useState(false);
+      const ownerId = useId();
+      const triggerRef = useRef(null);
+      usePickerMenuNavigation({ open, setOpen, ownerId, selectedId: value, triggerRef });
+      useRiskConfirmationFocus(confirmingFullAccess);
+      const selected = permissionPresetPresentation(value);
+      const items = presets.map((preset) => {
+        const presentation = permissionPresetPresentation(preset);
+        return {
+          id: preset,
+          label: h(PickerItemCopy, {
+            label: presentation.label,
+            detail: presentation.detail,
+            ownerId,
+            itemId: preset,
+          }),
+          icon: h(PermissionPresetIcon, { value: preset }),
+          danger: preset === "danger-full-access",
+        };
+      });
+      const closeConfirmation = () => {
+        setConfirmingFullAccess(false);
+        setAcknowledged(false);
+        focusPickerTrigger(triggerRef);
+      };
+      return h(
+        React.Fragment,
+        null,
+        h(Menu, {
+          open,
+          onClose: () => setOpen(false),
+          items,
+          selectedId: value,
+          onSelect: (next) => {
+            setOpen(false);
+            if (next === "danger-full-access" && value !== "danger-full-access") {
+              setAcknowledged(false);
+              setConfirmingFullAccess(true);
+              return;
+            }
+            onChange(next);
+            focusPickerTrigger(triggerRef);
+          },
+          side: "top",
+          portal: true,
+          className: "dsh-auto-picker-root",
+          anchor: h(
+            "button",
+            {
+              ref: triggerRef,
+              id,
+              type: "button",
+              className: "dsh-auto-picker-trigger",
+              "data-permission-preset": value,
+              "aria-haspopup": "menu",
+              "aria-expanded": open,
+              onKeyDown: (event) => openPickerFromKeyboard(event, setOpen),
+              onClick: () => setOpen((current) => !current),
+            },
+            h(PermissionPresetIcon, { value, className: "dsh-auto-picker-trigger-icon" }),
+            h("span", { className: "dsh-auto-picker-trigger-label" }, selected.label),
+            h(IconChevronDownOutline14, { className: "dsh-auto-picker-chevron" + (open ? " dsh-auto-picker-chevron-open" : "") }),
+          ),
+        }),
+        h(RiskConfirmation, {
+          open: confirmingFullAccess,
+          title: "Enable Full access?",
+          description: "Full access lets scheduled agents perform sensitive actions, file changes, and external commands without approval prompts. Only use it for automations you trust.",
+          acknowledgeLabel: "I understand the risks and want to continue",
+          cancelLabel: "Cancel",
+          confirmLabel: "Enable Full access",
+          acknowledged,
+          onAcknowledgedChange: setAcknowledged,
+          onCancel: closeConfirmation,
+          onConfirm: () => {
+            setConfirmingFullAccess(false);
+            setAcknowledged(false);
+            onChange("danger-full-access");
+            focusPickerTrigger(triggerRef);
+          },
+        }),
+      );
+    }
+
     function StatusPill(props) {
       return h("span", { className: "dsh-auto-status dsh-auto-status-" + props.status }, props.status);
     }
@@ -429,38 +788,28 @@ window.__ModuleLoader__.load({
           ),
           h(
             Field,
-            { label: "Agent preset", htmlFor: "dsh-auto-f-preset", hint: "Blank uses the current Harness agent-preset default." },
-            h(
-              "select",
-              {
-                id: "dsh-auto-f-preset",
-                className: "dsh-auto-select",
-                value: draft.agentPreset,
-                onChange: (event) => onChange("agentPreset", event.target.value),
-              },
-              h("option", { value: "" }, "Harness default"),
-              agentPresets.map((preset) =>
-                h(
-                  "option",
-                  { key: preset.id, value: preset.id },
-                  preset.name + (preset.broken ? " (broken: " + preset.broken + ")" : ""),
-                ),
-              ),
-            ),
+            { label: "Agent preset", htmlFor: "dsh-auto-f-preset", hint: "Uses the current Harness default when not explicitly selected." },
+            h(AgentPresetPicker, {
+              id: "dsh-auto-f-preset",
+              value: draft.agentPreset,
+              presets: agentPresets,
+              onChange: (value) => onChange("agentPreset", value),
+            }),
           ),
           h(
             Field,
-            { label: "Permission preset", htmlFor: "dsh-auto-f-permission", required: true },
-            h(
-              "select",
-              {
-                id: "dsh-auto-f-permission",
-                className: "dsh-auto-select",
-                value: draft.permissionPreset,
-                onChange: (event) => onChange("permissionPreset", event.target.value),
-              },
-              permissionPresets.map((preset) => h("option", { key: preset, value: preset }, preset)),
-            ),
+            {
+              label: "Permission preset",
+              htmlFor: "dsh-auto-f-permission",
+              required: true,
+              hint: permissionPresetPresentation(draft.permissionPreset).detail,
+            },
+            h(PermissionPresetPicker, {
+              id: "dsh-auto-f-permission",
+              value: draft.permissionPreset,
+              presets: permissionPresets,
+              onChange: (value) => onChange("permissionPreset", value),
+            }),
           ),
           h(
             Field,
@@ -522,13 +871,18 @@ window.__ModuleLoader__.load({
           "div",
           { className: "dsh-auto-formactions" },
           h(
-            "button",
-            { type: "submit", className: "dsh-auto-btn dsh-auto-btn-primary", disabled: saving },
+            Button,
+            {
+              type: "submit",
+              variant: "primary",
+              icon: saving ? null : h(IconCheckOutline16),
+              disabled: saving,
+            },
             saving ? "Saving\u2026" : creating ? "Create automation" : "Save changes",
           ),
           h(
-            "button",
-            { type: "button", className: "dsh-auto-btn", onClick: onCancel, disabled: saving },
+            Button,
+            { type: "button", variant: "outline", onClick: onCancel, disabled: saving },
             "Cancel",
           ),
         ),
@@ -559,8 +913,12 @@ window.__ModuleLoader__.load({
         ? meta.agentPresets.find((preset) => preset.id === job.execution.agentPreset)
         : undefined;
       const presetLabel = job.execution.agentPreset
-        ? (agentPreset ? agentPreset.name : job.execution.agentPreset)
+        ? agentPresetDisplayLabel(agentPreset || {
+            id: job.execution.agentPreset,
+            name: job.execution.agentPreset,
+          })
         : "";
+      const permission = permissionPresetPresentation(job.execution.permissionPreset);
 
       return h(
         "article",
@@ -606,7 +964,12 @@ window.__ModuleLoader__.load({
           presetLabel !== ""
             ? h("span", { title: "Agent preset" }, presetLabel)
             : null,
-          h("span", { title: "Permission preset" }, job.execution.permissionPreset),
+          h(
+            "span",
+            { className: "dsh-auto-card-permission", title: "Permission preset: " + job.execution.permissionPreset },
+            h(PermissionPresetIcon, { value: job.execution.permissionPreset }),
+            permission.label,
+          ),
           h("span", { title: "Timeout" }, formatTimeout(job.execution.timeoutMs)),
           h("span", { className: "dsh-auto-muted", title: "Version" }, "v" + job.version),
         ),
@@ -614,15 +977,24 @@ window.__ModuleLoader__.load({
           "div",
           { className: "dsh-auto-card-actions" },
           h(
-            "button",
-            { type: "button", className: "dsh-auto-btn", onClick: onEdit, disabled: busyForJob || running },
+            Button,
+            {
+              type: "button",
+              variant: "ghost",
+              size: "sm",
+              icon: h(IconEditOutline16),
+              onClick: onEdit,
+              disabled: busyForJob || running,
+            },
             "Edit",
           ),
           h(
-            "button",
+            Button,
             {
               type: "button",
-              className: "dsh-auto-btn dsh-auto-btn-primary",
+              variant: "primary",
+              size: "sm",
+              icon: running ? null : h(IconPlayOutline16),
               onClick: onRun,
               disabled: busyForJob,
             },
@@ -633,26 +1005,32 @@ window.__ModuleLoader__.load({
                 "span",
                 { className: "dsh-auto-confirm" },
                 h(
-                  "button",
+                  Button,
                   {
                     type: "button",
-                    className: "dsh-auto-btn dsh-auto-btn-danger",
+                    variant: "ghost",
+                    size: "sm",
+                    className: "dsh-auto-danger-button",
+                    icon: deleting ? null : h(IconTrashOutline16),
                     onClick: onDeleteConfirm,
                     disabled: deleting,
                   },
                   deleting ? "Deleting\u2026" : "Confirm delete",
                 ),
                 h(
-                  "button",
-                  { type: "button", className: "dsh-auto-btn", onClick: onDeleteCancel, disabled: deleting },
+                  Button,
+                  { type: "button", variant: "outline", size: "sm", onClick: onDeleteCancel, disabled: deleting },
                   "Keep",
                 ),
               )
             : h(
-                "button",
+                Button,
                 {
                   type: "button",
-                  className: "dsh-auto-btn dsh-auto-btn-danger-ghost",
+                  variant: "ghost",
+                  size: "sm",
+                  className: "dsh-auto-danger-button",
+                  icon: h(IconTrashOutline16),
                   onClick: onDelete,
                   disabled: busyForJob,
                 },
@@ -722,26 +1100,29 @@ window.__ModuleLoader__.load({
                           "span",
                           { className: "dsh-auto-confirm" },
                           h(
-                            "button",
+                            Button,
                             {
                               type: "button",
-                              className: "dsh-auto-btn dsh-auto-btn-danger",
+                              variant: "ghost",
+                              size: "sm",
+                              className: "dsh-auto-danger-button",
                               onClick: () => onCancelConfirm(run),
                               disabled: cancelling,
                             },
                             cancelling ? "Cancelling\u2026" : "Confirm",
                           ),
                           h(
-                            "button",
-                            { type: "button", className: "dsh-auto-btn", onClick: onCancelReset, disabled: cancelling },
+                            Button,
+                            { type: "button", variant: "outline", size: "sm", onClick: onCancelReset, disabled: cancelling },
                             "Back",
                           ),
                         )
                       : h(
-                          "button",
+                          Button,
                           {
                             type: "button",
-                            className: "dsh-auto-btn dsh-auto-btn-ghost",
+                            variant: "ghost",
+                            size: "sm",
                             onClick: () => onCancel(run),
                           },
                           "Cancel",
@@ -1055,8 +1436,8 @@ window.__ModuleLoader__.load({
           ),
           !formOpen
             ? h(
-                "button",
-                { type: "button", className: "dsh-auto-btn dsh-auto-btn-primary", onClick: openCreate },
+                Button,
+                { type: "button", variant: "primary", icon: h(IconPlusOutline16), onClick: openCreate },
                 "New automation",
               )
             : null,
@@ -1093,8 +1474,8 @@ window.__ModuleLoader__.load({
               { className: "dsh-auto-error", role: "alert" },
               h("p", null, "Could not load automations: ", loadError),
               h(
-                "button",
-                { type: "button", className: "dsh-auto-btn dsh-auto-btn-primary", onClick: () => loadSnapshot(true) },
+                Button,
+                { type: "button", variant: "primary", size: "sm", icon: h(IconRefreshOutline16), onClick: () => loadSnapshot(true) },
                 "Retry",
               ),
             )
@@ -1237,24 +1618,6 @@ window.__ModuleLoader__.load({
       );
     }
 
-    function CloseGlyph() {
-      return h(
-        "svg",
-        {
-          width: "16",
-          height: "16",
-          viewBox: "0 0 16 16",
-          fill: "none",
-          stroke: "currentColor",
-          strokeWidth: "1.5",
-          strokeLinecap: "round",
-          "aria-hidden": "true",
-          focusable: "false",
-        },
-        h("path", { d: "M3.5 3.5l9 9M12.5 3.5l-9 9" }),
-      );
-    }
-
     function AutomationsSidebarAction({ wide, disclosure }) {
       const open = useSyncExternalStore(
         disclosure.subscribe,
@@ -1326,7 +1689,10 @@ window.__ModuleLoader__.load({
             "aria-modal": "true",
             "aria-labelledby": titleId,
             onKeyDownCapture: (event) => {
+              const panel = panelRef.current;
+              if (panel && event.target && !panel.contains(event.target)) return;
               if (event.key === "Escape") {
+                if (panelRef.current?.querySelector('.dsh-auto-picker-trigger[aria-expanded="true"]')) return;
                 event.preventDefault();
                 disclosure.close();
                 return;
@@ -1348,7 +1714,7 @@ window.__ModuleLoader__.load({
                 title: "Close",
                 onClick: disclosure.close,
               },
-              h(CloseGlyph),
+              h(IconCloseOutline16),
             ),
           ),
           h("div", { className: "dsh-auto-overlay-body" }, h(AutomationsSection)),
@@ -1358,7 +1724,7 @@ window.__ModuleLoader__.load({
 
     const STYLE_CSS = [
       ".dsh-auto-sidebar-action{box-sizing:border-box;width:100%;height:42px;flex:none;display:flex;align-items:center;margin:4px 0 0;}",
-      ".dsh-auto-sidebar-trigger{box-sizing:border-box;appearance:none;width:calc(100% + 4px);height:42px;margin:0 -2px;padding:0 10px 0 8px;border:0;border-radius:12px;background:transparent;color:var(--dsw-alias-label-primary,#0f1115);display:flex;align-items:center;gap:8px;overflow:hidden;font:14px/22px inherit;cursor:pointer;}",
+      ".dsh-auto-sidebar-trigger{box-sizing:border-box;appearance:none;width:calc(100% + 4px);height:42px;margin:0 -2px;padding:0 10px 0 8px;border:0;border-radius:12px;background:transparent;color:var(--dsw-alias-label-primary,#0f1115);display:flex;align-items:center;gap:8px;overflow:hidden;font-family:inherit;font-size:14px;line-height:22px;cursor:pointer;}",
       ".dsh-auto-sidebar-trigger:hover,.dsh-auto-sidebar-trigger[data-active=\"true\"]{background:var(--dsw-alias-interactive-bg-hover,rgba(38,49,72,.06));}",
       ".dsh-auto-sidebar-trigger:focus-visible{outline:2px solid var(--dsw-alias-state-business-primary,#4176e6);outline-offset:-2px;}",
       ".dsh-auto-sidebar-trigger svg{flex:none;}",
@@ -1367,15 +1733,15 @@ window.__ModuleLoader__.load({
       ".dsh-auto-sidebar-action-rail .dsh-auto-sidebar-trigger{width:36px;height:36px;margin:0;padding:0;justify-content:center;gap:0;border-radius:50%;}",
       ".dsh-auto-overlay{z-index:1000;pointer-events:auto;position:fixed;inset:0;display:flex;align-items:center;justify-content:center;}",
       ".dsh-auto-overlay-mask{position:absolute;inset:0;background:var(--dsw-alias-bg-mask-1,rgba(0,0,0,.46));backdrop-filter:var(--dsw-mask-blur,blur(2px));}",
-      ".dsh-auto-overlay-panel{box-sizing:border-box;z-index:1;position:relative;width:900px;max-width:calc(100vw - 48px);height:min(800px,calc(100vh - 48px));border:0;border-radius:24px;background:var(--dsw-alias-bg-layer-2,#fff);box-shadow:var(--dsw-shadow-lv3,0 18px 60px rgba(0,0,0,.3));color:var(--dsw-alias-label-primary,#0f1115);display:flex;flex-direction:column;overflow:hidden;}",
+      ".dsh-auto-overlay-panel{box-sizing:border-box;z-index:1;position:relative;width:900px;max-width:calc(100vw - 48px);height:min(800px,calc(100vh - 48px));border:1px solid var(--dsw-alias-border-inverted,var(--dsw-alias-border-l2));border-radius:24px;background:var(--dsw-alias-bg-layer-2,#fff);box-shadow:var(--dsw-shadow-lv3,0 18px 60px rgba(0,0,0,.3));color:var(--dsw-alias-label-primary,#0f1115);display:flex;flex-direction:column;overflow:hidden;}",
       ".dsh-auto-overlay-header{box-sizing:border-box;height:52px;flex:none;display:flex;align-items:center;justify-content:flex-end;padding:10px 16px;}",
-      ".dsh-auto-overlay-close{appearance:none;width:30px;height:30px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--dsw-alias-label-secondary,#4f5661);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;}",
+      ".dsh-auto-overlay-close{appearance:none;width:28px;height:28px;padding:0;border:0;border-radius:8px;background:transparent;color:var(--dsw-alias-label-secondary,#4f5661);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;}",
       ".dsh-auto-overlay-close:hover{background:var(--dsw-alias-interactive-bg-hover,rgba(38,49,72,.06));color:var(--dsw-alias-label-primary,#0f1115);}",
       ".dsh-auto-overlay-close:focus-visible{outline:2px solid var(--dsw-alias-state-business-primary,#4176e6);outline-offset:1px;}",
       ".dsh-auto-overlay-body{box-sizing:border-box;min-height:0;flex:1;padding:0 28px 28px;overflow-y:auto;overscroll-behavior:contain;--dsh-scrollbar-thumb:var(--dsw-alias-scrollbar-bg-l2);--dsh-scrollbar-thumb-hover:var(--dsw-alias-scrollbar-hover-l2);}",
       ".dsh-auto-overlay-body>.dsh-auto-root{width:100%;margin:0 auto;padding-top:0;}",
       ".dsh-auto-sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;}",
-      ".dsh-auto-root{--dsh-auto-border:var(--dsw-alias-border-l2,rgba(15,17,21,.14));--dsh-auto-border-strong:var(--dsw-alias-border-l3,rgba(15,17,21,.2));--dsh-auto-surface:var(--dsw-alias-bg-layer-3,#fff);--dsh-auto-surface-active:var(--dsw-alias-bg-layer-2,#fff);--dsh-auto-input-bg:var(--dsw-specific-input-major,var(--dsw-alias-bg-layer-1,#fff));--dsh-auto-text:var(--dsw-alias-label-primary,#0f1115);--dsh-auto-text-secondary:var(--dsw-alias-label-secondary,#4f5661);--dsh-auto-muted:var(--dsw-alias-label-tertiary,#81858c);--dsh-auto-caption:var(--dsw-alias-label-caption,#adb2b8);--dsh-auto-accent:var(--dsw-alias-state-business-primary,#4176e6);--dsh-auto-primary-fill:var(--dsw-alias-button-primary-fill,#0f1115);--dsh-auto-primary-hover:var(--dsw-alias-button-primary-hover,#34415b);--dsh-auto-on-primary:var(--dsw-alias-label-primary-foreground,#fff);--dsh-auto-danger:var(--dsw-alias-state-error-primary,#ec1313);--dsh-auto-success:var(--dsw-alias-state-success-primary,#22c55e);--dsh-auto-warning:var(--dsw-alias-state-warn-primary,#f59e0b);box-sizing:border-box;max-width:820px;padding-top:12px;display:flex;flex-direction:column;gap:16px;font-family:inherit;color:var(--dsh-auto-text);}",
+      ".dsh-auto-root{--dsh-auto-border:var(--dsw-alias-border-l2,rgba(15,17,21,.14));--dsh-auto-surface:var(--dsw-alias-bg-layer-3,#fff);--dsh-auto-surface-active:var(--dsw-alias-bg-layer-2,#fff);--dsh-auto-input-bg:var(--dsw-specific-input-major,var(--dsw-alias-bg-layer-1,#fff));--dsh-auto-text:var(--dsw-alias-label-primary,#0f1115);--dsh-auto-text-secondary:var(--dsw-alias-label-secondary,#4f5661);--dsh-auto-muted:var(--dsw-alias-label-tertiary,#81858c);--dsh-auto-caption:var(--dsw-alias-label-caption,#adb2b8);--dsh-auto-accent:var(--dsw-alias-state-business-primary,#4176e6);--dsh-auto-danger:var(--dsw-alias-state-error-primary,#ec1313);--dsh-auto-success:var(--dsw-alias-state-success-primary,#22c55e);--dsh-auto-warning:var(--dsw-alias-state-warn-primary,#f59e0b);box-sizing:border-box;max-width:820px;padding-top:12px;display:flex;flex-direction:column;gap:16px;font-family:inherit;color:var(--dsh-auto-text);}",
       "body:not([data-ds-dark-theme]) .dsh-auto-root{color-scheme:light;}",
       "body[data-ds-dark-theme] .dsh-auto-root{color-scheme:dark;}",
       ".dsh-auto-root *,.dsh-auto-root *::before,.dsh-auto-root *::after{box-sizing:border-box;}",
@@ -1387,21 +1753,30 @@ window.__ModuleLoader__.load({
       ".dsh-auto-flash-success{background:color-mix(in srgb,var(--dsh-auto-success) 12%,transparent);color:var(--dsh-auto-success);}",
       ".dsh-auto-flash-warn{background:color-mix(in srgb,var(--dsh-auto-warning) 12%,transparent);color:var(--dsh-auto-warning);}",
       ".dsh-auto-linkbtn{appearance:none;font:inherit;font-size:inherit;color:inherit;text-decoration:underline;cursor:pointer;background:none;border:none;padding:0;}",
-      ".dsh-auto-btn{appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:32px;padding:5px 12px;border:1px solid var(--dsh-auto-border);border-radius:16px;background:transparent;color:var(--dsh-auto-text);font-family:inherit;font-size:13px;line-height:1.2;cursor:pointer;transition:background .15s ease,color .15s ease,opacity .15s ease;white-space:nowrap;}",
-      ".dsh-auto-btn:hover:not(:disabled){background:var(--dsw-alias-interactive-bg-hover-solid,var(--dsw-alias-interactive-bg-hover,rgba(38,49,72,.08)));}",
-      ".dsh-auto-btn:focus-visible{outline:none;box-shadow:0 0 0 2px var(--dsh-auto-border-strong);}",
-      ".dsh-auto-btn:disabled{opacity:.4;cursor:default;}",
-      ".dsh-auto-btn-primary{background:var(--dsh-auto-primary-fill);border-color:transparent;color:var(--dsh-auto-on-primary);}",
-      ".dsh-auto-btn-primary:hover:not(:disabled){background:var(--dsh-auto-primary-hover);}",
-      ".dsh-auto-btn-danger,.dsh-auto-btn-danger-ghost{background:transparent;border-color:transparent;color:var(--dsh-auto-danger);}",
-      ".dsh-auto-btn-danger:hover:not(:disabled),.dsh-auto-btn-danger-ghost:hover:not(:disabled){background:var(--dsw-alias-interactive-bg-hover-danger,color-mix(in srgb,var(--dsh-auto-danger) 10%,transparent));}",
-      ".dsh-auto-btn-ghost{border-color:transparent;color:var(--dsh-auto-text-secondary);}",
+      ".dsh-auto-danger-button{color:var(--dsh-auto-danger);}",
+      ".dsh-auto-danger-button:hover:not(:disabled){background:var(--dsw-alias-interactive-bg-hover-danger,color-mix(in srgb,var(--dsh-auto-danger) 10%,transparent));}",
       ".dsh-auto-input,.dsh-auto-select,.dsh-auto-textarea{width:100%;min-height:34px;padding:6px 10px;border:1px solid var(--dsh-auto-border);border-radius:8px;background:var(--dsh-auto-input-bg);color:var(--dsh-auto-text);font-family:inherit;font-size:13px;line-height:1.5;}",
       ".dsh-auto-input,.dsh-auto-textarea{appearance:none;}",
       ".dsh-auto-input::placeholder,.dsh-auto-textarea::placeholder{color:var(--dsh-auto-caption);}",
       ".dsh-auto-select option{background:var(--dsh-auto-input-bg);color:var(--dsh-auto-text);}",
       ".dsh-auto-input:focus-visible,.dsh-auto-select:focus-visible,.dsh-auto-textarea:focus-visible{outline:none;border-color:var(--dsh-auto-accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--dsh-auto-accent) 18%,transparent);}",
       ".dsh-auto-input:disabled,.dsh-auto-select:disabled,.dsh-auto-textarea:disabled{opacity:1;color:var(--dsh-auto-muted);background:var(--dsh-auto-surface-active);cursor:default;}",
+      ".dsh-auto-picker-root{width:100%;display:flex;}",
+      ".dsh-auto-picker-trigger{appearance:none;width:100%;height:34px;padding:0 9px;border:1px solid var(--dsh-auto-border);border-radius:8px;background:var(--dsh-auto-input-bg);color:var(--dsh-auto-text);display:flex;align-items:center;gap:8px;font-family:inherit;font-size:13px;line-height:20px;text-align:left;cursor:pointer;}",
+      ".dsh-auto-picker-trigger:hover{background:var(--dsw-alias-interactive-bg-hover,var(--dsh-auto-input-bg));}",
+      ".dsh-auto-picker-trigger:focus-visible{outline:none;border-color:var(--dsh-auto-accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--dsh-auto-accent) 18%,transparent);}",
+      ".dsh-auto-picker-trigger-icon{flex:none;color:var(--dsh-auto-muted);}",
+      ".dsh-auto-picker-trigger-label{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}",
+      ".dsh-auto-picker-chevron{flex:none;color:var(--dsh-auto-muted);transition:transform .12s ease;}",
+      ".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-permission-glyph{flex:none;}",
+      ".dsh-auto-permission-glyph-read{color:var(--dsh-auto-muted);}",
+      ".dsh-auto-permission-glyph-write{color:var(--dsh-auto-accent);}",
+      ".dsh-auto-permission-glyph-danger{color:var(--dsh-auto-danger);}",
+      ".dsh-auto-permission-glyph-custom{color:var(--dsh-auto-muted);}",
       ".dsh-auto-textarea{resize:vertical;min-height:110px;}",
       ".dsh-auto-check{display:inline-flex;align-items:center;gap:8px;font-size:13px;cursor:pointer;min-height:34px;}",
       ".dsh-auto-check input{width:16px;height:16px;margin:0;accent-color:var(--dsh-auto-accent);cursor:pointer;}",
@@ -1424,6 +1799,8 @@ window.__ModuleLoader__.load({
       ".dsh-auto-card-id{font-size:11px;color:var(--dsh-auto-muted);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;}",
       ".dsh-auto-card-meta{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12px;color:var(--dsh-auto-text-secondary);line-height:1.5;}",
       ".dsh-auto-card-meta span{white-space:nowrap;}",
+      ".dsh-auto-card-permission{display:inline-flex;align-items:center;gap:4px;}",
+      ".dsh-auto-card-permission svg{width:14px;height:14px;}",
       ".dsh-auto-next{font-variant-numeric:tabular-nums;}",
       ".dsh-auto-muted{color:var(--dsh-auto-muted);}",
       ".dsh-auto-card-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}",
@@ -1499,6 +1876,9 @@ window.__ModuleLoader__.load({
       }, AutomationsOverlay));
     }
 
+    exports.agentPresetDisplayLabel = agentPresetDisplayLabel;
+    exports.permissionPresetPresentation = permissionPresetPresentation;
+    exports.PermissionPresetPicker = PermissionPresetPicker;
     exports.inject = inject;
     exports.apply = apply;
     return module.exports;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@syncended/dsh-automations",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "Durable cron automations for DeepSeek Harness",
   "type": "module",
   "main": "dist/index.js",
@@ -98,6 +98,7 @@
     "@deepseek-ai/dsh-agent-presets": "0.1.1-rc.2",
     "@deepseek-ai/dsh-client-runtime": "0.1.1-rc.2",
     "@deepseek-ai/dsh-client-ui-layout": "0.1.1-rc.2",
+    "@deepseek-ai/dsh-client-ui-primitives": "0.1.1-rc.2",
     "@deepseek-ai/dsh-client-ui-settings": "0.1.1-rc.2",
     "@deepseek-ai/dsh-client-ui-sidebar": "0.1.1-rc.2",
     "@deepseek-ai/dsh-host-webserver": "0.1.1-rc.2",