@jxsuite/studio 2.4.3 → 3.0.0

package/src/panels/signals-panel.ts

@@ -58,6 +58,7 @@ import { getExtensions, loadExtensions } from "../format/format-host";
 import { optionalStringArg, stringProperty } from "../commands/command-args";
 import type { TemplateResult } from "lit-html";
 import type { AnyCommand, CommandRegistry } from "../commands/registry";
+import { isMediaFormat } from "../utils/studio-utils";
 
 interface SignalsPanelState {
   document: JxMutableNode;
@@ -915,7 +916,7 @@ function renderSignalEditorTemplate(
           : nothing
       }
       ${
-        def.format === "image"
+        isMediaFormat(def.format)
           ? renderFieldRow({
               hasValue: false,
               label: "Default",

package/src/platforms/cloud.ts

@@ -36,6 +36,7 @@ import type {
   StudioPlatform,
 } from "../types";
 import { problemDetail, problemSlug } from "@jxsuite/protocol";
+import type { UploadResult } from "@jxsuite/protocol";
 
 export interface CloudProject {
   owner: string;
@@ -232,8 +233,15 @@ export function createCloudPlatform(project: CloudProject | null): StudioPlatfor
        The session serves the project tree at /raw.
 
        Conditional because `base` is "" until a project is bound, and "/raw/" would be a confident
-       wrong answer — worse than the default, which at least fails visibly. */
-    ...(base ? { documentBaseUrl: `${base}/raw/` } : {}),
+       wrong answer — worse than the default, which at least fails visibly.
+
+       `assetSpace` rides in the SAME spread, and that is the whole of its correctness: studio.jx-
+       suite.com is a multi-tenant SPA origin, so `/hero.jpg` misses Workers Static Assets and the
+       single-page-app fallback answers index.html at HTTP 200 — the <img> gets HTML, renders
+       broken, and logs nothing. Declaring "repo" tells Studio to resolve each reference to the
+       project file it names and address it under /raw. Until a project is bound there is no /raw to
+       address, so the project-less hub declares neither and stays exactly as it was. */
+    ...(base ? { assetSpace: "repo" as const, documentBaseUrl: `${base}/raw/` } : {}),
     /* Open Project routes through Studio's repo picker (write-access repos via listRepos +
        importProject) — sessions are URL-bound, so openProject() below never opens a dialog. */
     openProjectPicker: "repo-list",
@@ -314,7 +322,10 @@ export function createCloudPlatform(project: CloudProject | null): StudioPlatfor
         method: "POST",
         body: data,
       });
-      return okJson<unknown>(res, `Upload failed: ${path}`);
+      const body = await okJson<Partial<UploadResult>>(res, `Upload failed: ${path}`);
+      // The session echoes the path today; falling back to the request keeps a backend that says
+      // Nothing working rather than writing `undefined` into a document.
+      return { path: body.path ?? path, ...(body.size === undefined ? {} : { size: body.size }) };
     },
 
     async deleteFile(path: string) {

package/src/platforms/devserver.ts

@@ -38,6 +38,7 @@ import type {
   StarterInfo,
 } from "../types";
 import { problemDetail, problemMessage } from "@jxsuite/protocol";
+import type { UploadResult } from "@jxsuite/protocol";
 
 /** A directory entry from the server, tolerating extra wire fields. */
 type WireDirEntry = DirEntry & Record<string, unknown>;
@@ -391,7 +392,10 @@ export function createDevServerPlatform() {
       if (!res.ok) {
         throw new Error(`Upload failed: ${path}`);
       }
-      return await res.json();
+      const body = (await res.json()) as Partial<UploadResult>;
+      // The dev server echoes the path today; falling back to the request keeps a backend that says
+      // Nothing working rather than writing `undefined` into a document.
+      return { path: body.path ?? path, ...(body.size === undefined ? {} : { size: body.size }) };
     },
 
     /** @param {string} path */

package/src/services/ai-models.ts

@@ -13,14 +13,54 @@
 
 import type { AiModelsResponse } from "@jxsuite/protocol";
 import { getPlatform } from "../platform";
-import { getBaseUrl, getOpenAiKey, hasOpenAiKey } from "./ai-settings";
+import { getBaseUrl, getOpenAiKey, hasOpenAiKey, storedModel } from "./ai-settings";
+import { SETTINGS } from "./settings/definitions";
+import { onSettingsChanged } from "./settings/kernel";
 
 export interface AiModel {
   id: string;
   name: string;
 }
 
+/**
+ * The credentials a model list belongs to.
+ *
+ * Two fields, taken together or not at all. The per-field overrides this replaces let a caller pass
+ * a draft key with a stored base URL, which is a pair that was never configured anywhere.
+ */
+export interface AiCredentials {
+  apiKey: string;
+  baseUrl: string;
+}
+
+/** The credentials the app is configured with right now. */
+export function aiConnection(): AiCredentials {
+  return { apiKey: getOpenAiKey(), baseUrl: getBaseUrl() };
+}
+
+/**
+ * An opaque identity for a credential pair.
+ *
+ * NUL-joined rather than concatenated: a key ending in the base URL's first characters would
+ * otherwise be indistinguishable from a shorter key and a longer URL.
+ */
+function fingerprint(credentials: AiCredentials): string {
+  return `${credentials.apiKey}\u0000${credentials.baseUrl}`;
+}
+
 let cache: AiModel[] | null = null;
+
+/**
+ * Which credentials {@link cache} was listed under.
+ *
+ * The cache used to be unkeyed, and two callers with different credentials wrote to it: the
+ * credentials form fetches with the drafts being edited, while the capability probe fetches with
+ * whatever is stored. Whichever landed last won, so the chat composer's picker could list a
+ * different provider's models than the one actually configured — which is exactly what a user saw
+ * after configuring a provider and finding the shell offering someone else's catalogue.
+ */
+let cacheKey = "";
+
 let proxyConfigured = false;
 let proxyManaged = false;
 let proxyDefaultModel = "";
@@ -34,9 +74,17 @@ let proxyCode: AiModelsResponse["code"];
 let proxyProbe: Promise<void> | null = null;
 const probeListeners = new Set<() => void>();
 
-/** Drop the cached model list (call after credentials/endpoint changes). */
-export function invalidateModelCache() {
+/**
+ * Drop the cached list and the capability reading.
+ *
+ * No surface calls this: it runs off the settings subscription below, because "the credentials
+ * changed" is a fact about the store rather than something each form has to remember to announce —
+ * and a form that forgot left every gate reading a stale capability probe. It stays exported only
+ * so a test can start from a cold module.
+ */
+export function resetModelCache() {
   cache = null;
+  cacheKey = "";
   proxyConfigured = false;
   proxyManaged = false;
   proxyDefaultModel = "";
@@ -47,6 +95,28 @@ export function invalidateModelCache() {
   proxyProbe = null;
 }
 
+/** The keys whose value changes what a provider would answer with. */
+const CONNECTION_KEYS = new Set<string>([
+  SETTINGS.aiOpenAiKey.key,
+  SETTINGS.aiBaseUrl.key,
+  SETTINGS.cfToken.key,
+  SETTINGS.cfAccountId.key,
+]);
+
+onSettingsChanged((keys) => {
+  if (keys.some((key) => CONNECTION_KEYS.has(key))) {
+    resetModelCache();
+  }
+});
+
+/**
+ * The cached list, if it was listed under `credentials`. Null when it was not, or when there is
+ * none — a caller must not show one provider's catalogue for another's key.
+ */
+export function cachedModels(credentials: AiCredentials): AiModel[] | null {
+  return cache && cacheKey === fingerprint(credentials) ? cache : 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
@@ -108,6 +178,23 @@ export function getProxyDefaultModel(): string {
   return proxyDefaultModel;
 }
 
+/**
+ * The model to SEND: what the user chose, else what the backend says it prefers, else the built-in
+ * default.
+ *
+ * The middle term is the point. A managed Workers AI backend declares its own `defaultModel`, and
+ * that value was fetched, stored and never read — so a user who had chosen nothing got the
+ * hardcoded `"gpt-4o"`, which Workers AI does not serve. Asking the backend what it prefers before
+ * falling back to a name invented here is the difference between working and a 404 on the first
+ * message.
+ *
+ * It lives here rather than in `ai-settings.ts` because only this module knows what the proxy said,
+ * and `ai-settings` must not import it — this module already imports `ai-settings`.
+ */
+export function preferredModel(): string {
+  return storedModel() || getProxyDefaultModel() || SETTINGS.aiModel.default;
+}
+
 /**
  * The sibling of the chat route, replacing the last path segment and keeping everything else.
  *
@@ -146,9 +233,13 @@ export function siblingRoute(chatUrl: string, segment: string): string {
  * @returns {Promise<AiModel[]>}
  */
 export async function fetchAvailableModels(
-  opts: { apiKey?: string; baseUrl?: string; force?: boolean } = {},
+  opts: { credentials?: AiCredentials; force?: boolean } = {},
 ): Promise<AiModel[]> {
-  if (cache && !opts.force) {
+  /* Resolve the credentials BEFORE consulting the cache. Checking the cache first is what let a
+     list fetched under one provider be handed to a caller asking about another. */
+  const credentials = opts.credentials ?? aiConnection();
+  const key = fingerprint(credentials);
+  if (cache && cacheKey === key && !opts.force) {
     return cache;
   }
   const plat = getPlatform();
@@ -156,13 +247,11 @@ export async function fetchAvailableModels(
   const modelsUrl = siblingRoute(chatUrl, "models");
 
   const headers: Record<string, string> = {};
-  const apiKey = opts.apiKey || getOpenAiKey();
-  if (apiKey) {
-    headers["X-Api-Key"] = apiKey;
+  if (credentials.apiKey) {
+    headers["X-Api-Key"] = credentials.apiKey;
   }
-  const baseUrl = opts.baseUrl || getBaseUrl();
-  if (baseUrl) {
-    headers["X-Api-Base-URL"] = baseUrl;
+  if (credentials.baseUrl) {
+    headers["X-Api-Base-URL"] = credentials.baseUrl;
   }
 
   const resp = await fetch(modelsUrl, { headers });
@@ -175,5 +264,6 @@ export async function fetchAvailableModels(
   proxyDefaultModel = data.defaultModel ?? "";
   proxyCode = data.code;
   cache = (data.models || []).map((m) => ({ id: m.id, name: m.name || m.id }));
+  cacheKey = key;
   return cache;
 }

package/src/services/ai-settings.ts

@@ -1,52 +1,51 @@
 /// <reference lib="dom" />
 /**
- * Ai-settings.js — local persistence for the AI assistant's provider settings.
+ * Ai-settings.js — the AI assistant's provider settings, over the settings kernel.
  *
  * The Stack B proxy reads the OpenAI key from the `X-Api-Key` header (falling back to the server's
- * `OPENAI_API_KEY` env var). Studio stores a user-supplied key in localStorage so the browser/dev
- * build works without an env var. The key never leaves the machine except to the same-origin proxy.
+ * `OPENAI_API_KEY` env var). Studio stores a user-supplied key so the browser/dev build works
+ * without an env var. The key never leaves the machine except to the same-origin proxy.
+ *
+ * This module is now a typed façade over `settings/kernel.ts` — the storage keys, defaults and
+ * normalisation live in `settings/definitions.ts`, and the kernel owns the cache, the write queue
+ * and change notification. What it keeps is the vocabulary: callers say `getOpenAiKey()`, not
+ * `readSetting(SETTINGS.aiOpenAiKey)`.
+ *
+ * **Blank no longer deletes.** `setOpenAiKey("")` stores an empty string; {@link clearAiProvider}
+ * is the revoke path. The old conflation read as a convenience right up until a form that blanked
+ * its own drafts on Save called these setters with them, and a second Save revoked the credentials
+ * the first had stored.
  *
  * @license MIT
  */
 
-import { persistSettings } from "./settings-store";
-
-const KEY_STORAGE = "jx.ai.openaiKey";
-const BASE_URL_STORAGE = "jx.ai.baseUrl";
-const MODEL_STORAGE = "jx.ai.model";
-const DEFAULT_MODEL = "gpt-4o";
+import { SETTINGS } from "./settings/definitions";
+import {
+  clearSettings,
+  hasSetting,
+  readStoredSetting,
+  setSetting,
+  setSettings,
+} from "./settings/kernel";
 
-/** @returns {string} The stored OpenAI key, or "" if none/unavailable. */
+/** @returns {string} The stored OpenAI key, or "" if none. */
 export function getOpenAiKey() {
-  try {
-    return globalThis.localStorage?.getItem(KEY_STORAGE) ?? "";
-  } catch {
-    return "";
-  }
+  return readStoredSetting(SETTINGS.aiOpenAiKey);
 }
 
 /**
- * Persist (or clear) the OpenAI key.
+ * Persist the OpenAI key.
  *
- * @param {string} key - The key to store; an empty/blank value clears it.
+ * @param {string} key - The key to store. A blank value stores blank; it does NOT clear — see
+ *   {@link clearAiProvider}.
  */
 export function setOpenAiKey(key: string) {
-  try {
-    const trimmed = (key || "").trim();
-    if (trimmed) {
-      globalThis.localStorage?.setItem(KEY_STORAGE, trimmed);
-    } else {
-      globalThis.localStorage?.removeItem(KEY_STORAGE);
-    }
-    persistSettings();
-  } catch {
-    /* LocalStorage unavailable — settings are not persisted. */
-  }
+  setSetting(SETTINGS.aiOpenAiKey, key || "");
 }
 
 /** @returns {boolean} Whether a non-empty key is stored. */
 export function hasOpenAiKey() {
-  return getOpenAiKey().length > 0;
+  return hasSetting(SETTINGS.aiOpenAiKey);
 }
 
 /**
@@ -54,59 +53,58 @@ export function hasOpenAiKey() {
  *   or "" to use the proxy's default (`https://api.openai.com/v1` / server `OPENAI_BASE_URL`).
  */
 export function getBaseUrl() {
-  try {
-    return globalThis.localStorage?.getItem(BASE_URL_STORAGE) ?? "";
-  } catch {
-    return "";
-  }
+  return readStoredSetting(SETTINGS.aiBaseUrl);
 }
 
+// ─── Model selection ────────────────────────────────────────────────────────
+
 /**
- * Persist (or clear) the base URL override.
+ * The model the user actually chose, with no default standing in for silence.
  *
- * @param {string} url - The base URL; an empty/blank value clears the override.
+ * The getter this replaced masked _unset_ as `"gpt-4o"`, which is right for a sender and wrong for
+ * anything that writes back: a form prefilled from it and then saved persists a choice nobody made,
+ * which is how `jx.ai.model: "gpt-4o"` came to be the only surviving key in a settings file whose
+ * owner had configured a different provider entirely. Senders want
+ * {@link ../services/ai-models!preferredModel} instead.
+ *
+ * @returns {string} The stored model ID, or "" when none has been chosen.
  */
-export function setBaseUrl(url: string) {
-  try {
-    const trimmed = (url || "").trim().replace(/\/+$/, "");
-    if (trimmed) {
-      globalThis.localStorage?.setItem(BASE_URL_STORAGE, trimmed);
-    } else {
-      globalThis.localStorage?.removeItem(BASE_URL_STORAGE);
-    }
-    persistSettings();
-  } catch {
-    /* LocalStorage unavailable — settings are not persisted. */
-  }
+export function storedModel() {
+  return readStoredSetting(SETTINGS.aiModel);
 }
 
-// ─── Model selection ────────────────────────────────────────────────────────
+/**
+ * Persist the selected model ID.
+ *
+ * @param {string} modelId - The model ID to store. A blank value stores blank; it does NOT clear.
+ */
+export function setModel(modelId: string) {
+  setSetting(SETTINGS.aiModel, modelId || "");
+}
 
-/** @returns {string} The stored model ID, or the default ("gpt-4o"). */
-export function getModel() {
-  try {
-    return globalThis.localStorage?.getItem(MODEL_STORAGE) || DEFAULT_MODEL;
-  } catch {
-    return DEFAULT_MODEL;
-  }
+/**
+ * Store the provider's key, endpoint and model as ONE change.
+ *
+ * What a credentials form's Save should call. Three separate setters coalesce into one write
+ * anyway, but they announce three times, and each intermediate announcement describes a provider
+ * the user never asked for — a new key against the old endpoint, then against no model.
+ *
+ * @param {{ apiKey: string; baseUrl: string; model: string }} provider
+ */
+export function saveAiProvider(provider: { apiKey: string; baseUrl: string; model: string }) {
+  setSettings([
+    [SETTINGS.aiOpenAiKey, provider.apiKey],
+    [SETTINGS.aiBaseUrl, provider.baseUrl],
+    [SETTINGS.aiModel, provider.model],
+  ]);
 }
 
 /**
- * Persist the selected model ID.
+ * Forget the provider entirely — key, endpoint and model.
  *
- * @param {string} modelId - The model ID to store; an empty/blank value clears it, reverting to
- *   default.
+ * The one deletion path, and the one the Accounts list's Disconnect uses. Deliberately all three
+ * together: a key with an orphaned endpoint is a state no surface knows how to describe.
  */
-export function setModel(modelId: string) {
-  try {
-    const trimmed = (modelId || "").trim();
-    if (trimmed) {
-      globalThis.localStorage?.setItem(MODEL_STORAGE, trimmed);
-    } else {
-      globalThis.localStorage?.removeItem(MODEL_STORAGE);
-    }
-    persistSettings();
-  } catch {
-    /* LocalStorage unavailable — settings are not persisted. */
-  }
+export function clearAiProvider() {
+  clearSettings([SETTINGS.aiOpenAiKey, SETTINGS.aiBaseUrl, SETTINGS.aiModel]);
 }

package/src/services/cf-settings.ts

@@ -1,58 +1,40 @@
 /// <reference lib="dom" />
 /**
- * Cf-settings — local persistence for the Cloudflare publish connection on
- * platforms without a hosted OAuth broker (dev server, desktop). The API
- * token is stored like the AI key: localStorage first, mirrored through the
- * platform settings backend where one exists. It only ever leaves the machine
- * to the same-origin `/__studio/cf/proxy`, which forwards it as a bearer to
+ * Cf-settings — the Cloudflare publish connection on platforms without a hosted OAuth broker (dev
+ * server, desktop). The API token is stored like the AI key, over `settings/kernel.ts`. It only ever
+ * leaves the machine to the same-origin `/__studio/cf/proxy`, which forwards it as a bearer to
  * api.cloudflare.com (not CORS-enabled, hence the proxy).
  *
+ * As with the AI provider, a blank value is a VALUE: {@link clearCfConnection} is the deletion path,
+ * so nothing can revoke a connection by rendering an empty field into a setter.
+ *
  * @license MIT
  */
 
-import { persistSettings } from "./settings-store";
-
-const TOKEN_STORAGE = "jx.cf.token";
-const ACCOUNT_STORAGE = "jx.cf.accountId";
-
-function read(key: string): string {
-  try {
-    return globalThis.localStorage?.getItem(key) ?? "";
-  } catch {
-    return "";
-  }
-}
-
-function write(key: string, value: string): void {
-  try {
-    const trimmed = (value || "").trim();
-    if (trimmed) {
-      globalThis.localStorage?.setItem(key, trimmed);
-    } else {
-      globalThis.localStorage?.removeItem(key);
-    }
-  } catch {
-    // Storage unavailable (private mode) — the connection just won't persist.
-  }
-  persistSettings();
-}
+import { SETTINGS } from "./settings/definitions";
+import { clearSettings, readStoredSetting, setSetting } from "./settings/kernel";
 
 /** The stored Cloudflare API token, or "" when not connected. */
 export function getCfToken(): string {
-  return read(TOKEN_STORAGE);
+  return readStoredSetting(SETTINGS.cfToken);
 }
 
-/** Persist (or clear, with a blank value) the Cloudflare API token. */
+/** Persist the Cloudflare API token. Blank stores blank — see {@link clearCfConnection}. */
 export function setCfToken(token: string): void {
-  write(TOKEN_STORAGE, token);
+  setSetting(SETTINGS.cfToken, token || "");
 }
 
 /** The selected Cloudflare account id, or "" when none chosen yet. */
 export function getCfAccountId(): string {
-  return read(ACCOUNT_STORAGE);
+  return readStoredSetting(SETTINGS.cfAccountId);
 }
 
-/** Persist (or clear) the selected Cloudflare account id. */
+/** Persist the selected Cloudflare account id. Blank stores blank. */
 export function setCfAccountId(accountId: string): void {
-  write(ACCOUNT_STORAGE, accountId);
+  setSetting(SETTINGS.cfAccountId, accountId || "");
+}
+
+/** Forget the connection — token and account together. What Disconnect calls. */
+export function clearCfConnection(): void {
+  clearSettings([SETTINGS.cfToken, SETTINGS.cfAccountId]);
 }

package/src/services/document-assistant.ts

@@ -26,7 +26,8 @@ import type { ToolAvailability } from "./gated-registry";
 import { adoptProject } from "./project-adoption";
 import { runAgentLoop } from "./tool-executor";
 import { AI_TOOL_TIERS, buildSystemPrompt, tierActive } from "./ai-system-prompt";
-import { getBaseUrl, getModel, getOpenAiKey } from "./ai-settings";
+import { getBaseUrl, getOpenAiKey } from "./ai-settings";
+import { preferredModel } from "./ai-models";
 import { trimContext } from "./context-manager";
 import { renderCheck } from "./render-critic";
 import { openFileInTab, reloadFileInTab } from "../files/files";
@@ -58,7 +59,7 @@ function projectRoot() {
  * }}
  */
 export function createDocumentAssistant() {
-  const chatState = createChatState({ model: getModel() });
+  const chatState = createChatState({ model: preferredModel() });
 
   /** The persisted session backing the live chat; null = fresh unsaved chat. */
   let sessionId: string | null = null;
@@ -212,7 +213,7 @@ export function createDocumentAssistant() {
       const chatUrl = await Promise.resolve(plat.aiChatUrl());
       // Re-read the persisted model each send: the session is constructed once at module load
       // (before the user sets a key/model), so the picker's choice must be picked up here.
-      chatState.setModel(getModel());
+      chatState.setModel(preferredModel());
       const streamingClient = createProxyStreamingClient({
         chatUrl,
         model: chatState.model,

package/src/services/idle.ts

@@ -27,6 +27,9 @@
  *    duplicate of `platform`: an activity spans a whole operation (an install, a deploy, a clone)
  *    across many PAL calls, so the gaps between them look quiet at the seam while the operation is
  *    plainly mid-flight. A finished entry never blocks — the list stays on screen forever.
+ * 7. `grid-idle.gridIdleBlockers()` — tables still building, or built but not yet showing the
+ *    selection range `selectableRange: 1` gives them. Nothing else covered Tabulator: a grid
+ *    command resolves when the panel mounts, which is several frames before the table is drawn.
  *
  * The consumers are the `packages/studio:verify` skill, the screenshot runner and P4.2's Activity
  * tracker (this is a read-only projection of the same in-flight set that dock renders).
@@ -38,6 +41,7 @@ import { pendingSchedulers } from "../panels/panel-scheduler";
 import { canvasIdleBlockers } from "../canvas/iframe-host";
 import { platformInFlight } from "../platform";
 import { overlayIdleBlockers } from "../ui/layers";
+import { gridIdleBlockers } from "../grid/grid-idle";
 
 /** One subsystem that can be outstanding, and its account of why. */
 export interface IdleSource {
@@ -69,7 +73,7 @@ export class NotIdleError extends Error {
 }
 
 /**
- * The six live sources.
+ * The seven live sources.
  *
  * Built per call rather than held in a module constant so a test can substitute one without
  * unpicking the others, and so a second window's hosts are never read through the first window's
@@ -101,6 +105,7 @@ export function defaultIdleSources(): IdleSource[] {
     },
     { blockers: overlayIdleBlockers, name: "overlay" },
     { blockers: activityIdleBlockers, name: "activity" },
+    { blockers: gridIdleBlockers, name: "grid" },
   ];
 }