@jxsuite/studio 2.0.0 → 2.0.1

package/src/panels/ai-panel.ts

@@ -16,14 +16,14 @@
  * @license MIT
  */
 
-import { html, render as litRender, nothing } from "lit-html";
+import { html, render as litRender } from "lit-html";
 import type { TemplateResult } from "lit-html";
-import { getPlatform } from "../platform";
 import { effect, effectScope } from "../reactivity";
 import { createDocumentAssistant } from "../services/document-assistant";
-import { hasOpenAiKey, setOpenAiKey } from "../services/ai-settings";
-import { fetchAvailableModels, isManagedProxy, isProxyConfigured } from "../services/ai-models";
+import { setOpenAiKey } from "../services/ai-settings";
+import { hasAiCredentials } from "../services/ai-models";
 import { createAiCredentialsForm } from "../ui/ai-credentials-form";
+import { createManagedConnect } from "../ui/ai-managed-connect";
 import { clearMarkdownCache } from "./ai-chat/chat-markdown";
 import { renderChatHeader, renderMessageList } from "./ai-chat/chat-view";
 import { createComposer } from "./ai-chat/composer";
@@ -38,23 +38,6 @@ let mounted = false;
 /** Whether the OpenAI key form is showing (gate when no key, or re-edit via the gear). */
 let keyEditing = false;
 
-/**
- * One-time proxy probe: managed platforms (cloud Workers AI) and env-keyed dev servers report
- * `configured` from /models, unlocking the assistant without a locally stored key. Fired lazily on
- * the first gated render.
- */
-let proxyProbe: Promise<void> | null = null;
-
-function ensureProxyProbe() {
-  proxyProbe ??= fetchAvailableModels({ force: true })
-    .catch(() => {
-      // Unreachable proxy — the key gate stays up.
-    })
-    .then(() => {
-      scheduleAiRender();
-    });
-}
-
 /** Which pane the panel shows once the key gate is passed. */
 let view: "chat" | "sessions" = "chat";
 
@@ -171,56 +154,8 @@ function startEditApiKey() {
 
 // ─── Managed Cloudflare connect (Workers AI) ─────────────────────────────────
 
-let cfConnectBusy = false;
-let cfConnectError = "";
-
-/**
- * Managed platforms broker Workers AI on the user's own Cloudflare account: offer connecting it as
- * the keyless alternative whenever the proxy says managed-but-unconfigured and the platform can run
- * the hosted OAuth flow (the PAL seam — desktop shells can implement cfConnect later).
- */
-function canOfferManagedConnect(): boolean {
-  return isManagedProxy() && !isProxyConfigured() && Boolean(getPlatform().cfConnect);
-}
-
-async function connectCloudflareForAi() {
-  if (cfConnectBusy) {
-    return;
-  }
-  cfConnectBusy = true;
-  cfConnectError = "";
-  scheduleAiRender();
-  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 {
-      cfConnectError = "Cloudflare connection was not completed.";
-    }
-  } catch (error) {
-    cfConnectError = error instanceof Error ? error.message : String(error);
-  }
-  cfConnectBusy = false;
-  scheduleAiRender();
-}
-
-function renderManagedConnect() {
-  return html`
-    <div class="ai-managed-connect">
-      <div>Use Workers AI on your own Cloudflare account — no API key needed.</div>
-      <sp-button size="s" ?disabled=${cfConnectBusy} @click=${() => void connectCloudflareForAi()}>
-        ${cfConnectBusy ? "Connecting…" : "Connect Cloudflare"}
-      </sp-button>
-      ${
-        cfConnectError
-          ? html`<div class="ai-managed-connect-error">${cfConnectError}</div>`
-          : nothing
-      }
-      <div class="ai-managed-connect-divider">— or bring your own key —</div>
-    </div>
-  `;
-}
+/** Shared with the New Project modal's gates — see ui/ai-managed-connect.ts. */
+const managedConnect = createManagedConnect({ requestRender: scheduleAiRender });
 
 /**
  * The credentials gate: on managed platforms a keyless "Connect Cloudflare" (Workers AI) option
@@ -229,9 +164,7 @@ function renderManagedConnect() {
 function renderKeyGate() {
   return html`
     <div class="ai-tab-body">
-      <div class="ai-status-center">
-        ${canOfferManagedConnect() ? renderManagedConnect() : nothing} ${credsForm.render()}
-      </div>
+      <div class="ai-status-center">${managedConnect.render()} ${credsForm.render()}</div>
     </div>
   `;
 }
@@ -377,9 +310,9 @@ export function renderAiPanelTemplate(): TemplateResult {
   /* The document assistant authenticates via the AI proxy. Gate the chat
      behind the key form until a key is stored locally OR the proxy reports
      itself configured (managed platforms, env-keyed dev servers). */
