@syncended/dsh-automations 0.2.2 → 0.3.1

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,7 @@ 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.
 

package/lib/client.js

@@ -21,7 +21,7 @@ window.__ModuleLoader__.load({
       IconBrowseOutline16,
       IconCheckOutline16,
       IconChevronDownOutline14,
-      IconCloseOutline16,
+      IconChevronLeftOutline14,
       IconEditOutline16,
       IconPlayOutline16,
       IconPlusOutline16,
@@ -40,6 +40,7 @@ window.__ModuleLoader__.load({
     const MIN_TIMEOUT_MS = 1000;
     const MAX_TIMEOUT_MS = 86400000;
     const JOB_ID_PATTERN = /^[a-z0-9][a-z0-9-]{0,62}$/;
+    let formInstanceSerial = 0;
 
     const BROWSER_TIMEZONE = (() => {
       try {
@@ -327,12 +328,12 @@ window.__ModuleLoader__.load({
 
     function focusAfterPickerTab(trigger, backwards) {
       requestAnimationFrame(() => {
-        const panel = trigger?.closest('[role="dialog"]');
-        if (!panel) {
+        const focusBoundary = trigger?.closest(".dsh-auto-form") || trigger?.closest('[role="dialog"]');
+        if (!focusBoundary) {
           trigger?.focus();
           return;
         }
-        const focusables = modalFocusables(panel);
+        const focusables = visibleFocusables(focusBoundary);
         const index = focusables.indexOf(trigger);
         const target = index < 0 ? trigger : focusables[index + (backwards ? -1 : 1)];
         (target || trigger)?.focus();
@@ -406,10 +407,14 @@ window.__ModuleLoader__.load({
           });
         });
         const onKeyDown = (event) => {
-          if (event.key !== "Tab") return;
           const dialog = riskDialog();
           if (!dialog) return;
-          const focusables = modalFocusables(dialog);
+          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
@@ -596,6 +601,11 @@ window.__ModuleLoader__.load({
       return h("span", { className: "dsh-auto-status dsh-auto-status-" + props.status }, props.status);
     }
 
+    function nextFormInstancePrefix(reactFormId) {
+      formInstanceSerial += 1;
+      return "dsh-auto-form-" + formInstanceSerial + "-" + reactFormId;
+    }
+
     function JobForm(props) {
       const { meta, draft, editing, saving, error, onChange, onIdTouched, onSubmit, onCancel } = props;
       const providers = meta && Array.isArray(meta.providers) ? meta.providers : [];
@@ -607,6 +617,12 @@ window.__ModuleLoader__.load({
           : ["workspace-write"];
       const agentPresets = meta && Array.isArray(meta.agentPresets) ? meta.agentPresets : [];
       const creating = editing === null;
+      const reactFormId = String(useId()).replace(/[^A-Za-z0-9_-]/g, "");
+      const formPrefixRef = useRef(null);
+      if (formPrefixRef.current === null) {
+        formPrefixRef.current = nextFormInstancePrefix(reactFormId);
+      }
+      const fieldId = (name) => formPrefixRef.current + "-" + name;
 
       return h(
         "form",
@@ -622,9 +638,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,
@@ -636,9 +652,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,
@@ -652,9 +668,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,
@@ -664,9 +680,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,
@@ -676,30 +692,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),
@@ -709,9 +725,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,
@@ -723,12 +739,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",
@@ -736,7 +752,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 })),
             ),
           ),
@@ -744,17 +760,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",
@@ -763,18 +779,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",
@@ -782,15 +798,15 @@ 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: "Uses the current Harness default when not explicitly selected." },
+            { label: "Agent preset", htmlFor: fieldId("preset"), hint: "Uses the current Harness default when not explicitly selected." },
             h(AgentPresetPicker, {
-              id: "dsh-auto-f-preset",
+              id: fieldId("preset"),
               value: draft.agentPreset,
               presets: agentPresets,
               onChange: (value) => onChange("agentPreset", value),
@@ -800,12 +816,12 @@ window.__ModuleLoader__.load({
             Field,
             {
               label: "Permission preset",
-              htmlFor: "dsh-auto-f-permission",
+              htmlFor: fieldId("permission"),
               required: true,
               hint: permissionPresetPresentation(draft.permissionPreset).detail,
             },
             h(PermissionPresetPicker, {
-              id: "dsh-auto-f-permission",
+              id: fieldId("permission"),
               value: draft.permissionPreset,
               presets: permissionPresets,
               onChange: (value) => onChange("permissionPreset", value),
@@ -813,11 +829,11 @@ window.__ModuleLoader__.load({
           ),
           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),
@@ -827,11 +843,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),
@@ -841,9 +857,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,
@@ -854,9 +870,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",
@@ -1141,7 +1157,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);
@@ -1418,14 +1434,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" },
@@ -1547,7 +1566,7 @@ window.__ModuleLoader__.load({
       };
     }
 
-    const MODAL_FOCUS_SELECTOR = [
+    const FOCUSABLE_SELECTOR = [
       "a[href]",
       "button:not([disabled])",
       "input:not([disabled])",
@@ -1557,45 +1576,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",
@@ -1644,10 +1633,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,
@@ -1658,67 +1646,55 @@ 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) => {
-              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;
-              }
-              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(IconCloseOutline16),
-            ),
+            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 })),
       );
     }
 
@@ -1731,17 +1707,15 @@ window.__ModuleLoader__.load({
       ".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: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: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-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-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;}",
@@ -1837,13 +1811,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");
@@ -1853,7 +1848,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",
@@ -1867,18 +1883,12 @@ 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.__testing = Object.freeze({ nextFormInstancePrefix });
     exports.inject = inject;
     exports.apply = apply;
     return module.exports;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@syncended/dsh-automations",
-  "version": "0.2.2",
+  "version": "0.3.1",
   "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,6 +99,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-primitives": "0.1.1-rc.2",
     "@deepseek-ai/dsh-client-ui-settings": "0.1.1-rc.2",