@jxsuite/studio 4.0.0 → 5.0.0

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

@@ -1,6 +1,6 @@
 /// <reference lib="dom" />
 /**
- * Ai-model-picker.ts — the provider's model catalogue as one `sp-picker`, for every surface that
+ * Ai-model-picker.ts — the provider's model catalogue as one control, for every surface that
  * chooses a model.
  *
  * It was private to `panels/ai-chat/composer.ts`, which was correct while the chat composer was the
@@ -14,31 +14,54 @@
  * and the catalogue becomes UNAVAILABLE rather than stale. Holding it in a closure is what once let
  * the picker offer one provider's models while another was configured.
  *
+ * This module is the FLOW; `surfaces/ai-model-picker.json` is what it draws. `render()` hands back
+ * the surface's own host element rather than a template, because both hosts are still lit templates
+ * that interpolate the picker into a row of their own — see `surfaces/ai-model-picker.ts` for why
+ * that element is the mount point and why re-rendering the row cannot disturb it.
+ *
  * A closure factory (precedent: `createComposer`, `createAiCredentialsForm`) so two hosts never
  * share a loading flag or a failed-fetch record.
  *
+ * @docs studio/ai
  * @license MIT
  */
 
-import { html, nothing } from "lit-html";
-import { live } from "lit-html/directives/live.js";
 import {
   aiConnection,
   cachedModels,
   fetchAvailableModels,
+  modelToolSupport,
   preferredModel,
 } from "../services/ai-models";
 import { setModel } from "../services/ai-settings";
+import { createModelPickerSurface } from "../surfaces/ai-model-picker";
 
-import type { TemplateResult } from "lit-html";
 import type { AiCredentials } from "../services/ai-models";
+import type {
+  ModelPickerRow,
+  ModelPickerSurface,
+  ModelPickerView,
+  ModelPickerWidth,
+} from "../surfaces/ai-model-picker";
 
-/** The `sp-menu-item` value that means "try listing again" rather than "select this model". */
-export const RETRY_MODELS = "__retry_models__";
-
-/** The `sp-menu-item` value of the disabled placeholder shown during the first fetch. */
+/** The row value of the disabled placeholder shown during the first listing. */
 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;
@@ -54,18 +77,36 @@ export interface ModelPickerOptions {
    * the assistant.
    */
   onChange?: (id: string) => void;
-  /** Extra class on the `sp-picker`, so a host can size it without touching this module. */
-  className?: string;
-  /** Picker size; `"s"` (the composer's) by default. */
-  size?: "s" | "m";
+  /**
+   * Which of the surface's two shapes to draw. `"compact"` (the composer's) by default; the Import
+   * form's field column asks for `"fill"`.
+   *
+   * This replaced a `className`. A document styles through `part` rather than through a class
+   * (`ui.md` §3.1), so the two rules the hosts used to supply are one attribute the document
+   * branches on — and a host can no longer reach in and restyle a control it does not own.
+   */
+  width?: ModelPickerWidth;
+  /** Control size; `"sm"` (the composer's) by default. */
+  size?: "sm" | "md";
 }
 
 export interface ModelPicker {
-  render: () => TemplateResult;
+  /**
+   * The picker's host element.
+   *
+   * A host interpolates it into its own lit template, which inserts a Node it is handed as-is.
+   */
+  render: () => HTMLElement;
   /** Whether a fetch is in flight — for a host that wants to disable a submit button. */
   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;
 }
 
 /**
@@ -88,6 +129,9 @@ export function createModelPicker(opts: ModelPickerOptions): ModelPicker {
    */
   let attempted: AiCredentials | null = null;
 
+  /** Made on the first render, and kept for the life of the controller. */
+  let surface: ModelPickerSurface | null = null;
+
   function sameConnection(a: AiCredentials | null, b: AiCredentials): boolean {
     return a !== null && a.apiKey === b.apiKey && a.baseUrl === b.baseUrl;
   }
@@ -111,22 +155,23 @@ export function createModelPicker(opts: ModelPickerOptions): ModelPicker {
       });
   }
 
