flexdesk 0.16.1 → 0.17.1

package/src/ui/components/computing_status_window.js

@@ -1,53 +1,102 @@
 /**
  * Computing Status Window
  *
- * Lightweight ManagedWindow that shows a spinner and status message
- * while a long-running computation is in progress. Returns a handle
- * with update() and close() methods.
+ * Lightweight ManagedWindow that shows a spinner (or a progress bar) and a
+ * status message while a long-running computation is in progress. Returns a
+ * handle with update(), setProgress(), setStep(), complete(), cancelled(),
+ * close() and a `result` promise.
  *
  * Optionally shows a Cancel button when an onCancel callback is provided.
+ * Only one is open at a time: opening another closes the first, which then
+ * settles as cancelled (its onCancel is not called).
  */
 
 import { ManagedWindow } from './managed_window.js';
+import { mountJobProgress } from './job_progress.js';
 
 let _activeWindow = null;
 
 /**
  * Show a computing status window.
+ *
+ * `result` settles once: `complete({ok, message})` gives `done` or `error`
+ * (the window stays, with a Close button, until closed), `cancelled()` gives
+ * `cancelled`, and so does closing the window while it runs (by its ×,
+ * Escape, `close()` or opening another). Closing never calls `onCancel`: only
+ * the Cancel button does. `progress` and `steps` are fixed when the window
+ * opens: `setProgress` throws if it was opened without `progress`, and
+ * `setStep` if it was opened without `steps`.
+ *
  * @param {Object} options
  * @param {string} [options.title='Computing...'] - Window title
- * @param {string} [options.message=''] - Status message below spinner
+ * @param {string} [options.message=''] - Status message below spinner (markup; `update` takes text)
  * @param {string} [options.icon='hourglass_top'] - Material icon name
  * @param {Function} [options.onCancel] - If provided, shows a Cancel button. Called once when clicked.
- * @returns {{ update(msg: string): void, close(): void }}
+ * @param {boolean|Object} [options.progress] - A ProgressBar in place of the spinner: `true` or its options.
+ * @param {Array} [options.steps] - StepProgress steps, shown above the message.
+ * @returns {{ update(msg: string): void, setProgress(next: number|Object): void,
+ *   setStep(which: string|number, opts?: {pass?: number, passes?: number}): void,
+ *   complete(result: {ok: boolean, message?: string}): void, cancelled(msg?: string): void,
+ *   close(): void, result: Promise<{status: 'done'|'error'|'cancelled', message: string}> }}
  */
