@jxsuite/studio 2.4.3 → 4.0.0

package/src/ui/ai-credentials-form.ts

@@ -19,16 +19,15 @@
  */
 
 import { html, nothing } from "lit-html";
+import { live } from "lit-html/directives/live.js";
 import type { TemplateResult } from "lit-html";
-import { fetchAvailableModels, invalidateModelCache } from "../services/ai-models";
+import { fetchAvailableModels } from "../services/ai-models";
 import {
   getBaseUrl,
-  getModel,
   getOpenAiKey,
   hasOpenAiKey,
-  setBaseUrl,
-  setModel,
-  setOpenAiKey,
+  saveAiProvider,
+  storedModel,
 } from "../services/ai-settings";
 
 export interface AiCredentialsFormOptions {
@@ -64,11 +63,23 @@ export function createAiCredentialsForm(opts: AiCredentialsFormOptions): AiCrede
   let modelsLoading = false;
   let modelsError = "";
 
-  /** Open the form pre-filled with the current settings, and load the model list. */
-  function startEdit() {
+  /**
+   * Load the drafts from what is stored.
+   *
+   * The model comes from {@link storedModel} rather than `getModel()`, so a user who has never
+   * picked one drafts an empty field instead of the `"gpt-4o"` default. Saving a prefilled default
+   * writes a choice nobody made, and `jx.ai.model: "gpt-4o"` is exactly what a broken install was
+   * left holding.
+   */
+  function loadDrafts() {
     keyDraft = getOpenAiKey();
     baseUrlDraft = getBaseUrl();
-    modelDraft = getModel();
+    modelDraft = storedModel();
+  }
+
+  /** Open the form pre-filled with the current settings, and load the model list. */
+  function startEdit() {
+    loadDrafts();
     opts.requestRender();
     // Auto-fetch available models if not already loaded.
     if (availableModels.length === 0 && !modelsLoading) {
@@ -76,26 +87,33 @@ export function createAiCredentialsForm(opts: AiCredentialsFormOptions): AiCrede
     }
   }
 
-  /** Persist the drafted key + endpoint + model and notify the host. */
+  /**
+   * Persist the drafted key + endpoint + model and notify the host.
+   *
+   * **Re-seeds the drafts; it must never blank them.** Preferences is a place rather than a wizard
+   * step, so the sheet stays open across Save and `startEdit` is not called again — which meant
+   * every field emptied the instant a save succeeded. That reads as "it didn't take", and the
+   * obvious response to it destroyed the credentials: a blank draft is what
+   * `setOpenAiKey`/`setBaseUrl` treat as _clear_, so pressing Save a second time on the emptied
+   * form deleted the key and endpoint that the first press had just stored. Reading back through
+   * the getters also shows what was actually kept — trimmed, and with the endpoint's trailing slash
+   * stripped — rather than what was typed.
+   */
   function save() {
-    setOpenAiKey(keyDraft);
-    setBaseUrl(baseUrlDraft);
-    setModel(modelDraft);
-    keyDraft = "";
-    baseUrlDraft = "";
-    modelDraft = "";
-    // Clear fetched models so they're re-fetched with the new credentials next time.
-    availableModels = [];
-    invalidateModelCache();
+    saveAiProvider({ apiKey: keyDraft, baseUrl: baseUrlDraft, model: modelDraft });
+    loadDrafts();
+    modelsError = "";
+    /* The fetched list stays: it was listed under exactly these credentials, and dropping it
+       collapsed the model combobox back to a free-text field on every save. The module cache is
+       dropped by ai-models' own settings subscription, so this form does not have to remember to. */
     opts.onSaved?.();
     opts.requestRender();
   }
 
   /** Dismiss the form without saving (only offered when a key already exists). */
   function cancel() {
-    keyDraft = "";
-    baseUrlDraft = "";
-    modelDraft = "";
+    loadDrafts();
+    modelsError = "";
     opts.onCancel?.();
     opts.requestRender();
   }
@@ -104,6 +122,11 @@ export function createAiCredentialsForm(opts: AiCredentialsFormOptions): AiCrede
    * Fetch available models via src/services/ai-models.ts, preferring the in-form drafts over the
    * stored settings so the list reflects the credentials being edited. Always forces past the
    * module cache — this runs on explicit user action (or first open) with possibly-new drafts.
+   *
+   * Both lines below read draft-first. The key used to read stored-first, against this paragraph
+   * and against the line beside it: editing a key in place and pressing Fetch models listed the OLD
+   * key's models, and — worse — a form whose drafts had been blanked still fetched successfully
+   * from storage, which is what made an emptied form look like it was working.
    */
   async function fetchModels() {
     modelsLoading = true;
@@ -111,8 +134,10 @@ export function createAiCredentialsForm(opts: AiCredentialsFormOptions): AiCrede
     opts.requestRender();
     try {
       availableModels = await fetchAvailableModels({
-        apiKey: getOpenAiKey() || keyDraft,
-        baseUrl: baseUrlDraft || getBaseUrl(),
+        credentials: {
+          apiKey: keyDraft || getOpenAiKey(),
+          baseUrl: baseUrlDraft || getBaseUrl(),
+        },
         force: true,
       });
     } catch (error: unknown) {
@@ -144,7 +169,7 @@ export function createAiCredentialsForm(opts: AiCredentialsFormOptions): AiCrede
           type="password"
           size="s"
           placeholder="sk-… or any compatible key"
-          .value=${keyDraft}
+          .value=${live(keyDraft)}
           @input=${(e: Event) => {
             keyDraft = (e.target as HTMLInputElement).value;
           }}
@@ -157,7 +182,7 @@ export function createAiCredentialsForm(opts: AiCredentialsFormOptions): AiCrede
                   class="ai-creds-field"
                   size="s"
                   allows-custom-value
-                  .value=${modelDraft}
+                  .value=${live(modelDraft)}
                   @change=${(e: Event) => {
                     modelDraft = (e.target as HTMLInputElement).value;
                   }}
@@ -175,7 +200,7 @@ export function createAiCredentialsForm(opts: AiCredentialsFormOptions): AiCrede
                   class="ai-creds-field"
                   size="s"
                   placeholder="Model ID (e.g. gpt-4o, claude-sonnet-4-20250514, etc.)"
-                  .value=${modelDraft}
+                  .value=${live(modelDraft)}
                   @input=${(e: Event) => {
                     modelDraft = (e.target as HTMLInputElement).value;
                   }}
@@ -198,7 +223,7 @@ export function createAiCredentialsForm(opts: AiCredentialsFormOptions): AiCrede
           class="ai-creds-field"
           size="s"
           placeholder="Endpoint (optional, e.g. http://localhost:11434/v1)"
-          .value=${baseUrlDraft}
+          .value=${live(baseUrlDraft)}
           @input=${(e: Event) => {
             baseUrlDraft = (e.target as HTMLInputElement).value;
           }}

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

@@ -0,0 +1,162 @@
+/// <reference lib="dom" />
+/**
+ * Ai-model-picker.ts — the provider's model catalogue as one `sp-picker`, 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
+ * only place a model could be chosen. The New Project **Import** source now chooses one too — and
+ * that run spends more tokens than any single chat turn — so the choice needed a second host. A
+ * copy would have been two implementations of the invariant below, which is exactly the kind that
+ * only breaks in the copy nobody looked at.
+ *
+ * **The list is never held privately.** It is read from `cachedModels(credentials)` on every
+ * render, so a list can only ever be shown for the credentials it was listed under: change the key
+ * 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.
+ *
+ * A closure factory (precedent: `createComposer`, `createAiCredentialsForm`) so two hosts never
+ * share a loading flag or a failed-fetch record.
+ *
+ * @license MIT
+ */
+
+import { html, nothing } from "lit-html";
+import { live } from "lit-html/directives/live.js";
+import {
+  aiConnection,
+  cachedModels,
+  fetchAvailableModels,
+  preferredModel,
+} from "../services/ai-models";
+import { setModel } from "../services/ai-settings";
+
+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. */
+export const LOADING_MODELS = "__loading__";
+
+export interface ModelPickerOptions {
+  /** Host re-render scheduler — called whenever a fetch settles. */
+  requestRender: () => void;
+  /**
+   * The model to show as selected. Defaults to the stored/proxy-preferred one, which is what the
+   * chat composer wants; the Import form passes its own draft, which is not a stored setting until
+   * the run starts.
+   */
+  getModel?: () => string;
+  /**
+   * Where a choice goes. Defaults to `setModel` (the roaming application preference). The Import
+   * form passes its own setter, because choosing a model for one import must not silently retarget
+   * 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";
+}
+
+export interface ModelPicker {
+  render: () => TemplateResult;
+  /** 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;
+}
+
+/**
+ * Create a model picker bound to a host's render scheduler.
+ *
+ * @param {ModelPickerOptions} opts
+ * @returns {ModelPicker}
+ */
+export function createModelPicker(opts: ModelPickerOptions): ModelPicker {
+  const getModel = opts.getModel ?? preferredModel;
+  const onChange = opts.onChange ?? setModel;
+
+  let loading = false;
+  let failure = "";
+
+  /**
+   * The credentials the last fetch was made FOR, so a failure is not retried on every render.
+   *
+   * The list itself is deliberately not held here — see the module docblock.
+   */
+  let attempted: AiCredentials | null = null;
+
+  function sameConnection(a: AiCredentials | null, b: AiCredentials): boolean {
+    return a !== null && a.apiKey === b.apiKey && a.baseUrl === b.baseUrl;
+  }
+
+  function ensureModels(force = false) {
+    const credentials = aiConnection();
+    const settled = cachedModels(credentials) !== null || sameConnection(attempted, credentials);
+    if (loading || (settled && !force)) {
+      return;
+    }
+    loading = true;
+    failure = "";
+    attempted = credentials;
+    fetchAvailableModels({ credentials, force })
+      .catch((error: unknown) => {
+        failure = (error as Error).message || "Failed to fetch models";
+      })
+      .finally(() => {
+        loading = false;
+        opts.requestRender();
+      });
+  }
+
+  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;
+    }
+    if (value && value !== LOADING_MODELS) {
+      onChange(value);
+    }
+  }
+
+  function render(): TemplateResult {
+    ensureModels();
+    const current = getModel();
+    const listed = cachedModels(aiConnection()) ?? [];
+    /* A catalogue that does not contain the current model still has to show it selected — an
+       unlisted id is the normal case for a self-hosted or newly released model. */
+    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>
+    `;
+  }
+
+  return { error: () => failure, isLoading: () => loading, render };
+}

package/src/ui/choice-field.ts

@@ -0,0 +1,72 @@
+/**
+ * `choiceField` — one labelled choice, rendered the way every Spectrum picker in Studio is.
+ *
+ * It exists so the New File dialog's format picker and the Convert dialog's target picker are the
+ * SAME control rather than two that drift: same divider idiom for a sentinel row, same `live()`
+ * guard, same "one kind is not a choice" collapse to static text.
+ *
+ * **It imports lit only.** Both callers live in modules the other imports — `ui/layers.ts` is
+ * imported by `format/convert-file.ts`, which also wants this fragment — so a shared control that
+ * reached into either would be a cycle, and `import/no-cycle` is an error here.
+ *
+ * `.value=${live(...)}` is not stylistic. `sp-picker` writes its own `value` when the reader picks
+ * a row, so lit's dirty check sees the value it last committed and skips the re-commit that would
+ * put the control back where the model says it is. `scripts/check-lit-conventions.ts` fails on the
+ * unguarded form.
+ */
+
+import { html, nothing } from "lit-html";
+import { live } from "lit-html/directives/live.js";
+import type { TemplateResult } from "lit-html";
+
+/** One row of a {@link choiceField}. */
+export interface ChoiceOption {
+  value: string;
+  label: string;
+  /** Draw an `sp-menu-divider` immediately before this row — how a sentinel row is set apart. */
+  dividerBefore?: boolean;
+}
+
+/** What a {@link choiceField} renders and reports. */
+export interface ChoiceSpec {
+  label: string;
+  options: readonly ChoiceOption[];
+  value: string;
+  onChange: (next: string) => void;
+}
+
+/**
+ * A labelled picker, or static text when there is nothing to choose.
+ *
+ * The collapse is the rule `panels/pane-context.ts` already states about editor kinds: **one kind
+ * is not a choice**. A picker whose menu holds a single row is a control that cannot do anything,
+ * and drawing it invites the reader to open it and find out.
+ *
+ * @param spec - The label, the rows, the current value and the change sink.
+ * @returns The fragment, for a caller's own template.
+ */
+export function choiceField(spec: ChoiceSpec): TemplateResult {
+  const current = spec.options.find((option) => option.value === spec.value);
+  if (spec.options.length < 2) {
+    return html`<div class="choice-row">
+      <sp-field-label size="s">${spec.label}</sp-field-label>
+      <span class="choice-static">${current?.label ?? spec.value}</span>
+    </div>`;
+  }
+  return html`<div class="choice-row">
+    <sp-field-label size="s">${spec.label}</sp-field-label>
+    <sp-picker
+      size="s"
+      label=${spec.label}
+      .value=${live(spec.value)}
+      @change=${(e: Event) => spec.onChange((e.target as HTMLInputElement).value)}
+    >
+      ${spec.options.map(
+        (option) =>
+          html`${
+              option.dividerBefore === true ? html`<sp-menu-divider></sp-menu-divider>` : nothing
+            }<sp-menu-item value=${option.value}>${option.label}</sp-menu-item>`,
+      )}
+    </sp-picker>
+  </div>`;
+}

package/src/ui/layers.ts

@@ -15,10 +15,12 @@
 import { html, render as litRender, nothing } from "lit-html";
 import { ref } from "lit-html/directives/ref.js";
 import { repeat } from "lit-html/directives/repeat.js";
+import { choiceField } from "./choice-field";
 import { overlayRegion, REGION_ATTR } from "./regions";
 import { dismiss, toasts } from "../services/notify";
 import { activeRegistry } from "../commands/active-registry";
 import { effect, effectScope } from "../reactivity";
+import type { ChoiceOption } from "./choice-field";
 import type { Notification, Severity } from "../services/notify";
 import type { EffectScope } from "@vue/reactivity";
 import type { TemplateResult } from "lit-html";
@@ -338,6 +340,31 @@ export function showSaveDiscardDialog(
   );
 }
 
+/**
+ * A picker rendered above the field, whose selection the dialog OWNS.
+ *
+ * Owned, not merely displayed: the choice reaches `validate` as its second argument, and picking a
+ * row re-runs it. That is the whole reason this lives here rather than being smuggled in through
+ * `message` — `check` and `rerender` are private to {@link showPromptDialog}, so a caller-built
+ * control could change the selection but could never make the field's refusal catch up with it. The
+ * New File dialog's format picker is exactly that case: switching from Markdown to JSON changes
+ * whether the typed name is already taken, with no keystroke to notice.
+ */
+export interface PromptChoice {
+  /** Label above the picker. */
+  label: string;
+  /**
+   * The rows, re-read on EVERY render rather than captured once. A snapshot taken when the options
+   * object is built freezes a list the project can still be loading — the same defect
+   * `content/entry-commands.ts`'s `derivedEnumProperty` exists to prevent one layer up.
+   */
+  options: () => readonly ChoiceOption[];
+  /** Which row starts selected. */
+  initial: string;
+  /** Told what was picked, for a caller keeping its own derived state. */
+  onChange?: (next: string) => void;
+}
+
 /** Options accepted by {@link showPromptDialog}. */
 export interface PromptDialogOptions {
   /** Label on the confirming button. */
@@ -346,17 +373,21 @@ export interface PromptDialogOptions {
   cancelLabel?: string;
   /** Explanatory copy rendered above the text field. */
   message?: string | TemplateResult;
-  /** Placeholder shown while the field is empty. */
-  placeholder?: string;
+  /** Placeholder shown while the field is empty. Read on every render, so it may follow the choice. */
+  placeholder?: string | (() => string);
   /** How much of the pre-filled value to select once the field takes focus. */
   select?: "all" | "stem" | "none";
   /**
    * Validate the raw field value. Return an empty string when valid, or a message to show as
    * negative help text (which also blocks confirmation). Defaults to "must not be blank".
+   *
+   * `chosen` is the {@link PromptChoice} selection, or `""` when the dialog offers no choice.
    */
-  validate?: (value: string) => string;
+  validate?: (value: string, chosen: string) => string;
   /** Pre-filled value. */
   value?: string;
+  /** A picker above the field whose selection this dialog owns. */
+  choice?: PromptChoice;
 }
 
 /**
@@ -375,6 +406,7 @@ export function showPromptDialog(
 ): Promise<string | null> {
   const {
     cancelLabel = "Cancel",
+    choice,
     confirmLabel = "OK",
     message,
     placeholder = "",
@@ -384,12 +416,22 @@ export function showPromptDialog(
   } = opts;
 
   const check = (candidate: string) =>
-    validate ? validate(candidate) : candidate.trim() ? "" : "Enter a value.";
+    validate ? validate(candidate, chosen) : candidate.trim() ? "" : "Enter a value.";
 
   let value = initialValue;
+  let chosen = choice?.initial ?? "";
   let error = "";
   let wrapperEl: HTMLElement | null = null;
   let focusRequested = false;
+  /*
+   * Whether the reader has typed yet.
+   *
+   * A dialog opens with a valid prefill and NO error, and picking a format must not be the thing
+   * that first paints one under a field nobody has touched — "untitled" is not yet a mistake. So a
+   * pick refreshes an error that is already showing and never mints the first one; the confirm
+   * still refuses, because `confirm()` runs `check` unconditionally.
+   */
+  let touched = false;
 
   return showDialog<string | null>((done) => {
     function rerender() {
@@ -411,6 +453,7 @@ export function showPromptDialog(
     }
 
     function onInput(e: Event) {
+      touched = true;
       value = (e.target as HTMLInputElement).value || "";
       const next = check(value);
       if (next !== error) {
@@ -419,6 +462,23 @@ export function showPromptDialog(
       }
     }
 
+    /**
+     * Take a pick, and re-render UNCONDITIONALLY.
+     *
+     * `onInput` re-renders only when the error string changed, which is right for a keystroke: the
+     * template it would rebuild is identical. A pick is not that. It can change the placeholder,
+     * the picker's own selected row, and — for the New File dialog — whether the composed filename
+     * is already taken, all with the error text unchanged. Comparing error strings here would leave
+     * a dialog showing "about.md already exists" after the reader switched the format to JSON.
+     */
+    function onPick(next: string) {
+      chosen = next;
+      choice?.onChange?.(next);
+      const candidate = check(value);
+      error = touched || error ? candidate : "";
+      rerender();
+    }
+
     function onKeydown(e: KeyboardEvent) {
       if (e.key === "Enter") {
         confirm();
@@ -472,9 +532,27 @@ export function showPromptDialog(
             // Spectrum resets <p> margins to 0, so without this the copy sits flush on the field.
             message ? html`<p style="margin:0 0 8px">${message}</p>` : nothing
           }
+          ${
+            /*
+             * Above the field, and in ONE template position in every mode.
+             *
+             * The `sp-textfield` below must never move or be rebuilt by a conditional branch: lit
+             * would commit a new element, `onFieldRef` would fire again, the `focusRequested` latch
+             * would refuse to re-focus it, and the caret would be stranded mid-name. Only the
+             * placeholder, the validation rules and the help text vary between modes.
+             */
+            choice
+              ? choiceField({
+                  label: choice.label,
+                  onChange: onPick,
+                  options: choice.options(),
+                  value: chosen,
+                })
+              : nothing
+          }
           <sp-textfield
             style="width:100%"
-            placeholder=${placeholder}
+            placeholder=${typeof placeholder === "function" ? placeholder() : placeholder}
             value=${value}
             ?invalid=${Boolean(error)}
             @input=${onInput}

package/src/ui/media-picker.ts

@@ -26,12 +26,11 @@ import { debouncedStyleCommit, renderOnly } from "../store";
 import { getLayerSlot, popoverLayerFor } from "./layers";
 import type { LayerKind } from "./layers";
 import { rectOf } from "../utils/geometry";
-import { loopbackAssetSrc } from "../canvas/canvas-origin";
-import { previewAssetSrc } from "../canvas/content-assets";
+import { previewAssetSrc } from "../canvas/asset-refs";
 import {
   IMAGE_EXTENSIONS,
   MEDIA_EXTENSIONS,
-  UPLOAD_ACCEPT,
+  uploadAccept,
   extensionOf,
   uploadAssets,
 } from "../files/media-upload";
@@ -42,7 +41,7 @@ import {
   recordImageSize,
   seedMediaMeta,
 } from "../files/media-meta";
-import { mediaSiteUrl } from "../files/media-paths";
+import { mediaSiteUrl, previewFileSrc } from "../files/media-paths";
 
 // ─── Media file cache ────────────────────────────────────────────────────────
 
@@ -283,7 +282,7 @@ function renderMediaPickerPopover() {
                         m.isImage
                           ? html`<img
                               slot="icon"
-                              src=${loopbackAssetSrc(m.path)}
+                              src=${previewFileSrc(m.file)}
                               alt=""
                               style="width:24px;height:24px;object-fit:cover;border-radius:var(--spectrum-corner-radius-75, 2px)"
                               @load=${(e: Event) => noteImageSize(m.file, e.target)}
@@ -394,7 +393,7 @@ function pickAndUpload(onCommit: (val: string) => void) {
   const input = document.createElement("input");
   input.type = "file";
   input.multiple = true;
-  input.accept = UPLOAD_ACCEPT;
+  input.accept = uploadAccept();
   input.addEventListener("change", () => {
     if (input.files?.length) {
       void uploadAndAssign(input.files, onCommit);
@@ -422,11 +421,7 @@ export function renderMediaPicker(prop: string, value: string, onCommit: (val: s
     <div class="media-picker">
       ${
         isImage && currentValue
-          ? html`<img
-              class="media-picker-thumb"
-              src=${loopbackAssetSrc(previewAssetSrc(currentValue))}
-              alt=""
-            />`
+          ? html`<img class="media-picker-thumb" src=${previewAssetSrc(currentValue)} alt="" />`
           : nothing
       }
       <sp-textfield