@jxsuite/studio 4.0.0 → 5.0.0

package/src/packages/jxsuite-update.ts

@@ -22,13 +22,14 @@
  * replaced.
  */
 
-import { html } from "lit-html";
 import { getPlatform } from "../platform";
 import { shouldInstallAutomation } from "../services/automation";
-import { showConfirmDialog } from "../ui/layers";
+import { layerHost } from "../ui/layers";
+import { openJxsuiteUpdateSurface } from "../surfaces/jxsuite-update";
 import { showProgressModal } from "../ui/progress-modal";
 import { notify } from "../services/notify";
 import { isUpgrade } from "./semver";
+import type { JxsuiteUpdateSurfaceHandle } from "../surfaces/jxsuite-update";
 
 const JXSUITE_PREFIX = "@jxsuite/";
 
@@ -132,6 +133,71 @@ export async function applyJxsuiteUpdate(outdated: JxsuiteUpdate[]): Promise<voi
   }
 }
 
+/**
+ * Put the offer up and wait for an answer.
+ *
+ * The promise is this module's, not the surface's: the dialog reports three things as callbacks —
+ * confirmed, declined, closed — and lets the flow decide what each one means, so `resolve` happens
+ * here and taking the dialog down is a consequence of the answer rather than the thing that
+ * produces it. `settle` is guarded because both ends arrive: answering closes the dialog, which
+ * raises `onClosed` behind it, and a resolved promise must not be re-resolved a tick later.
+ *
+ * Every path that is not an explicit Update resolves `false`, the platform's own close included — a
+ * dialog the reader dismissed with Escape declined the offer just as surely as the Not now button
+ * did, and the dismissal key is what makes the difference visible later.
+ */
+function askToUpdate(outdated: JxsuiteUpdate[]): Promise<boolean> {
+  return new Promise((resolve) => {
+    let answered = false;
+    const settle = (value: boolean): void => {
+      if (answered) {
+        return;
+      }
+      answered = true;
+      resolve(value);
+    };
+    /**
+     * Take the dialog down, once.
+     *
+     * Guarded here rather than trusted to the handle, because closing is what RAISES `onClosed` —
+     * so a teardown that re-entered through it would call itself until the stack ran out.
+     */
+    let closing = false;
+    const takeDown = (): void => {
+      if (closing) {
+        return;
+      }
+      closing = true;
+      handle.close();
+    };
+    const handle: JxsuiteUpdateSurfaceHandle = openJxsuiteUpdateSurface({
+      layer: layerHost("dialog"),
+      onCancel: () => {
+        takeDown();
+      },
+      /* Closing too, not only settling: a `close` the flow did not ask for — Escape, or a
+         dismissal the platform allows — must ALSO take the document out of the dialog layer, or
+         the surface outlives the dialog it drew. `settle` has already answered by then if
+         anything did. */
+      onClosed: () => {
+        settle(false);
+        takeDown();
+      },
+      onConfirm: () => {
+        settle(true);
+        takeDown();
+      },
+      // `^<its own latest>`, spelled once: this is the same string `applyJxsuiteUpdate` writes into
+      // The manifest, so the row cannot promise a range the install would not produce.
+      packages: outdated.map((p) => ({
+        current: p.current,
+        name: p.name,
+        target: `^${p.latest}`,
+      })),
+    });
+  });
+}
+
 /**
  * Prompt to update on open. Skips when there is nothing to do or the user already declined this
  * exact set of versions for this project (remembered in localStorage).
@@ -141,15 +207,16 @@ export async function maybePromptJxsuiteUpdate(projectRoot: string): Promise<voi
   // Ensure-deps.ts states, and for the same reason: confirming here calls `setPackageVersions`,
   // Which rewrites the opened project's package.json.
   //
-  // It also has to hold when nobody confirms anything. `showConfirmDialog` renders an
-  // `<sp-dialog-wrapper open underlay>`, and an underlay swallows every pointer event across the
-  // Viewport — so a prompt raised at boot means every subsequent click in a shot lands in a scrim.
-  // That is not hypothetical: it put this dialog into the middle of 33 committed screenshots,
-  // Including docs/images/hero.png, which is the jxsuite.com marketing hero.
+  // It also has to hold when nobody confirms anything. The offer is a modal `<dialog>`, and a
+  // Modal dialog makes the rest of the page inert — so a prompt raised at boot means every
+  // Subsequent click in a shot lands on nothing at all. That is not hypothetical: with the
+  // Underlay this surface used to paint it put the dialog into the middle of 33 committed
+  // Screenshots, including docs/images/hero.png, which is the jxsuite.com marketing hero. The
+  // Substrate changed and the hazard did not: inertness is what an underlay was imitating.
   //
   // Correct pins are NOT sufficient on their own. This compares the range's BASE version against
   // The registry's `latest`, not whether the range resolves it — so a project pinned `^1.4.1` is
-  // Behind the moment 1.4.2 publishes, and every starter shot would be scrimmed again by the next
+  // Behind the moment 1.4.2 publishes, and every starter shot would be blocked again by the next
   // Patch release of any @jxsuite package.
   if (shouldInstallAutomation(location.search)) {
     return;
@@ -162,16 +229,7 @@ export async function maybePromptJxsuiteUpdate(projectRoot: string): Promise<voi
   if (outdated.length === 0 || isDismissed(projectRoot, outdated)) {
     return;
   }
-  const list = outdated.map((p) => `${p.name} ${p.current} → ^${p.latest}`).join("\n");
-  const confirmed = await showConfirmDialog(
-    "Update @jxsuite packages?",
-    html`Newer versions of these packages have been published. Update the project to them?
-      <br /><br /><span
-        style="font-size:var(--spectrum-font-size-75, 12px);color:var(--fg-dim);white-space:pre-line"
-        >${list}</span
-      >`,
-    { cancelLabel: "Not now", confirmLabel: "Update" },
-  );
+  const confirmed = await askToUpdate(outdated);
   if (!confirmed) {
     setDismissed(projectRoot, outdated);
     return;

package/src/panels/activity-panel.ts

@@ -27,18 +27,29 @@
  *
  * `services/idle.ts` reads {@link activityIdleBlockers}: an open operation means the app is not
  * settled, which is the §13.6 S4 obligation every phase's checklist carries.
+ *
+ * **The feed itself is a Jx document** (`surfaces/panel-activity.json`, mounted by
+ * `surfaces/panel-activity.ts`). What stays here is the record and the vocabulary a row is written
+ * in — the state glyphs, the duration, and {@link activityView}, which flattens the store into the
+ * booleans a document can switch on. The tab's `render` paints two empty containers — one for the
+ * deploy checklist, one for the feed — and its `afterRender` hands each to the module that owns it;
+ * nothing in this file draws a row any more.
  */
 
