@jxsuite/studio 2.0.0 → 2.1.0

package/src/ui/progress-modal.ts

@@ -1,78 +1,118 @@
 /// <reference lib="dom" />
 /**
- * A blocking progress modal for long-running package operations (bun install / dependency updates).
- * Shows an indeterminate spinner with a status line; on failure it swaps to an error view with the
- * captured log and a Close button. Built on the persistent-modal layer helper.
+ * The one surface in Studio that still BLOCKS while it works — and now the only one (plan §7.3).
+ *
+ * What changed. This modal used to be four things at once: the running state, the error view, the
+ * log and the operation's entire memory. It blocked the whole app, offered no way out, and took all
+ * four with it when it closed — so a failed `bun install` could be read exactly once, and a hung
+ * one could not be escaped at all. §7.3 splits those apart:
+ *
+ * - The **record** moves to `panels/activity-panel.ts`, which keeps the entry, its steps and its log
+ *   after the modal is gone;
+ * - The **error view** is promoted into Problems — {@link ProgressModalHandle.fail} raises a
+ *   `notify.error` carrying the captured log as its `detail`, so the failure persists, is grouped
+ *   by source, and carries a Retry built from a command record;
+ * - And the **exit** arrives twice: `Run in the background` hands the app back while the operation
+ *   keeps going in Activity, and an operation that passed a `cancel` gets a real Cancel button.
+ *
+ * What did NOT change is which operations block. §7.3 keeps blocking for dependency install and
+ * nothing else, and this module's four call sites are exactly that — `packages/ensure-deps.ts`,
+ * `packages/pull-package-sync.ts`, `packages/jxsuite-update.ts` and
+ * `settings/dependencies-editor.ts`. Every other long operation calls `beginActivity` directly and
+ * blocks nobody.
  */
 
 import { html } from "lit-html";
-import type { TemplateResult } from "lit-html";
+import { beginActivity } from "../panels/activity-panel";
+import { setBottomTab } from "../shell";
 import { openModal } from "./layers";
+import type { ActivityHandle } from "../panels/activity-panel";
+import type { TemplateResult } from "lit-html";
 
 export interface ProgressModalHandle {
-  /** Update the status line shown under the title. */
+  /** Update the status line shown under the title. Also the Activity entry's status. */
   setStatus: (text: string) => void;
-  /** Replace the spinner with an error view (log shown) that the user dismisses. */
+  /** Append captured output. It is the Activity entry's log and a failure's `detail`. */
+  log: (chunk: string) => void;
+  /** Record the failure as a Problem (message + captured log) and close the modal. */
   fail: (message: string) => void;
-  /** Close the modal (success path). */
+  /** Close the modal and mark the operation done (success path). */
   done: () => void;
+  /** The Activity entry this operation is recorded in, which outlives the modal. */
+  activity: ActivityHandle;
+}
+
+export interface ProgressModalOptions {
+  title: string;
+  status?: string;
+  /** Who is running it — "Packages" for all four of today's call sites. */
+  source?: string;
+  /**
+   * Stop the operation. Draws Cancel, here and on the Activity row.
+   *
+   * Absent means the operation genuinely cannot be stopped, and no button claims otherwise — but
+   * `Run in the background` is offered regardless, because "let me use the app" is a promise this
+   * module can always keep.
+   */
+  cancel?: () => void;
 }
 
 function card(body: TemplateResult): TemplateResult {
   return html`
     <sp-underlay open></sp-underlay>
-    <div
-      class="progress-modal"
-      role="dialog"
-      aria-live="polite"
-      style="position:fixed;inset:0;margin:auto;width:min(420px,calc(100vw - 48px));max-height:calc(100vh - 96px);height:max-content;background:var(--bg-panel,#1e1e1e);border:1px solid var(--border,#3a3a3a);border-radius:var(--spectrum-corner-radius-200,8px);padding:24px;display:flex;flex-direction:column;gap:16px;box-shadow:0 8px 32px rgba(0,0,0,.4)"
-    >
-      ${body}
-    </div>
+    <div class="progress-modal" aria-live="polite">${body}</div>
   `;
 }
 