-  function onPickerChange(e: Event) {
-    const { value } = e.target as HTMLInputElement;
-    if (value === RETRY_MODELS) {
-      attempted = null;
-      ensureModels(true);
-      // Re-render so the picker snaps back to the current model instead of showing "Retry".
-      opts.requestRender();
-      return;
-    }
+  /** List again, from the beginning: a refusal is forgotten so the same credentials are re-asked. */
+  function retry() {
+    attempted = null;
+    ensureModels(true);
+    opts.requestRender();
+  }
+
+  function choose(value: string) {
+    /* The placeholder is disabled, so a reader cannot land on it; a host driving the control
+       directly still can, and a state is not a model. */
     if (value && value !== LOADING_MODELS) {
       onChange(value);
     }
   }
 
-  function render(): TemplateResult {
-    ensureModels();
+  /** The rows to offer — what the catalogue holds, plus the one state that is worth a row. */
+  function rows(): ModelPickerRow[] {
     const current = getModel();
     const listed = cachedModels(aiConnection()) ?? [];
     /* A catalogue that does not contain the current model still has to show it selected — an
@@ -134,29 +179,39 @@ export function createModelPicker(opts: ModelPickerOptions): ModelPicker {
     const items = listed.some((m) => m.id === current)
       ? listed
       : [{ id: current, name: current }, ...listed];
-    return html`
-      <sp-picker
-        size=${opts.size ?? "s"}
-        quiet
-        class=${opts.className ?? "ai-model-picker"}
-        title=${failure ? `Couldn't load models: ${failure}` : "Model"}
-        .value=${live(current)}
-        @change=${onPickerChange}
-      >
-        ${items.map((m) => html`<sp-menu-item value=${m.id}>${m.name}</sp-menu-item>`)}
-        ${
-          loading
-            ? html`<sp-menu-item disabled value=${LOADING_MODELS}>Loading models…</sp-menu-item>`
-            : nothing
-        }
-        ${
-          failure
-            ? html`<sp-menu-item value=${RETRY_MODELS}>Retry loading models</sp-menu-item>`
-            : nothing
-        }
-      </sp-picker>
-    `;
+    const offered: ModelPickerRow[] = items.map((m) => ({ label: itemLabel(m), value: m.id }));
+    if (loading) {
+      offered.push({ disabled: true, label: "Loading models…", value: LOADING_MODELS });
+    }
+    return offered;
+  }
+
+  /** What the picker says right now — the whole of what the surface is told. */
+  function view(): ModelPickerView {
+    return {
+      failure,
+      hint: failure ? `Couldn't load models: ${failure}` : "Model",
+      options: rows(),
+      size: opts.size ?? "sm",
+      value: getModel(),
+      width: opts.width ?? "compact",
+    };
+  }
+
+  function render(): HTMLElement {
+    ensureModels();
+    if (surface) {
+      surface.update(view());
+    } else {
+      surface = createModelPickerSurface(view(), { choose, retry });
+    }
+    return surface.host;
   }
 
-  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,135 @@
+/// <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.
+ *
+ * The dialog itself is `src/surfaces/cf-account-picker.json`, a `jx-dialog`; this module is the
+ * flow around it. It used to be a lit template rendered through `showDialog`, with its own
+ * `repaint()` re-rendering the whole body into the slot's parent whenever anything landed — the
+ * surface is reactive now, so a listing that arrives late, or a refusal, changes only what it names.
+ *
+ * @docs studio/ai
+ * @license MIT
+ */
+
+import { getPlatform, hasPlatform } from "../platform";
+import { notifyCredentialsChanged } from "../settings/preferences-accounts";
+import { openCfAccountPickerSurface } from "../surfaces/cf-account-picker";
+import { layerHost } from "./layers";
+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);
+}
+
+/** What a thrown thing says, for a line the reader has to act on. */
+function reasonOf(error: unknown): string {
+  return error instanceof Error ? error.message : String(error);
+}
+
+/**
+ * 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 new Promise<CfAccountSummary | null>((resolve) => {
+    let accounts: CfAccountSummary[] = [];
+    /** The id being committed. Held here as well as in the scope: it is what guards a second press. */
+    let choosing = "";
+    let settled = false;
+
+    /* Resolve once, and take the dialog down with it. `close()` provokes the platform's own
+       `close`, which comes back as `onClosed` — so the guard is what keeps a chosen account from
+       being overwritten by the dismissal its own commit caused. */
+    const finish = (account: CfAccountSummary | null): void => {
+      if (settled) {
+        return;
+      }
+      settled = true;
+      handle.close();
+      resolve(account);
+    };
+
+    async function load(): Promise<void> {
+      handle.update({ failure: "", loading: true });
+      let failure = "";
+      try {
+        accounts = (await getPlatform().cfAccounts?.()) ?? [];
+      } catch (error) {
+        accounts = [];
+        failure = reasonOf(error);
+      }
+      /* `done` released the slot, so a late listing landing after a dismissal would otherwise be a
+         write into a disposed surface. The lit version guarded the same moment by resolving its
+         host lazily and finding none. */
+      if (settled) {
+        return;
+      }
+      handle.update({ accounts, failure, loading: false });
+    }
+
+    async function choose(id: string): Promise<void> {
+      const account = accounts.find((candidate) => candidate.id === id);
+      if (!account || choosing !== "") {
+        return;
+      }
+      choosing = id;
+      handle.update({ choosing: id, failure: "" });
+      try {
+        await getPlatform().cfSelectAccount?.({ id: account.id, name: account.name });
+      } catch (error) {
+        choosing = "";
+        if (!settled) {
+          /* The list survives a refusal, and the reason sits above it: listing again is not what
+             would fix an account the broker will not accept, so this state offers no retry. */
+          handle.update({ choosing: "", failure: reasonOf(error) });
+        }
+        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);
+    }
+
+    const handle = openCfAccountPickerSurface({
+      layer: layerHost("dialog"),
+      onChoose: (id) => {
+        void choose(id);
+      },
+      onClosed: () => {
+        finish(null);
+      },
+      onRetry: () => {
+        void load();
+      },
+    });
+    void load();
+  });
+}