-  if ((!hasOpenAiKey() && !isProxyConfigured()) || keyEditing) {
+  if (!hasAiCredentials() || keyEditing) {
     if (!keyEditing) {
-      ensureProxyProbe();
+      managedConnect.ensureProbe();
     }
     return renderKeyGate();
   }

package/src/services/ai-models.ts

@@ -13,7 +13,7 @@
 
 import type { AiModelsResponse } from "@jxsuite/protocol";
 import { getPlatform } from "../platform";
-import { getBaseUrl, getOpenAiKey } from "./ai-settings";
+import { getBaseUrl, getOpenAiKey, hasOpenAiKey } from "./ai-settings";
 
 export interface AiModel {
   id: string;
@@ -25,12 +25,56 @@ let proxyConfigured = false;
 let proxyManaged = false;
 let proxyDefaultModel = "";
 
+/**
+ * One-shot capability probe shared by every credentials gate, plus the hosts to repaint when it
+ * settles. Managed platforms (cloud Workers AI) and env-keyed dev servers report their state from
+ * /models, so the gate cannot know which paths to offer until this has run once.
+ */
+let proxyProbe: Promise<void> | null = null;
+const probeListeners = new Set<() => void>();
+
 /** Drop the cached model list (call after credentials/endpoint changes). */
 export function invalidateModelCache() {
   cache = null;
   proxyConfigured = false;
   proxyManaged = false;
   proxyDefaultModel = "";
+  /* The probe's result IS the three flags above. Clearing them while keeping the settled promise
+     would strand every gate on a permanent "unconfigured, unmanaged" reading — ensureProxyProbe
+     would no-op forever and the managed option would vanish until a full reload. */
+  proxyProbe = null;
+}
+
+/**
+ * Run the capability probe once, repainting `onSettled` when it lands. Idempotent: concurrent and
+ * repeated callers share the single in-flight fetch, and every registered host is notified. Probe
+ * failure is not surfaced — an unreachable proxy simply leaves the gate showing the key form.
+ *
+ * @param {() => void} [onSettled] - Host re-render scheduler, registered for this and later probes.
+ */
+export function ensureProxyProbe(onSettled?: () => void) {
+  if (onSettled) {
+    probeListeners.add(onSettled);
+  }
+  proxyProbe ??= fetchAvailableModels({ force: true })
+    .catch(() => {
+      // Unreachable proxy — the key gate stays up.
+    })
+    .then(() => {
+      for (const notify of probeListeners) {
+        notify();
+      }
+    });
+}
+
+/**
+ * Whether the assistant can run at all: a key stored in this browser, or a backend that holds
+ * credentials itself (managed cloud platforms, env-keyed dev servers). Every credentials gate must
+ * use this rather than `hasOpenAiKey()` alone — gating on the local key locks managed-platform
+ * users out of features their own Cloudflare account is already paying for.
+ */
+export function hasAiCredentials(): boolean {
+  return hasOpenAiKey() || isProxyConfigured();
 }
 
 /**

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

@@ -0,0 +1,107 @@
+/// <reference lib="dom" />
+/**
+ * Ai-managed-connect.ts — the keyless "Connect Cloudflare" (Workers AI) option for credentials
+ * gates.
+ *
+ * Companion to ai-credentials-form.ts: managed platforms broker Workers AI on the user's OWN
+ * Cloudflare account, so a gate that renders only the key form strands them — they have no key, and
+ * nothing on screen offers the hosted OAuth flow that would give them working AI. Both hosts that
+ * gate on credentials (the assistant sidebar and the New Project modal's Import/Agent tabs) embed
+ * this alongside the form so both real paths are always on offer.
+ *
+ * State is per-instance (closure-scoped) like the credentials form; the capability probe behind
+ * `ensureProbe` is shared module-wide by services/ai-models.ts.
+ *
+ * @docs studio/ai
+ * @license MIT
+ */
+
+import { html, nothing } from "lit-html";
+import type { TemplateResult } from "lit-html";
+import { getPlatform, hasPlatform } from "../platform";
+import {
+  ensureProxyProbe,
+  fetchAvailableModels,
+  isManagedProxy,
+  isProxyConfigured,
+} from "../services/ai-models";
+
+export interface ManagedConnectOptions {
+  /** Host re-render scheduler — called on connect start/finish and when the probe settles. */
+  requestRender: () => void;
+}
+
+export interface ManagedConnect {
+  /** Whether the keyless path is available and worth offering right now. */
+  canOffer: () => boolean;
+  /** Fire the shared capability probe, repainting the host when it settles. */
+  ensureProbe: () => void;
+  /** The CTA block, or `nothing` when the platform cannot broker AI. */
+  render: () => TemplateResult | typeof nothing;
+}
+
+/**
+ * Create a managed-connect controller bound to a host's render scheduler.
+ *
+ * @param {ManagedConnectOptions} opts
+ * @returns {ManagedConnect}
+ */
+export function createManagedConnect(opts: ManagedConnectOptions): ManagedConnect {
+  let busy = false;
+  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.
+   */
+  function canOffer(): boolean {
+    return (
+      isManagedProxy() && !isProxyConfigured() && hasPlatform() && Boolean(getPlatform().cfConnect)
+    );
+  }
+
+  function ensureProbe() {
+    ensureProxyProbe(opts.requestRender);
+  }
+
+  async function connect() {
+    if (busy) {
+      return;
+    }
+    busy = true;
+    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.";
+      }
+    } catch (error) {
+      connectError = error instanceof Error ? error.message : String(error);
+    }
+    busy = false;
+    opts.requestRender();
+  }
+
+  function render(): TemplateResult | typeof nothing {
+    if (!canOffer()) {
+      return nothing;
+    }
+    return html`
+      <div class="ai-managed-connect">
+        <div>Use Workers AI on your own Cloudflare account — no API key needed.</div>
+        <sp-button size="s" ?disabled=${busy} @click=${() => void connect()}>
+          ${busy ? "Connecting…" : "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>
+      </div>
+    `;
+  }
+
+  return { canOffer, ensureProbe, render };
+}