-function runningView(title: string, status: string): TemplateResult {
+/**
+ * The running view: the spinner, the status line, and the two ways out.
+ *
+ * `Run in the background` is not a cancel and does not pretend to be — it dismisses the BLOCKING
+ * part and leaves the operation running where it can be watched, which is the affordance a modal
+ * with no exit never had.
+ */
+function runningView(
+  title: string,
+  status: string,
+  actions: { background: () => void; cancel?: (() => void) | undefined },
+): TemplateResult {
   return card(html`
-    <div style="display:flex;align-items:center;gap:14px">
+    <div class="progress-head">
       <sp-progress-circle indeterminate size="m" aria-label=${title}></sp-progress-circle>
-      <div style="display:flex;flex-direction:column;gap:2px">
-        <strong style="font-size:var(--spectrum-font-size-100, 14px)">${title}</strong>
-        ${
-          status
-            ? html`<span
-                style="font-size:var(--spectrum-font-size-75, 12px);color:var(--fg-dim,#aaa)"
-                >${status}</span
-              >`
-            : ""
-        }
+      <div class="progress-lines">
+        <strong class="progress-title">${title}</strong>
+        ${status ? html`<span class="progress-status">${status}</span>` : ""}
       </div>
     </div>
-  `);
-}
-
-function errorView(title: string, message: string, onClose: () => void): TemplateResult {
-  return card(html`
-    <div style="display:flex;flex-direction:column;gap:8px">
-      <strong style="font-size:var(--spectrum-font-size-100, 14px);color:var(--danger,#e34850)"
-        >${title} failed</strong
-      >
-      <pre
-        style="font-size:var(--spectrum-font-size-50, 11px);white-space:pre-wrap;overflow:auto;max-height:240px;margin:0;color:var(--fg-dim,#aaa)"
-      >
-        ${message}
-      </pre>
-    </div>
-    <div style="display:flex;justify-content:flex-end">
-      <sp-button size="s" @click=${onClose}>Close</sp-button>
+    <div class="progress-actions">
+      <sp-button size="s" variant="secondary" treatment="outline" @click=${actions.background}>
+        Run in the background
+      </sp-button>
+      ${
+        actions.cancel
+          ? html`<sp-button size="s" variant="negative" @click=${actions.cancel}>Cancel</sp-button>`
+          : ""
+      }
     </div>
   `);
 }
 
-export function showProgressModal(opts: { title: string; status?: string }): ProgressModalHandle {
-  const modal = openModal(runningView(opts.title, opts.status ?? ""));
+/**
+ * Show a blocking progress modal, and record the operation in Activity either way.
+ *
+ * @param {ProgressModalOptions} opts
+ * @returns {ProgressModalHandle}
+ */
+export function showProgressModal(opts: ProgressModalOptions): ProgressModalHandle {
   let closed = false;
 
+  const activity = beginActivity({
+    title: opts.title,
+    ...(opts.status === undefined ? {} : { status: opts.status }),
+    ...(opts.source === undefined ? {} : { source: opts.source }),
+    ...(opts.cancel === undefined ? {} : { cancel: opts.cancel }),
+  });
+
   const close = () => {
     if (closed) {
       return;
@@ -81,16 +121,57 @@ export function showProgressModal(opts: { title: string; status?: string }): Pro
     modal.close();
   };
 
+  /** Hand the app back and put the operation where it can be watched. */
+  const background = () => {
+    close();
+    setBottomTab("activity");
+  };
+
+  const cancel = opts.cancel
+    ? () => {
+        close();
+        opts.cancel?.();
+      }
+    : undefined;
+
+  const view = (status: string) => runningView(opts.title, status, { background, cancel });
+
+  const modal = openModal(view(opts.status ?? ""), {
+    label: opts.title,
+    // Escape means the same thing the button does: stop BLOCKING, not stop working. The operation
+    // Owned the modal outright before, and swallowing Escape was the only honest thing a surface
+    // With nowhere to put a running operation could do.
+    onDismiss: background,
+  });
+
   return {
-    done: close,
+    activity,
+    done() {
+      activity.done();
+      close();
+    },
     fail(message: string) {
-      if (!closed) {
-        modal.update(errorView(opts.title, message || "Unknown error", close));
+      // The error view is not rendered here any more: it is the Problems row, with the log as its
+      // `detail`, and it is still on screen tomorrow. Three of the four call sites hand over a
+      // CAPTURED LOG as their message — `result.log ?? "bun install failed"` — so a multi-line one
+      // Is split the way the old view split it: "<title> failed" as the headline, the whole text
+      // As the detail. A Problems list whose first row is 400 lines of `bun` output is not a list.
+      const text = (message ?? "").trim();
+      if (text === "" || text.includes("\n")) {
+        activity.log(text);
+        activity.fail(`${opts.title} failed`);
+      } else {
+        activity.fail(text);
       }
+      close();
+    },
+    log(chunk: string) {
+      activity.log(chunk);
     },
     setStatus(text: string) {
+      activity.setStatus(text);
       if (!closed) {
-        modal.update(runningView(opts.title, text));
+        modal.update(view(text));
       }
     },
   };