@syncended/dsh-automations 0.2.1 → 0.3.0

package/README.md

@@ -8,7 +8,7 @@ A DeepSeek Harness plugin for durable, configurable cron jobs. Each occurrence s
 
 - Standard five-field cron expressions with `UTC` or IANA timezones.
 - Per-job project directory, provider/model, reasoning effort, agent preset, permission preset, and timeout.
-- Enable/disable, Run now, edit, delete, cancel, and recent run history from the main **Automations** sidebar action or **Settings → Automations**.
+- Enable/disable, Run now, edit, delete, cancel, and recent run history from a full center workspace opened by the main **Automations** sidebar action, or from **Settings → Automations**.
 - Overlap policies:
   - `skip` — record and skip an occurrence while the job has queued/running work.
   - `queue` — serialize occurrences for the same job.
@@ -42,7 +42,7 @@ pnpm build
 dsh plugin --profile web add .
 ```
 
-The package declares a DSH bundle, so `dsh plugin` appends it to the Web profile automatically. Restart the running Web Harness after the initial install, then refresh the page. Open **Automations** from the main sidebar, or use **Settings → Automations**.
+The package declares a DSH bundle, so `dsh plugin` appends it to the Web profile automatically. Restart the running Web Harness after the initial install, then refresh the page. Open the full **Automations** workspace from the main sidebar, or use **Settings → Automations**.
 
 To remove it:
 

package/docs/architecture.md

@@ -15,7 +15,7 @@ Non-goals for the first release:
 ## Components
 
 ```text
-Sidebar / Settings UI / HTTP API
+Sidebar / Center workspace / Settings UI / HTTP API
           │
           ▼
  AutomationService ─── ProjectPolicy
@@ -30,7 +30,9 @@ Sidebar / Settings UI / HTTP API
 
 ### Browser surfaces
 
-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.
+The same automation page is available through Settings and a dedicated center workspace. `settings.section` keeps configuration available inside Settings; `sidebar.footer.action` activates a temporary, higher-priority `conversation` entry that replaces the current center occupant. This provides a split-screen-like full-center experience while using the single-slot election directly rather than Split Screen's internal view contributions. Closing Automations disposes its entry immediately, revealing whichever center surface was previously active. A small client-only disclosure store coordinates the sidebar trigger and dynamic registration; 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
 

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,
+      IconChevronLeftOutline14,
+      IconEditOutline16,
+      IconPlayOutline16,
+      IconPlusOutline16,
+      IconRefreshOutline16,
+      IconSettingsOutline16,
+      IconTrashOutline16,
+      IconWarningOutline16,
+    } = require("@deepseek-ai/dsh-client-ui-primitives");
     const inject = ["slots"];
 
     const API_PREFIX = "/api/automations";
