From b5520b2b6a35b4a8ea1978c9bccaa3f9c2156e99 Mon Sep 17 00:00:00 2001
From: Alexey Milovidov <milovidov@clickhouse.com>
Date: Wed, 22 Jul 2026 21:56:02 +0000
Subject: [PATCH 1/2] playground: single canonical UI at /playground/, no /web/
 subdir
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Before: playground/web/{index.html,app.js,style.css} were the
canonical UI, served by the playground at /ui/. To make GitHub
Pages serve the same UI at https://benchmark.clickhouse.com/
playground/ (index.html precedence over auto-rendered README.md),
we needed EITHER a duplicate copy of index.html at playground/
OR symlinks — GitHub Pages doesn't reliably follow symlinks and
duplication rots.

Move index.html + app.js + style.css to playground/ (the parent).
The relative refs `<link href="style.css">` / `<script src="app.js">`
already resolve correctly at both /playground/ (GitHub Pages) and
/ui/ (playground server, which the server code now points at the
new location).

Server change: the /ui/ static routes now explicitly whitelist
index.html + app.js + style.css so README.md / INSTALL.md / docs/
under playground/ don't accidentally leak at /ui/README.md etc.

The app.js API-base fallback (previous commit) already handles
cross-origin fetches when loaded from benchmark.clickhouse.com or
any other host.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 playground/{web => }/app.js     | 17 +++++++++-----
 playground/{web => }/index.html |  0
 playground/server/main.py       | 40 ++++++++++++++++++++-------------
 playground/{web => }/style.css  |  0
 4 files changed, 36 insertions(+), 21 deletions(-)
 rename playground/{web => }/app.js (97%)
 rename playground/{web => }/index.html (100%)
 rename playground/{web => }/style.css (100%)

diff --git a/playground/web/app.js b/playground/app.js
similarity index 97%
rename from playground/web/app.js
rename to playground/app.js
index dc75c54396..5c723328e3 100644
--- a/playground/web/app.js
+++ b/playground/app.js
@@ -9,11 +9,18 @@
 //      /api/query?system=<name> and render output as plain text in a <pre>.
 
 const $ = (sel) => document.querySelector(sel);
-// When the page is served by the playground over HTTP, relative URLs
-// work. When it's opened from disk (file://), relative fetches resolve
-// against file:// and fail; rewrite to an absolute localhost URL.
-// CORS is handled by the server's middleware (Access-Control-Allow-Origin: *).
-const API = location.protocol === "file:" ? "http://localhost:8000" : "";
+// API base URL selection:
+//   - clickbench-playground.clickhouse.com (default hosting) → same-origin,
+//     use relative paths so responses stay path-transparent.
+//   - Anywhere else on http/https (e.g. benchmark.clickhouse.com/playground/,
+//     a mirror, a local build served via GitHub Pages) → absolute URL to
+//     the live playground; CORS is open (Access-Control-Allow-Origin: *
+//     is set by the server's middleware).
+//   - file:// → localhost dev instance.
+const API =
+    location.hostname === "clickbench-playground.clickhouse.com" ? "" :
+    location.protocol === "file:" ? "http://localhost:8000" :
+    "https://clickbench-playground.clickhouse.com";
 
 const listEl = $("#system-list");
 const queryEl = $("#query");
diff --git a/playground/web/index.html b/playground/index.html
similarity index 100%
rename from playground/web/index.html
rename to playground/index.html
diff --git a/playground/server/main.py b/playground/server/main.py
index f786acdaaa..52944193e4 100644
--- a/playground/server/main.py
+++ b/playground/server/main.py
@@ -2,8 +2,8 @@
 
 Endpoints:
 
-    GET  /                     redirects to /ui/
-    GET  /ui/...               static-serves files from ../web/
+    GET  /                     serves the UI page
+    GET  /app.js, /style.css   static UI assets
     GET  /api/systems          JSON list of all playground-eligible systems
     GET  /api/state            JSON snapshot of every VM's state
     GET  /api/system/{name}    detail for a single system
@@ -491,21 +491,33 @@ def build_app() -> web.Application:
     app.router.add_post("/api/query", obj.handle_query)
     app.router.add_get("/api/saved/{b64}", obj.handle_saved)
 
-    # Static UI
-    web_dir = Path(__file__).resolve().parent.parent / "web"
-
-    async def root_redirect(_r: web.Request) -> web.Response:
-        raise web.HTTPFound("/ui/")
+    # Static UI. Files live at playground/{index.html,app.js,style.css}
+    # (not playground/web/) so that GitHub Pages serves the same page
+    # verbatim at https://benchmark.clickhouse.com/playground/, without
+    # a duplicate copy. Served at the URL root (/) so URL layouts match
+    # between the two hosts (no /ui/ prefix on either).
+    playground_dir = Path(__file__).resolve().parent.parent
 
     async def ui_index(_r: web.Request) -> web.FileResponse:
-        resp = web.FileResponse(web_dir / "index.html")
+        resp = web.FileResponse(playground_dir / "index.html")
         resp.headers["Cache-Control"] = "no-store"
         return resp
 
