@jxsuite/studio 4.0.0 → 4.1.0

package/src/platforms/cloud.ts

@@ -6,9 +6,9 @@
  * `/api/v1/ai/chat`. The session is pre-bound to one (repo, branch) — the shell picks the project
  * before Studio boots — while project-less mode (null) powers the /studio welcome screen.
  *
- * Cloud omissions (Studio degrades per @jxsuite/protocol's route table): pickDirectory/importSite,
- * package install/outdated/set-versions (package ops are manifest-only edits), multi-window,
- * gitClone, resolveClass, component discovery, code services.
+ * Cloud omissions (Studio degrades per @jxsuite/protocol's route table): pickDirectory, package
+ * install/outdated/set-versions (package ops are manifest-only edits), multi-window, gitClone,
+ * resolveClass, component discovery, code services.
  */
 
 import { negotiateCollab } from "@jxsuite/collab/negotiate";
@@ -16,8 +16,12 @@ import type { CollabNegotiation } from "@jxsuite/collab/negotiate";
 import type { WsCollabConnection } from "@jxsuite/collab/client";
 import type { ProjectConfig } from "@jxsuite/schema/types";
 import { componentMetaFrom } from "@jxsuite/schema/component-meta";
+import { streamImport } from "../services/import-client";
 import type {
   AccountStatus,
+  CfAccountSummary,
+  CfConnection,
+  CfConnectOutcome,
   ComponentMeta,
   CreateProjectDestination,
   DirEntry,
@@ -26,6 +30,9 @@ import type {
   GitBranchesResult,
   GitLogEntry,
   GitStatusResult,
+  ImportProgressEvent,
+  ImportReadyEvent,
+  ImportSiteOptions,
   PackageInfo,
   ProjectListEntry,
   SiteBuildResult,
@@ -124,12 +131,16 @@ export function projectRootKey(project: CloudProject): string {
   return `${project.owner}/${project.repo}@${project.branch}`;
 }
 
-/** Current hosted Cloudflare connection; null when none is brokered yet. */
-async function fetchCfConnection(): Promise<{
-  connected: boolean;
-  accountId?: string | undefined;
-  accountName?: string | undefined;
-} | null> {
+/**
+ * Current hosted Cloudflare connection; null when none is brokered yet.
+ *
+ * A LAPSED row is not a healthy one. This reader used to answer `{connected: true}` for any body
+ * whose `connected` flag was set and drop `needsReconnect` on the floor, so a row whose grant had
+ * expired came back indistinguishable from one that works — which is how `cfConnect`'s poll came to
+ * close the popup the moment it opened, over a row from a previous session, while the user was
+ * still on Cloudflare's login page. Every diagnostic the broker sends now passes straight through.
+ */
+async function fetchCfConnection(): Promise<CfConnection | null> {
   const res = await fetch("/api/v1/cf/connection", { credentials: "include" });
   if (!res.ok) {
     return null;
@@ -138,7 +149,15 @@ async function fetchCfConnection(): Promise<{
     connected: boolean;
     accountId?: string | null;
     accountName?: string | null;
+    needsReconnect?: boolean;
+    needsAccount?: boolean;
+    code?: CfConnection["code"];
+    reason?: string;
+    hasRefreshToken?: boolean;
+    expiresAt?: number;
   };
+  /* Cloud never emits {connected: false} to the PAL — no brokered row at all is `null`, and a row
+     that cannot be used arrives as connected + needsReconnect. See CfConnection. */
   if (!body.connected) {
     return null;
   }
@@ -146,10 +165,131 @@ async function fetchCfConnection(): Promise<{
     connected: true,
     ...(body.accountId ? { accountId: body.accountId } : {}),
     ...(body.accountName ? { accountName: body.accountName } : {}),
+    ...(body.needsReconnect ? { needsReconnect: true } : {}),
+    ...(body.needsAccount ? { needsAccount: true } : {}),
+    ...(body.code ? { code: body.code } : {}),
+    ...(body.reason ? { reason: body.reason } : {}),
+    ...(body.hasRefreshToken === undefined ? {} : { hasRefreshToken: body.hasRefreshToken }),
+    ...(body.expiresAt === undefined ? {} : { expiresAt: body.expiresAt }),
   };
 }
 
-type CfConnectionInfo = Awaited<ReturnType<typeof fetchCfConnection>>;
+interface CfConnectFlow {
+  popup: Window | null;
+  promise: Promise<CfConnectOutcome | null>;
+}
+
+/**
+ * The connect flow currently running, or null.
+ *
+ * Module-level rather than per-platform because the popup's TARGET NAME ("cf-connect") is global to
+ * the browsing context: a second `window.open` on that name re-uses the first flow's popup, and the
+ * first flow's cleanup then closes it out from under the second — the user watches their half-typed
+ * Cloudflare login vanish. Joining the in-flight promise is the only answer that leaves both
+ * callers correct.
+ */
+let cfConnectFlow: CfConnectFlow | null = null;
+
+/**
+ * Drive one hosted OAuth connect to a {@link CfConnectOutcome}. See `cfConnect` for the semantics;
+ * this lives at module scope so the single-flight handle can too.
+ */
+async function runCfConnect(handle: CfConnectFlow): Promise<CfConnectOutcome | null> {
+  /* The baseline is read BEFORE the popup opens, and it is what keeps the poll honest: a row that
+     was already healthy proves nothing about THIS flow, so the poll must not settle on one. Reading
+     it after the popup opened would race the callback and could capture the new row as "old". */
+  const baseline = await fetchCfConnection().catch(() => null);
+  const healthyBaseline = Boolean(baseline?.connected && !baseline.needsReconnect);
+  const popup = window.open("/api/v1/cf/connect", "cf-connect", "width=980,height=780");
+  if (!popup) {
+    /* Popup blocked: the whole page is now navigating to the broker. Not a failure — the caller
+       must render nothing at all rather than an error it will never get to show. */
+    location.assign("/api/v1/cf/connect");
+    return { status: "redirect" };
+  }
+  handle.popup = popup;
+  const deadline = Date.now() + 180_000;
+  return new Promise<CfConnectOutcome>((resolve, reject) => {
+    let timer = 0;
+    const cleanup = () => {
+      window.removeEventListener("message", onMessage);
+      window.clearTimeout(timer);
+      if (!popup.closed) {
+        popup.close();
+      }
+    };
+    const settle = (outcome: CfConnectOutcome) => {
+      cleanup();
+      resolve(outcome);
+    };
+    const fail = (reason: string) => {
+      cleanup();
+      reject(new Error(reason));
+    };
+    /** A usable row: brokered, and its grant has not lapsed. */
+    const usable = (connection: CfConnection | null): connection is CfConnection =>
+      Boolean(connection?.connected && !connection.needsReconnect);
+    const onMessage = (event: MessageEvent) => {
+      if (event.origin !== location.origin) {
+        return;
+      }
+      const data = event.data as { source?: string; status?: string; reason?: string | null };
+      if (!data || data.source !== "jx-cf") {
+        return;
+      }
+      if (data.status === "error") {
+        fail(data.reason ?? "Cloudflare authorization failed");
+        return;
+      }
+      /* Any other status — "connected", "pick-account", or one a shell of another vintage sends —
+         is a CLAIM that the callback ran, and the broker row is what adjudicates it. */
+      void fetchCfConnection().then(
+        (connection) => {
+          settle(usable(connection) ? { connection, status: "connected" } : { status: "timeout" });
+        },
+        /* This promise had no rejection handler, so one network blip left the listener installed,
+           the timer armed and the popup open forever. */
+        () => {
+          fail("Cloudflare connected, but the connection could not be confirmed");
+        },
+      );
+    };
+    window.addEventListener("message", onMessage);
+    const poll = async () => {
+      if (Date.now() > deadline) {
+        settle({ status: "timeout" });
+        return;
+      }
+      let connection: CfConnection | null = null;
+      let answered = true;
+      try {
+        connection = await fetchCfConnection();
+      } catch {
+        answered = false; // A blip is not an answer: re-arm and ask again.
+      }
+      /* The poll is a FALLBACK for shells whose postMessage never arrives, so it may only settle on
+         proof that THIS flow stored a fresh token: a usable row that was NOT already usable at the
+         baseline. For a reconnect, `needsReconnect` flipping false is that proof; for a connection
+         that was healthy all along nothing the poll can see is, so it must never settle — the relay
+         or the popup-closed path answers that case instead. */
+      if (answered && usable(connection) && !healthyBaseline) {
+        settle({ connection, status: "connected" });
+        return;
+      }
+      if (popup.closed) {
+        const final = await fetchCfConnection().catch(() => null);
+        settle(usable(final) ? { connection: final, status: "connected" } : { status: "canceled" });
+        return;
+      }
+      timer = window.setTimeout(() => {
+        void poll();
+      }, 1500);
+    };
+    timer = window.setTimeout(() => {
+      void poll();
+    }, 1500);
+  });
+}
 
 /** Parse an "owner/repo@branch" root key; null when malformed. */
 export function parseRootKey(root: string): CloudProject | null {
@@ -896,6 +1036,33 @@ export function createCloudPlatform(project: CloudProject | null): StudioPlatfor
       };
     },
 
+    /**
+     * AI-guided site import, streamed from the PLATFORM's import route rather than a session one.
+     *
+     * Deliberately not routed through `api()`: importing is how a cloud project comes into
+     * existence, so the one mode it has to work in is the project-less hub, where `api()` rejects
+     * before a request is ever made and `base` is "".
+     *
+     * The path is same-origin and relative, so `streamImport`'s plain `fetch` carries the session
+     * cookie under the default `same-origin` credentials mode — the same authority every
+     * `/api/v1/*` call here sends `credentials: "include"` for, with no cloud-shaped option added
+     * to the shared client. A bring-your-own-key run rides on the headers that client already sets,
+     * so the backend sees `X-Api-Key` / `X-Api-Base-URL` exactly as the OSS server does.
+     *
+     * `onReady` is forwarded and this backend never calls it, which is a difference worth naming:
+     * adopting the project mid-run would navigate this page to the editor and abort the request
+     * still writing the import, so the stream carries no `ready` line and the caller adopts on
+     * `done`. That is the same path a backend older than `ready` has always taken.
+     */
+    async importSite(
+      opts: ImportSiteOptions,
+      onProgress: (evt: ImportProgressEvent) => void,
+      signal?: AbortSignal,
+      onReady?: (evt: ImportReadyEvent) => void,
+    ) {
+      return await streamImport("/api/v1/import/site", opts, onProgress, signal, onReady);
+    },
+
     // ─── Identity & Cloudflare publish surface ──────────────────────────────
 
     async getUser() {
@@ -1001,71 +1168,75 @@ export function createCloudPlatform(project: CloudProject | null): StudioPlatfor
      * OAuth errors (denial, invalid_scope misregistration) REJECT with the real reason instead of
      * timing out. A 1.5s poll remains as fallback for older shells / blocked message delivery, and
      * popup-blocked browsers fall back to a full-page redirect.
+     *
+     * Promise semantics, which are narrower than they look:
+     *
+     * - **Resolves `null`** only under the SSR guard, where there is no window to open.
+     * - **Resolves an outcome** for all four real endings — `connected`, `redirect` (popup blocked,
+     *   page navigating away), `canceled` (popup closed with nothing stored), `timeout` (180s).
+     * - **Rejects** only on a relayed OAuth error, or on a relayed success this platform could not
+     *   confirm against the broker.
+     *
+     * Concurrent calls JOIN the flow already running rather than starting a second one: both would
+     * open the same "cf-connect" target, and the first one's cleanup would then close the popup the
+     * second is waiting on.
      */
-    async cfConnect() {
+    cfConnect() {
       if (typeof window === "undefined" || typeof location === "undefined") {
-        return null;
+        return Promise.resolve(null);
       }
-      const popup = window.open("/api/v1/cf/connect", "cf-connect", "width=980,height=780");
-      if (!popup) {
-        location.assign("/api/v1/cf/connect");
-        return null;
+      const running = cfConnectFlow;
+      if (running) {
+        try {
+          running.popup?.focus();
+        } catch {
+          // A cross-origin popup may refuse focus; joining the flow is what mattered.
+        }
+        return running.promise;
       }
-      const deadline = Date.now() + 180_000;
-      return new Promise<CfConnectionInfo>((resolve, reject) => {
-        let timer = 0;
-        const cleanup = () => {
-          window.removeEventListener("message", onMessage);
-          window.clearTimeout(timer);
-          if (!popup.closed) {
-            popup.close();
-          }
-        };
-        const settle = (connection: CfConnectionInfo) => {
-          cleanup();
-          resolve(connection);
-        };
-        const fail = (reason: string) => {
-          cleanup();
-          reject(new Error(reason));
-        };
-        const onMessage = (event: MessageEvent) => {
-          if (event.origin !== location.origin) {
-            return;
-          }
-          const data = event.data as { source?: string; status?: string; reason?: string | null };
-          if (!data || data.source !== "jx-cf") {
-            return;
-          }
-          if (data.status === "error") {
-            fail(data.reason ?? "Cloudflare authorization failed");
-            return;
-          }
-          void fetchCfConnection().then(settle);
-        };
-        window.addEventListener("message", onMessage);
-        const poll = async () => {
-          if (Date.now() > deadline) {
-            settle(null);
-            return;
-          }
-          const connection = await fetchCfConnection();
-          if (connection) {
-            settle(connection);
-            return;
-          }
-          if (popup.closed) {
-            settle(await fetchCfConnection());
-            return;
-          }
-          timer = window.setTimeout(() => {
-            void poll();
-          }, 1500);
-        };
-        timer = window.setTimeout(() => {
-          void poll();
-        }, 1500);
+      const handle: CfConnectFlow = { popup: null, promise: Promise.resolve(null) };
+      cfConnectFlow = handle;
+      handle.promise = runCfConnect(handle).finally(() => {
+        if (cfConnectFlow === handle) {
+          cfConnectFlow = null;
+        }
+      });
+      return handle.promise;
+    },
+
+    /**
+     * Every Cloudflare account this connection can reach (the account picker's rows).
+     *
+     * A non-OK body is the broker's own unusable-connection payload — `{error, code}` naming a
+     * lapsed grant or a connection that never existed — so its sentence is the one worth showing.
+     */
+    async cfAccounts() {
+      const res = await fetch("/api/v1/cf/accounts", { credentials: "include" });
+      return okJson<CfAccountSummary[]>(res, "Failed to list Cloudflare accounts");
+    },
+
+    /** Store the chosen account on the brokered connection. */
+    async cfSelectAccount(account: { id: string; name?: string }) {
+      const res = await fetch("/api/v1/cf/select-account", {
+        body: JSON.stringify({ accountId: account.id, accountName: account.name }),
+        credentials: "include",
+        headers: { "Content-Type": "application/json" },
+        method: "POST",
+      });
+      if (!res.ok) {
+        throw new Error(await errorMessage(res, "Failed to select a Cloudflare account"));
+      }
+    },
+
+    /** Forget the brokered connection (the broker revokes its tokens upstream). */
+    async cfDisconnect() {
+      const res = await fetch("/api/v1/cf/connection", {
+        credentials: "include",
+        method: "DELETE",
       });
+      if (!res.ok) {
+        throw new Error(await errorMessage(res, "Failed to disconnect Cloudflare"));
+      }
     },
 
     /** Allowlisted Cloudflare API passthrough (platform injects the OAuth token). */

package/src/publish/publish-panel.ts

@@ -26,6 +26,7 @@ import { activeRegistry } from "../commands/active-registry";
 import { currentDeploy, noteDeployment } from "./deploy-checklist";
 import { getPlatform } from "../platform";
 import { getCfToken, setCfToken } from "../services/cf-settings";
+import { resetModelCache } from "../services/ai-models";
 import { projectState } from "../store";
 import type { CfConnection } from "../types";
 import { openModal } from "../ui/layers";
@@ -76,7 +77,13 @@ async function loadConnection(): Promise<void> {
   render();
   try {
     _connection = (await getPlatform().cfConnection?.()) ?? null;
-    if (_connection?.connected) {
+    /*
+     * A lapsed brokered connection is `connected: true`, and asking Cloudflare anything through one
+     * is a guaranteed 401. Every such call landed in the catch below, which nulled the connection —
+     * so the panel showed the FIRST-TIME "Connect Cloudflare" invitation next to a raw
+     * "Cloudflare API: …" string, and never the one sentence that was true: it expired.
+     */
+    if (_connection?.connected && !_connection.needsReconnect) {
       _accounts = await listAccounts();
       _form.accountId = _connection.accountId ?? _accounts[0]?.id ?? "";
       const deploy = currentDeploy();
@@ -122,15 +129,37 @@ function openAccounts(): void {
   void activeRegistry()?.run("app.preferences", { section: "accounts" });
 }
 
+/**
+ * Run the hosted OAuth flow and act on how it ended.
+ *
+ * The four endings are not interchangeable, and collapsing them is what left a user staring at an
+ * unchanged panel: a deadline that passed and a popup the browser turned into a full-page redirect
+ * both resolved null, and both were reported as "not completed" — one of them while the document
+ * was already navigating away.
+ */
 async function hostedConnect(): Promise<void> {
   _busy = true;
+  _error = "";
   render();
   try {
-    await getPlatform().cfConnect?.();
+    const outcome = (await getPlatform().cfConnect?.()) ?? null;
+    if (outcome?.status === "timeout") {
+      _error =
+        "The Cloudflare window didn't finish. Sign in there, then reconnect — nothing was changed.";
+    } else if (outcome?.status === "connected" && !outcome.connection.accountId) {
+      /* Lazily: this module is the publish modal, and the picker drags the dialog layer with it. */
+      const { openCfAccountPicker } = await import("../ui/cf-account-picker");
+      await openCfAccountPicker();
+    }
+    /* `canceled` and `redirect` say nothing. The user closed the popup, or the page is on its way
+       to Cloudflare — an apology painted over either one is noise. */
   } catch (error) {
     _error = error instanceof Error ? error.message : String(error);
   }
   _busy = false;
+  // The assistant's gate reads the same grant through /models, so a reconnect it does not hear
+  // About leaves it insisting the connection is dead.
+  resetModelCache();
   await loadConnection();
 }
 
@@ -194,6 +223,32 @@ function fieldRow(label: string, input: unknown) {
   `;
 }
 
+/**
+ * The connection exists and has lapsed.
+ *
+ * Its own template rather than a line inside {@link credentialTpl}, because the honest words are the
+ * opposite of that one's: nothing needs to be set up, nothing was lost, and the only action is to
+ * sign in again. The panel used to say "Connect your Cloudflare account to publish this site" to a
+ * user who had already done exactly that.
+ */
+function lapsedTpl() {
+  return html`
+    <p>
+      Your Cloudflare connection has expired, so publishing cannot reach your account. Reconnect to
+      restore it — this site's Pages project and its settings are untouched.
+    </p>
+    <sp-button
+      variant="accent"
+      ?disabled=${_busy}
+      @click=${() => {
+        void hostedConnect();
+      }}
+    >
+      ${_busy ? "Reconnecting…" : "Reconnect Cloudflare"}
+    </sp-button>
+  `;
+}
+
 function credentialTpl() {
   const platform = getPlatform();
   if (platform.cfConnect) {
@@ -393,6 +448,11 @@ function bodyTpl() {
   if (_connection === "loading") {
     return html`<p>Checking Cloudflare connection…</p>`;
   }
+  // Before the credential template, and that order is the fix: a lapsed row is `connected: true`,
+  // So neither branch below could ever have claimed it.
+  if (_connection?.connected && _connection.needsReconnect) {
+    return lapsedTpl();
+  }
   if (!_connection?.connected) {
     return credentialTpl();
   }

package/src/services/ai-import-tools.ts

@@ -1,9 +1,10 @@
 /**
  * Ai-import-tools.ts — `import_site`, the assistant's other way to bootstrap a project.
  *
- * A sibling of `create_project` (`ai-project-tools.ts`) with a different backend: it drives the
- * headless-Chrome pipeline behind `POST /__studio/import-site`, streams its progress into a record
- * the transcript draws, and then adopts the result exactly as a scaffold is adopted. Its own module
+ * A sibling of `create_project` (`ai-project-tools.ts`) with a different backend: it drives whatever
+ * import pipeline the platform's `importSite` reaches — a local headless Chrome, or a hosted one —
+ * streams its progress into a record the transcript draws, and then adopts the result exactly as a
+ * scaffold is adopted. Its own module
  * rather than an eighth tool in `ai-project-tools.ts`, which is already 650 lines under a per-file
  * coverage bar.
  *
@@ -115,6 +116,40 @@ function isAbsolutePath(path: string): boolean {
   return /^(?:[a-zA-Z]:[/\\]|\/)/.test(path);
 }
 
+/**
+ * `owner/repo`, conservatively — the destination a `createDestination: "repo"` platform writes to.
+ *
+ * Narrower than GitHub's own rules on purpose: this guards a string the MODEL may supply, and the
+ * cost of refusing an exotic-but-legal name is one clarifying question, while the cost of accepting
+ * a path-shaped or query-shaped one is a request the backend has to defend against.
+ */
+const REPO_DESTINATION = /^[A-Za-z0-9](?:[A-Za-z0-9-]*[A-Za-z0-9])?\/[A-Za-z0-9._-]+$/;
+
+/**
+ * Whether `destination` is a shape THIS platform can write to, or the sentence saying why not.
+ *
+ * The platform's `createDestination` decides, not the string's own look: a hosted backend creates a
+ * GitHub repository and has no filesystem to hold an absolute path, and a desktop backend has no
+ * repository to create. Answering by inspecting the string would accept `owner/repo` on desktop,
+ * where it silently means a relative directory nobody named.
+ *
+ * @param {string} destination - The resolved destination, from the model or the wizard's brief
+ * @returns {string | null} The refusal, or null when it is usable
+ */
+function destinationProblem(destination: string): string | null {
+  if (getPlatform().createDestination === "repo") {
+    if (!REPO_DESTINATION.test(destination)) {
+      return `"directory" must name a repository as "owner/repo": ${destination}`;
+    }
+  } else if (!isAbsolutePath(destination)) {
+    return `"directory" must be an absolute path: ${destination}`;
+  }
+  if (destination.split(/[/\\]/).includes("..")) {
+    return `"directory" must not contain "..": ${destination}`;
+  }
+  return null;
+}
+
 /**
  * One run has already succeeded in this session.
  *
@@ -242,8 +277,10 @@ export function registerImportTools(
           directory: {
             type: "string",
             description:
-              "Absolute destination folder. Omit it when an import was started from the New " +
-              "Project form — that destination is the one the user chose, and it wins.",
+              "Where the project goes, in whichever form this studio's backend uses: an absolute " +
+              'folder on a filesystem host, or "owner/repo" on a host where a project IS a ' +
+              "repository. Omit it when an import was started from the New Project form — that " +
+              "destination is the one the user chose, and it wins.",
           },
           depth: {
             type: "number",
@@ -361,15 +398,16 @@ export function registerImportTools(
         const destination = requested || brief?.directory || "";
         if (!destination) {
           return toolError(
-            'Pass "directory" — the absolute folder to create the project in. Ask the user where ' +
-              "the project should live rather than guessing.",
+            platform.createDestination === "repo"
+              ? 'Pass "directory" — the "owner/repo" to create the project as. Ask the user which ' +
+                  "account and repository name rather than guessing."
+              : 'Pass "directory" — the absolute folder to create the project in. Ask the user ' +
+                  "where the project should live rather than guessing.",
           );
         }
-        if (!isAbsolutePath(destination)) {
-          return toolError(`"directory" must be an absolute path: ${destination}`);
-        }
-        if (destination.split(/[/\\]/).includes("..")) {
-          return toolError(`"directory" must not contain "..": ${destination}`);
+        const problem = destinationProblem(destination);
+        if (problem) {
+          return toolError(problem);
         }
 
         const id = currentToolCallId();