-import { html, nothing } from "lit-html";
-import { renderDeployChecklist } from "../publish/deploy-checklist";
-import { repeat } from "lit-html/directives/repeat.js";
+import { html } from "lit-html";
+import { syncDeployChecklist } from "../publish/deploy-checklist";
+import { disposeActivitySurface, mountActivitySurface } from "../surfaces/panel-activity";
 import { reactive } from "../reactivity";
 import { now } from "../services/clock";
 import { notify } from "../services/notify";
 import { registerPanel } from "./panel-registry";
-import { renderEmptyState } from "./empty-state";
 import type { PanelBody } from "./panel-registry";
-import type { TemplateResult } from "lit-html";
+import type {
+  ActivityRowView,
+  ActivityStepView,
+  ActivitySurfaceDeps,
+  ActivityView,
+} from "../surfaces/panel-activity";
 
 /** How an operation ended, or that it has not. */
 export const ACTIVITY_STATES = ["running", "done", "failed", "cancelled"] as const;
@@ -323,7 +334,7 @@ export function activityIdleBlockers(): readonly string[] {
   );
 }
 
-// ─── Rendering ────────────────────────────────────────────────────────────────
+// ─── The surface ──────────────────────────────────────────────────────────────
 
 /** The state glyphs. One character each: the row's job is a line of text, not an illustration. */
 const STATE_ICON: Readonly<Record<ActivityState, string>> = {
@@ -350,112 +361,128 @@ export function activityDuration(entry: ActivityEntry, at: number = now()): stri
   return seconds < 60 ? `${seconds}s` : `${Math.floor(seconds / 60)}m ${seconds % 60}s`;
 }
 
