@syncended/dsh-automations 0.1.2 → 0.2.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 in **Settings → Automations**.
+- Enable/disable, Run now, edit, delete, cancel, and recent run history from the main **Automations** sidebar action or **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 **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 **Automations** 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
-Settings UI / HTTP API
+Sidebar / Settings UI / HTTP API
           │
           ▼
  AutomationService ─── ProjectPolicy
@@ -28,6 +28,10 @@ Settings UI / HTTP API
                         └── HarnessAgentExecutor (MVP)
 ```
 
+### 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.
+
 ### AutomationService
 
 Cordis service `ctx.automations`. It owns input validation, canonical project authorization, metadata discovery, the Web route, and the public executor-registration seam.

package/lib/client.js

@@ -12,7 +12,7 @@ window.__ModuleLoader__.load({
     // x-dsh-automation-client fence header plus an application/json body.
     const React = require("react");
     const h = React.createElement;
-    const { useCallback, useEffect, useRef, useState } = React;
+    const { useCallback, useEffect, useId, useRef, useState, useSyncExternalStore } = React;
     const inject = ["slots"];
 
     const API_PREFIX = "/api/automations";
@@ -1139,7 +1139,242 @@ window.__ModuleLoader__.load({
       );
     }
 
+    function createDisclosureStore() {
+      let open = false;
+      let disposed = false;
+      const listeners = new Set();
+      const publish = (next) => {
+        if (disposed || open === next) return;
+        open = next;
+        for (const listener of Array.from(listeners)) listener();
+      };
+      return {
+        getSnapshot: () => open,
+        subscribe: (listener) => {
+          if (disposed) return () => {};
+          listeners.add(listener);
+          return () => listeners.delete(listener);
+        },
+        open: () => publish(true),
+        close: () => publish(false),
+        toggle: () => publish(!open),
+        dispose: () => {
+          disposed = true;
+          open = false;
+          listeners.clear();
+        },
+      };
+    }
+
+    const MODAL_FOCUS_SELECTOR = [
+      "a[href]",
+      "button:not([disabled])",
+      "input:not([disabled])",
+      "select:not([disabled])",
+      "textarea:not([disabled])",
+      "[contenteditable=\"true\"]",
+      "[tabindex]:not([tabindex=\"-1\"])",
+    ].join(",");
+
+    function modalFocusables(panel) {
+      if (!panel) return [];
+      return Array.from(panel.querySelectorAll(MODAL_FOCUS_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",
+        {
+          width: size,
+          height: size,
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "1.7",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          "aria-hidden": "true",
+          focusable: "false",
+        },
+        h("rect", { x: "3.5", y: "5.5", width: "17", height: "15", rx: "3" }),
+        h("path", { d: "M8 3.5v4M16 3.5v4M3.5 10h17" }),
+        h("circle", { cx: "12", cy: "15.25", r: "2.75" }),
+        h("path", { d: "M12 13.8v1.65l1.15.7" }),
+      );
+    }
+
+    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,
+        disclosure.getSnapshot,
+        disclosure.getSnapshot,
+      );
+      const triggerRef = useRef(null);
+      const previousOpenRef = useRef(open);
+
+      useEffect(() => {
+        const previous = previousOpenRef.current;
+        previousOpenRef.current = open;
+        if (!previous || open) return undefined;
+        const frame = window.requestAnimationFrame(() => triggerRef.current?.focus());
+        return () => window.cancelAnimationFrame(frame);
+      }, [open]);
+
+      return h(
+        "div",
+        { className: "dsh-auto-sidebar-action" + (wide ? "" : " dsh-auto-sidebar-action-rail") },
+        h(
+          "button",
+          {
+            ref: triggerRef,
+            type: "button",
+            className: "dsh-auto-sidebar-trigger",
+            title: wide ? undefined : "Automations",
+            "aria-label": "Automations",
+            "aria-haspopup": "dialog",
+            "aria-expanded": open,
+            "data-active": open ? "true" : undefined,
+            "data-dsh-automations-trigger": "true",
+            onClick: disclosure.toggle,
+          },
+          h(AutomationGlyph, { size: wide ? 16 : 18 }),
+          wide ? h("span", { className: "dsh-auto-sidebar-label" }, "Automations") : null,
+        ),
+      );
+    }
+
+    function AutomationsOverlay({ disclosure }) {
+      const open = useSyncExternalStore(
+        disclosure.subscribe,
+        disclosure.getSnapshot,
+        disclosure.getSnapshot,
+      );
+      const closeRef = useRef(null);
+      const panelRef = useRef(null);
+      const titleId = useId();
+
+      useEffect(() => {
+        if (!open) return undefined;
+        const frame = window.requestAnimationFrame(() => closeRef.current?.focus());
+        return () => window.cancelAnimationFrame(frame);
+      }, [open]);
+
+      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 }),
+        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);
+            },
+          },
+          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),
+            ),
+          ),
+          h("div", { className: "dsh-auto-overlay-body" }, h(AutomationsSection)),
+        ),
+      );
+    }
+
     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: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-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);}",
       "body:not([data-ds-dark-theme]) .dsh-auto-root{color-scheme:light;}",
       "body[data-ds-dark-theme] .dsh-auto-root{color-scheme:dark;}",
@@ -1225,12 +1460,13 @@ 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-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-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;}}",
     ].join("\n");
 
     function apply(ctx) {
-      // The page styles ride a style element owned by this plugin's fiber:
-      // created now and removed when the plugin unloads.
+      const disclosure = createDisclosureStore();
+      // All package-owned surfaces share one style element and one disclosure
+      // store; both are released with the client-plugin fiber.
       ctx.effect(() => {
         const tag = document.createElement("style");
         tag.setAttribute("data-plugin", "@syncended/dsh-automations");
@@ -1239,13 +1475,28 @@ window.__ModuleLoader__.load({
         return () => {
           tag.remove();
         };
-      }, "@syncended/dsh-automations: settings page styles");
+      }, "@syncended/dsh-automations: client styles");
+      ctx.effect(() => () => disclosure.dispose(), "@syncended/dsh-automations: disclosure store");
       ctx.slots.inject("settings.section", () => ctx.slots.register({
         name: "settings.section",
         id: "automations",
         order: 25,
         label: "Automations",
       }, AutomationsSection));
+      ctx.slots.inject("sidebar.footer.action", () => ctx.slots.register({
+        name: "sidebar.footer.action",
+        id: "automations",
+        order: 50,
+        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.inject = inject;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@syncended/dsh-automations",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "description": "Durable cron automations for DeepSeek Harness",
   "type": "module",
   "main": "dist/index.js",
@@ -29,6 +29,8 @@
     "client": {
       "inject": [
         "@deepseek-ai/dsh-client-runtime",
+        "@deepseek-ai/dsh-client-ui-layout",
+        "@deepseek-ai/dsh-client-ui-sidebar",
         "@deepseek-ai/dsh-client-ui-settings"
       ],
       "platform": "web"
@@ -80,7 +82,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-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",
     "@deepseek-ai/dsh-host-webserver": "^0.1.1-rc.2",
     "@deepseek-ai/dsh-llm": "^0.1.1-rc.2",
     "@deepseek-ai/dsh-permission-presets": "^0.1.1-rc.2",
@@ -93,7 +97,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-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",
     "@deepseek-ai/dsh-host-webserver": "0.1.1-rc.2",
     "@deepseek-ai/dsh-llm": "0.1.1-rc.2",
     "@deepseek-ai/dsh-permission-presets": "0.1.1-rc.2",