@jxsuite/studio 2.3.0 → 2.4.1

package/src/types.ts

@@ -181,6 +181,23 @@ export interface StudioPlatform {
    * Not keyed on `id`: chromium and electrobun both report `"desktop"`, and only electrobun defers.
    */
   canvasUrlDeferred?: boolean;
+  /**
+   * Base URL the canvas fetches PROJECT FILES from — component `$ref`s, `$src` modules, images.
+   *
+   * The renderer resolves a `$ref` with `fetch(url).then(r => r.json())` from inside the iframe, so
+   * project files have to exist at a URL, not merely behind {@link readFile}. Hosts that serve the
+   * project tree from their web root need no value here: the default is `<canvas
+   * origin>/<projectRoot>/`, which is what the dev server and the desktop loopback both already
+   * answer.
+   *
+   * A host whose project files are NOT at a URL-shaped `projectRoot` must set this. Jx Cloud is
+   * one: its `projectRoot` is the identifier `owner/repo@branch`, nothing served the tree, and
+   * every `$ref` fetch landed on the SPA fallback — which answers HTML at **200**, so `res.ok`
+   * passed and the parse died on `Unexpected token '<'`. Images failed the same way in silence.
+   *
+   * Must end in `/`; a project-relative path is appended to it verbatim.
+   */
+  documentBaseUrl?: string;
   activate: (root?: string) => Promise<void>;
   openProject: () => Promise<{
     config: ProjectConfig;

package/src/ui/ai-managed-connect.ts

@@ -24,6 +24,7 @@ import {
   fetchAvailableModels,
   isManagedProxy,
   isProxyConfigured,
+  proxyStateCode,
 } from "../services/ai-models";
 
 export interface ManagedConnectOptions {
@@ -91,17 +92,31 @@ export function createManagedConnect(opts: ManagedConnectOptions): ManagedConnec
     if (!canOffer()) {
       return nothing;
     }
+    /*
+     * A lapsed grant and a fresh one get different words. The backend distinguishes them because
+     * "connect" is an invitation and "reconnect" is an explanation — and on a managed platform the
+     * lapsed case is the common one: a Cloudflare access token lives an hour.
+     */
+    const lapsed = proxyStateCode() === "cf_reconnect_required";
+    const busyLabel = lapsed ? "Reconnecting…" : "Connecting…";
     return html`
-      <div class="ai-managed-connect">
-        <div>Use Workers AI on your own Cloudflare account — no API key needed.</div>
+      <div class="ai-managed-connect" data-jx-recommended="cloudflare">
+        <div class="ai-managed-connect-lede">
+          ${
+            lapsed
+              ? "Your Cloudflare connection has expired. Reconnect to keep using the assistant."
+              : "Recommended — run the assistant on Workers AI in your own Cloudflare account. No API key to create, copy or rotate."
+          }
+        </div>
         <sp-button
           size="s"
+          variant="accent"
           ?disabled=${busy}
           @click=${() => {
             void connect();
           }}
         >
-          ${busy ? "Connecting…" : "Connect Cloudflare"}
+          ${busy ? busyLabel : lapsed ? "Reconnect Cloudflare" : "Connect Cloudflare"}
         </sp-button>
         ${connectError ? html`<div class="ai-managed-connect-error">${connectError}</div>` : nothing}
         <div class="ai-managed-connect-divider">— or bring your own key —</div>

package/styles/shell.css

@@ -753,6 +753,13 @@
   gap: 10px;
   width: 100%;
 }
+/* The lede reads as the recommendation, so it carries weight the divider beneath it does not. */
+.ai-managed-connect-lede {
+  color: var(--fg);
+  font-size: var(--spectrum-font-size-75, 12px);
+  max-width: 280px;
+  text-align: center;
+}
 .ai-managed-connect-error {
   color: var(--danger);
   font-size: var(--spectrum-font-size-50, 11px);