diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index f2a9244..1061fc7 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -37,28 +37,13 @@ jobs:
- name: Build production bundle
run: npm run build
- # The test:ui and test:accessibility scripts land with the milestone
- # branches; until they do, npm exits "Missing script" and fails the
- # required check, so these steps only run when the scripts exist.
- - name: Check for browser test suites
- id: browser-tests
- run: |
- node -e '
- const s = require("./package.json").scripts;
- require("fs").appendFileSync(process.env.GITHUB_OUTPUT,
- `ui=${s["test:ui"] ? "yes" : "no"}\naccessibility=${s["test:accessibility"] ? "yes" : "no"}\n`);
- '
-
- name: Install Playwright Chromium
- if: steps.browser-tests.outputs.ui == 'yes' || steps.browser-tests.outputs.accessibility == 'yes'
run: npx playwright install chromium --with-deps
- name: Run browser tests
- if: steps.browser-tests.outputs.ui == 'yes'
run: npm run test:ui
- name: Run accessibility modal tests
- if: steps.browser-tests.outputs.accessibility == 'yes'
run: npm run test:accessibility
- name: Run deploy guard
diff --git a/.gitignore b/.gitignore
index 507b2da..459486c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -58,3 +58,6 @@ BUILDSHIP_REVIEW_SYSTEM_PROMPT.txt
BUILDSHIP_REVIEW_SYSTEM_PROMPT_UPDATED.txt
/graphify-out
/.playwright-mcp
+
+# Playwright run artifacts
+test-results/
diff --git a/DEPLOYMENT.md b/DEPLOYMENT.md
index 8e8dbd8..3947986 100644
--- a/DEPLOYMENT.md
+++ b/DEPLOYMENT.md
@@ -92,15 +92,10 @@ reported rather than silently dropped:
* It imports something FlutterFlow only generates once the app is built -
`/backend/schema/structs/index.dart`, `../flutter_flow/lat_lng.dart`. Those
files do not exist until after the deploy.
-* The project declares a dependency from a source this manifest cannot
- express - a `git:` or `path:` source, a private `hosted:` block, or a
- `dependency_overrides` entry written that way - and the class resolves
- packages at all. `pubspec.lock`, the only document recording which packages
- that source brings in, never leaves the project, so the unreproducible
- package can sit anywhere in the class's transitive closure and an override
- can rewrite any name in the graph. The scratch package would resolve
- different code, and a check against the wrong version reports a result that
- does not describe what ships.
+* It imports a package the project declares from a source this manifest cannot
+ express: a `git:` or `path:` source, or a nested `hosted:` block. The scratch
+ package would resolve different code, and a check against the wrong version
+ reports a result that does not describe what ships.
The second case is decided once per deploy, not per class, because a
project-level source can alter resolution for a class that never names it. A
@@ -111,11 +106,14 @@ nothing through pub and is still compiled.
**Which packages the Flutter SDK supplies is read from the project's own
pubspec** - a dependency written in block form under `sdk:` is an SDK package by
-definition. Nothing keeps a list of SDK package names, because a list goes stale
-the moment the SDK ships one it has not heard of, and a stale list reads a
-perfectly valid package as unreproducible. That is not hypothetical: a list
-missing `flutter_web_plugins` refused whole deploys for projects that declared
-it.
+definition. A small name list still exists, but only for names the pubspec does
+not declare at all: a package the code imports and the project lacks is written
+as `sdk: flutter` when the SDK supplies it, so discovery never emits a hosted
+constraint pub.dev cannot resolve. A name the list has not heard of degrades to
+the ordinary hosted lookup, not a wrong answer. For declared dependencies the
+list plays no part - the pubspec's own keys are the authority, because a stale
+list read a perfectly valid `flutter_web_plugins` declaration as
+unreproducible and refused whole deploys over it.
The manifest is sent as package names and version constraints, never as
pubspec.yaml text, and the runner builds the document itself - it runs
@@ -151,6 +149,10 @@ https://ccc-ffai-runner-y5cyj3473a-uw.a.run.app/deployCustomClasses
Override it at build time with `VITE_FLUTTERFLOW_CLASS_PROVISION_ENDPOINT`.
`VITE_FLUTTERFLOW_DSL_DEPLOY_ENDPOINT` remains accepted for compatibility.
+Under `npm run dev` the app instead calls the same-origin path
+`/api/ffai-runner/deployCustomClasses`, which the Vite dev server proxies to
+the runner — its CORS allowlist admits only the production origin, so a direct
+browser call from localhost is rejected before the request reaches it.
Deploy the runner with:
```bash
diff --git a/app.js b/app.js
index ac24de8..2a520a6 100644
--- a/app.js
+++ b/app.js
@@ -1,4 +1,16 @@
import posthog from "posthog-js";
+import {
+ closeModal,
+ hasActiveModal,
+ initializeModalShells,
+ openModal,
+ setModalPending,
+} from "./src/sharedControls.js";
+import {
+ PLAN_LABELS as planLabels,
+ PLAN_LIMITS as planLimits,
+ PLAN_FEATURES as planFeatures,
+} from "./src/plansSurface.js";
import {
getPrimaryArtifact,
normalizeArtifactBundle,
@@ -32,9 +44,36 @@ import {
} from "./src/flutterFlowCodeSanitizer.js";
import { formatFlutterFlowFileError } from "./src/flutterFlowFileErrors.js";
import { extractPackageImports } from "./src/dartPackageImports.js";
+import {
+ explainPlusAliasRule,
+ getMagicLinkResultMessage,
+ isKnownProviderPlusAlias,
+ isMagicLinkSuccess,
+ trimEmail,
+} from "./src/authMagicLink.js";
+import {
+ clearDisposableUiCaches,
+ createSendLinkController,
+ isDeleteAccountSupported,
+ performSignOut,
+} from "./src/accountAccess.js";
import { planCustomCodeVerification } from "./src/customCodeVerification.js";
-import { readProvisionResponse } from "./src/provisionStream.js";
+import {
+ deployOutcomeOfStreamResult,
+ isPreWriteRunnerFailure,
+ readProvisionResponse,
+} from "./src/provisionStream.js";
+import {
+ classifyDeployResult,
+ DeployOutcome,
+ DEPLOY_UI_TIMEOUT_MS,
+ exhaustedPushError,
+ PUSH_BODY_READ_TIMEOUT_MS,
+ UnconfirmedDeployError,
+} from "./src/deployOutcome.js";
import { buildFlutterFlowSyncMetadata } from "./src/flutterFlowSyncMetadata.js";
+import { initHeroMarkField } from "./src/heroMarkField.js";
+import { createPipelineLogoLoop } from "./src/logoMotion.js";
import {
applyDependencyOverrides,
mergeDependenciesIntoYaml,
@@ -42,19 +81,26 @@ import {
} from "./src/pubspecSync.js";
import { planDependencyChanges } from "./src/dependencyResolution.js";
import { escapeAttr, escapeHtml, escapeHtmlText } from "./src/htmlEscape.js";
-import { resolvePipelineErrorStep } from "./src/pipelineErrors.js";
+import { resolvePipelineErrorStep, classifyPipelineError } from "./src/pipelineErrors.js";
import {
extractCodeFromMarkdown,
highlightCode,
renderMarkdownAudit,
} from "./src/auditRenderer.js";
+import { initComposer } from "./src/composerAdapter.js";
+import { cancelSurfaceMotion, currentSurfaceRect, morphSurface, exitHero } from "./src/surfaceMotion.js";
// --- CONFIGURATION ---
const IS_DEV = import.meta.env.DEV
+// The runner's CORS allowlist admits only the production origin, so a dev
+// server must reach it through Vite's same-origin /api/ffai-runner proxy
+// rather than calling the runner directly.
const FLUTTERFLOW_CLASS_PROVISION_ENDPOINT =
import.meta.env.VITE_FLUTTERFLOW_CLASS_PROVISION_ENDPOINT ||
import.meta.env.VITE_FLUTTERFLOW_DSL_DEPLOY_ENDPOINT ||
- "https://ccc-ffai-runner-y5cyj3473a-uw.a.run.app/deployCustomClasses";
+ (IS_DEV
+ ? "/api/ffai-runner/deployCustomClasses"
+ : "https://ccc-ffai-runner-y5cyj3473a-uw.a.run.app/deployCustomClasses");
// --- ANALYTICS ---
const POSTHOG_KEY = import.meta.env.VITE_PUBLIC_POSTHOG_KEY;
@@ -85,6 +131,11 @@ const STRIPE_PRICE_IDS = {
}
const AUTH_SESSION_STORAGE_KEY = 'ccc_auth_session'
+// Where the user asked to sign in from (composer, plans, billing…), so a
+// magic-link round trip — which reloads the page with no memory of the DOM —
+// can return them to that surface instead of always landing on home.
+const SIGNIN_RETURN_STORAGE_KEY = 'ccc_signin_return'
+const SIGNIN_RETURN_TTL_MS = 30 * 60 * 1000
const proGateAttachedSet = new WeakSet()
@@ -108,6 +159,11 @@ function createSubscriptionState(overrides = {}) {
let subscriptionState = createSubscriptionState({ isResolved: true })
+// Settles once startup auth + subscription fetches finish. The composer binds
+// before they complete, so a submission that lands early waits on this rather
+// than checking entitlements against free-tier defaults.
+let sessionReadiness = Promise.resolve()
+
// --- PIPELINE ---
const PIPELINE_ENDPOINT = `${BUILDSHIP_BASE_URL}/service/runpipeline`
@@ -125,11 +181,9 @@ let identityState = {
}
// --- TIER LIMITS ---
-const TIER_LIMITS = {
- free: 2,
- professional: 50,
- power: 2000,
-}
+// Single source of truth in src/plansSurface.js so the plans page, the
+// paywall and generation gating agree (STU-382 criterion 1).
+const TIER_LIMITS = planLimits;
const SUBSCRIPTION_CACHE_KEY = 'ccc_subscription'
const SUBSCRIPTION_CACHE_VERSION = 3
@@ -188,23 +242,51 @@ const PIPELINE_IMAGE_ENDPOINT =
// what actually gets sent to the pipeline.
let promptImages = [] // Array of { dataUrl, name, url }
-function readAsDataUrl(file) {
+// In-flight attachment uploads, one entry per file: { slot, controller, job }.
+// A submission that lands mid-upload waits on these before snapshotting
+// promptImages, and the composer gates Send/Enter while any are pending.
+// Ordering and cap claims live on the reserved slots in promptImages itself
+// (url === null while a slot is pending); removing a slot aborts its entry.
+const pendingImageUploads = []
+
+// An unresponsive upload endpoint must not gate the composer forever.
+const PROMPT_IMAGE_UPLOAD_TIMEOUT_MS = 30000
+
+// Handle returned by initComposer; lets attachment state gate the Send button.
+let composerControls = null
+
+function readAsDataUrl(file, signal) {
return new Promise((resolve) => {
const reader = new FileReader()
- reader.onload = () => resolve(reader.result)
- reader.onerror = () => resolve(null)
+ const done = (value) => {
+ signal?.removeEventListener("abort", onAbort)
+ resolve(value)
+ }
+ const onAbort = () => {
+ reader.abort()
+ done(null)
+ }
+ reader.onload = () => done(reader.result)
+ reader.onerror = () => done(null)
+ // The upload timeout aborts this too: a FileReader that never settles
+ // must not hold its slot (and the send gate) forever.
+ if (signal) {
+ if (signal.aborted) { resolve(null); return }
+ signal.addEventListener("abort", onAbort, { once: true })
+ }
reader.readAsDataURL(file)
})
}
// Uploads one image file to the BuildShip image endpoint. The endpoint is
// called separately from the pipeline so we pass real URLs, not base64.
-async function uploadPromptImage(file) {
+async function uploadPromptImage(file, signal) {
const formData = new FormData()
formData.append("file", file)
const res = await fetch(PIPELINE_IMAGE_ENDPOINT, {
method: "POST",
body: formData,
+ signal,
})
return res.json()
}
@@ -245,9 +327,78 @@ function uploadedFileUrl(uploaded) {
return ""
}
+// Uploads one selected file into its reserved promptImages slot. The slot
+// fixes the file's position and its claim on the cap at selection time; on
+// failure the slot is removed, on user removal the commit is skipped.
+// Resolves "added", "failed" (no usable upload URL, including a timeout),
+// or "dropped" (the slot was removed while the upload was in flight).
+async function addPromptImage(file, slot, signal) {
+ const dataUrl = await readAsDataUrl(file, signal)
+ if (dataUrl && promptImages.includes(slot)) {
+ // Fast local preview while the upload is still in flight.
+ slot.dataUrl = dataUrl
+ renderPromptImages()
+ }
+ let url = ""
+ if (dataUrl) {
+ try {
+ url = uploadedFileUrl(await uploadPromptImage(file, signal))
+ } catch (e) {
+ url = ""
+ }
+ }
+ // The slot may have been removed while the upload was in flight (remove
+ // button, or a non-vision model switch clearing attachments) — commit
+ // nothing then. discardImageUpload has already released the pending gate.
+ if (!promptImages.includes(slot)) return "dropped"
+ // A file that never produced an upload URL is reported by the caller and
+ // its slot removed — keeping it would render a thumbnail the pipeline
+ // silently filters out of the payload.
+ if (!dataUrl || !url) {
+ promptImages.splice(promptImages.indexOf(slot), 1)
+ renderPromptImages()
+ return "failed"
+ }
+ slot.url = url
+ renderPromptImages()
+ return "added"
+}
+
+function releaseImageUpload(entry) {
+ const i = pendingImageUploads.indexOf(entry)
+ if (i >= 0) pendingImageUploads.splice(i, 1)
+ updateAttachmentPending()
+}
+
+// Drop a pending upload: abort its request, free the send gate immediately,
+// and pull the slot if it is still attached. A settled upload is already out
+// of pendingImageUploads and can't reach this path.
+function discardImageUpload(entry) {
+ entry.controller.abort()
+ releaseImageUpload(entry)
+ const i = promptImages.indexOf(entry.slot)
+ if (i >= 0) {
+ promptImages.splice(i, 1)
+ renderPromptImages()
+ }
+}
+
+function updateAttachmentPending() {
+ composerControls?.setAttachmentsPending(pendingImageUploads.length > 0)
+}
+
async function handlePromptImageSelect(event) {
const files = Array.from(event.target.files || [])
if (!files.length) return
+ // Clear immediately so picking the same files again fires a change event.
+ event.target.value = ""
+
+ // A run already in flight has snapshotted its attachments; refuse new
+ // selections so an upload can't appear to belong to a run that omitted it.
+ if (pipelineState.isRunning) {
+ showToast("Wait for the current generation to finish before attaching images.", "info")
+ return
+ }
// Drop oversized files up front rather than uploading/reading them.
const oversized = files.filter((f) => f.size > MAX_PROMPT_IMAGE_BYTES)
@@ -258,46 +409,61 @@ async function handlePromptImageSelect(event) {
)
}
const validFiles = files.filter((f) => f.size <= MAX_PROMPT_IMAGE_BYTES)
- if (!validFiles.length) {
- event.target.value = ""
- return
- }
+ if (!validFiles.length) return
+ // Reserved slots already count toward the cap, so a second selection can't
+ // claim slots the first one is still filling.
const remaining = MAX_PROMPT_IMAGES - promptImages.length
const toAdd = validFiles.slice(0, remaining)
-
- const jobs = toAdd.map(async (file) => {
- const dataUrl = await readAsDataUrl(file)
- if (!dataUrl) return null
- let url = ""
- try {
- url = uploadedFileUrl(await uploadPromptImage(file))
- } catch (e) {
- url = ""
- }
- return { dataUrl, name: file.name, url }
- })
-
- const added = (await Promise.all(jobs)).filter(Boolean)
- event.target.value = ""
- // A non-vision model may have been selected while uploading; don't restore
- // images that the model-change handler cleared.
- if (
- added.length &&
- !modelSupportsImages(
- document.getElementById("code-generator-model")?.value,
- )
- ) {
- return
- }
- promptImages.push(...added)
if (validFiles.length > remaining) {
showToast(`You can attach up to ${MAX_PROMPT_IMAGES} images.`, "info")
}
+ if (!toAdd.length) return
+
+ const jobs = toAdd.map((file) => {
+ // Reserve the ordered slot synchronously: thumbnails and the payload keep
+ // selection order even when uploads finish out of order.
+ const slot = { dataUrl: null, name: file.name, url: null }
+ promptImages.push(slot)
+ const entry = { slot, controller: new AbortController() }
+ const timeoutId = setTimeout(
+ () => entry.controller.abort(),
+ PROMPT_IMAGE_UPLOAD_TIMEOUT_MS,
+ )
+ entry.job = addPromptImage(file, slot, entry.controller.signal)
+ pendingImageUploads.push(entry)
+ entry.job.finally(() => {
+ clearTimeout(timeoutId)
+ releaseImageUpload(entry)
+ })
+ return entry.job
+ })
renderPromptImages()
+ updateAttachmentPending()
+
+ const results = await Promise.all(jobs)
+ const failed = results.filter((r) => r === "failed").length
+ if (failed) {
+ showToast(`${failed} image(s) could not be uploaded and were not attached.`, "error")
+ }
}
function removePromptImage(index) {
+ // A run already in flight snapshotted its attachments: removing a slot now
+ // would abort the upload that slot was promised, silently dropping a
+ // submitted image from the run's payload.
+ if (pipelineState.isRunning) {
+ showToast("Wait for the current generation to finish before removing images.", "info")
+ return
+ }
+ const slot = promptImages[index]
+ const entry = pendingImageUploads.find((e) => e.slot === slot)
+ // Removing a pending thumbnail aborts its upload and frees the send gate
+ // right away instead of waiting on the abandoned request.
+ if (entry) {
+ discardImageUpload(entry)
+ return
+ }
promptImages.splice(index, 1)
renderPromptImages()
}
@@ -310,9 +476,11 @@ function renderPromptImages() {
container.innerHTML = ""
promptImages.forEach((img, i) => {
const el = document.createElement("div")
- el.className = "prompt-img-thumb"
+ // A slot whose upload is still in flight (url === null) renders dimmed
+ // with a spinner; it can already carry a local dataUrl preview.
+ el.className = "prompt-img-thumb" + (img.url ? "" : " is-pending")
el.innerHTML =
- `` +
+ (img.dataUrl ? `` : "") +
``
container.appendChild(el)
})
@@ -329,8 +497,13 @@ function updatePromptImageAvailability() {
const select = document.getElementById("code-generator-model")
const supports = modelSupportsImages(select?.value)
section.classList.toggle("hidden", !supports)
- // Non-vision models have no way to consume images: drop any already attached.
- if (!supports && promptImages.length) {
+ // Non-vision models have no way to consume images: drop any already
+ // attached. A run already in flight snapshotted its attachments — dropping
+ // them now would abort uploads the run's frozen slice still expects to
+ // commit, silently stripping the images it was started with.
+ if (!supports && promptImages.length && !pipelineState.isRunning) {
+ // Abort uploads still in flight so they release the send gate now.
+ pendingImageUploads.slice().forEach(discardImageUpload)
promptImages = []
renderPromptImages()
}
@@ -894,6 +1067,7 @@ function getFlutterFlowEndpoint() {
function setFlutterFlowEndpoint(endpoint) {
localStorage.setItem("flutterflow_api_endpoint", endpoint);
+ invalidateStaleProjectSelection();
return true;
}
@@ -918,6 +1092,158 @@ let commitTargetProjectId = null;
// modal's dropdown when the modal is closed/reopened before the fetch returns.
let confirmProjectToken = 0;
+// Canonical account-connection state for the account connection card. It is
+// derived from the outcome of a real FlutterFlow projects fetch — never from
+// the presence of stored bytes alone and never from the placeholder token
+// "set". 'connected' is only reachable from an actual listProjects response
+// that returned at least one project.
+// kind: 'not-configured' | 'validating' | 'connected' | 'no-projects'
+// | 'unauthorized' | 'network-error'
+let ffConnectionState = "not-configured";
+
+// Monotonic generation of the configured FlutterFlow endpoint. Every project
+// fetch and connection check captures it when it starts and discards its
+// outcome if the generation moved on, so a late response from a previous
+// endpoint can never overwrite the current endpoint's status or project list.
+let ffEndpointGeneration = 0;
+
+// Monotonic sequences of started projects requests. The dropdown fetch and the
+// connection check are independent consumers of the same endpoint, so each kind
+// keeps its own sequence: a check starting while a fetch is pending must not
+// discard the fetch's response (which would strand the dropdown on
+// "Loading projects..." forever), and a newer fetch must not discard a pending
+// check. Within one kind only the newest request may apply its outcome, so a
+// late response for a key that has since been replaced — or one superseded by a
+// newer same-kind request — can never overwrite the new key's project list or
+// status, even when the endpoint did not change.
+let ffProjectFetchSeq = 0;
+let ffConnectionCheckSeq = 0;
+
+// Issue order across BOTH request kinds. The dropdown fetch and the
+// connection check are superseded independently within their kind, but they
+// write shared state — the account connection status and the stored
+// project's confirmation. Ordering is split by what a request writes: an
+// applied CONNECTION outcome (the account status card) may only be written by
+// a request that actually produces one, so a list response that updates the
+// deploy dialog never leaves a pending check unable to settle the card; an
+// applied CONFIRMATION (the stored target's binding) is ordered separately so
+// the newest list response always wins the stored selection. A request may
+// write a domain only while no newer request already applied that domain.
+let ffRequestOrderSeq = 0;
+let ffAppliedOutcomeOrder = 0;
+let ffAppliedConfirmationOrder = 0;
+
+// Identity binding for project selections. A selection is only usable as a
+// deploy target while it is confirmed for the key + endpoint generation it was
+// made under. This binding is the one thing every read of a selection checks,
+// so a key replacement or endpoint change makes every previously confirmed
+// selection unusable until a completed listProjects response re-confirms it or
+// it is cleared. See isProjectSelectionConfirmed.
+let projectSelectionIdentity = null; // { projectId, key, generation } | null
+
+// Identity of the list currently populating the API-key editor's project
+// dropdown: the key + endpoint generation whose completed fetch produced the
+// options on screen. Starting a fetch clears it (the options are replaced by
+// the loading placeholder); only an applied response sets it.
+let projectListIdentity = null; // { key, generation } | null
+
+// Identity of the list currently populating the deploy confirmation modal's
+// project dropdown. A target may only be read from that dropdown while this
+// identity still matches the current key + endpoint generation.
+let confirmProjectListIdentity = null; // { key, generation } | null
+
+function beginProjectFetch() {
+ ffProjectFetchSeq += 1;
+ return ffProjectFetchSeq;
+}
+
+function beginConnectionCheck() {
+ ffConnectionCheckSeq += 1;
+ return ffConnectionCheckSeq;
+}
+
+/**
+ * Binds a project selection to the identity that produced it. The selection is
+ * an option of a completed fetch's list, so the binding copies that list's
+ * identity (the key it was fetched with and the endpoint generation it ran in).
+ * Called from the dropdown's change handler (a user choice) and when a
+ * completed response lists the stored selection (a re-confirmation).
+ */
+function bindProjectSelection(projectId, key, generation) {
+ projectSelectionIdentity = projectId ? { projectId, key, generation } : null;
+}
+
+/**
+ * The single gate every read of a project selection goes through. A selection
+ * may be used as the deploy target only while the binding names the same
+ * project and was confirmed under the key + endpoint generation being checked.
+ * A key replacement or endpoint change moves one of them, so the selection
+ * stops matching and cannot be read as a target until a completed fetch
+ * re-confirms it. The key is a parameter so the save path can check the key it
+ * is saving before that key has been loaded into memory.
+ */
+function isProjectSelectionConfirmed(projectId, key = flutterflowApiKey) {
+ if (!projectId) return false;
+ const identity = projectSelectionIdentity;
+ if (!identity) return false;
+ return (
+ identity.projectId === projectId &&
+ identity.key === key &&
+ identity.generation === ffEndpointGeneration
+ );
+}
+
+/**
+ * Reconciles the stored selection against a completed listProjects response
+ * for the current key + endpoint. A response that lists the stored project
+ * re-confirms it; one that does not strips its confirmation, so no later read
+ * can deploy to a project this key's completed response did not offer.
+ * Storage is left alone — the account card keeps mirroring the stored
+ * configuration; only the deploy gate changes. An in-flight explicit choice
+ * for a different project is never overwritten.
+ */
+function reconcileStoredProjectSelection(projects, key, generation) {
+ if (!flutterflowProjectId) return;
+ if (
+ projectSelectionIdentity &&
+ projectSelectionIdentity.projectId !== flutterflowProjectId
+ ) {
+ return;
+ }
+ const listed = (projects || []).some(
+ (project) => (project.id || project.projectId) === flutterflowProjectId,
+ );
+ if (listed) {
+ bindProjectSelection(flutterflowProjectId, key, generation);
+ } else if (projectSelectionIdentity) {
+ bindProjectSelection("", null, null);
+ }
+}
+
+/**
+ * Whether a projects request's outcome still describes the current connection
+ * identity and may be applied. Three things can move under an in-flight
+ * request: the endpoint (ffEndpointGeneration), the configured key (a
+ * replacement or a clear), and the newest request of the same kind (a newer
+ * fetch supersedes every older fetch; a newer check every older check). A
+ * response that lost any of them must not populate the current key's project
+ * list or connection status. A request made with the currently configured key
+ * stays valid even when it was issued before that key was saved — that is the
+ * editor's preview fetch.
+ */
+function isCurrentProjectRequest({
+ seq,
+ currentSeq,
+ generation,
+ storedKeyAtStart,
+ requestKey,
+}) {
+ if (seq !== currentSeq) return false;
+ if (generation !== ffEndpointGeneration) return false;
+ return storedKeyAtStart === flutterflowApiKey
+ || requestKey === flutterflowApiKey;
+}
+
async function initializeApiKeys() {
// Remove an exportable key left by an earlier version even if its encrypted
// credentials were already cleared.
@@ -928,13 +1254,30 @@ async function initializeApiKeys() {
flutterflowProjectId = await getApiKey("flutterflow_project_id");
updateApiKeyStatusIndicators();
updateDeployButtonVisibility();
+
+ // If a FlutterFlow key is stored, confirm the real connection even before
+ // the settings modal is opened, so the account connection card is truthful
+ // on load. Non-blocking; runs once per initialize.
+ if (flutterflowApiKey) {
+ validateFlutterFlowConnection();
+ } else {
+ ffConnectionState = "not-configured";
+ renderApiKeyConnection();
+ }
}
// --- API KEY UI FUNCTIONS ---
-function openApiKeysModal() {
+// Onboarding-scoped editor re-entry. The walkthrough's own "connect account"
+// step sets this before opening the shared API-key editor so that closing it
+// returns to (and advances) the tour. Settings opened from any other surface
+// (account card, gear, commit flow) stays false, so closing those never
+// launches or advances the walkthrough.
+let walkthroughSettingsActive = false;
+
+function openApiKeysModalBody() {
const modal = document.getElementById("api-keys-modal");
- modal.classList.add("open");
+ openModal(modal);
// Load current keys into inputs (masked)
loadApiKeyInputs();
@@ -946,17 +1289,153 @@ function openApiKeysModal() {
}
}
+function openApiKeysModal() {
+ // A standalone settings visit, not onboarding: closing it must not touch the
+ // walkthrough.
+ walkthroughSettingsActive = false;
+ openApiKeysModalBody();
+}
+
+// Entered by the walkthrough's "Connect your FlutterFlow account" step. Routes
+// the user to the real account control and remembers, on this one close, to
+// return to the originating tour step.
+function walkthroughConnectAccount() {
+ walkthroughSettingsActive = true;
+ // Close the tour first so the shared editor never stacks on top of it.
+ const wt = document.getElementById("walkthrough-modal");
+ if (wt) closeModal(wt);
+ openApiKeysModalBody();
+}
+
+// --- Composer generation settings (STU-385) ---
+//
+// The composer's gear opens this dialog, which presents the existing model
+// selector and supported generation options. #code-generator-model still lives
+// here and remains the single element the generation pipeline reads, so
+// selections made in this dialog reach the actual request unchanged — no
+// key-storage or transport change. Provider-key management is a shortcut into
+// the canonical account connection editor (openApiKeysModal, STU-384), never a
+// second independent editor.
+//
+// Closing this dialog from normal use must never reopen the walkthrough: the
+// featured bug the milestone tracks is an ordinary settings close resuming
+// onboarding. openComposerSettings runs with the standalone flag set (NOT the
+// walkthrough-originating flag), so closeComposerSettings leaves the walkthrough
+// untouched; only the walkthrough's own connect step flips that flag.
+
+let composerSettingsChangeWired = false;
+
+/**
+ * Keep the dialog's model mirror in step with the canonical #code-generator-model
+ * selector that still lives on the page. The mirror copies the canonical value,
+ * reuses the canonical availability labels (free tier marks PRO models "(PRO)"),
+ * and mirrors the canonical free-tier upgrade notice — so the dialog never
+ * drifts from the page or the pipeline. #code-generator-model remains the single
+ * element the generation request reads.
+ */
+function syncComposerSettingsModel() {
+ const canonical = document.getElementById("code-generator-model");
+ const mirror = document.getElementById("composer-settings-model");
+ if (!canonical || !mirror) return;
+ mirror.value = canonical.value;
+ const canonicalOptions = Array.from(canonical.options);
+ Array.from(mirror.options).forEach((mo, i) => {
+ const co = canonicalOptions[i];
+ if (co) mo.textContent = co.textContent;
+ });
+ const mirrorNotice = document.getElementById("composer-settings-free-notice");
+ if (mirrorNotice) {
+ if (document.getElementById("model-selector-free-notice")) {
+ mirrorNotice.hidden = false;
+ mirrorNotice.innerHTML =
+ `Free plan — Gemini only. ` +
+ ``;
+ } else {
+ mirrorNotice.hidden = true;
+ }
+ }
+}
+
+/**
+ * Reflect the selected model's supported generation options into the dialog and
+ * keep the composer's image-attach affordance in step (vision model → attach
+ * allowed; non-vision model → attach hidden and any attached images dropped).
+ */
+function renderComposerSettingsOptions() {
+ const select = document.getElementById("code-generator-model");
+ const capability = document.getElementById("composer-image-capability");
+ const note = document.getElementById("composer-image-capability-note");
+ if (!select) return;
+ const label = getModelLabel(select.value);
+ const supports = modelSupportsImages(select.value);
+ if (capability) {
+ capability.textContent = supports ? "Supported" : "Not supported";
+ }
+ if (note) {
+ note.textContent = supports
+ ? `${label} accepts reference images you attach to the prompt.`
+ : `Images can't be attached with ${label}. Attached images are removed when you switch to it.`;
+ }
+ updatePromptImageAvailability();
+}
+
+function openComposerSettings() {
+ // A standalone settings visit, not onboarding: closing it must not touch the
+ // walkthrough (same contract as openApiKeysModal).
+ walkthroughSettingsActive = false;
+ syncComposerSettingsModel();
+ renderComposerSettingsOptions();
+ if (!composerSettingsChangeWired) {
+ const mirror = document.getElementById("composer-settings-model");
+ if (mirror) {
+ mirror.addEventListener("change", () => {
+ // Forward the dialog selection to the canonical selector and let its
+ // existing handler apply gating (PRO-on-free resets to FREE_MODEL and
+ // opens pricing), model info and image-capability updates. Then resync
+ // the mirror to reflect any reset and refresh the dialog's rows.
+ const canonical = document.getElementById("code-generator-model");
+ canonical.value = mirror.value;
+ canonical.dispatchEvent(new Event("change"));
+ syncComposerSettingsModel();
+ renderComposerSettingsOptions();
+ });
+ }
+ composerSettingsChangeWired = true;
+ }
+ const trigger = document.querySelector(
+ '.composer [aria-label="Generation settings"]',
+ );
+ openModal("composer-settings-modal", { trigger });
+}
+
+function closeComposerSettings(event) {
+ if (event && event.target !== event.currentTarget) return;
+ closeModal("composer-settings-modal");
+}
+
function closeApiKeysModal(event) {
if (event && event.target !== event.currentTarget) return;
const modal = document.getElementById("api-keys-modal");
if (modal) {
- modal.classList.remove("open");
- }
- // Show walkthrough again after closing API keys
- const walkthroughModal = document.getElementById("walkthrough-modal");
- if (walkthroughModal) {
- advanceWalkthrough();
- walkthroughModal.classList.add("open");
+ closeModal(modal);
+ }
+ const fromWalkthrough = walkthroughSettingsActive;
+ walkthroughSettingsActive = false;
+ if (fromWalkthrough) {
+ // Return to the originating walkthrough step. Advance only when the
+ // account is genuinely connected, per the STU-384 canonical connection
+ // state (ffConnectionState), which is set only from a successful
+ // listProjects outcome — never from the mere presence of stored key bytes.
+ // A failed or cancelled connection returns to the same connect step so the
+ // user can retry instead of being pushed forward past an unconnected
+ // account.
+ const walkthroughModal = document.getElementById("walkthrough-modal");
+ if (walkthroughModal) {
+ if (ffConnectionState === "connected") {
+ advanceWalkthrough();
+ }
+ openModal(walkthroughModal);
+ }
}
}
@@ -973,38 +1452,17 @@ function updateWalkthroughUI() {
if (!steps.length) return;
steps.forEach((stepEl, idx) => {
const i = idx + 1;
+ stepEl.classList.remove("wt-current", "wt-done", "wt-pending");
+ const numEl = stepEl.querySelector(".wt-step-num");
if (i === walkthroughStep) {
- stepEl.classList.remove("opacity-60", "bg-gray-50", "border-gray-200");
- stepEl.classList.add("bg-blue-50", "border-blue-200");
- const numEl = stepEl.querySelector("div:first-child");
- if (numEl) {
- numEl.classList.remove("bg-gray-400");
- numEl.classList.add("bg-blue-500");
- numEl.innerHTML = i;
- }
+ stepEl.classList.add("wt-current");
+ if (numEl) numEl.textContent = i;
} else if (i < walkthroughStep) {
- stepEl.classList.remove("opacity-60", "bg-blue-50", "border-blue-200");
- stepEl.classList.add("bg-green-50", "border-green-200");
- const numEl = stepEl.querySelector("div:first-child");
- if (numEl) {
- numEl.classList.remove("bg-blue-500", "bg-gray-400");
- numEl.classList.add("bg-green-500");
- numEl.innerHTML = "✓";
- }
+ stepEl.classList.add("wt-done");
+ if (numEl) numEl.textContent = "✓";
} else {
- stepEl.classList.add("opacity-60", "bg-gray-50", "border-gray-200");
- stepEl.classList.remove(
- "bg-blue-50",
- "border-blue-200",
- "bg-green-50",
- "border-green-200",
- );
- const numEl = stepEl.querySelector("div:first-child");
- if (numEl) {
- numEl.classList.remove("bg-blue-500", "bg-green-500");
- numEl.classList.add("bg-gray-400");
- numEl.innerHTML = i;
- }
+ stepEl.classList.add("wt-pending");
+ if (numEl) numEl.textContent = i;
}
});
}
@@ -1022,7 +1480,7 @@ function openWalkthroughModal() {
if (modal) {
walkthroughStep = 1;
updateWalkthroughUI();
- modal.classList.add("open");
+ openModal(modal);
}
}
@@ -1030,7 +1488,7 @@ function closeWalkthroughModal(event) {
if (event && event.target !== event.currentTarget) return;
const modal = document.getElementById("walkthrough-modal");
if (modal) {
- modal.classList.remove("open");
+ closeModal(modal);
}
const dontShow = document.getElementById("walkthrough-dont-show");
@@ -1049,7 +1507,7 @@ function showWalkthroughIfNeeded() {
if (modal) {
walkthroughStep = 1;
updateWalkthroughUI();
- modal.classList.add("open");
+ openModal(modal);
}
}
}
@@ -1095,11 +1553,7 @@ function updateDeployButtonVisibility() {
pipelineState.step2Result && pipelineState.step2Result.length > 0;
const deployBtn = document.getElementById("btn-deploy-to-ff");
- const runBtn = document.getElementById("btn-run-pipeline");
- // Run Pipeline stays visible next to Deploy so a generation can be restarted
- // without closing the results.
- if (runBtn) runBtn.classList.remove("hidden");
if (deployBtn) {
deployBtn.classList.toggle("hidden", !hasGeneratedCode);
}
@@ -1154,25 +1608,84 @@ function updateApiKeyStatusIndicators() {
async function saveApiKeys() {
const flutterflowInput = document.getElementById("flutterflow-api-key-input");
const projectSelect = document.getElementById("flutterflow-projects-select");
+ const enteredKey = flutterflowInput.value.trim();
+ const isKeyReplaced = Boolean(enteredKey) && enteredKey !== flutterflowApiKey;
+ const selectedProjectId = projectSelect?.value.trim() || "";
// Only save if user entered a new value
- if (flutterflowInput.value.trim()) {
- await saveApiKey("flutterflow", flutterflowInput.value);
+ if (enteredKey) {
+ // A different key serves a different project set, so without a fresh
+ // selection the stored project id belongs to the old key and is not a
+ // trustworthy deploy target.
+ const previousKey = await getApiKey("flutterflow").catch(() => "");
+ await saveApiKey("flutterflow", enteredKey);
+ if (enteredKey !== previousKey && !selectedProjectId) {
+ clearStoredProjectSelection();
+ }
}
- const selectedProjectId = projectSelect?.value.trim() || "";
+ // The key the selection is saved under: a replacement key is the effective
+ // one even though initializeApiKeys has not loaded it into memory yet.
+ const effectiveKey = enteredKey || flutterflowApiKey;
+
if (selectedProjectId) {
if (!validateFlutterFlowProjectId(selectedProjectId)) {
showToast("The selected FlutterFlow project has an unexpected ID format.", "error");
projectSelect.focus();
return;
}
- await saveApiKey("flutterflow_project_id", selectedProjectId);
+ // A selection is persisted only while the identity binding confirms it for
+ // the key being saved: the dropdown's change handler binds a choice to the
+ // key + endpoint generation of the list that produced it, and a completed
+ // response re-confirms the stored value. A choice made from the old key's
+ // list (or a value auto-reselected under a replaced key) carries the old
+ // identity, so it is cleared instead of becoming the new key's target.
+ if (isProjectSelectionConfirmed(selectedProjectId, effectiveKey)) {
+ await saveApiKey("flutterflow_project_id", selectedProjectId);
+ } else {
+ // The on-screen choice belongs to a different key's list. Only a key
+ // replacement may drop the stored target: with the configured key
+ // unchanged, that choice is a preview leftover — the stored project
+ // stays configured and merely the options are reloaded for it.
+ if (isKeyReplaced) {
+ clearStoredProjectSelection();
+ } else {
+ // Drop the preview binding so the reloaded list's reconcile can
+ // re-confirm the stored project (its different-project guard would
+ // otherwise keep skipping it, leaving the stored target refused).
+ projectSelectionIdentity = null;
+ }
+ projectSelect.value = "";
+ // The options on screen came from a list that does not belong to the key
+ // being saved; refresh them for the saved key so the user can make a
+ // fresh, confirmable choice.
+ if (
+ effectiveKey &&
+ !(
+ projectListIdentity &&
+ projectListIdentity.key === effectiveKey &&
+ projectListIdentity.generation === ffEndpointGeneration
+ )
+ ) {
+ fetchProjects(effectiveKey);
+ }
+ }
+ } else if (isKeyReplaced) {
+ clearStoredProjectSelection();
}
// Reinitialize keys
await initializeApiKeys();
+ // If a key was (re)entered, wait for the REAL connection outcome before the
+ // editor closes, so the walkthrough advance decision in closeApiKeysModal
+ // sees a settled canonical state rather than an in-flight "validating" or
+ // the mere presence of stored bytes. STU-384 owns this state; it is only
+ // "connected" after a real listProjects returns at least one project.
+ if (enteredKey) {
+ await validateFlutterFlowConnection();
+ }
+
// Update UI
loadApiKeyInputs();
@@ -1212,6 +1725,11 @@ async function clearAllApiKeys() {
sessionStorage.removeItem(SESSION_STORAGE_KEY_PREFIX + "flutterflow");
sessionStorage.removeItem(SESSION_STORAGE_KEY_PREFIX + "flutterflow_project_id");
+ // No key and no list: every project selection binding is meaningless now.
+ projectSelectionIdentity = null;
+ projectListIdentity = null;
+ confirmProjectListIdentity = null;
+
// Reinitialize keys
await initializeApiKeys();
@@ -1238,6 +1756,191 @@ function validateFlutterFlowProjectId(projectId) {
return /^[a-zA-Z0-9-]+$/.test(projectId);
}
+/**
+ * Renders the account connection card from the canonical connection state.
+ * Not-config/validating/connected/no-projects/unauthorized/network-error are
+ * derived from ffConnectionState, which is only ever set from a real
+ * listProjects outcome. No raw or masked API key is ever written into a status
+ * label here.
+ */
+function renderApiKeyConnection() {
+ const dot = document.getElementById("acct-ff-dot");
+ const status = document.getElementById("acct-ff-status");
+ const endpoint = document.getElementById("acct-ff-endpoint");
+ const project = document.getElementById("acct-ff-project");
+
+ // Endpoint and default project always mirror the stored configuration (the
+ // same value the deploy confirmation pre-selects).
+ if (endpoint) {
+ const ep = getFlutterFlowEndpoint();
+ endpoint.textContent = ep && ep.includes("staging") ? "Staging" : "Production";
+ }
+ if (project) {
+ project.textContent = flutterflowProjectId || "—";
+ }
+ if (!status) return;
+
+ let label;
+ let tone;
+ if (!hasStoredKey("flutterflow")) {
+ label = "Not connected — add your FlutterFlow API key";
+ tone = "";
+ } else {
+ switch (ffConnectionState) {
+ case "connected":
+ label = "Connected to FlutterFlow";
+ tone = "ok";
+ break;
+ case "no-projects":
+ label = "Key accepted — no projects found";
+ tone = "warn";
+ break;
+ case "unauthorized":
+ label = "API key rejected (401/403) — re-enter your key";
+ tone = "bad";
+ break;
+ case "network-error":
+ label = "Could not reach FlutterFlow — check your network";
+ tone = "bad";
+ break;
+ case "validating":
+ default:
+ label = "Checking connection…";
+ tone = "warn";
+ break;
+ }
+ }
+ status.textContent = label;
+ if (dot) dot.className = `acct-dot${tone ? " " + tone : ""}`;
+}
+
+/**
+ * Refreshes the canonical connection state by calling the real FlutterFlow
+ * projects endpoint with the stored key. A returned empty list and a 401/403
+ * are distinct outcomes; both differ from a network failure. Used at startup
+ * and after saving/clearing so the account connection card is truthful.
+ * @returns {Promise} the loaded projects, or null on error.
+ */
+async function validateFlutterFlowConnection() {
+ // The connection identity this check belongs to. If the endpoint, the
+ // configured key, or the newest connection check moves while the check is in
+ // flight, its outcome describes a previous identity and must be discarded
+ // rather than overwrite the new one's state. A pending dropdown fetch is a
+ // different kind and does not supersede the check (nor the check it).
+ const seq = beginConnectionCheck();
+ const order = ++ffRequestOrderSeq;
+ const generation = ffEndpointGeneration;
+ const storedKeyAtStart = flutterflowApiKey;
+ const apiKey = await getApiKey("flutterflow");
+ const outcomeIsCurrent = () =>
+ isCurrentProjectRequest({
+ seq,
+ currentSeq: ffConnectionCheckSeq,
+ generation,
+ storedKeyAtStart,
+ requestKey: apiKey,
+ });
+ // Everything a check writes is shared connection state, so a check that
+ // started before a newer request's outcome was applied has nothing left to
+ // write: skip it entirely rather than flash "validating" over the newer
+ // result and then fail silently.
+ if (!outcomeIsCurrent() || order <= ffAppliedOutcomeOrder) return null;
+ const applyConfirmation = () => {
+ ffAppliedConfirmationOrder = Math.max(ffAppliedConfirmationOrder, order);
+ };
+ if (!apiKey || !hasStoredKey("flutterflow")) {
+ ffAppliedOutcomeOrder = order;
+ applyConfirmation();
+ ffConnectionState = "not-configured";
+ renderApiKeyConnection();
+ return null;
+ }
+
+ ffConnectionState = "validating";
+ renderApiKeyConnection();
+
+ try {
+ const client = new FlutterFlowApiClient(
+ apiKey,
+ "",
+ "main",
+ getFlutterFlowEndpoint(),
+ );
+ const projects = await client.listProjects();
+ if (!outcomeIsCurrent()) return null;
+ // A newer request of either kind already applied its outcome: this older
+ // response must not write shared state over it.
+ if (order <= ffAppliedOutcomeOrder) return null;
+ ffAppliedOutcomeOrder = order;
+ applyConfirmation();
+ ffConnectionState = projects && projects.length > 0
+ ? "connected"
+ : "no-projects";
+ // A completed check for the current key is authoritative for what that key
+ // can reach: it re-confirms the stored selection when the response lists
+ // it, and strips its confirmation when it does not — but only while it is
+ // still the newest confirmation writer, so a fresher list response wins.
+ if (order >= ffAppliedConfirmationOrder) {
+ reconcileStoredProjectSelection(projects, apiKey, generation);
+ }
+ renderApiKeyConnection();
+ return projects;
+ } catch (error) {
+ if (!outcomeIsCurrent()) return null;
+ if (order <= ffAppliedOutcomeOrder) return null;
+ ffAppliedOutcomeOrder = order;
+ applyConfirmation();
+ const msg = String((error && error.message) || "");
+ ffConnectionState = /(401|403)|denied|unauthorized|scoped|list permission/i.test(msg)
+ ? "unauthorized"
+ : "network-error";
+ renderApiKeyConnection();
+ return null;
+ }
+}
+
+/**
+ * Clears the currently selected FlutterFlow project so a stale selection
+ * (belonging to a different endpoint, or a removed key) is never reused as a
+ * deploy/sync default. Storage, the in-memory value, its identity binding and
+ * the dropdown mirror each other: the account connection card and the deploy
+ * confirmation read the same stored value, so invalidating it keeps them
+ * consistent.
+ */
+function clearStoredProjectSelection() {
+ flutterflowProjectId = "";
+ projectSelectionIdentity = null;
+ localStorage.removeItem(STORAGE_KEY_PREFIX + "flutterflow_project_id");
+ sessionStorage.removeItem(SESSION_STORAGE_KEY_PREFIX + "flutterflow_project_id");
+}
+
+/**
+ * Endpoint changes serve a different project set, so the previously selected
+ * project is no longer a trustworthy target. Invalidate the stale selection and
+ * re-fetch the project list for the new endpoint when a key is configured.
+ */
+function invalidateStaleProjectSelection() {
+ // Any request still in flight belongs to the previous endpoint: advancing
+ // the generation makes it discard its outcome instead of writing it over the
+ // new endpoint's status or project list.
+ ffEndpointGeneration += 1;
+ projectListIdentity = null;
+ confirmProjectListIdentity = null;
+ clearStoredProjectSelection();
+ const select = document.getElementById("flutterflow-projects-select");
+ if (select) {
+ select.innerHTML = '';
+ select.value = "";
+ }
+ if (hasStoredKey("flutterflow")) {
+ ffConnectionState = "validating";
+ fetchProjects(flutterflowApiKey);
+ } else {
+ ffConnectionState = "not-configured";
+ }
+ renderApiKeyConnection();
+}
+
function updateInputValidationState(inputId, isValid) {
const input = document.getElementById(inputId);
if (!input) return;
@@ -1269,6 +1972,26 @@ function setupFlutterFlowValidation() {
}, 500),
);
}
+
+ const projectSelect = document.getElementById("flutterflow-projects-select");
+ if (projectSelect) {
+ projectSelect.addEventListener("change", () => {
+ const chosen = projectSelect.value.trim();
+ // A choice is one of the options a completed fetch produced, so it is
+ // bound to that list's identity. Without a completed list there is
+ // nothing to bind, and any previous binding no longer matches the value
+ // on screen.
+ if (chosen && projectListIdentity) {
+ bindProjectSelection(
+ chosen,
+ projectListIdentity.key,
+ projectListIdentity.generation,
+ );
+ } else {
+ bindProjectSelection("", null, null);
+ }
+ });
+ }
}
/**
@@ -1303,20 +2026,96 @@ async function fetchProjects(apiKey) {
return;
}
- // Show loading state
+ // The connection identity this fetch belongs to. If the endpoint, the
+ // configured key, or the newest dropdown fetch moves while the fetch is in
+ // flight, its response describes a previous identity and must be discarded
+ // rather than overwrite the new one's list or status. A connection check is
+ // a different kind and does not supersede the fetch (nor the fetch it).
+ const seq = beginProjectFetch();
+ const order = ++ffRequestOrderSeq;
+ const generation = ffEndpointGeneration;
+ const storedKeyAtStart = flutterflowApiKey;
+ const outcomeIsCurrent = () =>
+ isCurrentProjectRequest({
+ seq,
+ currentSeq: ffProjectFetchSeq,
+ generation,
+ storedKeyAtStart,
+ requestKey: apiKey,
+ });
+ // The dropdown is this fetch's own surface: the newest fetch still fills it
+ // even when its shared-state outcome is stale. Shared writes — connection
+ // status and stored-project confirmation — go to the newest request of
+ // either kind only, so an older list cannot re-mark the account connected
+ // after a newer check failed.
+ const mayWriteConnectionOutcome = () => order > ffAppliedOutcomeOrder;
+ const claimConnectionOutcome = () => {
+ ffAppliedOutcomeOrder = Math.max(ffAppliedOutcomeOrder, order);
+ };
+
+ // Show loading state. The options are replaced by the loading placeholder
+ // below, so no list is on screen until this fetch's response is applied.
+ projectListIdentity = null;
select.innerHTML = '';
if (errorElement) errorElement.classList.add("hidden");
+ // A real request is in flight; the account connection card shows validating
+ // until the outcome is known (never "connected" from storage alone). Only a
+ // request for the key that is actually configured describes the account — a
+ // preview request for a key that is never saved must not flash validating
+ // (and must not write any account status below).
+ if (
+ mayWriteConnectionOutcome() &&
+ apiKey === flutterflowApiKey &&
+ (hasStoredKey("flutterflow") || apiKey)
+ ) {
+ ffConnectionState = "validating";
+ }
+ renderApiKeyConnection();
+
try {
// Create temporary client instance (no project ID needed)
- const client = new FlutterFlowApiClient(apiKey, "");
+ const client = new FlutterFlowApiClient(
+ apiKey,
+ "",
+ "main",
+ getFlutterFlowEndpoint(),
+ );
const projects = await client.listProjects();
+ if (!outcomeIsCurrent()) return;
+
+ // The applied options belong to this fetch's key + endpoint generation.
+ projectListIdentity = { key: apiKey, generation };
+ // Shared writes — account status and stored-project confirmation — belong
+ // to the configured key only: a preview fetch for a key that is never
+ // saved must not describe the account or confirm a selection, while one
+ // whose key became the configured key mid-flight still applies.
+ const requestIsForConfiguredKey = apiKey === flutterflowApiKey;
+ const outcomeIsNewest =
+ mayWriteConnectionOutcome() && requestIsForConfiguredKey;
+ if (outcomeIsNewest) claimConnectionOutcome();
+ // A response for the configured key re-confirms (or strips) the stored
+ // selection while it is still the newest confirmation response: an older
+ // list must not restore the target's confirmation over a newer one.
+ if (order > ffAppliedConfirmationOrder && requestIsForConfiguredKey) {
+ ffAppliedConfirmationOrder = order;
+ reconcileStoredProjectSelection(projects, apiKey, generation);
+ }
if (!projects || projects.length === 0) {
+ if (outcomeIsNewest) {
+ ffConnectionState = "no-projects";
+ renderApiKeyConnection();
+ }
select.innerHTML = '';
return;
}
+ if (outcomeIsNewest) {
+ ffConnectionState = "connected";
+ renderApiKeyConnection();
+ }
+
// Populate dropdown
select.innerHTML = '';
projects.forEach((project) => {
@@ -1332,7 +2131,16 @@ async function fetchProjects(apiKey) {
select.value = flutterflowProjectId;
}
} catch (error) {
+ if (!outcomeIsCurrent()) return;
console.error("Failed to fetch projects:", error);
+ const msg = String((error && error.message) || "");
+ if (mayWriteConnectionOutcome() && apiKey === flutterflowApiKey) {
+ claimConnectionOutcome();
+ ffConnectionState = /(401|403)|denied|unauthorized|scoped|list permission/i.test(msg)
+ ? "unauthorized"
+ : "network-error";
+ renderApiKeyConnection();
+ }
select.innerHTML = '';
if (errorElement) {
errorElement.textContent = `Failed to load projects: ${error.message}`;
@@ -1372,6 +2180,15 @@ let pipelineState = {
resultsViewMode: "summary",
currentStep: 0,
isRunning: false,
+ // Incremented every time a pipeline run starts. Captured locally by each
+ // run so a stale run's async step results can never overwrite a newer
+ // run's UI state (e.g. a slow first request resolving after the user
+ // already retried).
+ runId: 0,
+ // The prompt and images as submitted, so a retry re-runs exactly what the
+ // user sent and an edit returns them to the composer unchanged.
+ submittedPrompt: "",
+ submittedImages: [],
};
function resetPipelineResults() {
@@ -1710,17 +2527,36 @@ class FlutterFlowApiClient {
* @param {string} pushCodeRequest.functions_map - JSON string of function definitions
* @returns {Promise} Fetch response object
*/
- async pushCodeWithRetry(pushCodeRequest, maxRetries = 3) {
+ async pushCodeWithRetry(pushCodeRequest, maxRetries = 3, stopToken = null) {
const endpointUrls = [
FF_API_ENDPOINTS.production,
FF_API_ENDPOINTS.staging,
];
const startEndpoint = Math.max(0, endpointUrls.indexOf(this._endpoint));
+ // An attempt is uncertain when its outcome cannot prove the push was
+ // refused: a dropped response (the request may have landed) or a 5xx (the
+ // server's own failure report can follow a write). Once any attempt is
+ // uncertain, no later refusal can undo it — the outcome stays unknown.
+ let sawUncertainAttempt = false;
+ let lastHttpStatus = null;
for (let attempt = 0; attempt < maxRetries; attempt++) {
for (let ei = startEndpoint; ei < endpointUrls.length; ei++) {
const baseUrl = endpointUrls[ei];
+ // Once the UI bound expired, the outcome was already reported
+ // unconfirmed and the user may have started a new deploy — issuing
+ // another write would overlap it. An in-flight request is never
+ // aborted; this only stops attempts not yet sent.
+ if (stopToken?.stop) {
+ throw exhaustedPushError({ httpStatus: lastHttpStatus });
+ }
+
+ // Only a fetch rejection is a lost response: once headers arrive, a
+ // refusal status is a definitive answer for this endpoint — and a body
+ // that fails to read for logging must not reclassify one as a lost
+ // response (or send a non-500 refusal back through the retry loop).
+ let response;
try {
console.log(
`Push attempt ${attempt + 1} to ${baseUrl}syncCustomCodeChanges`,
@@ -1734,7 +2570,7 @@ class FlutterFlowApiClient {
file_map_length: pushCodeRequest.file_map?.length || 0,
functions_map_length: pushCodeRequest.functions_map?.length || 0,
});
- const response = await fetch(`${baseUrl}syncCustomCodeChanges`, {
+ response = await fetch(`${baseUrl}syncCustomCodeChanges`, {
method: "POST",
headers: {
"Content-Type": "application/json",
@@ -1742,39 +2578,88 @@ class FlutterFlowApiClient {
},
body: JSON.stringify(pushCodeRequest),
});
-
- if (response.ok) {
- console.log(`Push to ${baseUrl} succeeded!`);
- return response;
- }
-
- const clonedForLog = response.clone();
- const responseText = await clonedForLog.text();
- console.log(
- `Push to ${baseUrl} returned ${response.status}: ${responseText}`,
- );
-
- if (response.status === 500) {
- console.warn(`Endpoint ${baseUrl} returned 500, trying next...`);
- await new Promise((r) => setTimeout(r, 1000 * (attempt + 1)));
- continue;
- }
-
- return response;
} catch (error) {
+ sawUncertainAttempt = true;
console.warn(
`Push to ${baseUrl} failed: ${error.message}, trying next...`,
);
await new Promise((r) => setTimeout(r, 1000 * (attempt + 1)));
+ continue;
+ }
+
+ if (response.ok) {
+ console.log(`Push to ${baseUrl} succeeded!`);
+ return response;
+ }
+
+ lastHttpStatus = response.status;
+ // The status alone classifies this response — the body read is
+ // diagnostic only: detached so it can't block the refusal path, and
+ // bounded+cancelled so a stalled body can't leave a reader (and its
+ // connection) open past the bound. A response this loop will not
+ // hand back to the caller is read directly — teeing it with clone()
+ // would leave the original branch (and its connection) feeding a
+ // reader that doesn't exist; only the definitive-refusal path keeps
+ // the original body for parsePushCodeResponse, so it logs a clone.
+ const returnedToCaller =
+ response.status < 500 && !sawUncertainAttempt;
+ readBodyBounded(
+ returnedToCaller ? response.clone() : response,
+ PUSH_BODY_READ_TIMEOUT_MS,
+ ).then(
+ (responseText) =>
+ console.log(
+ `Push to ${baseUrl} returned ${response.status}: ${responseText}`,
+ ),
+ () =>
+ console.log(
+ `Push to ${baseUrl} returned ${response.status} (unreadable response body)`,
+ ),
+ );
+
+ // A 5xx is the server's own failure report: it can be raised after
+ // the write was applied, so it can never prove a refusal.
+ if (response.status >= 500) {
+ sawUncertainAttempt = true;
+ }
+ if (response.status === 500) {
+ console.warn(`Endpoint ${baseUrl} returned 500, trying next...`);
+ await new Promise((r) => setTimeout(r, 1000 * (attempt + 1)));
+ continue;
+ }
+
+ // Any other server error is already an unknown outcome for this
+ // endpoint — the write may have been applied before the failure.
+ if (response.status >= 500) {
+ throw new UnconfirmedDeployError(
+ `FlutterFlow reported a server error (HTTP ${response.status}), ` +
+ "which cannot prove the push was refused — the write may have " +
+ "been applied before the failure. Open your FlutterFlow project " +
+ "to reconcile before retrying.",
+ );
+ }
+
+ // A refusal is definitive for this endpoint, but it cannot prove that
+ // an earlier attempt whose outcome was lost did not apply the push.
+ if (sawUncertainAttempt) {
+ throw new UnconfirmedDeployError(
+ `The push was refused (HTTP ${response.status}), but an earlier ` +
+ "sync attempt may already have applied it — server errors and " +
+ "dropped responses cannot prove a refusal. Open your FlutterFlow " +
+ "project to reconcile before retrying.",
+ );
}
+ return response;
}
}
- throw new Error("All API endpoints failed after retries");
+ // Every retry path left the outcome unknown: each attempt either lost its
+ // response or hit a server error, so the push may have been applied.
+ throw exhaustedPushError({ httpStatus: lastHttpStatus });
}
- async pushCode(pushCodeRequest) {
- return this.pushCodeWithRetry(pushCodeRequest);
+ async pushCode(pushCodeRequest, stopToken = null) {
+ return this.pushCodeWithRetry(pushCodeRequest, 3, stopToken);
}
/**
@@ -1863,19 +2748,67 @@ class FlutterFlowApiClient {
}
}
+/**
+ * Reads a response body to text under a bound. Unlike `text()`, it keeps the
+ * reader so that on expiry the stream is cancelled for real — `body.cancel()`
+ * rejects while a `text()`/`json()` read holds the lock, but `reader.cancel()`
+ * is valid even mid-read, so a stalled body releases its connection instead
+ * of leaving a pending reader alive after the waiter settled.
+ * @param {Response} response - Response whose body to read
+ * @param {number} ms - How long to wait for the body
+ * @returns {Promise} Rejects when the body stalls or the read fails
+ */
+function readBodyBounded(response, ms) {
+ const reader = response.body?.getReader?.();
+ const work = reader
+ ? (async () => {
+ const decoder = new TextDecoder();
+ let text = "";
+ while (true) {
+ const { done, value } = await reader.read();
+ if (done) break;
+ text += decoder.decode(value, { stream: true });
+ }
+ return text + decoder.decode();
+ })()
+ : Promise.resolve("");
+ return withUiTimeout(work, ms, (resolve, reject) => {
+ try {
+ reader?.cancel()?.catch?.(() => {});
+ } catch {}
+ reject(new Error("The response body stalled before it finished."));
+ });
+}
+
/**
* Parses the response from pushCode API call.
* @param {Response} response - Fetch response object
* @returns {Promise