Fix self-host/Cloudflare update card always showing; show version in dashboard (#1204)

The self-host and Cloudflare builds baked a placeholder VITE_APP_VERSION
(0.0.0-selfhost / 0.0.0-cloudflare), so the update check always compared as
"behind" and the card showed even on the latest version. Bake the real release
version from the CLI package the same way apps/local does. Also surface the
running version in the multiplayer shell sidebar footer so self-hosters can see
what they are on. Adds a regression e2e: current build -> no card + version shown.

Author: RhysSullivan

.changeset/selfhost-update-card-version.md

@@ -0,0 +1,7 @@
+---
+"@executor-js/host-selfhost": patch
+"@executor-js/host-cloudflare": patch
+"@executor-js/react": patch
+---
+
+Fix the self-host and Cloudflare web dashboards showing "update available" even on the latest version. The builds baked a placeholder version (`0.0.0-selfhost` / `0.0.0-cloudflare`) into the shell, so the update check always compared as behind. They now bake the real release version, and the sidebar footer shows the running version so you can see what you are on.

apps/host-cloudflare/vite.config.ts

@@ -1,3 +1,4 @@
+import { readFileSync } from "node:fs";
 import { fileURLToPath } from "node:url";
 
 import { defineConfig } from "vite";
@@ -8,6 +9,15 @@ import executorVitePlugin from "@executor-js/vite-plugin";
 
 import { routes } from "./tsr.routes";
 
+// The real release version (matches the published `executor` dist-tags the
+// update card compares against). A placeholder here made the card read as
+// permanently "behind".
+// oxlint-disable-next-line executor/no-json-parse -- boundary: Vite config reads the version from package.json at build time
+const cliPackage = JSON.parse(
+  readFileSync(new URL("../cli/package.json", import.meta.url), "utf8"),
+) as { version?: string };
+const EXECUTOR_VERSION = cliPackage.version;
+
 // ---------------------------------------------------------------------------
 // Cloudflare web SPA. The SAME shared @executor-js/react shell + pages as cloud
 // and self-host; the TanStack router codegen points at THIS app's routes
@@ -36,7 +46,7 @@ export default defineConfig({
     dedupe: ["react", "react-dom"],
   },
   define: {
-    "import.meta.env.VITE_APP_VERSION": JSON.stringify("0.0.0-cloudflare"),
+    "import.meta.env.VITE_APP_VERSION": JSON.stringify(EXECUTOR_VERSION ?? "0.0.0"),
     // Cloudflare upgrades by redeploying the Worker (wrangler deploy), not npm,
     // so the update card links to the upgrade guide instead of a command.
     "import.meta.env.VITE_UPGRADE_HINT": JSON.stringify("cloudflare"),

apps/host-selfhost/vite.config.ts

@@ -1,3 +1,4 @@
+import { readFileSync } from "node:fs";
 import { Readable } from "node:stream";
 import { fileURLToPath } from "node:url";
 
@@ -10,6 +11,16 @@ import executorVitePlugin from "@executor-js/vite-plugin";
 import { routes } from "./tsr.routes";
 import { stripMcpOrgSegment } from "./src/mcp/org-path";
 
+// The real release version (matches the published `executor` dist-tags the
+// update card compares against), read from the CLI package the same way
+// apps/local does. A placeholder here made the card read as permanently
+// "behind", see the update-check comparison in @executor-js/react.
+// oxlint-disable-next-line executor/no-json-parse -- boundary: Vite config reads the version from package.json at build time
+const cliPackage = JSON.parse(
+  readFileSync(new URL("../cli/package.json", import.meta.url), "utf8"),
+) as { version?: string };
+const EXECUTOR_VERSION = cliPackage.version;
+
 // Self-host web SPA. Mirrors @executor-js/app's vite plugin bundle, but points
 // the TanStack router codegen at THIS app's routes (web/routes) so we get the
 // multiplayer shell + Better-Auth gate (routes/__root.tsx) instead of the
@@ -140,7 +151,7 @@ export default defineConfig({
     dedupe: ["react", "react-dom"],
   },
   define: {
-    "import.meta.env.VITE_APP_VERSION": JSON.stringify("0.0.0-selfhost"),
+    "import.meta.env.VITE_APP_VERSION": JSON.stringify(EXECUTOR_VERSION ?? "0.0.0"),
     // Self-host upgrades by pulling/rebuilding the image (or git + rebuild), not
     // npm, so the update card links to the upgrade guide instead of a command.
     "import.meta.env.VITE_UPGRADE_HINT": JSON.stringify("selfhost"),

e2e/cloudflare/update-card-render.test.ts

@@ -1,8 +1,15 @@
 // Cloudflare-only: the update card paints on the Cloudflare-served web shell
 // (Workers Static Assets + the Worker route). See ../src/update-card-render.ts
 // for the shared body.
-import { registerUpdateCardRenderScenario } from "../src/update-card-render";
+import {
+  registerUpdateCardCurrentScenario,
+  registerUpdateCardRenderScenario,
+} from "../src/update-card-render";
 
 registerUpdateCardRenderScenario(
   "Cloudflare · the web shell sidebar surfaces the update-available card",
 );
+
+registerUpdateCardCurrentScenario(
+  "Cloudflare · no update card when current, and the footer shows the version",
+);

e2e/selfhost/update-card-render.test.ts

@@ -1,8 +1,15 @@
 // Selfhost-only (runs on the dev server AND the production Docker image): the
 // update card paints on the self-host web shell. See
 // ../src/update-card-render.ts for the shared body.
-import { registerUpdateCardRenderScenario } from "../src/update-card-render";
+import {
+  registerUpdateCardCurrentScenario,
+  registerUpdateCardRenderScenario,
+} from "../src/update-card-render";
 
 registerUpdateCardRenderScenario(
   "Selfhost · the web shell sidebar surfaces the update-available card",
 );
+
+registerUpdateCardCurrentScenario(
+  "Selfhost · no update card when current, and the footer shows the version",
+);

e2e/src/update-card-render.ts

@@ -56,3 +56,52 @@ export const registerUpdateCardRenderScenario = (name: string): void =>
       });
     }),
   );