-function stepsTpl(entry: ActivityEntry): TemplateResult | typeof nothing {
-  if (entry.steps.length === 0) {
-    return nothing;
-  }
-  return html`<ol class="activity-steps">
-    ${entry.steps.map(
-      (step) => html`<li class="activity-step activity-step--${step.state}">
-        <span class="activity-step-icon" aria-hidden="true">${STEP_ICON[step.state]}</span>
-        ${step.label}
-      </li>`,
-    )}
-  </ol>`;
-}
-
-function logTpl(entry: ActivityEntry): TemplateResult | typeof nothing {
-  if (entry.log.length === 0) {
-    return nothing;
-  }
-  return html`<button
-      class="activity-log-toggle"
-      aria-expanded=${entry.expanded ? "true" : "false"}
-      @click=${() => {
-        entry.expanded = !entry.expanded;
-      }}
-    >
-      ${entry.expanded ? "Hide log" : `Show log (${entry.log.length} line(s))`}
-    </button>
-    ${entry.expanded ? html`<pre class="activity-log">${entry.log.join("\n")}</pre>` : nothing}`;
+/** One step, as the document reads it. */
+function stepView(step: ActivityStep, index: number): ActivityStepView {
+  return {
+    icon: STEP_ICON[step.state],
+    // The label alone is not unique — an operation may append an unplanned step it already ran —
+    // So the position is what keeps a key stable across a re-projection.
+    key: `${index}:${step.label}`,
+    label: step.label,
+    state: step.state,
+  };
 }
 
-/** One operation. */
-function activityTpl(entry: ActivityEntry): TemplateResult {
-  return html`
-    <li class="activity-row activity-row--${entry.state}">
-      <span class="activity-icon" aria-hidden="true">${STATE_ICON[entry.state]}</span>
-      <div class="activity-body">
-        <div class="activity-head">
-          <span class="activity-title">${entry.title}</span>
-          ${entry.source ? html`<span class="activity-source">${entry.source}</span>` : nothing}
-          <span class="activity-duration">${activityDuration(entry)}</span>
-        </div>
-        ${entry.status ? html`<div class="activity-status">${entry.status}</div>` : nothing}
-        ${stepsTpl(entry)} ${logTpl(entry)}
-      </div>
-      ${
-        entry.cancellable
-          ? html`<button
-              class="activity-cancel"
-              title="Stop this operation"
-              @click=${() => {
-                cancelActivity(entry.id);
-              }}
-            >
-              Cancel
-            </button>`
-          : nothing
-      }
-    </li>
-  `;
+/** One operation, as the document reads it. */
+function rowView(entry: ActivityEntry): ActivityRowView {
+  const lines = entry.log.length;
+  return {
+    cancellable: entry.cancellable,
+    duration: activityDuration(entry),
+    expanded: entry.expanded,
+    hasLog: lines > 0,
+    hasSource: (entry.source ?? "") !== "",
+    hasStatus: entry.status !== "",
+    hasSteps: entry.steps.length > 0,
+    icon: STATE_ICON[entry.state],
+    id: entry.id,
+    logLabel: entry.expanded ? "Hide log" : `Show log (${lines} line(s))`,
+    logText: entry.log.join("\n"),
+    showLog: entry.expanded && lines > 0,
+    source: entry.source ?? "",
+    state: entry.state,
+    status: entry.status,
+    steps: entry.steps.map((step, index) => stepView(step, index)),
+    title: entry.title,
+  };
 }
 
 /**
- * The Activity tab's body.
+ * What the Activity surface shows right now.
  *
  * Newest LAST, like a log and unlike a menu: an operation that starts while you are reading one
  * that is already running must not push it off the top.
+ *
+ * Read from inside the surface's own effect, which is what makes every field here live: the array,
+ * each entry's state and status, its steps and the length of its log are all tracked on the way
+ * through, so a chunk appended to an open row updates that row's `<pre>` and nothing else.
+ *
+ * @returns {ActivityView}
  */
-export function renderActivityList(): PanelBody {
-  // The Deploy checklist lives here because a deploy IS a long operation with a log — which is why
-  // P4 folded Deploy into Activity rather than giving it a fifth dock tab. It renders above the
-  // Run log and before any operation has started, because its whole job is to say what is missing
-  // BEFORE you begin.
-  const checklist = renderDeployChecklist();
-  if (activities.length === 0) {
-    return html`${checklist}${renderEmptyState({
-      detail: "Installs, clones, publishes and imports report here while they run.",
-      message: "Long operations show their progress, their log and their Cancel button here.",
-    })}`;
-  }
+export function activityView(): ActivityView {
   const finished = activities.filter((entry) => isFinished(entry)).length;
-  return html`
-    ${checklist}
-    <div class="activity-panel">
-      ${
-        finished > 0
-          ? html`<div class="activity-actions">
-              <button
-                class="activity-clear"
-                @click=${() => {
-                  clearFinishedActivities();
-                }}
-              >
-                Clear ${finished} finished
-              </button>
-            </div>`
-          : nothing
-      }
-      <ul class="activity-list">
-        ${repeat(
-          activities,
-          (entry) => entry.id,
-          (entry) => activityTpl(entry),
-        )}
-      </ul>
-    </div>
-  `;
+  return {
+    clearLabel: `Clear ${finished} finished`,
+    hasFinished: finished > 0,
+    hasRows: activities.length > 0,
+    rows: activities.map((entry) => rowView(entry)),
+  };
+}
+
+/**
+ * The three decisions a click on the feed can ask for, beside the projection it reads.
+ *
+ * Every one of them is the panel's: the surface knows an entry's id and nothing else about it, so
+ * "what does Cancel do to a running install" is answered here and cannot drift into markup.
+ */
+const ACTIVITY_SURFACE: ActivitySurfaceDeps = {
+  cancel: (id: string) => {
+    cancelActivity(id);
+  },
+  clearFinished: () => {
+    clearFinishedActivities();
+  },
+  project: activityView,
+  toggleLog: (id: string) => {
+    const entry = activityById(id);
+    if (entry) {
+      // Through the reactive proxy `activityById` returns, so the effect that projects the feed
+      // Re-runs and the row's `<pre>` appears without anything repainting the panel.
+      entry.expanded = !entry.expanded;
+    }
+  },
+};
+
+/**
+ * The Activity tab's body: a container for the deploy checklist, then one for the feed.
+ *
+ * Two documents, two hosts, and that is the seam rather than a layout: a document CLEARS the host
+ * it is given and lit renders BESIDE foreign nodes, so a document and a lit template can never
+ * share a container. The checklist belongs to `publish/deploy-checklist.ts` — a deploy is a long
+ * operation with a log, which is why P4 folded it in here rather than giving it a fifth dock tab —
+ * and it sits above the feed because its whole job is to say what is missing BEFORE you begin.
+ *
+ * **`data-deploy-checklist` and `data-activity-surface` are the markers, and they are attributes
+ * rather than classes for two reasons.** Nothing styles them, and a class no stylesheet defines is
+ * an orphan the styling gate is right to refuse. And the dock runs EVERY tab's `afterRender`
+ * against the same painted body whether or not that tab is showing (`panels/bottom-dock.ts`), so a
+ * marker lit paints only for this tab is also the answer to "am I on screen?" — which is the
+ * question the Logic tab settles the same way, with its own empty `[part="code-host"]` container.
+ *
+ * @returns {PanelBody}
+ */
+export function renderActivityBody(): PanelBody {
+  return html`<div data-deploy-checklist></div>
+    <div data-activity-surface></div>`;
+}
+
+/**
+ * Bring the feed up to date with what has just been painted.
+ *
+ * The panel's `afterRender`, so it runs against the DOM lit has committed — and it runs on every
+ * paint of the dock, including the ones where another tab is showing. No container means this tab
+ * is not on screen, and the document standing in DOM that lit has already thrown away is disposed
+ * rather than left holding an effect.
+ *
+ * @param {HTMLElement} host The dock body element the tab was rendered into.
+ */
+export function syncActivitySurface(host: HTMLElement): void {
+  const container = host.querySelector<HTMLElement>("[data-activity-surface]");
+  if (!container) {
+    disposeActivitySurface();
+    return;
+  }
+  mountActivitySurface(container, ACTIVITY_SURFACE);
 }
 
 /**
@@ -471,11 +498,17 @@ export function registerActivityPanel(): void {
     title: "Activity",
     level: "project",
     dock: "bottom",
-    icon: "sp-icon-data",
+    icon: "clock-counter-clockwise",
     // No rail button: the Bottom dock's tabs are reached by ⌘J and `view.setBottomTab`, and a
     // Fifth rail slot for a surface with no steady state would spend chrome §2 principle 9 caps.
     rail: false,
     badge: () => (runningActivities().length > 0 ? runningActivities().length : null),
-    render: () => renderActivityList(),
+    render: () => renderActivityBody(),
+    afterRender: (_ctx, host) => {
+      /* Two surfaces, each told about the same painted body and each finding its own container in
+         it — or not finding it, which is how either one learns the tab is off screen. */
+      syncDeployChecklist(host);
+      syncActivitySurface(host);
+    },
   });
 }

