@jxsuite/studio 3.0.0 → 4.1.0

package/src/services/tool-executor.ts

@@ -27,10 +27,26 @@ import type { ToolRegistry } from "@jxsuite/ai/tools";
 
 import type { Tab } from "../tabs/tab";
 import { batchTab, beginBatch, endBatch } from "../tabs/transact";
+import { ensureProxyProbe, resetModelCache } from "./ai-models";
 import { beginTurn, endTurn } from "./ai-writes";
+import { beginToolCall, beginTurnSignal, endTurnSignal } from "./ai-turn-signal";
 
 const MAX_ROUNDS = 5;
 
+/**
+ * Hard ceiling on rounds of every kind, so the loop terminates whatever the model does.
+ *
+ * {@link MAX_ROUNDS} bounds AUTONOMOUS work, and a round that ends by blocking on a person is the
+ * opposite of runaway — it cannot advance without them, which is the property the cap was ever a
+ * proxy for. So an interactive round does not spend that budget. This one is the backstop that
+ * keeps `runAgentLoop` provably terminating anyway; a human answering ten questions will have
+ * stopped it long before.
+ */
+const MAX_TOTAL_ROUNDS = 25;
+
+/** Tools that suspend the turn on a human rather than doing work. */
+const INTERACTIVE_TOOLS = new Set(["ask_user"]);
+
 interface RunAgentLoopOptions {
   chatState: ReturnType<typeof createChatState>;
   streamingClient: StreamingClient;
@@ -59,6 +75,11 @@ export async function runAgentLoop({
   const turnId = () => chatState.messages.at(-1)?.id ?? "";
   beginTurn(`turn:${chatState.messages.length}`);
 
+  /* The signal, published for the tools rather than passed to them: `ToolRegistry.execute` takes
+     none. Without it a tool that waits for a human never learns the turn was stopped, and the
+     `await` below is the whole loop. See services/ai-turn-signal.ts. */
+  beginTurnSignal(signal);
+
   // Batch all tool-call mutations into a single undo step, anchored on the tab being edited.
   if (getTab) {
     beginBatch(getTab());
@@ -83,13 +104,16 @@ export async function runAgentLoop({
   };
 
   try {
-    for (let round = 1; round <= MAX_ROUNDS; round++) {
+    /* Rounds that DID something, which is what MAX_ROUNDS bounds — see MAX_TOTAL_ROUNDS. */
+    let workRounds = 0;
+    for (let round = 1; round <= MAX_TOTAL_ROUNDS && workRounds < MAX_ROUNDS; round++) {
       const messages = chatState.toMessagesArray();
       const tools = toolRegistry.listForLLM();
 
       const toolCalls = new Map<string, { name: string; arguments: string }>();
       let stopReason = "stop";
       let streamError = null;
+      let streamErrorCode: string | undefined;
 
       for await (const event of streamingClient.streamChat(
         messages,
@@ -125,6 +149,7 @@ export async function runAgentLoop({
           }
           case "error": {
             streamError = event.message;
+            streamErrorCode = event.code;
             break;
           }
           default: {
@@ -136,6 +161,14 @@ export async function runAgentLoop({
       chatState.finishStream(stopReason);
 
       if (streamError) {
+        /* A lapsed hosted grant is the one stream error that makes the app's OWN reading wrong.
+           The probe settles once at boot, so without this every gate keeps offering an assistant
+           that cannot answer, and the send that just failed is the only evidence anyone has. Drop
+           the reading and re-probe, so the next paint carries the Reconnect CTA instead. */
+        if (streamErrorCode === "cf_reconnect_required") {
+          resetModelCache();
+          ensureProxyProbe();
+        }
         chatState.setError(streamError);
         return;
       }
@@ -144,8 +177,11 @@ export async function runAgentLoop({
         return;
       }
 
+      let didWork = false;
       for (const [id, call] of toolCalls) {
         let result;
+        // Published, not passed: `ToolRegistry.execute` takes the args and nothing else.
+        beginToolCall(id);
         try {
           const args = call.arguments ? (JSON.parse(call.arguments) as object) : {};
           result = await toolRegistry.execute(call.name, args);
@@ -155,6 +191,9 @@ export async function runAgentLoop({
             error: `Failed to parse arguments: ${(error as Error).message}`,
           };
         }
+        if (!INTERACTIVE_TOOLS.has(call.name)) {
+          didWork = true;
+        }
         reanchorBatch();
         if (!result.success && result.error) {
           allErrors.push(result.error);
@@ -166,7 +205,10 @@ export async function runAgentLoop({
         chatState.pushToolResultMessage(id, JSON.stringify(result));
       }
 
-      if (round < MAX_ROUNDS) {
+      if (didWork) {
+        workRounds += 1;
+      }
+      if (workRounds < MAX_ROUNDS && round < MAX_TOTAL_ROUNDS) {
         chatState.beginAssistantTurn();
       }
     }
@@ -196,6 +238,7 @@ export async function runAgentLoop({
     }
     chatState.setError(tail);
   } finally {
+    endTurnSignal();
     endBatch();
     endTurn(turnId());
   }

package/src/settings/contexts-section.ts

@@ -30,7 +30,7 @@
  * alone), parks any rejection under the control that caused it, and re-renders. §7.1's third tier:
  * a bad value belongs at its control, not in a toast that expires.
  *
- * @docs studio/projects/pages-layouts-components
+ * @docs studio/projects/settings
  */
 
 import { html, render as litRender, nothing } from "lit-html";
@@ -140,6 +140,15 @@ type ErrorTarget = string;
  */
 const errors = new WeakMap<HTMLElement, { target: ErrorTarget; message: string }>();
 
+/**
+ * Schema errors the file already had when this section last wrote to it.
+ *
+ * Reported at section level rather than under a control, because they belong to no control — and
+ * kept per container for the same reason {@link errors} is. Populated by the first write, since
+ * validating on every render would compile a schema for a section nobody is editing.
+ */
+const inheritedErrors = new WeakMap<HTMLElement, string[]>();
+
 /** Read the current failure for a container — exported for tests and for re-render helpers. */
 export function contextsError(container: HTMLElement): { target: string; message: string } | null {
   return errors.get(container) ?? null;
@@ -171,12 +180,26 @@ export function renderContextsSection(container: HTMLElement): void {
    * shape, and the disk can refuse the write. The predecessor surfaces (`Properties › Media` and
    * the CSS-variables "Enable dark scheme") did `void updateSiteConfig(...)` and dropped the
    * rejection, so a failed write read as the field snapping back for no reason.
+   *
+   * **Only the errors THIS edit introduces block it.** The candidate is the whole `project.json`,
+   * so a violation anywhere else in the file used to refuse every context edit and park the reason
+   * under whichever control had been touched — typing `1280px` into Base width reported three
+   * unevaluated-property errors about `title`, `description` and `$style`, none of which is a
+   * width. The baseline is validated first and subtracted, the same way `services/ai-tools.ts`
+   * subtracts it before blaming the model for a document it inherited. A pre-existing problem is
+   * still worth saying, so it is reported once at section level, where a whole-file problem belongs
+   * — and it is reported rather than repaired, because `project.json` is the author's file and a
+   * settings screen that silently drops keys it did not recognise is worse than one that names
+   * them.
    */
   const persistMedia = async (next: Record<string, string>, target: ErrorTarget) => {
     const candidate = { ...config, $media: next } as unknown;
     let schemaErrors: string[] = [];
+    let inherited: string[] = [];
     try {
-      schemaErrors = await validateProjectConfig(candidate);
+      inherited = await validateProjectConfig(config);
+      const found = await validateProjectConfig(candidate);
+      schemaErrors = found.filter((error) => !inherited.includes(error));
     } catch (error) {
       /* A validator that cannot compile must not block the edit — but it must not be silent
          either, so the message rides the same inline slot the schema errors would have used. */
@@ -187,6 +210,7 @@ export function renderContextsSection(container: HTMLElement): void {
       reject(target, schemaErrors.join("; "));
       return;
     }
+    inheritedErrors.set(container, inherited);
     try {
       await updateSiteConfig({ $media: next });
       errors.delete(container);
@@ -199,6 +223,24 @@ export function renderContextsSection(container: HTMLElement): void {
     renderContextsSection(container);
   };
 
+  /**
+   * What is already wrong with `project.json`, said once and not blamed on a control.
+   *
+   * It does not block anything — the edit that surfaced it went through. It is here because a file
+   * that fails its own schema will keep failing it, and until this notice existed the only place
+   * that fact appeared was as an unexplained refusal of an unrelated field.
+   */
+  const inheritedNotice = () => {
+    const inherited = inheritedErrors.get(container) ?? [];
+    return inherited.length === 0
+      ? nothing
+      : html`<p class="settings-section-notice" role="status">
+          project.json has ${inherited.length} pre-existing schema
+          ${inherited.length === 1 ? "problem" : "problems"} that this section did not cause:
+          ${inherited.join("; ")}
+        </p>`;
+  };
+
   /** The error line for one control, when that is where the current failure belongs. */
   const errorFor = (target: ErrorTarget) =>
     shown?.target === target
@@ -370,7 +412,7 @@ export function renderContextsSection(container: HTMLElement): void {
         The conditions this project's pages are rendered under. Define them once here; choose
         between them on the pane's context control while you edit.
       </p>
-      ${errorFor("section")}
+      ${errorFor("section")} ${inheritedNotice()}
 
       <div class="settings-field">
         <label class="settings-field-label">Base width</label>

package/src/settings/dependencies-editor.ts

@@ -1,21 +1,32 @@
 /// <reference lib="dom" />
 /**
- * Dependencies settings section — an outdated-aware table of the project's npm dependencies. Shows
+ * Dependencies settings section — a registry-aware table of the project's npm dependencies. Shows
  * current vs latest version, with per-row update/remove, an add-package field, "update all", and
- * reinstall. @jxsuite/* rows target the version this Studio build embeds; other packages target the
- * newest published version reported by the backend.
+ * reinstall.
+ *
+ * **Every row's Latest is that package's own newest version on npm.** Two assumptions used to sit
+ * between this table and the registry, and both are gone:
+ *
+ * 1. `@jxsuite/*` rows targeted `VERSION`, the version this Studio build embeds — right only while the
+ *    whole suite released as one number. The packages release on their own cadences now, so that
+ *    proposed a version that may never have been published, for a package whose real latest the
+ *    table had not looked at. The same correction `packages/jxsuite-update.ts` already made.
+ * 2. The backend was asked for _outdated_ packages, so a package already at its latest arrived as an
+ *    absence and the column read `—` — the registry's answer was known and thrown away. It now asks
+ *    `platform.packageVersions()`, which reports every dependency's latest either way, and the
+ *    comparison that decides whether an update button appears happens here.
+ *
+ * A row shows `—` only where there is genuinely nothing to show: a `workspace:`/`file:`/git spec, a
+ * package the registry does not answer for, or a host with no registry lookup at all.
  */
 
 import { html, render as litRender } from "lit-html";
 import { getPlatform } from "../platform";
-import { VERSION } from "../version";
 import { notify } from "../services/notify";
 import { showProgressModal } from "../ui/progress-modal";
-import { isComparable, isUpgrade, stripRange } from "../packages/semver";
+import { isUpgrade, stripRange } from "../packages/semver";
 import type { PackageInfo } from "../types";
 
-const JXSUITE_PREFIX = "@jxsuite/";
-
 interface Update {
   name: string;
   version: string;
@@ -28,13 +39,21 @@ let _latest = new Map<string, string>();
 let _busy = false;
 let _addName = "";
 
-/** The version a package can be updated to, or null if it is already current. */
+/** This package's newest published version, or null when the registry did not answer for it. */
 function latestFor(p: PackageInfo): string | null {
-  if (p.name.startsWith(JXSUITE_PREFIX) && isComparable(VERSION) && isUpgrade(p.version, VERSION)) {
-    return VERSION;
-  }
-  const registry = _latest.get(p.name);
-  return registry && isUpgrade(p.version, registry) ? registry : null;
+  return _latest.get(p.name) ?? null;
+}
+
+/**
+ * The version a package can be updated TO, or null when it is current or ahead.
+ *
+ * `isUpgrade`, not "differs from latest": a project deliberately pinned ahead of the registry — a
+ * prerelease, or a range bumped before the publish landed — would otherwise be offered a downgrade
+ * with an update button.
+ */
+function upgradeFor(p: PackageInfo): string | null {
+  const latest = latestFor(p);
+  return latest && isUpgrade(p.version, latest) ? latest : null;
 }
 
 async function load() {
@@ -45,10 +64,10 @@ async function load() {
     _packages = [];
   }
   _latest = new Map();
-  if (platform.outdatedPackages) {
+  if (platform.packageVersions) {
     try {
-      for (const o of await platform.outdatedPackages()) {
-        _latest.set(o.name, o.latest);
+      for (const info of await platform.packageVersions()) {
+        _latest.set(info.name, info.latest);
       }
     } catch {
       /* Registry lookups are best-effort */
@@ -118,9 +137,9 @@ async function onUpdateAll() {
   }
   const updates = (_packages ?? [])
     .map((p): Update | null => {
-      const latest = latestFor(p);
-      return latest
-        ? { dev: Boolean(p.dev), name: p.name, version: `^${stripRange(latest)}` }
+      const target = upgradeFor(p);
+      return target
+        ? { dev: Boolean(p.dev), name: p.name, version: `^${stripRange(target)}` }
         : null;
     })
     .filter((u): u is Update => u !== null);
@@ -152,6 +171,7 @@ async function onReinstall() {
 
 function row(p: PackageInfo) {
   const latest = latestFor(p);
+  const upgrade = upgradeFor(p);
   return html`
     <sp-table-row>
       <sp-table-cell>
@@ -163,13 +183,13 @@ function row(p: PackageInfo) {
       <sp-table-cell>${latest ?? "—"}</sp-table-cell>
       <sp-table-cell>
         ${
-          latest
+          upgrade
             ? html`<sp-action-button
                 size="s"
                 quiet
                 ?disabled=${_busy}
-                title="Update to ${latest}"
-                @click=${() => onUpdate(p, latest)}
+                title="Update to ${upgrade}"
+                @click=${() => onUpdate(p, upgrade)}
               >
                 <sp-icon-refresh slot="icon"></sp-icon-refresh>
               </sp-action-button>`
@@ -194,7 +214,7 @@ function render() {
     return;
   }
   const pkgs = _packages ?? [];
-  const hasUpdates = pkgs.some((p) => latestFor(p) !== null);
+  const hasUpdates = pkgs.some((p) => upgradeFor(p) !== null);
 
   const tpl = html`
     <div class="settings-section">

package/src/settings/general-settings.ts

@@ -12,9 +12,9 @@
 import { html, render as litRender, nothing } from "lit-html";
 import { live } from "lit-html/directives/live.js";
 import { errorMessage } from "@jxsuite/schema/parse";
-import { projectState, updateUi } from "../store";
+import { projectState } from "../store";
 import { updateSiteConfig } from "../site-context";
-import { tabOfContainer } from "../canvas/canvas-surface";
+import { activeRegistry } from "../commands/active-registry";
 import { getPlatform } from "../platform";
 
 import type { JxHeadEntry, ProjectConfig } from "@jxsuite/schema/types";
@@ -165,16 +165,27 @@ export function renderGeneralSettings(container: HTMLElement) {
   };
 
   /*
-   * Project Styles is the SAME document in a different editor, so this is a mode switch rather
-   * than a navigation. The predecessor closed the settings modal and opened `project.json` in a
-   * tab — the configuration IA jumping into the document IA, plan §9.3's own example of the split
-   * P6 removes. Nothing closes now, because nothing was covering anything.
+   * Project Styles is the SAME document in a different editor, and `styles.open` is the one place
+   * that says so. This used to write `session.ui.canvasMode` here directly — a second
+   * implementation of a capability, §12.5's defect in miniature: the button and the command could
+   * disagree about what "open Project Styles" means, and only one of them was reachable by name.
+   * The mode is still a fact about the TAB, and there is exactly one `project.json` tab, so
+   * `revealTab`'s `focusPane` puts the keyboard on whichever pane holds it.
+   *
+   * Rendered FROM the record, so the button is disabled with its `requires` sentence rather than
+   * absent when it cannot act (§12.3), and it cannot drift from the palette row or the gear menu.
    */
-  const onEditGlobalStyles = () => {
-    // THIS pane's tab. The Project Settings editor is stage content, so a settings document
-    // Open in the side pane used to send the PRIMARY into the Stylebook.
-    updateUi(tabOfContainer(container), "canvasMode", "stylebook");
-  };
+  const registry = activeRegistry();
+  const stylesCommand = registry?.get("styles.open");
+  /* The record's TITLE, and nothing else off the registry.
+     `disabledReason` would be the §12.3 shape for a control that can be inapplicable — but this one
+     cannot be. `styles.open` is gated on `ctx.project.open`, and Overview is a section of the
+     project's own configuration document, so by the time this renders the answer is always yes.
+     Asking anyway would also be a FOCUS read inside a function that was handed a container, which
+     is what `scripts/check-pane-singletons.ts` rule 4 forbids: a pane-scoped surface must not report
+     the focused pane's state. A project-level verb happens to read the same in every pane, but the
+     way to be right about that is not to ask. The one thing that can genuinely be missing is the
+     registry itself (bootstrap order, a test), and that is an existence check, not a state read. */
 
   const currentFavicon = config.favicon;
 
@@ -266,7 +277,14 @@ export function renderGeneralSettings(container: HTMLElement) {
           Design tokens and the default element styles that apply across every page. Opens Project
           Styles over this same document.
         </p>
-        <sp-action-button size="s" @click=${onEditGlobalStyles}>
+        <sp-action-button
+          size="s"
+          ?disabled=${!stylesCommand}
+          title=${stylesCommand?.title ?? ""}
+          @click=${() => {
+            void registry?.run("styles.open");
+          }}
+        >
           Edit Global Styles
         </sp-action-button>
       </div>

package/src/settings/preferences-accounts.ts

@@ -17,12 +17,31 @@
  *
  * **No secret is ever returned.** A record says whether something is stored and what it is for;
  * printing a token into a list is how a screenshot leaks one.
+ *
+ * **Cloudflare has two spellings, and this file used to know only one.** On a platform that brokers
+ * the connection (Jx Cloud), there is no local token to enumerate — `getCfToken()` is empty by
+ * design — so the row said "Not connected" to every hosted user, named no account, and offered a
+ * Disconnect that cleared nothing server-side. The hosted state comes from the PAL instead, cached
+ * here because a template must not start a fetch on every repaint.
  */
 
 import { clearGithubToken, githubTokenLocation, githubTokenStored } from "../github/github-auth";
 import { clearCfConnection, getCfAccountId, getCfToken } from "../services/cf-settings";
 import { clearAiProvider, getBaseUrl, hasOpenAiKey } from "../services/ai-settings";
-import { preferredModel } from "../services/ai-models";
+import { preferredModel, resetModelCache } from "../services/ai-models";
+import { getPlatform, hasPlatform } from "../platform";
+import type { CfConnection } from "../types";
+
+/** One thing a row can do besides existing. */
+export interface AccountAction {
+  /** Stable key — the button's `data-action`, so a test names an intent rather than a label. */
+  id: string;
+  label: string;
+  /** Spectrum `variant`; omitted for the default treatment. */
+  variant?: string;
+  /** Do it. Async ones repaint the sheet when they settle. */
+  run: () => void | Promise<void>;
+}
 
 /** One stored credential, as the Accounts section renders it. */
 export interface AccountRecord {
@@ -35,6 +54,178 @@ export interface AccountRecord {
   connected: boolean;
   /** Forget it. Idempotent: revoking a disconnected account is a no-op, not an error. */
   revoke: () => void;
+  /**
+   * What this row offers, when a plain Disconnect is not the whole story.
+   *
+   * Absent on the rows whose only verb is "forget it", which is every locally stored credential. A
+   * brokered Cloudflare connection has three more — reconnect a lapsed grant, choose an account,
+   * connect for the first time — and none of them is expressible as `revoke`.
+   */
+  actions?: AccountAction[];
+}
+
+// ─── The brokered Cloudflare connection ──────────────────────────────────────
+
+/** What the broker last said, or "checking" before it has been asked. */
+let _cfState: CfConnection | null | "checking" = "checking";
+
+/** The in-flight read, so a repaint during one does not start a second. */
+let _cfInFlight: Promise<void> | null = null;
+
+/**
+ * Whether the platform brokers the Cloudflare connection rather than holding a pasted token.
+ *
+ * Keyed on `cfConnect` — the hosted OAuth flow — because that is the member whose presence means
+ * "there is a connection this app did not store locally".
+ */
+export function platformBrokersCf(): boolean {
+  return hasPlatform() && Boolean(getPlatform().cfConnect);
+}
+
+/**
+ * Re-read the brokered connection and announce it. Always refetches; the Accounts section runs it
+ * when it is shown and after every action, because the answer changes server-side.
+ */
+export async function refreshCfConnection(): Promise<void> {
+  if (!platformBrokersCf()) {
+    return;
+  }
+  _cfInFlight ??= (async () => {
+    try {
+      _cfState = (await getPlatform().cfConnection?.()) ?? null;
+    } catch {
+      /* An unreachable broker is not a connection. The row says "not connected", which is what the
+         app can act on; the error itself belongs to whatever surface made the call the user asked
+         for, not to a list that repaints itself. */
+      _cfState = null;
+    }
+    _cfInFlight = null;
+    notifyCredentialsChanged();
+  })();
+  await _cfInFlight;
+}
+
+/** Kick the first read, once. Safe to call from a template — later paints are no-ops. */
+export function ensureCfConnection(): void {
+  if (platformBrokersCf() && _cfState === "checking" && !_cfInFlight) {
+    void refreshCfConnection();
+  }
+}
+
+/**
+ * Forget the cached broker answer.
+ *
+ * Called when Preferences opens, and that is the point: the row would otherwise paint the answer
+ * from the LAST visit — an hour-old "Connected — Acme" over a grant that has since lapsed — and
+ * only correct itself when the re-read landed. Saying "checking" while it checks is the honest
+ * version of the same half-second.
+ */
+export function resetCfConnectionCache(): void {
+  _cfState = "checking";
+  _cfInFlight = null;
+}
+
+/** Run the hosted flow, then re-read. The models cache goes because the AI gate keys on it too. */
+async function hostedConnect(): Promise<void> {
+  const outcome = await getPlatform().cfConnect?.();
+  if (outcome?.status === "connected" && !outcome.connection.accountId) {
+    /* Dynamically, and this is the load-bearing half: the picker imports THIS module for
+       `notifyCredentialsChanged`, so a static import here would close the cycle. */
+    const { openCfAccountPicker } = await import("../ui/cf-account-picker");
+    await openCfAccountPicker();
+  }
+  resetModelCache();
+  await refreshCfConnection();
+}
+
+/** The brokered row — five states, and each one names the next move. */
+function brokeredCloudflareRecord(): AccountRecord {
+  const disconnect: AccountAction = {
+    id: "disconnect",
+    label: "Disconnect",
+    run: async () => {
+      await getPlatform().cfDisconnect?.();
+      resetModelCache();
+      await refreshCfConnection();
+    },
+    variant: "negative",
+  };
+  const connect = (label: string): AccountAction => ({
+    id: label === "Connect" ? "connect" : "reconnect",
+    label,
+    run: hostedConnect,
+    variant: "accent",
+  });
+  const base = { id: "cloudflare", label: "Cloudflare", revoke: () => {} };
+
+  if (_cfState === "checking") {
+    return { ...base, actions: [], connected: false, detail: "Checking your connection…" };
+  }
+  if (!_cfState?.connected) {
+    return {
+      ...base,
+      actions: [connect("Connect")],
+      connected: false,
+      detail: "Not connected. Connecting publishes this site and runs the assistant on Workers AI.",
+    };
+  }
+  const revoke = () => {
+    void disconnect.run();
+  };
+  if (_cfState.needsReconnect) {
+    return {
+      ...base,
+      actions: [connect("Reconnect"), disconnect],
+      connected: true,
+      detail: "Connection expired. Reconnect to keep publishing and the assistant working.",
+      revoke,
+    };
+  }
+  if (_cfState.needsAccount || !_cfState.accountId) {
+    return {
+      ...base,
+      actions: [
+        {
+          id: "choose-account",
+          label: "Choose account",
+          run: async () => {
+            const { openCfAccountPicker } = await import("../ui/cf-account-picker");
+            if (await openCfAccountPicker()) {
+              resetModelCache();
+              await refreshCfConnection();
+            }
+          },
+          variant: "accent",
+        },
+        disconnect,
+      ],
+      connected: true,
+      detail: "Connected, but no account is chosen yet — publishing and the assistant need one.",
+      revoke,
+    };
+  }
+  return {
+    ...base,
+    actions: [disconnect],
+    connected: true,
+    detail: `Connected — ${_cfState.accountName ?? _cfState.accountId}.`,
+    revoke,
+  };
+}
+
+/** The locally stored row: a pasted API token, on desktop and the dev server. */
+function localCloudflareRecord(): AccountRecord {
+  const cfToken = getCfToken();
+  const cfAccount = getCfAccountId();
+  return {
+    connected: Boolean(cfToken),
+    detail: cfToken
+      ? `Connected${cfAccount ? ` — account ${cfAccount}` : ""}.`
+      : "Not connected. Publishing will ask when it needs it.",
+    id: "cloudflare",
+    label: "Cloudflare",
+    revoke: clearCfConnection,
+  };
 }
 
 /**
@@ -45,8 +236,6 @@ export interface AccountRecord {
  */
 export function listAccounts(): AccountRecord[] {
   const githubToken = githubTokenStored();
-  const cfToken = getCfToken();
-  const cfAccount = getCfAccountId();
   const model = preferredModel();
   const endpoint = getBaseUrl();
   return [
@@ -70,15 +259,7 @@ export function listAccounts(): AccountRecord[] {
       connected: hasOpenAiKey(),
       revoke: clearAiProvider,
     },
-    {
-      id: "cloudflare",
-      label: "Cloudflare",
-      detail: cfToken
-        ? `Connected${cfAccount ? ` — account ${cfAccount}` : ""}.`
-        : "Not connected. Publishing will ask when it needs it.",
-      connected: Boolean(cfToken),
-      revoke: clearCfConnection,
-    },
+    platformBrokersCf() ? brokeredCloudflareRecord() : localCloudflareRecord(),
   ];
 }