+    def _serve_asset(name: str):
+        # Whitelist the two static assets the app references. Serving
+        # the whole playground_dir would expose README.md / INSTALL.md
+        # / docs/ / server/ / agent/ at the URL root, which we don't
+        # want.
+        async def _handler(_r: web.Request) -> web.FileResponse:
+            resp = web.FileResponse(playground_dir / name)
+            resp.headers["Cache-Control"] = "no-store"
+            return resp
+        return _handler
+
     @web.middleware
     async def no_cache_static(request: web.Request, handler):
         resp = await handler(request)
-        if request.path.startswith("/ui/"):
+        if request.path in ("/", "/app.js", "/style.css"):
             resp.headers["Cache-Control"] = "no-store"
         return resp
 
@@ -536,13 +548,9 @@ async def cors(request: web.Request, handler):
 
     app.middlewares.append(no_cache_static)
     app.middlewares.append(cors)
-    app.router.add_get("/", root_redirect)
-    app.router.add_get("/ui/", ui_index)
-    app.router.add_get("/ui", ui_index)
-    # follow_symlinks=False — GHSA-5h86-8mv2-jq9f covers a path-traversal
-    # in aiohttp's static handler that's only reachable when symlinks are
-    # followed. The repo's web/ tree has no symlinks anyway.
-    app.router.add_static("/ui/", path=str(web_dir), show_index=False)
+    app.router.add_get("/", ui_index)
+    app.router.add_get("/app.js", _serve_asset("app.js"))
+    app.router.add_get("/style.css", _serve_asset("style.css"))
 
     return app
 
diff --git a/playground/web/style.css b/playground/style.css
similarity index 100%
rename from playground/web/style.css
rename to playground/style.css

From 3a90c8229d236329ae199d56d53a92531028c705 Mon Sep 17 00:00:00 2001
From: Alexey Milovidov <milovidov@clickhouse.com>
Date: Wed, 22 Jul 2026 22:22:04 +0000
Subject: [PATCH 2/2] Point Playground links at
 benchmark.clickhouse.com/playground/
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Now that the UI lives at benchmark.clickhouse.com/playground/
(via GitHub Pages, alongside the rest of the ClickBench site) the
old clickbench-playground.clickhouse.com URL is no longer the
canonical entry point.

Update the three visitor-facing references — index.html (footer),
README.md (running-the-benchmark section), CHANGELOG.md (initial
Playground announcement) — to the new path.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 CHANGELOG.md | 2 +-
 README.md    | 2 +-
 index.html   | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3ef7316b09..a795f87d23 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,7 +3,7 @@
 Changes in the benchmark methodology or presentation, as well as major news.
 
 ### 2026-07-22
-Introducing [ClickBench Playground](https://clickbench-playground.clickhouse.com/), which allows you to run arbitrary SQL queries on 90+ databases using a pre-loaded ClickBench dataset.
+Introducing [ClickBench Playground](https://benchmark.clickhouse.com/playground/), which allows you to run arbitrary SQL queries on 90+ databases using a pre-loaded ClickBench dataset.
 
 ### 2026-07-03
 The [versions benchmark](https://benchmark.clickhouse.com/versions/) is reworked. Now it contains 10 datasets and runs every ClickHouse version since [ten years of open source](https://clickhouse.com/blog/open-source-10) and even early historical builds. The visualization was also improved.
diff --git a/README.md b/README.md
index 008e852f81..70947c07e3 100644
--- a/README.md
+++ b/README.md
@@ -332,7 +332,7 @@ Systems that have been identified to have known limitations or issues and could
 
 ## Bonus
 
-You can run every system from ClickBench in the [online Playground](https://clickbench-playground.clickhouse.com/).
+You can run every system from ClickBench in the [online Playground](https://benchmark.clickhouse.com/playground/).
 
 ## Similar Projects
 
diff --git a/index.html b/index.html
index f904d5d27d..cd2d96389f 100644
--- a/index.html
+++ b/index.html
@@ -420,7 +420,7 @@
 <div class="header stick-left">
     <span class="nowrap themes"><span id="toggle-dark">🌚</span><span id="toggle-light">🌞</span></span>
     <h1>ClickBench — a Benchmark For Analytical DBMS</h1>
-    <a href="https://github.com/ClickHouse/ClickBench/">Methodology</a> | <a href="https://github.com/ClickHouse/ClickBench/">Reproduce and Validate the Results</a> | <a href="https://github.com/ClickHouse/ClickBench/">Add a System</a> | <a href="https://benchmark.clickhouse.com/hardware/">Hardware Benchmark</a> | <a href="https://benchmark.clickhouse.com/versions/">Versions Benchmark</a> | See also: <a href="https://jsonbench.com/">JSONBench</a> | <a href="https://clickbench-playground.clickhouse.com/">🎈 Playground (new)</a>
+    <a href="https://github.com/ClickHouse/ClickBench/">Methodology</a> | <a href="https://github.com/ClickHouse/ClickBench/">Reproduce and Validate the Results</a> | <a href="https://github.com/ClickHouse/ClickBench/">Add a System</a> | <a href="https://benchmark.clickhouse.com/hardware/">Hardware Benchmark</a> | <a href="https://benchmark.clickhouse.com/versions/">Versions Benchmark</a> | See also: <a href="https://jsonbench.com/">JSONBench</a> | <a href="https://benchmark.clickhouse.com/playground/">🎈 Playground (new)</a>
 </div>
 
 <table class="selectors-container stick-left">