package/src/panels/ai-chat/chat-markdown.ts

@@ -1,23 +1,25 @@
 /**
- * Chat-markdown.js — memoized markdown rendering for assistant chat messages.
+ * Chat-markdown.ts — memoized markdown rendering for assistant chat messages.
  *
  * Wraps @jxsuite/markup/md-html (sanitized markdown → HTML) with a per-message cache
  * keyed by message id + content length, so re-renders during streaming only re-parse
  * the message that actually grew.
  *
- * The HTML goes through `unsafeHTML`, which is this app's ONE injection sink, and it goes through
- * the Trusted Types policy on the way. md-html already sanitizes — raw HTML dropped, javascript:
- * URLs stripped — and the policy asserts that it did, rather than taking a comment's word for it.
- * A `createHTML` that passed its input through unchanged would satisfy the API and defend nothing.
+ * The HTML ends up in `[part="md"]`, the assistant surface's island — this app's ONE injection
+ * sink — and it goes through the Trusted Types policy on the way THERE, in
+ * `surfaces/ai-chat.ts`. md-html already sanitizes — raw HTML dropped, javascript: URLs
+ * stripped — and the policy asserts that it did, rather than taking a comment's word for it. A
+ * `createHTML` that passed its input through unchanged would satisfy the API and defend nothing.
+ *
+ * **It returns markup, not a template.** It used to hand back a `TemplateResult` wrapping
+ * `unsafeHTML` (which stringified the trusted value straight back again); the assistant is a Jx
+ * document now, so the island is filled with a string and the policy runs at the assignment, where
+ * a Trusted Types enforcement can actually see it. Nothing about the sanitisation moved.
  *
  * @license MIT
  */
 
-import { html } from "lit-html";
-import type { TemplateResult } from "lit-html";
-import { unsafeHTML } from "lit-html/directives/unsafe-html.js";
 import { markdownToHtml } from "@jxsuite/markup/md-html";
-import { trustedHtml } from "../../services/trusted-types";
 
 const cache = new Map<string, { len: number; html: string }>();
 
@@ -26,15 +28,15 @@ const cache = new Map<string, { len: number; html: string }>();
  *
  * @param {string} id - Stable message id (cache key).
  * @param {string} content
- * @returns {TemplateResult}
+ * @returns {string} Sanitized markup, for the island's Trusted Types sink.
  */
-export function renderMarkdown(id: string, content: string): TemplateResult {
+export function renderMarkdown(id: string, content: string): string {
   let entry = cache.get(id);
   if (!entry || entry.len !== content.length) {
-    entry = { len: content.length, html: markdownToHtml(content) };
+    entry = { html: markdownToHtml(content), len: content.length };
     cache.set(id, entry);
   }
-  return html`<div class="ai-msg-md">${unsafeHTML(String(trustedHtml(entry.html)))}</div>`;
+  return entry.html;
 }
 
 /** Drop all cached renders (call on session switch / new chat). */