@@ -73,6 +90,26 @@ window.__ModuleLoader__.load({
       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
@@ -91,6 +128,24 @@ window.__ModuleLoader__.load({
       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;
     }
@@ -258,6 +313,289 @@ 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 focusBoundary = trigger?.closest(".dsh-auto-form") || trigger?.closest('[role="dialog"]');
+        if (!focusBoundary) {
+          trigger?.focus();
+          return;
+        }
+        const focusables = visibleFocusables(focusBoundary);
+        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) => {
+          const dialog = riskDialog();
+          if (!dialog) return;
+          if (event.key === "Escape" && dialog.contains(event.target)) {
+            event.__dshAutomationsNested = true;
+            return;
+          }
+          if (event.key !== "Tab") return;
+          const focusables = visibleFocusables(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);
     }
@@ -273,6 +611,8 @@ 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;
 
       return h(
         "form",
@@ -288,9 +628,9 @@ window.__ModuleLoader__.load({
           { className: "dsh-auto-formgrid" },
           h(
             Field,
-            { label: "Name", htmlFor: "dsh-auto-f-name", required: true },
+            { label: "Name", htmlFor: fieldId("name"), required: true },
             h("input", {
-              id: "dsh-auto-f-name",
+              id: fieldId("name"),
               className: "dsh-auto-input",
               type: "text",
               value: draft.name,
@@ -302,9 +642,9 @@ window.__ModuleLoader__.load({
           creating
             ? h(
                 Field,
-                { label: "Job id", htmlFor: "dsh-auto-f-id", hint: "Lowercase letters, digits and hyphens; auto-derived from the name. Leave blank to let the server generate one." },
+                { label: "Job id", htmlFor: fieldId("id"), hint: "Lowercase letters, digits and hyphens; auto-derived from the name. Leave blank to let the server generate one." },
                 h("input", {
-                  id: "dsh-auto-f-id",
+                  id: fieldId("id"),
                   className: "dsh-auto-input",
                   type: "text",
                   value: draft.id,
@@ -318,9 +658,9 @@ window.__ModuleLoader__.load({
               )
             : h(
                 Field,
-                { label: "Job id", htmlFor: "dsh-auto-f-id", hint: "Fixed after creation." },
+                { label: "Job id", htmlFor: fieldId("id"), hint: "Fixed after creation." },
                 h("input", {
-                  id: "dsh-auto-f-id",
+                  id: fieldId("id"),
                   className: "dsh-auto-input",
                   type: "text",
                   value: draft.id,
@@ -330,9 +670,9 @@ window.__ModuleLoader__.load({
               ),
           h(
             Field,
-            { label: "Cron", htmlFor: "dsh-auto-f-cron", required: true, hint: "Five-field cron (minute hour day-of-month month day-of-week)." },
+            { label: "Cron", htmlFor: fieldId("cron"), required: true, hint: "Five-field cron (minute hour day-of-month month day-of-week)." },
             h("input", {
-              id: "dsh-auto-f-cron",
+              id: fieldId("cron"),
               className: "dsh-auto-input",
               type: "text",
               value: draft.cron,
@@ -342,30 +682,30 @@ window.__ModuleLoader__.load({
           ),
           h(
             Field,
-            { label: "Timezone", htmlFor: "dsh-auto-f-timezone", required: true },
+            { label: "Timezone", htmlFor: fieldId("timezone"), required: true },
             h("input", {
-              id: "dsh-auto-f-timezone",
+              id: fieldId("timezone"),
               className: "dsh-auto-input",
               type: "text",
-              list: "dsh-auto-tz-list",
+              list: fieldId("timezone-list"),
               value: draft.timezone,
               spellCheck: false,
               onChange: (event) => onChange("timezone", event.target.value),
             }),
             h(
               "datalist",
-              { id: "dsh-auto-tz-list" },
+              { id: fieldId("timezone-list") },
               TIMEZONES.map((zone) => h("option", { key: zone, value: zone })),
             ),
           ),
           h(
             Field,
-            { label: "Enabled", htmlFor: "dsh-auto-f-enabled" },
+            { label: "Enabled", htmlFor: fieldId("enabled") },
             h(
               "label",
               { className: "dsh-auto-check" },
               h("input", {
-                id: "dsh-auto-f-enabled",
+                id: fieldId("enabled"),
                 type: "checkbox",
                 checked: draft.enabled,
                 onChange: (event) => onChange("enabled", event.target.checked),
@@ -375,9 +715,9 @@ window.__ModuleLoader__.load({
           ),
           h(
             Field,
-            { label: "Timeout (ms)", htmlFor: "dsh-auto-f-timeout", required: true, hint: "Wall-clock limit for each run (1s to 24h)." },
+            { label: "Timeout (ms)", htmlFor: fieldId("timeout"), required: true, hint: "Wall-clock limit for each run (1s to 24h)." },
             h("input", {
-              id: "dsh-auto-f-timeout",
+              id: fieldId("timeout"),
               className: "dsh-auto-input",
               type: "number",
               min: MIN_TIMEOUT_MS,
@@ -389,12 +729,12 @@ window.__ModuleLoader__.load({
           ),
           h(
             Field,
-            { label: "Provider", htmlFor: "dsh-auto-f-provider", hint: "Blank uses the current Harness default. You may type an unlisted provider route." },
+            { label: "Provider", htmlFor: fieldId("provider"), hint: "Blank uses the current Harness default. You may type an unlisted provider route." },
             h("input", {
-              id: "dsh-auto-f-provider",
+              id: fieldId("provider"),
               className: "dsh-auto-input",
               type: "text",
-              list: "dsh-auto-provider-list",
+              list: fieldId("provider-list"),
               value: draft.provider,
               spellCheck: false,
               placeholder: "Harness default",
@@ -402,7 +742,7 @@ window.__ModuleLoader__.load({
             }),
             h(
               "datalist",
-              { id: "dsh-auto-provider-list" },
+              { id: fieldId("provider-list") },
               providers.map((provider) => h("option", { key: provider.id, value: provider.id })),
             ),
           ),
@@ -410,17 +750,17 @@ window.__ModuleLoader__.load({
             Field,
             {
               label: "Model",
-              htmlFor: "dsh-auto-f-model",
+              htmlFor: fieldId("model"),
               required: draft.provider !== "",
               hint: draft.provider === ""
                 ? "Set a provider first, or leave both blank for the Harness default."
                 : "Choose a discovered model or type an adapter-supported model id.",
             },
             h("input", {
-              id: "dsh-auto-f-model",
+              id: fieldId("model"),
               className: "dsh-auto-input",
               type: "text",
-              list: "dsh-auto-model-list",
+              list: fieldId("model-list"),
               value: draft.model,
               spellCheck: false,
               placeholder: draft.provider === "" ? "Harness default" : "Model id",
@@ -429,18 +769,18 @@ window.__ModuleLoader__.load({
             }),
             h(
               "datalist",
-              { id: "dsh-auto-model-list" },
+              { id: fieldId("model-list") },
               models.map((model) => h("option", { key: model, value: model })),
             ),
           ),
           h(
             Field,
-            { label: "Reasoning effort", htmlFor: "dsh-auto-f-effort", hint: "Blank uses the provider default." },
+            { label: "Reasoning effort", htmlFor: fieldId("effort"), hint: "Blank uses the provider default." },
             h("input", {
-              id: "dsh-auto-f-effort",
+              id: fieldId("effort"),
               className: "dsh-auto-input",
               type: "text",
-              list: "dsh-auto-effort-list",
+              list: fieldId("effort-list"),
               value: draft.reasoningEffort,
               spellCheck: false,
               placeholder: "e.g. medium",
@@ -448,52 +788,42 @@ window.__ModuleLoader__.load({
             }),
             h(
               "datalist",
-              { id: "dsh-auto-effort-list" },
+              { id: fieldId("effort-list") },
               REASONING_EFFORTS.map((effort) => h("option", { key: effort, value: effort })),
             ),
           ),
           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 },
-                  agentPresetDisplayLabel(preset) + (preset.broken ? " (broken: " + preset.broken + ")" : ""),
-                ),
-              ),
-            ),
+            { label: "Agent preset", htmlFor: fieldId("preset"), hint: "Uses the current Harness default when not explicitly selected." },
+            h(AgentPresetPicker, {
+              id: fieldId("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: fieldId("permission"),
+              required: true,
+              hint: permissionPresetPresentation(draft.permissionPreset).detail,
+            },
+            h(PermissionPresetPicker, {
+              id: fieldId("permission"),
+              value: draft.permissionPreset,
+              presets: permissionPresets,
+              onChange: (value) => onChange("permissionPreset", value),
+            }),
           ),
           h(
             Field,
-            { label: "Overlap policy", htmlFor: "dsh-auto-f-overlap", full: true, hint: "What happens when a scheduled run fires while another run for the same job is still active." },
+            { label: "Overlap policy", htmlFor: fieldId("overlap"), full: true, hint: "What happens when a scheduled run fires while another run for the same job is still active." },
             h(
               "select",
               {
-                id: "dsh-auto-f-overlap",
+                id: fieldId("overlap"),
                 className: "dsh-auto-select",
                 value: draft.overlap,
                 onChange: (event) => onChange("overlap", event.target.value),
@@ -503,11 +833,11 @@ window.__ModuleLoader__.load({
           ),
           h(
             Field,
-            { label: "Misfire policy", htmlFor: "dsh-auto-f-misfire", hint: "How a missed occurrence is handled after the scheduler is back." },
+            { label: "Misfire policy", htmlFor: fieldId("misfire"), hint: "How a missed occurrence is handled after the scheduler is back." },
             h(
               "select",
               {
-                id: "dsh-auto-f-misfire",
+                id: fieldId("misfire"),
                 className: "dsh-auto-select",
                 value: draft.misfire,
                 onChange: (event) => onChange("misfire", event.target.value),
@@ -517,9 +847,9 @@ window.__ModuleLoader__.load({
           ),
           h(
             Field,
-            { label: "Working directory", htmlFor: "dsh-auto-f-cwd", required: true, full: true, hint: "Absolute project directory the agent runs in." },
+            { label: "Working directory", htmlFor: fieldId("cwd"), required: true, full: true, hint: "Absolute project directory the agent runs in." },
             h("input", {
-              id: "dsh-auto-f-cwd",
+              id: fieldId("cwd"),
               className: "dsh-auto-input",
               type: "text",
               value: draft.cwd,
@@ -530,9 +860,9 @@ window.__ModuleLoader__.load({
           ),
           h(
             Field,
-            { label: "Prompt", htmlFor: "dsh-auto-f-prompt", required: true, full: true, hint: "Instructions for the agent run. Prompts are never shown in run history." },
+            { label: "Prompt", htmlFor: fieldId("prompt"), required: true, full: true, hint: "Instructions for the agent run. Prompts are never shown in run history." },
             h("textarea", {
-              id: "dsh-auto-f-prompt",
+              id: fieldId("prompt"),
               className: "dsh-auto-textarea",
               value: draft.prompt,
               placeholder: "Summarize yesterday's progress and list today's priorities\u2026",
@@ -547,13 +877,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",
           ),
         ),
@@ -589,6 +924,7 @@ window.__ModuleLoader__.load({
             name: job.execution.agentPreset,
           })
         : "";
+      const permission = permissionPresetPresentation(job.execution.permissionPreset);
 
       return h(
         "article",
@@ -634,7 +970,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),
         ),
@@ -642,15 +983,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,
             },
@@ -661,26 +1011,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,
                 },
@@ -750,26 +1106,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",
@@ -788,7 +1147,7 @@ window.__ModuleLoader__.load({
       );
     }
 
-    function AutomationsSection() {
+    function AutomationsSection({ centerMode = false } = {}) {
       const [meta, setMeta] = useState(null);
       const [snapshot, setSnapshot] = useState(null);
       const [loading, setLoading] = useState(true);
@@ -1065,14 +1424,17 @@ window.__ModuleLoader__.load({
 
       return h(
         "section",
-        { className: "dsh-auto-root", "aria-busy": loading ? "true" : null },
+        {
+          className: "dsh-auto-root" + (centerMode ? " dsh-auto-root-workspace" : ""),
+          "aria-busy": loading ? "true" : null,
+        },
         h(
           "div",
           { className: "dsh-auto-head" },
           h(
             "div",
             null,
-            h("h2", null, "Automations"),
+            h("h2", { className: centerMode ? "dsh-auto-sr-only" : undefined }, "Automations"),
             h(
               "p",
               { className: "dsh-auto-sub" },
@@ -1083,8 +1445,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,
@@ -1121,8 +1483,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",
               ),
             )
@@ -1194,7 +1556,7 @@ window.__ModuleLoader__.load({
       };
     }
 
-    const MODAL_FOCUS_SELECTOR = [
+    const FOCUSABLE_SELECTOR = [
       "a[href]",
       "button:not([disabled])",
       "input:not([disabled])",
@@ -1204,45 +1566,15 @@ window.__ModuleLoader__.load({
       "[tabindex]:not([tabindex=\"-1\"])",
     ].join(",");
 
-    function modalFocusables(panel) {
+    function visibleFocusables(panel) {
       if (!panel) return [];
-      return Array.from(panel.querySelectorAll(MODAL_FOCUS_SELECTOR)).filter((element) =>
+      return Array.from(panel.querySelectorAll(FOCUSABLE_SELECTOR)).filter((element) =>
         !element.hasAttribute("hidden") &&
         element.getAttribute("aria-hidden") !== "true" &&
         element.getClientRects().length > 0,
       );
     }
 
-    function trapModalTab(event, panel) {
-      if (
-        event.key !== "Tab" ||
-        event.defaultPrevented ||
-        event.altKey ||
-        event.ctrlKey ||
-        event.metaKey
-      ) return;
-      const focusables = modalFocusables(panel);
-      if (focusables.length === 0) {
-        event.preventDefault();
-        panel?.focus();
-        return;
-      }
-      const first = focusables[0];
-      const last = focusables[focusables.length - 1];
-      const active = panel.ownerDocument.activeElement;
-      if (event.shiftKey) {
-        if (active === first || !panel.contains(active)) {
-          event.preventDefault();
-          last.focus();
-        }
-        return;
-      }
-      if (active === last || !panel.contains(active)) {
-        event.preventDefault();
-        first.focus();
-      }
-    }
-
     function AutomationGlyph({ size = 18 }) {
       return h(
         "svg",
@@ -1265,24 +1597,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,
@@ -1309,10 +1623,9 @@ window.__ModuleLoader__.load({
             ref: triggerRef,
             type: "button",
             className: "dsh-auto-sidebar-trigger",
-            title: wide ? undefined : "Automations",
-            "aria-label": "Automations",
-            "aria-haspopup": "dialog",
-            "aria-expanded": open,
+            title: wide ? undefined : open ? "Exit Automations" : "Automations",
+            "aria-label": open ? "Exit Automations" : "Open Automations",
+            "aria-pressed": open,
             "data-active": open ? "true" : undefined,
             "data-dsh-automations-trigger": "true",
             onClick: disclosure.toggle,
@@ -1323,87 +1636,76 @@ window.__ModuleLoader__.load({
       );
     }
 
-    function AutomationsOverlay({ disclosure }) {
-      const open = useSyncExternalStore(
-        disclosure.subscribe,
-        disclosure.getSnapshot,
-        disclosure.getSnapshot,
-      );
-      const closeRef = useRef(null);
-      const panelRef = useRef(null);
+    function AutomationsWorkspace({ disclosure }) {
+      const workspaceRef = useRef(null);
       const titleId = useId();
 
       useEffect(() => {
-        if (!open) return undefined;
-        const frame = window.requestAnimationFrame(() => closeRef.current?.focus());
-        return () => window.cancelAnimationFrame(frame);
-      }, [open]);
+        const frame = window.requestAnimationFrame(() =>
+          workspaceRef.current?.querySelector('[data-dsh-automations-exit="true"]')?.focus(),
+        );
+        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;
+          event.preventDefault();
+          disclosure.close();
+        };
+        window.addEventListener("keydown", onKeyDown);
+        return () => {
+          window.cancelAnimationFrame(frame);
+          window.removeEventListener("keydown", onKeyDown);
+        };
+      }, [disclosure]);
 
-      if (!open) return null;
       return h(
-        "div",
-        { className: "dsh-auto-overlay", "data-dsh-automations-overlay": "true" },
-        h("div", { className: "dsh-auto-overlay-mask", "aria-hidden": "true", onClick: disclosure.close }),
+        "section",
+        {
+          ref: workspaceRef,
+          className: "dsh-auto-workspace",
+          "data-dsh-automations-workspace": "true",
+          "aria-labelledby": titleId,
+        },
         h(
-          "section",
-          {
-            ref: panelRef,
-            className: "dsh-auto-overlay-panel",
-            role: "dialog",
-            tabIndex: -1,
-            "aria-modal": "true",
-            "aria-labelledby": titleId,
-            onKeyDownCapture: (event) => {
-              if (event.key === "Escape") {
-                event.preventDefault();
-                disclosure.close();
-                return;
-              }
-              trapModalTab(event, panelRef.current);
-            },
-          },
+          "header",
+          { className: "dsh-auto-workspace-toolbar" },
+          h("span", { className: "dsh-auto-workspace-icon", "aria-hidden": "true" }, h(AutomationGlyph, { size: 16 })),
+          h("strong", { id: titleId, className: "dsh-auto-workspace-title" }, "Automations"),
           h(
-            "header",
-            { className: "dsh-auto-overlay-header" },
-            h("span", { id: titleId, className: "dsh-auto-sr-only" }, "Automations"),
-            h(
-              "button",
-              {
-                ref: closeRef,
-                type: "button",
-                className: "dsh-auto-overlay-close",
-                "aria-label": "Close Automations",
-                title: "Close",
-                onClick: disclosure.close,
-              },
-              h(CloseGlyph),
-            ),
+            Button,
+            {
+              type: "button",
+              variant: "toolbar",
+              size: "sm",
+              icon: h(IconChevronLeftOutline14),
+              onClick: disclosure.close,
+              "data-dsh-automations-exit": "true",
+            },
+            "Exit Automations",
           ),
-          h("div", { className: "dsh-auto-overlay-body" }, h(AutomationsSection)),
         ),
+        h("div", { className: "dsh-auto-workspace-scroll" }, h(AutomationsSection, { centerMode: true })),
       );
     }
 
     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;}",
       ".dsh-auto-sidebar-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}",
       ".dsh-auto-sidebar-action-rail{width:36px;height:36px;margin:0;}",
       ".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-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: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-workspace{box-sizing:border-box;width:100%;height:100%;min-width:0;min-height:0;display:flex;flex-direction:column;overflow:hidden;color:var(--dsw-alias-label-primary,#0f1115);background:var(--dsw-alias-bg-base,#fff);font-family:inherit;}",
+      ".dsh-auto-workspace-toolbar{box-sizing:border-box;width:100%;height:44px;flex:none;display:flex;align-items:center;gap:8px;padding:6px 10px 6px 12px;border-bottom:1px solid var(--dsw-alias-border-l2,rgba(15,17,21,.14));background:var(--dsw-alias-bg-base,#fff);}",
+      ".dsh-auto-workspace-icon{width:28px;height:28px;flex:none;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;color:var(--dsw-alias-state-business-primary,#4176e6);background:color-mix(in srgb,var(--dsw-alias-state-business-primary,#4176e6) 10%,transparent);}",
+      ".dsh-auto-workspace-title{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:600;line-height:20px;}",
+      ".dsh-auto-workspace-scroll{container:dsh-auto-workspace / inline-size;box-sizing:border-box;min-height:0;flex:1;padding:24px clamp(20px,4vw,48px) 40px;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-workspace-scroll>.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);}",
+      ".dsh-auto-root-workspace{max-width:960px;}",
       "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;}",
@@ -1415,21 +1717,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;}",
@@ -1452,6 +1763,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;}",
@@ -1488,13 +1801,34 @@ window.__ModuleLoader__.load({
       "@keyframes dsh-auto-pulse{0%,100%{opacity:1}50%{opacity:.35}}",
       ".dsh-auto-empty,.dsh-auto-loading,.dsh-auto-error{padding:22px 16px;text-align:center;border:1px dashed var(--dsh-auto-border);border-radius:12px;font-size:13px;color:var(--dsh-auto-text-secondary);}",
       ".dsh-auto-error{color:var(--dsh-auto-danger);display:flex;flex-direction:column;gap:10px;align-items:center;}",
-      "@media (max-width:640px){.dsh-auto-overlay-panel{max-width:calc(100vw - 16px);height:calc(100vh - 16px);border-radius:16px;}.dsh-auto-overlay-header{height:46px;padding:8px 10px;}.dsh-auto-overlay-body{padding:0 16px 16px;}.dsh-auto-formgrid{grid-template-columns:1fr;}.dsh-auto-card-head{flex-direction:column;align-items:flex-start;}.dsh-auto-run-name{max-width:150px;}}",
+      "@container dsh-auto-workspace (max-width:680px){.dsh-auto-formgrid{grid-template-columns:1fr;}.dsh-auto-card-head{flex-direction:column;align-items:flex-start;}.dsh-auto-run-name{max-width:150px;}}",
+      "@media (max-width:640px){.dsh-auto-workspace-toolbar{padding-inline:8px;}.dsh-auto-workspace-scroll{padding:16px 14px 28px;}.dsh-auto-formgrid{grid-template-columns:1fr;}.dsh-auto-card-head{flex-direction:column;align-items:flex-start;}.dsh-auto-run-name{max-width:150px;}}",
     ].join("\n");
 
     function apply(ctx) {
       const disclosure = createDisclosureStore();
-      // All package-owned surfaces share one style element and one disclosure
-      // store; both are released with the client-plugin fiber.
+      let centerDeclared = false;
+      let disposeCenter = null;
+      const unmountCenter = () => {
+        if (!disposeCenter) return;
+        const dispose = disposeCenter;
+        disposeCenter = null;
+        dispose();
+      };
+      const mountCenter = () => {
+        if (!centerDeclared || !disclosure.getSnapshot() || disposeCenter) return;
+        try {
+          disposeCenter = ctx.slots.register({
+            name: "conversation",
+            priority: -200,
+            inject: () => ({ disclosure }),
+          }, AutomationsWorkspace);
+        } catch (error) {
+          console.error("dsh automations: could not mount center workspace", error);
+          disclosure.close();
+        }
+      };
+
       ctx.effect(() => {
         const tag = document.createElement("style");
         tag.setAttribute("data-plugin", "@syncended/dsh-automations");
@@ -1504,7 +1838,28 @@ window.__ModuleLoader__.load({
           tag.remove();
         };
       }, "@syncended/dsh-automations: client styles");
-      ctx.effect(() => () => disclosure.dispose(), "@syncended/dsh-automations: disclosure store");
+      ctx.effect(
+        () => ctx.slots.inject("conversation", () => {
+          centerDeclared = true;
+          mountCenter();
+          return () => {
+            centerDeclared = false;
+            unmountCenter();
+          };
+        }),
+        "@syncended/dsh-automations: center workspace",
+      );
+      ctx.effect(() => {
+        const unsubscribe = disclosure.subscribe(() => {
+          if (disclosure.getSnapshot()) mountCenter();
+          else unmountCenter();
+        });
+        return () => {
+          unsubscribe();
+          unmountCenter();
+          disclosure.dispose();
+        };
+      }, "@syncended/dsh-automations: workspace state");
       ctx.slots.inject("settings.section", () => ctx.slots.register({
         name: "settings.section",
         id: "automations",
@@ -1518,16 +1873,11 @@ window.__ModuleLoader__.load({
         label: "Automations",
         inject: () => ({ disclosure }),
       }, AutomationsSidebarAction));
-      ctx.slots.inject("shell.overlay", () => ctx.slots.register({
-        name: "shell.overlay",
-        id: "automations",
-        order: 50,
-        label: "Automations",
-        inject: () => ({ disclosure }),
-      }, 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.1",
+  "version": "0.3.0",
   "description": "Durable cron automations for DeepSeek Harness",
   "type": "module",
   "main": "dist/index.js",
@@ -30,6 +30,7 @@
       "inject": [
         "@deepseek-ai/dsh-client-runtime",
         "@deepseek-ai/dsh-client-ui-layout",
+        "@deepseek-ai/dsh-client-ui-conversation",
         "@deepseek-ai/dsh-client-ui-sidebar",
         "@deepseek-ai/dsh-client-ui-settings"
       ],
@@ -82,6 +83,7 @@
     "@deepseek-ai/dsh-agent-default-model": "^0.1.1-rc.2",
     "@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-conversation": "^0.1.1-rc.2",
     "@deepseek-ai/dsh-client-ui-layout": "^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",
@@ -97,7 +99,9 @@
     "@deepseek-ai/dsh-agent-default-model": "0.1.1-rc.2",
     "@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-conversation": "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",