@jxsuite/studio 4.1.0 → 5.1.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,14 +14,18 @@
  * 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,
@@ -30,14 +34,17 @@ import {
   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";
-
-/** 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. */
+import type {
+  ModelPickerRow,
+  ModelPickerSurface,
+  ModelPickerView,
+  ModelPickerWidth,
+} from "../surfaces/ai-model-picker";
+
+/** 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. */
@@ -70,14 +77,26 @@ 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 `""`. */
@@ -110,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;
   }
@@ -133,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
@@ -156,28 +179,33 @@ 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}>${itemLabel(m)}</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 {

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

@@ -16,17 +16,19 @@
  * 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 { 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 { 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. */
@@ -38,6 +40,11 @@ function canPick(): boolean {
   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.
  *
@@ -51,150 +58,78 @@ 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;
+  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;
 
-      function finish(account: CfAccountSummary | null): void {
-        settled = true;
-        done(account);
+    /* 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);
+    };
 
-      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> {
+      handle.update({ failure: "", loading: true });
+      let failure = "";
+      try {
+        accounts = (await getPlatform().cfAccounts?.()) ?? [];
+      } catch (error) {
+        accounts = [];
+        failure = reasonOf(error);
       }
-
-      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();
+      /* `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(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);
+    async function choose(id: string): Promise<void> {
+      const account = accounts.find((candidate) => candidate.id === id);
+      if (!account || choosing !== "") {
+        return;
       }
-
-      function listTpl(): TemplateResult | typeof nothing {
-        if (loading) {
-          return html`<p class="cf-account-picker-empty">Reading your Cloudflare accounts…</p>`;
+      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) });
         }
-        /* 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>
-        `;
+        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);
+    }
 
-      void load();
-      return build();
-    },
-    { region: overlayRegion("dialog", "cf-accounts") },
-  );
+    const handle = openCfAccountPickerSurface({
+      layer: layerHost("dialog"),
+      onChoose: (id) => {
+        void choose(id);
+      },
+      onClosed: () => {
+        finish(null);
+      },
+      onRetry: () => {
+        void load();
+      },
+    });
+    void load();
+  });
 }