-export function showComputingWindow({ title = 'Computing...', message = '', icon = 'hourglass_top', onCancel } = {}) {
+export function showComputingWindow({
+    title = 'Computing...', message = '', icon = 'hourglass_top', onCancel,
+    progress = null, steps = null,
+} = {}) {
     if (_activeWindow) {
         _activeWindow.close();
         _activeWindow = null;
     }
 
+    let finished = false;
+    let settle;
+    const result = new Promise((resolve) => { settle = resolve; });
+
     const content = document.createElement('div');
     content.className = 'twm-computing-status';
-    content.innerHTML = `
-        <div class="twm-computing-status__spinner"></div>
-        <div class="twm-computing-status__message">${message}</div>
-    `;
+    const spinnerEl = document.createElement('div');
+    spinnerEl.className = 'twm-computing-status__spinner';
+    const msgEl = document.createElement('div');
+    msgEl.className = 'twm-computing-status__message';
+    // The opening message is markup, as it always was; every later one is text.
+    msgEl.innerHTML = message;
+    content.appendChild(spinnerEl);
+    const job = mountJobProgress(content, { progress, steps, spinner: spinnerEl });
+    content.appendChild(msgEl);
 
+    let cancelBtn = null;
     if (typeof onCancel === 'function') {
-        const btn = document.createElement('button');
-        btn.className = 'twm-computing-status__cancel-btn';
-        btn.textContent = 'Cancel';
-        btn.addEventListener('click', () => {
-            btn.disabled = true;
-            const msgEl = content.querySelector('.twm-computing-status__message');
-            if (msgEl) msgEl.textContent = 'Cancelling...';
+        cancelBtn = document.createElement('button');
+        cancelBtn.className = 'twm-computing-status__cancel-btn';
+        cancelBtn.textContent = 'Cancel';
+        cancelBtn.addEventListener('click', () => {
+            cancelBtn.disabled = true;
+            msgEl.textContent = 'Cancelling...';
             onCancel();
         }, { once: true });
-        content.appendChild(btn);
+        content.appendChild(cancelBtn);
     }
 
-    _activeWindow = new ManagedWindow({
+    const closeBtn = document.createElement('button');
+    closeBtn.type = 'button';
+    closeBtn.className = 'twm-computing-status__cancel-btn twm-computing-status__close-btn';
+    closeBtn.textContent = 'Close';
+    closeBtn.hidden = true;
+    content.appendChild(closeBtn);
+
+    const finish = (status, text) => {
+        finished = true;
+        spinnerEl.hidden = true;
+        if (cancelBtn) cancelBtn.hidden = true;
+        msgEl.textContent = text;
+        msgEl.classList.toggle('is-ok', status === 'done');
+        msgEl.classList.toggle('is-err', status === 'error');
+        msgEl.classList.toggle('is-cancelled', status === 'cancelled');
+        job.finish(status);
+        settle({ status, message: text });
+    };
+
+    const win = new ManagedWindow({
         id: 'computing-status-window',
         title,
         icon,
@@ -55,21 +104,45 @@ export function showComputingWindow({ title = 'Computing...', message = '', icon
         minWidth: 320,
         minHeight: 140,
         defaultWidth: 380,
-        defaultHeight: onCancel ? 190 : 160,
+        defaultHeight: (onCancel ? 190 : 160) + (job.bar ? 30 : 0) + (job.steps ? 40 : 0),
         canMinimize: true,
         canMaximize: false,
         canResize: false,
         canDrag: true,
         modal: false,
-        onClose: () => { _activeWindow = null; },
+        onClose: () => {
+            if (_activeWindow === win) _activeWindow = null;
+            if (finished) return;
+            finish('cancelled', 'Cancelled.');
+        },
     });
-
-    _activeWindow.show();
+    closeBtn.addEventListener('click', () => win.close());
+    _activeWindow = win;
+    win.show();
 
     return {
+        result,
         update(msg) {
-            const el = content.querySelector('.twm-computing-status__message');
-            if (el) el.textContent = msg;
+            if (finished) return;
+            msgEl.textContent = msg;
+        },
+        setProgress(next) {
+            if (finished) return;
+            job.setProgress(next);
+        },
+        setStep(which, opts) {
+            if (finished) return;
+            job.setStep(which, opts);
+        },
+        complete(res) {
+            if (finished) return;
+            finish(res?.ok ? 'done' : 'error', res?.message || '');
+            closeBtn.hidden = false;
+        },
+        cancelled(msg) {
+            if (finished) return;
+            finish('cancelled', msg || 'Cancelled.');
+            closeBtn.hidden = false;
         },
         close() {
             if (_activeWindow) {

package/src/ui/components/confirm_dialog.js

@@ -11,12 +11,14 @@
  * action, square frame, Tab focus trap).
  *
  * The one custom case is `showRunProgressDialog`, which exposes an
- * imperative `update / complete / cancelled / close` API and so
+ * imperative `update / setProgress / setStep / complete / cancelled /
+ * close` API and a `result` promise, and so
  * stays as a direct `ManagedWindow` build — but it still benefits
  * from the focus trap + chrome by virtue of `modal: true`.
  */
 
 import { ManagedWindow } from './managed_window.js';
+import { mountJobProgress } from './job_progress.js';
 import {
     openConfirm, openForm, openModal,
 } from './modal.js';
@@ -65,10 +67,12 @@ export async function showDeleteConfirmDialog(options = {}) {
         itemType = 'item',
         additionalMessage = '',
     } = options;
+    // `openConfirm` renders the message as text, so a user-named item
+    // (`<b>x</b>`, an unclosed `<`) is shown exactly as it was typed.
     let message = `Delete ${itemType}`;
     if (itemName) message += ` "${itemName}"`;
     message += '?';
-    if (additionalMessage) message += `<br><br>${escapeHtml(additionalMessage)}`;
+    if (additionalMessage) message += `\n\n${additionalMessage}`;
     return openConfirm({
         title:        `Delete ${capitalize(itemType)}`,
         message,
@@ -189,41 +193,73 @@ function capitalize(str) {
 }
 
 
-// ─── showRunProgressDialog (unchanged custom build) ─────────────────
+// ─── showRunProgressDialog (custom build) ───────────────────────────
 //
-// This one exposes an imperative API (`update`, `complete`, `cancelled`,
-// `close`) that the openModal/openForm/openConfirm helpers don't model
-// — they're one-shot promise-returning. Keep the direct ManagedWindow
-// build, but it still gets the TUI chrome + focus trap for free via
-// `modal: true`.
+// This one exposes an imperative API (`update`, `setProgress`, `setStep`,
+// `complete`, `cancelled`, `close`) that the openModal/openForm/openConfirm
+// helpers don't model — they're one-shot promise-returning. Keep the direct
+// ManagedWindow build, but it still gets the TUI chrome + focus trap for free
+// via `modal: true`.
 
 /**
- * Show a run progress dialog with spinner, live message updates, and
- * final status. Returns a control object — keep this build instead of
- * delegating so callers retain the imperative update / complete API.
- * @returns {{ update(msg: string): void, complete(result: {ok: boolean, message: string}): void, cancelled(msg?: string): void, close(): void }}
+ * @typedef {Object} RunProgressResult
+ * @property {'done'|'error'|'cancelled'} status
+ * @property {string} message
+ */
+
+/**
+ * Show a run progress dialog with a spinner (or a bar), live message
+ * updates, optional phases, and a final status.
+ *
+ * `progress` (`true` or ProgressBar options) shows a determinate bar in place
+ * of the spinner; `steps` (StepProgress steps) shows the phases above it.
+ * Both are fixed when the dialog opens: `setProgress` throws if it was opened
+ * without `progress`, and `setStep` if it was opened without `steps`.
+ * `result` settles once, with the final state: `complete({ok})` gives `done`
+ * or `error`, `cancelled()` gives `cancelled`, and so does closing the dialog
+ * while it runs (by its ×, Escape or `close()`). Closing never calls
+ * `onCancel`: only the Stop button does.
+ *
+ * @param {Object} [options]
+ * @param {string} [options.title='Running Pipeline']
+ * @param {string} [options.message='Starting…']
+ * @param {Function} [options.onCancel] - Shows a Stop button.
+ * @param {boolean|Object} [options.progress] - A ProgressBar, `true` or its options.
+ * @param {Array} [options.steps] - StepProgress steps.
+ * @returns {{ update(msg: string): void, setProgress(next: number|Object): void,
+ *   setStep(which: string|number, opts?: {pass?: number, passes?: number}): void,
+ *   complete(result: {ok: boolean, message: string}): void, cancelled(msg?: string): void,
+ *   close(): void, result: Promise<RunProgressResult> }}
  */
 export function showRunProgressDialog(options = {}) {
     const {
         title = 'Running Pipeline',
         message = 'Starting…',
         onCancel,
+        progress = null,
+        steps = null,
     } = options;
 
     const dialogId = `run-progress-${++dialogIdCounter}`;
     let finished = false;
+    let settle;
+    const result = new Promise((resolve) => { settle = resolve; });
 
     const contentEl = document.createElement('div');
     contentEl.className = 'twm-confirm-dialog__content run-progress';
 
     const bodyEl = document.createElement('div');
     bodyEl.className = 'twm-run-progress__body';
-    bodyEl.innerHTML = `
-        <div class="twm-run-progress__spinner"></div>
-        <div class="twm-run-progress__message">${escapeHtml(message)}</div>
-    `;
+    const spinnerEl = document.createElement('div');
+    spinnerEl.className = 'twm-run-progress__spinner';
+    const messageEl = document.createElement('div');
+    messageEl.className = 'twm-run-progress__message';
+    messageEl.textContent = message;
+    bodyEl.append(spinnerEl, messageEl);
     contentEl.appendChild(bodyEl);
 
+    const job = mountJobProgress(contentEl, { progress, steps, spinner: spinnerEl });
+
     let stopBtn = null;
     if (typeof onCancel === 'function') {
         const stopActionsEl = document.createElement('div');
@@ -253,6 +289,17 @@ export function showRunProgressDialog(options = {}) {
     actionsEl.appendChild(closeBtn);
     contentEl.appendChild(actionsEl);
 
+    const finish = (status, text, cls) => {
+        finished = true;
+        spinnerEl.style.display = 'none';
+        if (stopBtn) stopBtn.parentElement.style.display = 'none';
+        messageEl.textContent = text;
+        messageEl.className = `twm-run-progress__message ${cls}`;
+        job.finish(status);
+        actionsEl.style.display = '';
+        settle({ status, message: text });
+    };
+
     const dialogWindow = new ManagedWindow({
         id: dialogId,
         title,
@@ -261,44 +308,40 @@ export function showRunProgressDialog(options = {}) {
         minWidth: 320,
         minHeight: 120,
         defaultWidth: 420,
-        defaultHeight: 200,
+        defaultHeight: 200 + (job.bar ? 40 : 0) + (job.steps ? 40 : 0),
         canMinimize: false,
         canMaximize: false,
         canResize: false,
         canDrag: false,
         modal: true,
+        onClose: () => {
+            if (finished) return;
+            finish('cancelled', 'Cancelled.', 'is-cancelled');
+        },
     });
     dialogWindow.show();
 
-    const messageEl = bodyEl.querySelector('.twm-run-progress__message');
-    const spinnerEl = bodyEl.querySelector('.twm-run-progress__spinner');
-
     return {
+        result,
         update(msg) {
-            if (finished || !messageEl) return;
+            if (finished) return;
             messageEl.textContent = msg;
         },
-        complete(result) {
+        setProgress(next) {
+            if (finished) return;
+            job.setProgress(next);
+        },
+        setStep(which, opts) {
+            if (finished) return;
+            job.setStep(which, opts);
+        },
+        complete(res) {
             if (finished) return;
-            finished = true;
-            if (spinnerEl) spinnerEl.style.display = 'none';
-            if (stopBtn) stopBtn.parentElement.style.display = 'none';
-            if (messageEl) {
-                messageEl.textContent = result?.message || '';
-                messageEl.className = `twm-run-progress__message ${result?.ok ? 'is-ok' : 'is-err'}`;
-            }
-            actionsEl.style.display = '';
+            finish(res?.ok ? 'done' : 'error', res?.message || '', res?.ok ? 'is-ok' : 'is-err');
         },
         cancelled(msg) {
             if (finished) return;
-            finished = true;
-            if (spinnerEl) spinnerEl.style.display = 'none';
-            if (stopBtn) stopBtn.parentElement.style.display = 'none';
-            if (messageEl) {
-                messageEl.textContent = msg || 'Cancelled.';
-                messageEl.className = 'twm-run-progress__message is-cancelled';
-            }
-            actionsEl.style.display = '';
+            finish('cancelled', msg || 'Cancelled.', 'is-cancelled');
         },
         close() {
             try { dialogWindow.close(); } catch { /* already closed */ }

package/src/ui/components/context_menu.js

@@ -1,6 +1,6 @@
 /**
- * context_menu.js — small popup menu that matches Ecosim's `.context-menu`
- * idiom (see main_new.css line 9713 and ui/js/ui/components/data_table.js).
+ * context_menu.js — small popup menu in the `.context-menu` idiom the
+ * DataTable's own right-click menu uses (./data_table.js).
  *
  * Usage:
  *   showContextMenu(x, y, [