dsh-completion-reminder 1.0.0 → 1.2.0

package/lib/client.js

@@ -39,44 +39,55 @@ window.__ModuleLoader__.load({
       providers: {},
       clickUrl: '',
       iconUrl: '',
+      showSettingsPanel: true,
     };
     
     const DSH_CSS_VARS = {
       bgModule: 'var(--dsw-alias-bg-module-platform)',
+      borderL1: 'var(--dsw-alias-border-l1)',
+      borderL2: 'var(--dsw-alias-border-l2)',
       borderL3: 'var(--dsw-alias-border-l3)',
       labelPrimary: 'var(--dsw-alias-label-primary)',
       labelSecondary: 'var(--dsw-alias-label-secondary)',
       labelTertiary: 'var(--dsw-alias-label-tertiary)',
+      labelCaption: 'var(--dsw-alias-label-caption)',
       stateSuccessPrimary: 'var(--dsw-alias-state-success-primary)',
       stateWarnPrimary: 'var(--dsw-alias-state-warn-primary)',
       stateErrorPrimary: 'var(--dsw-alias-state-error-primary)',
+      stateBusinessPrimary: 'var(--dsw-alias-state-business-primary)',
+      buttonInfoFill: 'var(--dsw-alias-button-info-fill)',
       shadowLv3: 'var(--dsw-shadow-lv3)',
+      fontStrong14: 'var(--dsw-font-s-strong-14)',
+      fontXs13: 'var(--dsw-font-xs-13)',
     };
     
 
     // ── compiled client code ────────────────────────────────────────
     /**
-     * DSH Completion Reminder — client half.
+     * DSH Completion Reminder — client half (v1.2).
      *
-     * A DOM-based DSH client plugin that fires a notification when the agent
-     * stops generating. The plugin watches the input toolbar (send vs stop
-     * button) and the conversation stream to detect three terminal states:
-     * success, user-stopped, and error.
+     * Strategy:
+     *   1. Detect agent-completion lifecycle by watching the DSH composer
+     *      primary button's `aria-label` (which flips between "Stop
+     *      generating" / "停止生成" and "Send message" / "发送消息") inside
+     *      `[data-composer-card]`. The `data-phase` attribute on the
+     *      conversation root helps disambiguate active / settling / hero.
      *
-     * Delivery channels:
-     *   - browser   : window.Notification (default; user-gated permission)
-     *   - telegram  : Telegram Bot API
-     *   - bark      : Apple Push (Bark) HTTP API
-     *   - pushover  : Pushover REST API
-     *   - serverchan: Server酱 (sct.ftqq.com) — popular in CN
-     *   - discord   : Discord incoming webhook
-     *   - slack     : Slack incoming webhook
-     *   - webhook   : generic JSON POST webhook
-     *   - custom    : user-supplied function
+     *   2. Register a settings section in DSH's own settings dialog via
+     *      `ctx.slots.inject('settings.section', ...)` so the user finds the
+     *      configuration alongside General / Models / Plugins rather than as
+     *      an extra floating widget.
+     *
+     *   3. Filter credential fields by the currently selected provider so the
+     *      panel stays compact (Telegram shows 2 fields, Bark shows 1, etc.).
+     *
+     *   4. Persist configuration to `localStorage` and re-load on activation.
      *
      * The plugin is packaged as a DSH client plugin (`dsh.client` in
      * package.json) and loaded through `window.__ModuleLoader__`.
      */
+    var React = require("react");
+    var { forwardRef, useEffect, useImperativeHandle, useRef } = require("react");
     
     let config = { ...DEFAULT_OPTIONS };
     const state = {
@@ -89,67 +100,36 @@ window.__ModuleLoader__.load({
         isActive: false,
         permission: detectPermission(),
         unbinder: [],
+        panelHostEl: null,
+        panelRendered: false,
+        hintEl: null,
     };
-    // ──── DOM selectors used to detect the agent run lifecycle ─────────────────
-    /**
-     * Selectors for the input toolbar's send/stop button. DSH renders the
-     * same component with a different icon/aria-label while the agent is
-     * running; we watch the button's `aria-label` and `data-*` attributes.
-     */
-    const TOOLBAR_BUTTON_SELECTORS = [
-        // DSH common: button with a "send" / "stop" accessible name.
-        'button[aria-label*="send" i]',
-        'button[aria-label*="stop" i]',
-        'button[aria-label*="停止" i]',
-        'button[aria-label*="发送" i]',
-        'button[aria-label*="取消" i]',
-        'button[aria-label*="中止" i]',
-        'button[aria-label*="abort" i]',
-        'button[aria-label*="cancel" i]',
-        // DSH common: button type="submit" in the chat form.
-        'form button[type="submit"]',
-        'textarea + * button',
-        'textarea ~ button',
-    ];
-    /** Texts that, when present on a visible button, mean "agent is running". */
+    // ──── DOM signals we look at ───────────────────────────────────────────────
+    const COMPOSER_CARD_SELECTOR = '[data-composer-card]';
+    const CONVERSATION_ROOT_SELECTOR = '[data-conversation-scroll], [data-composer-seat]';
     const RUNNING_TOKENS = [
-        'stop',
-        'stop generating',
-        '停止',
-        '中止',
-        '取消生成',
-        'abort',
-        'cancel',
-        'pause',
-        '暂停',
-        'interrupt',
-    ];
-    /** Texts that mean "the run has finished (successfully)". */
-    const SUCCESS_TOKENS = [
-        'send',
-        '发送',
-        'submit',
-        '提交',
+        'stop generating', '停止生成', '停止', 'stop',
+        'abort', 'cancel generating', 'cancel',
     ];
-    /** Selectors for the active conversation. */
-    const CONVERSATION_SELECTORS = [
-        '[data-conversation-id]',
-        '[data-conversation]',
-        'main [class*="conversation"]',
-        'main [class*="chat"]',
-        'main [class*="message"]',
+    const IDLE_TOKENS = [
+        'send message', '发送消息', 'send', '发送',
     ];
-    // ──── Public configure / activate / deactivate ────────────────────────────
+    // ──── Public API ───────────────────────────────────────────────────────────
     function configure(opts) {
-        if (!opts) {
-            config = { ...DEFAULT_OPTIONS };
-            return;
+        const persisted = loadPersisted();
+        const merged = { ...persisted, ...(opts ?? {}) };
+        if (!opts || opts.providers === undefined) {
+            merged.providers = { ...(persisted.providers ?? {}), ...(opts?.providers ?? {}) };
         }
         config = {
             ...DEFAULT_OPTIONS,
-            ...opts,
-            providers: { ...DEFAULT_OPTIONS.providers, ...(opts.providers ?? {}) },
+            ...merged,
+            providers: { ...DEFAULT_OPTIONS.providers, ...(merged.providers ?? {}) },
         };
+        if (state.isActive) {
+            // Re-render the open panel with new values.
+            rerenderPanel();
+        }
     }
     function activate() {
         if (state.isActive)
@@ -162,6 +142,7 @@ window.__ModuleLoader__.load({
         }
         startObserver();
         bindVisibilityEvents();
+        // Don't auto-show a hint — the user now finds us via DSH Settings.
     }
     function deactivate() {
         state.isActive = false;
@@ -172,8 +153,50 @@ window.__ModuleLoader__.load({
             }
             catch { /* noop */ }
         }
+        removeHint();
         state.runStartedAt = null;
         state.inFlight = false;
+        // Clear the panel host so the next activation rebuilds it.
+        if (state.panelHostEl) {
+            state.panelHostEl.innerHTML = '';
+            state.panelHostEl = null;
+        }
+        state.panelRendered = false;
+    }
+    // ──── Persistence ──────────────────────────────────────────────────────────
+    function loadPersisted() {
+        if (typeof localStorage === 'undefined')
+            return {};
+        try {
+            const raw = localStorage.getItem(STORAGE_KEY);
+            if (!raw)
+                return {};
+            const parsed = JSON.parse(raw);
+            return parsed ?? {};
+        }
+        catch {
+            return {};
+        }
+    }
+    function savePersisted() {
+        if (typeof localStorage === 'undefined')
+            return;
+        try {
+            const out = {
+                provider: config.provider,
+                autoRequestPermission: config.autoRequestPermission,
+                notifyOnSuccess: config.notifyOnSuccess,
+                notifyOnStopped: config.notifyOnStopped,
+                notifyOnError: config.notifyOnError,
+                suppressWhenFocused: config.suppressWhenFocused,
+                cooldownMs: config.cooldownMs,
+                providers: config.providers,
+            };
+            localStorage.setItem(STORAGE_KEY, JSON.stringify(out));
+        }
+        catch {
+            // localStorage may be disabled — silently ignore.
+        }
     }
     // ──── Permission handling ──────────────────────────────────────────────────
     function detectPermission() {
@@ -209,10 +232,9 @@ window.__ModuleLoader__.load({
             subtree: true,
             characterData: true,
             attributes: true,
-            attributeFilter: ['aria-label', 'aria-pressed', 'data-state', 'data-status', 'class', 'disabled'],
+            attributeFilter: ['aria-label', 'aria-disabled', 'data-phase', 'data-state', 'class', 'disabled'],
         });
-        // Take an initial reading of the current state.
-        scanCurrentRun();
+        evaluateNow();
     }
     function stopObserver() {
         if (state.observer) {
@@ -224,157 +246,120 @@ window.__ModuleLoader__.load({
         if (!state.isActive)
             return;
         for (const m of mutations) {
-            // Toolbar changes (send ↔ stop swap) are the strongest signal.
-            if (m.type === 'attributes' || m.type === 'characterData') {
+            if (m.type === 'attributes') {
                 const target = m.target;
-                if (target && isInsideToolbar(target)) {
-                    evaluateToolbar();
+                if (target && isInsideComposer(target)) {
+                    evaluateNow();
+                    continue;
                 }
             }
-            // New child nodes can also flip the toolbar; check the subtree root.
             for (const node of m.addedNodes) {
                 if (!(node instanceof HTMLElement))
                     continue;
-                if (node.matches?.(TOOLBAR_BUTTON_SELECTORS.join(','))) {
-                    evaluateToolbar();
-                }
-                else if (node.querySelector?.(TOOLBAR_BUTTON_SELECTORS.join(','))) {
-                    evaluateToolbar();
+                if (node.matches?.(COMPOSER_CARD_SELECTOR) ||
+                    node.querySelector?.(COMPOSER_CARD_SELECTOR)) {
+                    evaluateNow();
                 }
             }
         }
     }
-    function isInsideToolbar(el) {
-        return !!el.closest('form, [class*="composer" i], [class*="toolbar" i], [class*="input" i], [class*="chat-input" i]');
-    }
-    function scanCurrentRun() {
-        // Without any history, we don't know whether the user is mid-run.
-        // Trust the current toolbar state on first paint.
-        evaluateToolbar();
+    function isInsideComposer(el) {
+        return !!el.closest(COMPOSER_CARD_SELECTOR);
     }
-    function evaluateToolbar() {
-        const buttons = collectToolbarButtons();
-        if (!buttons.length)
-            return;
-        // Look for a button whose text/aria-label signals "running".
-        const running = buttons.find((b) => matchesAny(b, RUNNING_TOKENS));
-        const idle = buttons.find((b) => matchesAny(b, SUCCESS_TOKENS));
-        // Refresh cached model/agent name opportunistically.
+    function evaluateNow() {
+        const primary = findPrimaryButton();
         captureRunMetadata();
-        if (running && !state.inFlight) {
-            // Edge: idle → running
+        const isRunning = !!primary && isRunningButton(primary);
+        if (isRunning && !state.inFlight) {
             state.inFlight = true;
             state.runStartedAt = Date.now();
             return;
         }
-        if (!running && state.inFlight) {
-            // Edge: running → idle. We treat any exit-from-running as a
-            // completion event and decide success vs stopped vs error by
-            // inspecting the latest assistant message and any visible error.
+        if (!isRunning && state.inFlight) {
             state.inFlight = false;
             const startedAt = state.runStartedAt ?? Date.now();
             const durationMs = Date.now() - startedAt;
             state.runStartedAt = null;
             void completeRun(determineStatus(), durationMs);
         }
-        // When the page first loads idle, do nothing.
-        void idle;
-    }
-    /** Returns the buttons in the composer toolbar (send/stop/... ). */
-    function collectToolbarButtons() {
-        const out = [];
-        const forms = document.querySelectorAll('form, [class*="composer" i], [class*="toolbar" i]');
-        for (const f of forms) {
-            const buttons = f.querySelectorAll('button');
-            buttons.forEach((b) => {
-                if (b.offsetParent !== null || b.getClientRects().length)
-                    out.push(b);
-            });
-        }
-        // Also include bare buttons that match one of the toolbar selectors
-        // outside a known form (best effort).
-        for (const sel of TOOLBAR_BUTTON_SELECTORS) {
-            document.querySelectorAll(sel).forEach((b) => {
-                if (b.offsetParent !== null || b.getClientRects().length) {
-                    if (!out.includes(b))
-                        out.push(b);
-                }
-            });
+    }
+    function findPrimaryButton() {
+        const card = document.querySelector(COMPOSER_CARD_SELECTOR);
+        if (!card)
+            return null;
+        const buttons = card.querySelectorAll('button[type="button"]');
+        for (const b of buttons) {
+            const aria = (b.getAttribute('aria-label') || '').toLowerCase();
+            if (RUNNING_TOKENS.some((t) => aria.includes(t)) ||
+                IDLE_TOKENS.some((t) => aria.includes(t))) {
+                return b;
+            }
         }
-        return out;
+        if (buttons.length === 1)
+            return buttons[0];
+        return null;
     }
-    function matchesAny(btn, tokens) {
-        const text = (btn.textContent ?? '').trim().toLowerCase();
-        const aria = (btn.getAttribute('aria-label') ?? '').trim().toLowerCase();
-        const title = (btn.getAttribute('title') ?? '').trim().toLowerCase();
-        const cls = (btn.getAttribute('class') ?? '').toLowerCase();
-        const hay = `${text} ${aria} ${title} ${cls}`;
-        return tokens.some((tok) => hay.includes(tok));
+    function isRunningButton(btn) {
+        const aria = (btn.getAttribute('aria-label') || '').toLowerCase();
+        return RUNNING_TOKENS.some((t) => aria.includes(t));
     }
-    /**
-     * Inspect the most recent assistant message to decide success vs error.
-     * If we can't decide, default to 'success' (the common case).
-     */
     function determineStatus() {
-        // If the user pressed stop while we were running, we still flag the
-        // event as 'stopped' when an explicit stopped/error marker is visible.
-        const lastAssistant = findLastAssistantMessage();
-        if (!lastAssistant)
+        const root = document.querySelector(CONVERSATION_ROOT_SELECTOR);
+        const phase = root?.getAttribute('data-phase');
+        if (phase === 'settling')
             return 'success';
-        const text = (lastAssistant.textContent ?? '').toLowerCase();
-        if (/(error|exception|failed|traceback|错误|失败|异常)/.test(text) &&
-            !/no error|没有错误|successfully|成功/.test(text)) {
-            return 'error';
-        }
-        if (/(stopped by user|user stopped|手动停止|已停止|已取消)/.test(text)) {
-            return 'stopped';
+        const lastAssistant = findLastAssistantTurn();
+        if (lastAssistant) {
+            const cls = (lastAssistant.getAttribute('class') ?? '').toLowerCase();
+            const ds = (lastAssistant.getAttribute('data-state') ?? '').toLowerCase();
+            if (ds === 'interrupted' || cls.includes('interrupt') || cls.includes('stop')) {
+                return 'stopped';
+            }
+            if (ds === 'error' || cls.includes('error') || cls.includes('fail')) {
+                return 'error';
+            }
+            const text = (lastAssistant.textContent ?? '').toLowerCase();
+            if (/(error|exception|failed|traceback|错误|失败|异常)/.test(text) &&
+                !/no error|没有错误|successfully|成功/.test(text)) {
+                return 'error';
+            }
+            if (/(stopped by user|user stopped|手动停止|已停止|已取消)/.test(text)) {
+                return 'stopped';
+            }
         }
         return 'success';
     }
-    function findLastAssistantMessage() {
-        for (const sel of CONVERSATION_SELECTORS) {
-            const all = document.querySelectorAll(sel);
-            for (let i = all.length - 1; i >= 0; i--) {
-                const el = all[i];
-                const role = (el.getAttribute('data-role') ?? el.getAttribute('data-author') ?? '')
-                    .toLowerCase();
-                if (role.includes('assistant') || role.includes('agent') || role.includes('model')) {
-                    return el;
-                }
-            }
+    function findLastAssistantTurn() {
+        const scroll = document.querySelector(CONVERSATION_ROOT_SELECTOR);
+        if (!scroll)
+            return null;
+        const candidates = scroll.querySelectorAll('[data-role="assistant"], [data-author="assistant"], [data-author="model"]');
+        if (candidates.length)
+            return candidates[candidates.length - 1];
+        let last = null;
+        for (const child of Array.from(scroll.children)) {
+            if (child instanceof HTMLElement)
+                last = child;
         }
-        // Fallback: the last child in the conversation stream is the latest
-        // message — if its text looks like an error we already know.
-        const main = document.querySelector('main');
-        const last = main?.lastElementChild;
-        return last instanceof HTMLElement ? last : null;
+        return last;
     }
     function captureRunMetadata() {
-        const model = readModelFromHeader();
-        if (model)
-            state.lastModel = model;
-        const agent = readAgentFromHeader();
-        if (agent)
-            state.lastAgent = agent;
-    }
-    function readModelFromHeader() {
-        // DSH renders a model label (e.g. "DeepSeek-V3") in a header chip.
-        const candidates = document.querySelectorAll('[data-model], [data-testid*="model" i], [class*="model" i]');
-        for (const el of candidates) {
+        const modelCandidates = document.querySelectorAll('[data-model], [data-testid*="model" i]');
+        for (const el of modelCandidates) {
             const text = (el.textContent ?? '').trim();
-            if (text && text.length < 80)
-                return text;
+            if (text && text.length < 80) {
+                state.lastModel = text;
+                break;
+            }
         }
-        return null;
-    }
-    function readAgentFromHeader() {
-        const candidates = document.querySelectorAll('[data-agent], [data-testid*="agent" i]');
-        for (const el of candidates) {
+        const agentCandidates = document.querySelectorAll('[data-agent], [data-testid*="agent" i]');
+        for (const el of agentCandidates) {
             const text = (el.textContent ?? '').trim();
-            if (text && text.length < 80)
-                return text;
+            if (text && text.length < 80) {
+                state.lastAgent = text;
+                break;
+            }
         }
-        return null;
     }
     // ──── Visibility / focus suppression ───────────────────────────────────────
     function bindVisibilityEvents() {
@@ -402,7 +387,6 @@ window.__ModuleLoader__.load({
             return;
         if (config.suppressWhenFocused && pageIsFocused())
             return;
-        // Cooldown — avoid rapid-fire notifications on tool-call loops.
         const now = Date.now();
         if (now - state.lastNotifiedAt < config.cooldownMs)
             return;
@@ -462,10 +446,8 @@ window.__ModuleLoader__.load({
             }
         }
     }
-    // ──── browser ──────────────────────────────────────────────────────────────
     async function deliverBrowser(payload) {
         if (state.permission === 'unsupported') {
-            // No Notification API — fall back to an in-page toast.
             showInPageToast(payload);
             return;
         }
@@ -501,7 +483,6 @@ window.__ModuleLoader__.load({
             };
         }
         catch (err) {
-            // Some browsers throw when called from a non-active tab.
             showInPageToast(payload, '系统通知失败，已改为页面内提示。');
             config.onError(toError(err), 'browser');
         }
@@ -558,52 +539,24 @@ window.__ModuleLoader__.load({
         style.id = TOAST_STYLE_ID;
         style.textContent = `
     .dsh-reminder-toast-root {
-      position: fixed;
-      top: 20px;
-      right: 20px;
-      z-index: 2147483647;
-      display: flex;
-      flex-direction: column;
-      gap: 8px;
-      pointer-events: none;
-      max-width: 360px;
+      position: fixed; top: 20px; right: 20px; z-index: 2147483647;
+      display: flex; flex-direction: column; gap: 8px; pointer-events: none; max-width: 360px;
     }
     .dsh-reminder-toast {
       pointer-events: auto;
-      background: ${DSH_CSS_VARS.bgModule};
-      color: ${DSH_CSS_VARS.labelPrimary};
-      border: 1px solid ${DSH_CSS_VARS.borderL3};
-      border-radius: 10px;
+      background: ${DSH_CSS_VARS.bgModule}; color: ${DSH_CSS_VARS.labelPrimary};
+      border: 1px solid ${DSH_CSS_VARS.borderL3}; border-radius: 10px;
       box-shadow: ${DSH_CSS_VARS.shadowLv3};
-      padding: 12px 14px;
-      font-size: 13px;
-      line-height: 1.4;
-      cursor: pointer;
+      padding: 12px 14px; font-size: 13px; line-height: 1.4; cursor: pointer;
       transition: opacity .25s ease, transform .25s ease;
     }
-    .dsh-reminder-toast-title {
-      font-weight: 600;
-      margin-bottom: 4px;
-      color: ${DSH_CSS_VARS.labelPrimary};
-    }
-    .dsh-reminder-toast-body {
-      color: ${DSH_CSS_VARS.labelSecondary};
-      white-space: pre-wrap;
-      word-break: break-word;
-    }
-    .dsh-reminder-toast-hint {
-      color: ${DSH_CSS_VARS.labelTertiary};
-      font-size: 12px;
-      margin-top: 6px;
-    }
-    .dsh-reminder-toast-leave {
-      opacity: 0;
-      transform: translateY(-4px);
-    }
+    .dsh-reminder-toast-title { font-weight: 600; margin-bottom: 4px; color: ${DSH_CSS_VARS.labelPrimary}; }
+    .dsh-reminder-toast-body { color: ${DSH_CSS_VARS.labelSecondary}; white-space: pre-wrap; word-break: break-word; }
+    .dsh-reminder-toast-hint { color: ${DSH_CSS_VARS.labelTertiary}; font-size: 12px; margin-top: 6px; }
+    .dsh-reminder-toast-leave { opacity: 0; transform: translateY(-4px); }
     `;
         document.head.appendChild(style);
     }
-    // ──── Generic fetch helper ─────────────────────────────────────────────────
     async function postJson(url, body) {
         const res = await fetch(url, {
             method: 'POST',
@@ -639,7 +592,6 @@ window.__ModuleLoader__.load({
             return '';
         }
     }
-    // ──── telegram ─────────────────────────────────────────────────────────────
     async function deliverTelegram(payload) {
         const cfg = config.providers;
         if (!cfg.telegramBotToken || !cfg.telegramChatId) {
@@ -657,13 +609,11 @@ window.__ModuleLoader__.load({
     function escapeMd(s) {
         return s.replace(/[_*[\]()~`>#+\-=|{}.!\\]/g, (m) => `\\${m}`);
     }
-    // ──── bark ─────────────────────────────────────────────────────────────────
     async function deliverBark(payload) {
         const cfg = config.providers;
         if (!cfg.barkKey)
             throw new Error('Bark provider requires barkKey');
         const server = (cfg.barkServer || 'https://api.day.app').replace(/\/$/, '');
-        // Bark accepts /:key/:title/:body?url=…&icon=…
         const url = `${server}/${encodeURIComponent(cfg.barkKey)}/${encodeURIComponent(payload.title)}/${encodeURIComponent(payload.body)}${payload.url ? `?url=${encodeURIComponent(payload.url)}` : ''}${payload.iconUrl ? `${payload.url ? '&' : '?'}icon=${encodeURIComponent(payload.iconUrl)}` : ''}`;
         const res = await fetch(url, { method: 'GET' });
         if (!res.ok) {
@@ -671,7 +621,6 @@ window.__ModuleLoader__.load({
             throw new Error(`Bark ${res.status}: ${text || res.statusText}`);
         }
     }
-    // ──── pushover ─────────────────────────────────────────────────────────────
     async function deliverPushover(payload) {
         const cfg = config.providers;
         if (!cfg.pushoverToken || !cfg.pushoverUserKey) {
@@ -689,7 +638,6 @@ window.__ModuleLoader__.load({
             fields.device = cfg.pushoverDevice;
         await postForm('https://api.pushover.net/1/messages.json', fields);
     }
-    // ──── serverchan ───────────────────────────────────────────────────────────
     async function deliverServerChan(payload) {
         const cfg = config.providers;
         if (!cfg.serverchanSendKey)
@@ -699,7 +647,6 @@ window.__ModuleLoader__.load({
             desp: payload.body + (payload.url ? `\n\n[打开 DSH](${payload.url})` : ''),
         });
     }
-    // ──── discord ──────────────────────────────────────────────────────────────
     async function deliverDiscord(payload) {
         const cfg = config.providers;
         if (!cfg.discordWebhookUrl)
@@ -709,7 +656,6 @@ window.__ModuleLoader__.load({
             username: 'DSH Reminder',
         });
     }
-    // ──── slack ────────────────────────────────────────────────────────────────
     async function deliverSlack(payload) {
         const cfg = config.providers;
         if (!cfg.slackWebhookUrl)
@@ -718,36 +664,629 @@ window.__ModuleLoader__.load({
             text: `*${payload.title}*\n${payload.body}${payload.url ? `\n<${payload.url}|Open DSH>` : ''}`,
         });
     }
-    // ──── generic webhook ──────────────────────────────────────────────────────
     async function deliverWebhook(payload) {
         const cfg = config.providers;
         if (!cfg.webhookUrl)
             throw new Error('Webhook provider requires webhookUrl');
-        const body = cfg.webhookPayload
-            ? cfg.webhookPayload(payload)
-            : payload;
+        const body = cfg.webhookPayload ? cfg.webhookPayload(payload) : payload;
         await postJson(cfg.webhookUrl, body);
     }
-    // ──── custom ───────────────────────────────────────────────────────────────
     async function deliverCustom(payload) {
         const fn = config.providers.customSend;
         if (!fn)
             throw new Error('Custom provider requires providers.customSend');
         await fn(payload);
     }
-    // ──── Helpers ──────────────────────────────────────────────────────────────
     function toError(value) {
         if (value instanceof Error)
             return value;
         return new Error(typeof value === 'string' ? value : JSON.stringify(value));
     }
-    // ──── DSH client plugin entry ──────────────────────────────────────────────
+    // ──── Settings dialog integration ──────────────────────────────────────────
+    /**
+     * Map a provider id to the credential fields it needs. Used to filter
+     * the panel so users only see the fields relevant to their choice.
+     */
+    const PROVIDER_FIELDS = {
+        browser: [],
+        telegram: [
+            { key: 'telegramBotToken', label: 'Bot Token', placeholder: '123456:ABC…' },
+            { key: 'telegramChatId', label: 'Chat ID', placeholder: '123456789' },
+        ],
+        bark: [
+            { key: 'barkKey', label: 'Bark Key', placeholder: 'iPhone Bark 设备 Key' },
+            { key: 'barkServer', label: 'Bark Server（可选）', placeholder: 'https://api.day.app' },
+        ],
+        pushover: [
+            { key: 'pushoverToken', label: 'App Token', placeholder: 'a…' },
+            { key: 'pushoverUserKey', label: 'User Key', placeholder: 'u…' },
+            { key: 'pushoverDevice', label: 'Device（可选）', placeholder: '留空推送到所有设备' },
+        ],
+        serverchan: [
+            { key: 'serverchanSendKey', label: 'Server酱 SendKey', placeholder: 'SCT…' },
+        ],
+        discord: [
+            { key: 'discordWebhookUrl', label: 'Discord Webhook URL', placeholder: 'https://discord.com/api/webhooks/…' },
+        ],
+        slack: [
+            { key: 'slackWebhookUrl', label: 'Slack Webhook URL', placeholder: 'https://hooks.slack.com/services/…' },
+        ],
+        webhook: [
+            { key: 'webhookUrl', label: 'Webhook URL', placeholder: 'https://your-service.example/notify' },
+        ],
+        custom: [
+            { key: 'webhookUrl', label: 'Custom provider 占位字段', placeholder: '可填任意值' },
+        ],
+    };
+    const PROVIDER_LABELS = [
+        ['browser', '🌐 浏览器通知'],
+        ['telegram', '✈️ Telegram'],
+        ['bark', '🍎 Bark (iOS)'],
+        ['pushover', '📲 Pushover'],
+        ['serverchan', '🐦 Server酱'],
+        ['discord', '🎮 Discord'],
+        ['slack', '💼 Slack'],
+        ['webhook', '🔗 通用 Webhook'],
+        ['custom', '🛠 自定义'],
+    ];
+    const PANEL_STYLE_ID = 'dsh-completion-reminder-panel-style';
+    /**
+     * The Host React component. It renders a stable <div> that the
+     * vanilla JS portion of the plugin fills in. This way we get free
+     * DSH theming (the host div inherits the dialog's CSS variables) and
+     * we don't have to bundle React/JSX-runtime.
+     */
+    const Host = forwardRef((_props, ref) => {
+        const innerRef = useRef(null);
+        useImperativeHandle(ref, () => innerRef.current);
+        return React.createElement('div', {
+            ref: innerRef,
+            className: 'dsh-reminder-host',
+            'data-reminder-host': '',
+        });
+    });
+    Host.displayName = 'DSHCompletionReminderHost';
     /**
-     * DSH client plugin entry — called by the Cordis Loader.
+     * Component registered with DSH's `settings.section` slot. Renders a
+     * ref-bound div into the dialog; the ref is captured by the parent
+     * closure and populated with the actual settings UI.
+     */
+    function makeSectionComponent(registerHost) {
+        return function ReminderSection() {
+            const localRef = useRef(null);
+            useEffect(() => {
+                if (localRef.current) {
+                    registerHost(localRef.current);
+                }
+                return () => {
+                    if (localRef.current) {
+                        localRef.current.innerHTML = '';
+                    }
+                };
+            }, []);
+            return React.createElement(Host, { ref: localRef });
+        };
+    }
+    /**
+     * Plugin entry point invoked by the DSH Cordis Loader.
+     *
+     * In DSH v1.x the host invokes the plugin's exported `apply(ctx, opts)`
+     * after the module system has been bootstrapped. We use the context
+     * to register a settings section.
      */
     function apply(ctx, opts) {
         configure(opts);
         activate();
+        // Try to register a settings section. If the host doesn't expose
+        // `ctx.slots` (older / different host), we silently fall back to the
+        // detection-only behaviour and surface a one-time hint.
+        try {
+            if (ctx && ctx.inject && ctx.slots) {
+                const slots = ctx.slots;
+                const inject = ctx.inject;
+                // The `slots.inject(name, factory)` API registers a slot
+                // contributor. The factory returns a teardown function (often
+                // `ctx.slots.register(...)`) that adds the entry. We keep the
+                // teardown around for symmetry but it is not currently used.
+                slots.inject('settings.section', () => {
+                    // Register the section. The third arg is the React component
+                    // factory; we provide a component that yields a ref-bound host.
+                    const sectionFactory = makeSectionComponent((el) => {
+                        state.panelHostEl = el;
+                        injectPanelInto(el);
+                    });
+                    const off = slots.register({
+                        name: 'settings.section',
+                        id: 'reminder',
+                        order: 50,
+                        label: () => '🔔 提醒',
+                        locale: '@dsh-completion-reminder',
+                        inject: () => ({}),
+                    }, sectionFactory);
+                    return off;
+                });
+            }
+            else {
+                showFirstRunHint();
+            }
+        }
+        catch (err) {
+            try {
+                console.warn('[dsh-completion-reminder] failed to register settings section:', err);
+            }
+            catch { /* noop */ }
+            showFirstRunHint();
+        }
+    }
+    /**
+     * Show a single, dismissable hint that points the user to the DSH
+     * settings dialog. We only show it once and only when the section
+     * registration failed (older host, no slots service, etc.).
+     */
+    function showFirstRunHint() {
+        if (state.hintEl || hasPersistedConfig())
+            return;
+        injectHintStyles();
+        const el = document.createElement('div');
+        el.className = 'dsh-reminder-hint';
+        el.innerHTML = `
+        <span>🔔 DSH Completion Reminder 已激活。在「设置 → 🔔 提醒」中配置通知渠道。</span>
+        <button type="button" data-reminder-hint-dismiss>知道了</button>
+      `;
+        el.querySelector('[data-reminder-hint-dismiss]')?.addEventListener('click', () => {
+            el.remove();
+            state.hintEl = null;
+        });
+        document.body.appendChild(el);
+        state.hintEl = el;
+        setTimeout(() => {
+            el.classList.add('dsh-reminder-hint-leave');
+            setTimeout(() => { el.remove(); state.hintEl = null; }, 600);
+        }, 12000);
+    }
+    function removeHint() {
+        if (state.hintEl) {
+            state.hintEl.remove();
+            state.hintEl = null;
+        }
+    }
+    function hasPersistedConfig() {
+        if (typeof localStorage === 'undefined')
+            return false;
+        try {
+            return !!localStorage.getItem(STORAGE_KEY);
+        }
+        catch {
+            return false;
+        }
+    }
+    const HINT_STYLE_ID = 'dsh-completion-reminder-hint-style';
+    function injectHintStyles() {
+        if (document.getElementById(HINT_STYLE_ID))
+            return;
+        const style = document.createElement('style');
+        style.id = HINT_STYLE_ID;
+        style.textContent = `
+    .dsh-reminder-hint {
+      position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%);
+      z-index: 2147483600;
+      display: flex; align-items: center; gap: 10px;
+      background: ${DSH_CSS_VARS.bgModule}; color: ${DSH_CSS_VARS.labelPrimary};
+      border: 1px solid ${DSH_CSS_VARS.borderL3}; border-radius: 999px;
+      box-shadow: ${DSH_CSS_VARS.shadowLv3};
+      padding: 8px 8px 8px 14px;
+      font-size: 13px; line-height: 1.2;
+      transition: opacity .4s, transform .4s;
+    }
+    .dsh-reminder-hint button {
+      background: ${DSH_CSS_VARS.buttonInfoFill}; color: #fff;
+      border: none; border-radius: 999px; padding: 4px 10px;
+      font-size: 12px; cursor: pointer; font-family: inherit;
+    }
+    .dsh-reminder-hint-leave { opacity: 0; transform: translate(-50%, 12px); }
+    `;
+        document.head.appendChild(style);
+    }
+    // ──── Panel rendering (vanilla DOM inside the DSH settings dialog) ─────────
+    /**
+     * Provider descriptions shown next to the picker.
+     */
+    const PROVIDER_DESCRIPTIONS = {
+        browser: '使用浏览器原生通知 API，首次使用需用户授权。',
+        telegram: '通过 Telegram Bot 推送到你的聊天 / 频道 / 群组。',
+        bark: '通过 Bark HTTP API 推送到 iPhone。',
+        pushover: '通过 Pushover 推送到 Android / iOS / 桌面。',
+        serverchan: '推送到微信（sct.ftqq.com，SendKey）。',
+        discord: '通过 Discord Webhook 推送到频道。',
+        slack: '通过 Slack Incoming Webhook 推送到频道。',
+        webhook: 'POST JSON 到你提供的 URL。',
+        custom: '通过 customSend(payload) 函数自己实现。',
+    };
+    function injectPanelInto(host) {
+        state.panelHostEl = host;
+        renderPanelInto(host);
+    }
+    function rerenderPanel() {
+        if (state.panelHostEl) {
+            renderPanelInto(state.panelHostEl);
+        }
+    }
+    function renderPanelInto(host) {
+        injectPanelStyles();
+        host.innerHTML = buildPanelHtml();
+        wirePanelEvents(host);
+    }
+    function buildPanelHtml() {
+        const providerOptions = PROVIDER_LABELS
+            .map(([id, label]) => `<option value="${id}" ${config.provider === id ? 'selected' : ''}>${escapeHtml(label)}</option>`)
+            .join('');
+        const p = config.providers;
+        const fields = PROVIDER_FIELDS[config.provider] ?? [];
+        const fieldsHtml = fields.length === 0
+            ? `<p class="dsh-reminder-panel-hint">此渠道无需凭证，保存即可使用。</p>`
+            : fields.map((f) => {
+                const value = p[f.key] ?? '';
+                return `
+              <label class="dsh-reminder-panel-field">
+                <span class="dsh-reminder-panel-label">${escapeHtml(f.label)}</span>
+                <input type="text" data-reminder-field="${escapeAttr(f.key)}" value="${escapeAttr(value)}" placeholder="${escapeAttr(f.placeholder)}" autocomplete="off" spellcheck="false" />
+              </label>
+            `;
+            }).join('');
+        const desc = PROVIDER_DESCRIPTIONS[config.provider] ?? '';
+        return `
+        <div class="dsh-reminder-panel">
+          <header class="dsh-reminder-panel-header">
+            <strong>Agent 完成提醒</strong>
+            <span class="dsh-reminder-panel-sub">配置通知渠道，agent 完成后通知你</span>
+          </header>
+    
+          <section class="dsh-reminder-panel-section">
+            <label class="dsh-reminder-panel-field">
+              <span class="dsh-reminder-panel-label">通知渠道</span>
+              <select data-reminder-input="provider">${providerOptions}</select>
+            </label>
+            <p class="dsh-reminder-panel-hint">${escapeHtml(desc)}</p>
+          </section>
+    
+          <section class="dsh-reminder-panel-section">
+            <header class="dsh-reminder-panel-section-title">凭证（仅当前渠道需要）</header>
+            ${fieldsHtml}
+          </section>
+    
+          <section class="dsh-reminder-panel-section">
+            <header class="dsh-reminder-panel-section-title">行为</header>
+            <label class="dsh-reminder-panel-row">
+              <input type="checkbox" data-reminder-input="notifyOnSuccess" ${config.notifyOnSuccess ? 'checked' : ''} />
+              <span>成功完成时通知</span>
+            </label>
+            <label class="dsh-reminder-panel-row">
+              <input type="checkbox" data-reminder-input="notifyOnStopped" ${config.notifyOnStopped ? 'checked' : ''} />
+              <span>用户主动停止时通知</span>
+            </label>
+            <label class="dsh-reminder-panel-row">
+              <input type="checkbox" data-reminder-input="notifyOnError" ${config.notifyOnError ? 'checked' : ''} />
+              <span>Agent 出错时通知</span>
+            </label>
+            <label class="dsh-reminder-panel-row">
+              <input type="checkbox" data-reminder-input="suppressWhenFocused" ${config.suppressWhenFocused ? 'checked' : ''} />
+              <span>DSH 标签页可见时静默（推荐）</span>
+            </label>
+            <label class="dsh-reminder-panel-row">
+              <input type="checkbox" data-reminder-input="autoRequestPermission" ${config.autoRequestPermission ? 'checked' : ''} />
+              <span>自动请求浏览器通知权限</span>
+            </label>
+            <label class="dsh-reminder-panel-field">
+              <span class="dsh-reminder-panel-label">冷却（ms）— 防止连续完成时刷屏</span>
+              <input type="number" min="0" step="500" data-reminder-input="cooldownMs" value="${config.cooldownMs}" />
+            </label>
+          </section>
+    
+          <section class="dsh-reminder-panel-section dsh-reminder-panel-perm">
+            <span>当前权限：<strong data-reminder-perm>${permissionLabel(state.permission)}</strong></span>
+            <button type="button" data-reminder-action="request-permission">请求权限</button>
+          </section>
+    
+          <footer class="dsh-reminder-panel-actions">
+            <button type="button" class="primary" data-reminder-action="test">发送测试通知</button>
+            <button type="button" data-reminder-action="reset">重置</button>
+            <span class="dsh-reminder-panel-status" data-reminder-status></span>
+          </footer>
+          <p class="dsh-reminder-panel-hint">配置只保存在本浏览器的 localStorage，不会上传任何服务器。</p>
+        </div>
+      `;
+    }
+    function wirePanelEvents(host) {
+        const root = host.querySelector('.dsh-reminder-panel');
+        if (!root)
+            return;
+        root.addEventListener('change', (ev) => {
+            const target = ev.target;
+            if (!target)
+                return;
+            if (target instanceof HTMLSelectElement) {
+                const name = target.dataset.reminderInput;
+                if (name === 'provider') {
+                    config.provider = target.value;
+                    savePersisted();
+                    // Re-render so the credentials section updates to the new channel.
+                    renderPanelInto(host);
+                }
+            }
+            else if (target instanceof HTMLInputElement) {
+                const name = target.dataset.reminderInput;
+                if (!name)
+                    return;
+                const value = target.type === 'checkbox' ? target.checked
+                    : target.type === 'number' ? Number(target.value) || 0
+                        : target.value;
+                if (name === 'notifyOnSuccess')
+                    config.notifyOnSuccess = !!value;
+                else if (name === 'notifyOnStopped')
+                    config.notifyOnStopped = !!value;
+                else if (name === 'notifyOnError')
+                    config.notifyOnError = !!value;
+                else if (name === 'suppressWhenFocused')
+                    config.suppressWhenFocused = !!value;
+                else if (name === 'autoRequestPermission')
+                    config.autoRequestPermission = !!value;
+                else if (name === 'cooldownMs')
+                    config.cooldownMs = Number(value) || 0;
+                savePersisted();
+            }
+        });
+        root.addEventListener('input', (ev) => {
+            const target = ev.target;
+            if (!target)
+                return;
+            const key = target.dataset.reminderField;
+            if (key) {
+                config.providers[key] = target.value;
+                savePersisted();
+            }
+        });
+        root.querySelector('[data-reminder-action="reset"]')?.addEventListener('click', () => {
+            if (typeof localStorage !== 'undefined') {
+                try {
+                    localStorage.removeItem(STORAGE_KEY);
+                }
+                catch { /* noop */ }
+            }
+            configure();
+            renderPanelInto(host);
+            setPanelStatus(root, '已重置 ✓');
+        });
+        root.querySelector('[data-reminder-action="request-permission"]')
+            ?.addEventListener('click', async () => {
+            const result = await requestBrowserPermission();
+            const permEl = root.querySelector('[data-reminder-perm]');
+            if (permEl)
+                permEl.textContent = permissionLabel(result);
+            setPanelStatus(root, result === 'granted' ? '权限已授予' : '权限状态：' + permissionLabel(result));
+        });
+        root.querySelector('[data-reminder-action="test"]')
+            ?.addEventListener('click', async () => {
+            try {
+                const ctx = {
+                    status: 'success',
+                    durationMs: 4321,
+                    completedAt: new Date().toISOString(),
+                    url: typeof location !== 'undefined' ? location.href : '',
+                };
+                const payload = {
+                    title: '🧪 DSH Completion Reminder — 测试',
+                    body: `这是 ${config.provider} 渠道的测试通知。Agent 完成后将使用相同的方式推送。`,
+                    url: ctx.url,
+                    status: 'success',
+                    durationMs: ctx.durationMs,
+                    completedAt: ctx.completedAt,
+                };
+                await dispatch(payload);
+                config.onNotify(payload, config.provider);
+                setPanelStatus(root, '测试通知已发送，请查收。');
+            }
+            catch (err) {
+                const e = toError(err);
+                config.onError(e, config.provider);
+                setPanelStatus(root, '测试失败：' + e.message, true);
+            }
+        });
+    }
+    function setPanelStatus(panel, text, isError = false) {
+        const el = panel.querySelector('[data-reminder-status]');
+        if (!el)
+            return;
+        el.textContent = text;
+        el.style.color = isError
+            ? 'var(--dsw-alias-state-error-primary)'
+            : 'var(--dsw-alias-state-success-primary)';
+        setTimeout(() => {
+            if (el.textContent === text)
+                el.textContent = '';
+        }, 5000);
+    }
+    function permissionLabel(p) {
+        if (p === 'granted')
+            return '已授予';
+        if (p === 'denied')
+            return '已拒绝';
+        if (p === 'unsupported')
+            return '不支持';
+        return '未询问';
+    }
+    function escapeHtml(s) {
+        return s
+            .replace(/&/g, '&amp;')
+            .replace(/</g, '&lt;')
+            .replace(/>/g, '&gt;');
+    }
+    function escapeAttr(s) {
+        return escapeHtml(s).replace(/"/g, '&quot;');
+    }
+    function injectPanelStyles() {
+        if (document.getElementById(PANEL_STYLE_ID))
+            return;
+        const style = document.createElement('style');
+        style.id = PANEL_STYLE_ID;
+        // The host's parent (DSH settings dialog) sets `color-scheme: dark`
+        // for the dark theme, so we explicitly hint the dark UA scheme on
+        // selects + add explicit colors that work in both themes.  Native
+        // form controls otherwise default to UA colors (white-on-white in
+        // dark mode).
+        style.textContent = `
+    .dsh-reminder-host { color: inherit; }
+    .dsh-reminder-host,
+    .dsh-reminder-host * { box-sizing: border-box; }
+    .dsh-reminder-panel {
+      display: flex;
+      flex-direction: column;
+      gap: 18px;
+      color: ${DSH_CSS_VARS.labelPrimary};
+      font-size: 13px;
+      line-height: 1.5;
+      padding: 4px 4px 24px;
+    }
+    .dsh-reminder-panel-header {
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+      border-bottom: 1px solid ${DSH_CSS_VARS.borderL1};
+      padding-bottom: 12px;
+    }
+    .dsh-reminder-panel-header strong { font-size: 15px; font-weight: 600; }
+    .dsh-reminder-panel-sub { color: ${DSH_CSS_VARS.labelTertiary}; font-size: 12px; }
+    
+    .dsh-reminder-panel-section {
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+    }
+    .dsh-reminder-panel-section-title {
+      font-size: 12px;
+      color: ${DSH_CSS_VARS.labelSecondary};
+      text-transform: uppercase;
+      letter-spacing: 0.04em;
+    }
+    
+    .dsh-reminder-panel-field {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+    }
+    .dsh-reminder-panel-label {
+      color: ${DSH_CSS_VARS.labelSecondary};
+      font-size: 12px;
+    }
+    .dsh-reminder-panel-field input[type="text"],
+    .dsh-reminder-panel-field input[type="number"],
+    .dsh-reminder-panel-field select {
+      color-scheme: light dark;
+      width: 100%;
+      background: transparent;
+      color: ${DSH_CSS_VARS.labelPrimary};
+      border: 1px solid ${DSH_CSS_VARS.borderL2};
+      border-radius: 6px;
+      padding: 6px 10px;
+      font-size: 13px;
+      font-family: inherit;
+      outline: none;
+      transition: border-color .15s, box-shadow .15s;
+      -webkit-appearance: none;
+      appearance: none;
+    }
+    .dsh-reminder-panel-field select {
+      /* Provide a small caret since we stripped the native chrome. */
+      background-image: linear-gradient(45deg, transparent 50%, ${DSH_CSS_VARS.labelSecondary} 50%),
+                        linear-gradient(135deg, ${DSH_CSS_VARS.labelSecondary} 50%, transparent 50%);
+      background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%;
+      background-size: 5px 5px, 5px 5px;
+      background-repeat: no-repeat;
+      padding-right: 26px;
+    }
+    .dsh-reminder-panel-field input[type="text"]:focus,
+    .dsh-reminder-panel-field input[type="number"]:focus,
+    .dsh-reminder-panel-field select:focus {
+      border-color: ${DSH_CSS_VARS.stateBusinessPrimary};
+      box-shadow: 0 0 0 2px color-mix(in srgb, ${DSH_CSS_VARS.stateBusinessPrimary} 25%, transparent);
+    }
+    
+    .dsh-reminder-panel-row {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      cursor: pointer;
+      user-select: none;
+    }
+    .dsh-reminder-panel-row > input[type="checkbox"] {
+      accent-color: ${DSH_CSS_VARS.buttonInfoFill};
+    }
+    
+    .dsh-reminder-panel-hint {
+      color: ${DSH_CSS_VARS.labelTertiary};
+      font-size: 12px;
+      line-height: 1.5;
+      margin: 0;
+    }
+    
+    .dsh-reminder-panel-perm {
+      flex-direction: row;
+      align-items: center;
+      justify-content: space-between;
+      flex-wrap: wrap;
+      gap: 8px;
+      padding: 8px 10px;
+      border: 1px dashed ${DSH_CSS_VARS.borderL2};
+      border-radius: 6px;
+      color: ${DSH_CSS_VARS.labelSecondary};
+      font-size: 12px;
+    }
+    .dsh-reminder-panel-perm strong { color: ${DSH_CSS_VARS.labelPrimary}; }
+    .dsh-reminder-panel-perm button {
+      background: transparent;
+      color: ${DSH_CSS_VARS.labelPrimary};
+      border: 1px solid ${DSH_CSS_VARS.borderL2};
+      border-radius: 6px;
+      padding: 4px 10px;
+      cursor: pointer;
+      font-size: 12px;
+      font-family: inherit;
+    }
+    .dsh-reminder-panel-perm button:hover { background: ${DSH_CSS_VARS.borderL1}; }
+    
+    .dsh-reminder-panel-actions {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      flex-wrap: wrap;
+    }
+    .dsh-reminder-panel-actions button {
+      padding: 6px 14px;
+      border: 1px solid ${DSH_CSS_VARS.borderL2};
+      background: transparent;
+      color: ${DSH_CSS_VARS.labelPrimary};
+      border-radius: 6px;
+      cursor: pointer;
+      font-size: 13px;
+      font-family: inherit;
+    }
+    .dsh-reminder-panel-actions button:hover { background: ${DSH_CSS_VARS.borderL1}; }
+    .dsh-reminder-panel-actions button.primary {
+      background: ${DSH_CSS_VARS.buttonInfoFill};
+      color: #fff;
+      border-color: transparent;
+    }
+    .dsh-reminder-panel-actions button.primary:hover { filter: brightness(1.05); }
+    
+    .dsh-reminder-panel-status {
+      margin-left: auto;
+      color: ${DSH_CSS_VARS.stateSuccessPrimary};
+      font-size: 12px;
+      min-width: 0;
+      flex: 1 1 0;
+      text-align: right;
+    }
+    `;
+        document.head.appendChild(style);
     }
     exports.configure = configure;
     exports.activate = activate;
@@ -755,6 +1294,7 @@ window.__ModuleLoader__.load({
     exports.apply = apply;
     exports.requestBrowserPermission = requestBrowserPermission;
     exports.DEFAULT_OPTIONS = DEFAULT_OPTIONS;
+    exports.renderPanelInto = renderPanelInto;
     //# sourceMappingURL=client.js.map
 
     // ── export fallback (guard against stripped 'export { ... }' lists) ──