@jxsuite/studio 4.0.0 → 4.1.0

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

@@ -25,7 +25,9 @@ import {
   isManagedProxy,
   isProxyConfigured,
   proxyStateCode,
+  resetModelCache,
 } from "../services/ai-models";
+import type { CfConnectOutcome } from "../types";
 
 export interface ManagedConnectOptions {
   /** Host re-render scheduler — called on connect start/finish and when the probe settles. */
@@ -52,20 +54,73 @@ export function createManagedConnect(opts: ManagedConnectOptions): ManagedConnec
   let connectError = "";
 
   /*
-   * Offer the keyless path when the proxy says managed-but-unconfigured and the platform can run
-   * the hosted OAuth flow (the PAL seam — desktop shells can implement cfConnect later). Guarded on
-   * hasPlatform() because gates can render from modules that load before registration.
+   * Offer the keyless path when the proxy is managed and the platform can run the hosted OAuth flow
+   * (the PAL seam — desktop shells can implement cfConnect later). Guarded on hasPlatform() because
+   * gates can render from modules that load before registration.
+   *
+   * `configured` alone does NOT withdraw the offer any more. A backend can answer `configured: true`
+   * over a grant it cannot actually use, and hiding the CTA there left the user with a broken
+   * assistant and no button at all — the one state in which reconnecting is the whole fix. So the
+   * lapsed code overrides `configured`, while `cf_upstream_error` (also `configured: true`, and
+   * carrying no reconnect code) still hides it: an unreachable Cloudflare is not fixed by an OAuth
+   * round trip.
    */
   function canOffer(): boolean {
-    return (
-      isManagedProxy() && !isProxyConfigured() && hasPlatform() && Boolean(getPlatform().cfConnect)
-    );
+    if (!isManagedProxy() || !hasPlatform() || !getPlatform().cfConnect) {
+      return false;
+    }
+    return !isProxyConfigured() || proxyStateCode() === "cf_reconnect_required";
   }
 
   function ensureProbe() {
     ensureProxyProbe(opts.requestRender);
   }
 
+  /**
+   * Act on how the flow ended.
+   *
+   * Every branch here exists because the old code had ONE: any truthy result was success, so a
+   * connect that landed on the same lapsed row re-probed, got the same `cf_reconnect_required`
+   * back, and re-rendered a byte-identical CTA. The user clicked Reconnect and observably nothing
+   * happened — which is the half of the outage that made the other half impossible to diagnose.
+   *
+   * @param {CfConnectOutcome | null} outcome - Null where the platform had no DOM to open a popup
+   *   in.
+   */
+  async function settle(outcome: CfConnectOutcome | null): Promise<void> {
+    /* A blocked popup turns into a full-page redirect, and null is a host with nowhere to open one:
+       in both the document is on its way out, so an apology would be the last thing painted before
+       it goes. Cancellation is silent for the opposite reason — the user already knows. */
+    if (!outcome || outcome.status === "redirect" || outcome.status === "canceled") {
+      return;
+    }
+    if (outcome.status === "timeout") {
+      connectError =
+        "The Cloudflare window didn't finish. Sign in there, then reconnect — nothing was changed.";
+      return;
+    }
+    if (!outcome.connection.accountId) {
+      /* Lazily, because the picker pulls the dialog layer in and this module is imported by every
+         credentials gate — including ones that render before layers are bound. */
+      const { openCfAccountPicker } = await import("./cf-account-picker");
+      if (!(await openCfAccountPicker())) {
+        connectError =
+          "Cloudflare is connected, but no account is chosen yet — pick one to finish setting up the assistant.";
+        return;
+      }
+    }
+    // Re-probe: /models flips to configured once the connection lands, opening the gate.
+    resetModelCache();
+    await fetchAvailableModels({ force: true });
+    /* And then CHECK, because a connect the backend does not honour must not look like one that
+       worked. This is the only place that can tell the difference. */
+    if (!isProxyConfigured() || proxyStateCode() === "cf_reconnect_required") {
+      connectError =
+        "Cloudflare connected, but the assistant backend still reports the connection as unusable. " +
+        "Try reconnecting, or use your own API key below.";
+    }
+  }
+
   async function connect() {
     if (busy) {
       return;
@@ -74,13 +129,7 @@ export function createManagedConnect(opts: ManagedConnectOptions): ManagedConnec
     connectError = "";
     opts.requestRender();
     try {
-      const connection = await getPlatform().cfConnect?.();
-      if (connection) {
-        // Re-probe: /models flips to configured once the connection lands, opening the gate.
-        await fetchAvailableModels({ force: true });
-      } else {
-        connectError = "Cloudflare connection was not completed.";
-      }
+      await settle((await getPlatform().cfConnect?.()) ?? null);
     } catch (error) {
       connectError = error instanceof Error ? error.message : String(error);
     }

package/src/ui/ai-model-picker.ts

@@ -26,6 +26,7 @@ import {
   aiConnection,
   cachedModels,
   fetchAvailableModels,
+  modelToolSupport,
   preferredModel,
 } from "../services/ai-models";
 import { setModel } from "../services/ai-settings";
@@ -39,6 +40,21 @@ export const RETRY_MODELS = "__retry_models__";
 /** The `sp-menu-item` value of the disabled placeholder shown during the first fetch. */
 export const LOADING_MODELS = "__loading__";
 
+/** What a listed model's row says when the backend reported it cannot call tools. */
+export const NO_TOOLS_SUFFIX = " — no tools";
+
+/**
+ * A model's row label: its name, plus a note when it is known to be chat-only.
+ *
+ * Labelled, never filtered or disabled. Choosing a chat-only model to ask questions of is a
+ * legitimate thing to do, and a picker that hides half a managed catalogue would be reporting a
+ * capability gap as an outage. Only `toolSupport === false` is labelled — `undefined` is a BYOK
+ * provider saying nothing, and a suffix there would be an invention.
+ */
+function itemLabel(model: { id: string; name: string }): string {
+  return modelToolSupport(model.id) === false ? `${model.name}${NO_TOOLS_SUFFIX}` : model.name;
+}
+
 export interface ModelPickerOptions {
   /** Host re-render scheduler — called whenever a fetch settles. */
   requestRender: () => void;
@@ -66,6 +82,12 @@ export interface ModelPicker {
   isLoading: () => boolean;
   /** The last fetch's failure, or `""`. */
   error: () => string;
+  /**
+   * Whether the selected model is known NOT to support tools — for a host that wants to say so.
+   *
+   * `false` while the backend has no opinion, so a host reads it as "warn" rather than as "block".
+   */
+  selectedLacksTools: () => boolean;
 }
 
 /**
@@ -143,7 +165,7 @@ export function createModelPicker(opts: ModelPickerOptions): ModelPicker {
         .value=${live(current)}
         @change=${onPickerChange}
       >
-        ${items.map((m) => html`<sp-menu-item value=${m.id}>${m.name}</sp-menu-item>`)}
+        ${items.map((m) => html`<sp-menu-item value=${m.id}>${itemLabel(m)}</sp-menu-item>`)}
         ${
           loading
             ? html`<sp-menu-item disabled value=${LOADING_MODELS}>Loading models…</sp-menu-item>`
@@ -158,5 +180,10 @@ export function createModelPicker(opts: ModelPickerOptions): ModelPicker {
     `;
   }
 
-  return { error: () => failure, isLoading: () => loading, render };
+  return {
+    error: () => failure,
+    isLoading: () => loading,
+    render,
+    selectedLacksTools: () => modelToolSupport(getModel()) === false,
+  };
 }

package/src/ui/cf-account-picker.ts

@@ -0,0 +1,200 @@
+/// <reference lib="dom" />
+/**
+ * Cf-account-picker.ts — "which Cloudflare account?", the question nothing in Studio asked.
+ *
+ * A Cloudflare grant can reach several accounts, and the broker stores exactly one id per
+ * connection. Until one is chosen every Cloudflare-backed call answers `cf_account_required`, so a
+ * multi-account user finished the hosted OAuth flow and landed in a state that reads as connected
+ * and behaves as broken: the assistant 401s, publishing 401s, and no surface says why. The broker
+ * has had `/cf/accounts` and `/cf/select-account` the whole time; this is the first caller.
+ *
+ * ONE picker, invoked wherever a connect resolves account-less — the assistant's managed-connect
+ * CTA, the publish panel, and a button on the Preferences row. A second picker per surface is how
+ * three surfaces end up disagreeing about what "connected" means.
+ *
+ * Cloud-only by construction: the PAL members it drives are the brokered ones, so a platform
+ * holding a pasted API token (desktop, dev server) keeps its own local account field and this
+ * resolves null without opening anything.
+ *
+ * @docs studio/ai
+ * @license MIT
+ */
+
+import { html, render as litRender, nothing } from "lit-html";
+import { ref } from "lit-html/directives/ref.js";
+import type { TemplateResult } from "lit-html";
+import { getPlatform, hasPlatform } from "../platform";
+import { notifyCredentialsChanged } from "../settings/preferences-accounts";
+import { showDialog } from "./layers";
+import { overlayRegion } from "./regions";
+import type { CfAccountSummary } from "../types";
+
+/** Whether this platform brokers the connection, and so can be asked which accounts it reaches. */
+function canPick(): boolean {
+  if (!hasPlatform()) {
+    return false;
+  }
+  const platform = getPlatform();
+  return Boolean(platform.cfAccounts && platform.cfSelectAccount);
+}
+
+/**
+ * Ask which Cloudflare account this connection should use, and store the answer.
+ *
+ * Resolves the chosen account, or null — dismissed, or a platform that does not broker connections
+ * at all. A caller treats null as "still unusable" rather than as a failure: nothing was changed,
+ * and the surface that opened this is the one that knows what to say about it.
+ *
+ * @returns {Promise<CfAccountSummary | null>}
+ */
+export function openCfAccountPicker(): Promise<CfAccountSummary | null> {
+  if (!canPick()) {
+    return Promise.resolve(null);
+  }
+  return showDialog<CfAccountSummary | null>(
+    (done) => {
+      let accounts: CfAccountSummary[] = [];
+      let loading = true;
+      /** The last refusal — a listing that failed, or an account the broker would not accept. */
+      let failure = "";
+      /** The id being committed, so its own row can say so rather than the whole list going grey. */
+      let choosing = "";
+      let settled = false;
+      let wrapperEl: HTMLElement | null = null;
+
+      function finish(account: CfAccountSummary | null): void {
+        settled = true;
+        done(account);
+      }
+
+      function repaint(): void {
+        /* Resolved lazily, and only while the dialog is still up: `done` releases the slot, so a
+           late `load()` landing after a dismissal would otherwise paint into a detached host. */
+        const host = settled ? null : wrapperEl?.parentElement;
+        if (host) {
+          litRender(build(), host);
+        }
+      }
+
+      async function load(): Promise<void> {
+        loading = true;
+        failure = "";
+        repaint();
+        try {
+          accounts = (await getPlatform().cfAccounts?.()) ?? [];
+        } catch (error) {
+          failure = error instanceof Error ? error.message : String(error);
+        }
+        loading = false;
+        repaint();
+      }
+
+      async function choose(account: CfAccountSummary): Promise<void> {
+        choosing = account.id;
+        failure = "";
+        repaint();
+        try {
+          await getPlatform().cfSelectAccount?.({ id: account.id, name: account.name });
+        } catch (error) {
+          failure = error instanceof Error ? error.message : String(error);
+          choosing = "";
+          repaint();
+          return;
+        }
+        /* The stored account is a credential like any other: the assistant's gate, the publish
+           panel and the Preferences row all re-read from the same announcement. */
+        notifyCredentialsChanged();
+        finish(account);
+      }
+
+      function listTpl(): TemplateResult | typeof nothing {
+        if (loading) {
+          return html`<p class="cf-account-picker-empty">Reading your Cloudflare accounts…</p>`;
+        }
+        /* Nothing to show and a reason why. The retry is offered only here: a commit that was
+           refused (below) keeps the list, because listing again is not what would fix it. */
+        if (accounts.length === 0) {
+          return html`
+            <p class="cf-account-picker-empty">
+              ${
+                failure
+                  ? `Cloudflare could not be reached: ${failure}`
+                  : "This Cloudflare login reaches no accounts. Create one at dash.cloudflare.com, then try again."
+              }
+            </p>
+            ${
+              failure
+                ? html`<sp-button
+                    size="s"
+                    treatment="outline"
+                    @click=${() => {
+                      void load();
+                    }}
+                  >
+                    Try again
+                  </sp-button>`
+                : nothing
+            }
+          `;
+        }
+        /* The row shape is Preferences › Accounts', deliberately reused: this IS an account list,
+           and a second stylesheet entry for the same shape is how two lists drift apart. */
+        return html`
+          ${failure ? html`<p class="cf-account-picker-error">${failure}</p>` : nothing}
+          <div class="prefs-accounts">
+            ${accounts.map(
+              (account) => html`
+                <div class="prefs-account" data-account=${account.id}>
+                  <div class="prefs-account-text">
+                    <span class="prefs-account-label">${account.name}</span>
+                    <span class="prefs-account-detail">${account.id}</span>
+                  </div>
+                  <sp-button
+                    size="s"
+                    variant="accent"
+                    ?disabled=${choosing !== ""}
+                    @click=${() => {
+                      void choose(account);
+                    }}
+                  >
+                    ${choosing === account.id ? "Selecting…" : "Use this account"}
+                  </sp-button>
+                </div>
+              `,
+            )}
+          </div>
+        `;
+      }
+
+      function build(): TemplateResult {
+        return html`
+          <sp-dialog-wrapper
+            open
+            underlay
+            headline="Choose a Cloudflare account"
+            cancel-label="Cancel"
+            @cancel=${() => finish(null)}
+            @close=${() => finish(null)}
+            ${ref((el?: Element) => {
+              if (el) {
+                wrapperEl = el as HTMLElement;
+              }
+            })}
+          >
+            <div class="cf-account-picker">
+              <p class="cf-account-picker-lede">
+                Your Cloudflare login reaches more than one account. Publishing and the assistant
+                both run against the one you pick; you can change it in Preferences › Accounts.
+              </p>
+              ${listTpl()}
+            </div>
+          </sp-dialog-wrapper>
+        `;
+      }
+
+      void load();
+      return build();
+    },
+    { region: overlayRegion("dialog", "cf-accounts") },
+  );
+}

package/styles/shell.css

@@ -800,6 +800,13 @@
   max-width: 140px;
   min-width: 0;
 }
+/* The chat-only-model note, under the picker that caused it. Advisory weight on purpose: the
+   assistant still answers, it just cannot edit. */
+.ai-composer-note {
+  color: var(--fg-dim);
+  font-size: var(--spectrum-font-size-50, 11px);
+  line-height: 1.3;
+}
 /* Sessions list */
 .ai-sessions {
   flex: 1 1 0;
@@ -1375,6 +1382,35 @@
   font-size: var(--spectrum-font-size-50, 11px);
   color: var(--fg-dim);
 }
+/* The account picker borrows `.prefs-account` for its rows on purpose — it is the same object in a
+   different frame, and a second row style would drift from this one. Only its own chrome is here. */
+.cf-account-picker {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  min-width: 320px;
+}
+.cf-account-picker-lede {
+  margin: 0;
+  color: var(--fg-dim);
+  font-size: var(--spectrum-font-size-75, 12px);
+}
+.cf-account-picker-empty {
+  margin: 0;
+  color: var(--fg-dim);
+  font-size: var(--spectrum-font-size-75, 12px);
+}
+.cf-account-picker-error {
+  margin: 0;
+  color: var(--danger);
+  font-size: var(--spectrum-font-size-75, 12px);
+}
+.prefs-account-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+}
 .prefs-keys {
   display: flex;
   flex-direction: column;