+
+// Regression for the "card always shows on Docker even on the latest version"
+// report: a placeholder build version (0.0.0-selfhost / 0.0.0-cloudflare) made
+// the comparison permanently "behind". With the real version baked in, a
+// published version that is NOT newer must leave the card hidden, and the
+// sidebar footer must show the running version (the other half of the report).
+export const registerUpdateCardCurrentScenario = (name: string): void =>
+  scenario(
+    name,
+    { timeout: 120_000 },
+    Effect.gen(function* () {
+      const target = yield* Target;
+      const browser = yield* Browser;
+      const identity = yield* target.newIdentity();
+
+      yield* browser.session(identity, async ({ page, step }) => {
+        // Report a published version OLDER than this build, i.e. the build is
+        // current. With the placeholder version this still showed the card.
+        await page.route("**/v1/app/npm/dist-tags", (route) =>
+          route.fulfill({
+            contentType: "application/json",
+            body: JSON.stringify({ latest: "0.0.1", beta: "0.0.1-beta.1" }),
+          }),
+        );
+
+        await step("Open the console", async () => {
+          await page.goto("/", { waitUntil: "networkidle" });
+          await page.getByRole("heading", { name: "Integrations" }).waitFor({ timeout: 60_000 });
+        });
+
+        await step("No update card, and the footer shows the running version", async () => {
+          // The footer version proves the build injects a real semver, not a
+          // placeholder, which is what makes the comparison correct.
+          const version = page
+            .locator("aside")
+            .getByText(/^v\d+\.\d+\.\d+/)
+            .first();
+          await version.waitFor({ timeout: 10_000 });
+          // The mocked update check resolves on mount; give the state a beat to
+          // settle, then assert the card stayed hidden.
+          await page.waitForTimeout(750);
+          expect(
+            await page.getByText("Update available").count(),
+            "no update card when the build is current",
+          ).toBe(0);
+        });
+      });
+    }),
+  );

packages/react/src/multiplayer/shell.tsx

@@ -59,6 +59,13 @@ export const defaultShellNavItems: ReadonlyArray<ShellNavItem> = [
  *  via {@link ShellProps.docsUrl}. */
 export const DEFAULT_DOCS_URL = "https://executor.sh/docs";
 
+// The build version, surfaced in the sidebar footer so self-hosters can see
+// what they're running (and sanity-check the update card). Undefined on builds
+// that don't inject it (e.g. cloud) — then the line is hidden.
+const APP_VERSION = (
+  import.meta as ImportMeta & { readonly env?: { readonly VITE_APP_VERSION?: string } }
+).env?.VITE_APP_VERSION;
+
 // Scope-relative path -> the route id under the optional org segment
 // ("/" -> "/{-$orgSlug}", "/policies" -> "/{-$orgSlug}/policies"). Loosely
 // typed on purpose: host-specific items ("/admin", "/billing") resolve against
@@ -367,6 +374,11 @@ function SidebarContent(
 
       <div className="shrink-0 border-t border-sidebar-border p-2">
         <DocsLink href={props.docsUrl ?? DEFAULT_DOCS_URL} onNavigate={props.onNavigate} />
+        {APP_VERSION && (
+          <p className="px-2.5 pt-1.5 font-mono text-[11px] text-muted-foreground tabular-nums">
+            v{APP_VERSION}
+          </p>
+        )}
       </div>
 
       {props.supportSlot && <div className="shrink-0 px-2 pb-2">{props.supportSlot}</div>}