diff --git a/brev/welcome-ui/index.html b/brev/welcome-ui/index.html index 7a7ab28..7c17d77 100644 --- a/brev/welcome-ui/index.html +++ b/brev/welcome-ui/index.html @@ -107,7 +107,7 @@

Install OpenClaw

- + Get a key at build.nvidia.com diff --git a/brev/welcome-ui/server.py b/brev/welcome-ui/server.py index c7038f4..a18f1ee 100644 --- a/brev/welcome-ui/server.py +++ b/brev/welcome-ui/server.py @@ -24,6 +24,7 @@ LOG_FILE = "/tmp/nemoclaw-sandbox-create.log" BREV_ENV_ID = os.environ.get("BREV_ENV_ID", "") +_detected_brev_id = "" _sandbox_lock = threading.Lock() _sandbox_state = { @@ -34,14 +35,31 @@ } +def _extract_brev_id(host: str) -> str: + """Extract the Brev environment ID from a Host header like '80810-xxx.brevlab.com'.""" + match = re.match(r"\d+-(.+?)\.brevlab\.com", host) + return match.group(1) if match else "" + + +def _maybe_detect_brev_id(host: str) -> None: + """Cache the Brev environment ID from the request Host header (idempotent).""" + global _detected_brev_id + if not _detected_brev_id: + brev_id = _extract_brev_id(host) + if brev_id: + _detected_brev_id = brev_id + + def _build_openclaw_url(token: str | None) -> str: """Build the externally reachable OpenClaw URL. Uses the Cloudflare tunnel pattern from nemoclaw-start.sh when - BREV_ENV_ID is available, otherwise falls back to localhost. + BREV_ENV_ID is available (or detected from the request Host header), + otherwise falls back to localhost. """ - if BREV_ENV_ID: - url = f"https://187890-{BREV_ENV_ID}.brevlab.com/" + brev_id = BREV_ENV_ID or _detected_brev_id + if brev_id: + url = f"https://187890-{brev_id}.brevlab.com/" else: url = "http://127.0.0.1:18789/" if token: @@ -70,6 +88,21 @@ def _read_openclaw_token() -> str | None: return None +def _gateway_log_ready() -> bool: + """True once nemoclaw-start.sh has launched the OpenClaw gateway. + + The startup script prints this sentinel *after* ``openclaw gateway`` + has been backgrounded and the auth token extracted, so its presence + in the log is a reliable readiness signal — unlike a bare port check + which fires as soon as the forwarding tunnel opens. + """ + try: + with open(LOG_FILE) as f: + return "OpenClaw gateway starting in background" in f.read() + except FileNotFoundError: + return False + + def _cleanup_existing_sandbox(): """Delete any leftover sandbox named 'nemoclaw' from a previous attempt.""" try: @@ -153,8 +186,14 @@ def _stream_output(): deadline = time.time() + 120 while time.time() < deadline: - if _port_open("127.0.0.1", 18789): + if _gateway_log_ready() and _port_open("127.0.0.1", 18789): token = _read_openclaw_token() + if token is None: + for _ in range(5): + time.sleep(1) + token = _read_openclaw_token() + if token is not None: + break url = _build_openclaw_url(token) with _sandbox_lock: _sandbox_state["status"] = "running" @@ -197,11 +236,13 @@ def end_headers(self): # -- Routing -------------------------------------------------------- def do_POST(self): + _maybe_detect_brev_id(self.headers.get("Host", "")) if self.path == "/api/install-openclaw": return self._handle_install_openclaw() self.send_error(404) def do_GET(self): + _maybe_detect_brev_id(self.headers.get("Host", "")) if self.path == "/api/sandbox-status": return self._handle_sandbox_status() if self.path == "/api/connection-details": @@ -240,7 +281,9 @@ def _handle_sandbox_status(self): with _sandbox_lock: state = dict(_sandbox_state) - if state["status"] == "creating" and _port_open("127.0.0.1", 18789): + if (state["status"] == "creating" + and _gateway_log_ready() + and _port_open("127.0.0.1", 18789)): token = _read_openclaw_token() url = _build_openclaw_url(token) with _sandbox_lock: diff --git a/sandboxes/nemoclaw/Dockerfile b/sandboxes/nemoclaw/Dockerfile index 17e375e..74eb63a 100644 --- a/sandboxes/nemoclaw/Dockerfile +++ b/sandboxes/nemoclaw/Dockerfile @@ -36,8 +36,9 @@ RUN set -e; \ --bundle \ --format=esm \ --outfile="$UI_DIR/assets/nemoclaw-devx.js"; \ - sed -i 's||\n|' "$UI_DIR/index.html"; \ - sed -i 's||\n|' "$UI_DIR/index.html"; \ + HASH=$(md5sum "$UI_DIR/assets/nemoclaw-devx.js" | cut -c1-8); \ + sed -i "s||\n|" "$UI_DIR/index.html"; \ + sed -i "s||\n|" "$UI_DIR/index.html"; \ npm uninstall -g esbuild ENTRYPOINT ["/bin/bash"] diff --git a/sandboxes/nemoclaw/nemoclaw-start.sh b/sandboxes/nemoclaw/nemoclaw-start.sh index 39689e9..8763aad 100644 --- a/sandboxes/nemoclaw/nemoclaw-start.sh +++ b/sandboxes/nemoclaw/nemoclaw-start.sh @@ -74,23 +74,44 @@ openclaw onboard \ export NVIDIA_API_KEY=" " GATEWAY_PORT=18789 -if [ -z "$BREV_UI_URL" ]; then - BREV_UI_URL="https://${GATEWAY_PORT}0-${BREV_ENV_ID}.brevlab.com" + +# Derive the Brev environment ID so we can build the correct gateway origin. +# BREV_UI_URL (if set) points at the *welcome UI* port, not the gateway port, +# so we must always compute the gateway origin separately. +if [ -z "${BREV_ENV_ID:-}" ] && [ -n "${BREV_UI_URL:-}" ]; then + BREV_ENV_ID=$(echo "$BREV_UI_URL" | sed -n 's|.*//[0-9]*-\([^.]*\)\.brevlab\.com.*|\1|p') +fi + +if [ -n "${BREV_ENV_ID:-}" ]; then + export OPENCLAW_ORIGIN="https://${GATEWAY_PORT}0-${BREV_ENV_ID}.brevlab.com" +else + export OPENCLAW_ORIGIN="http://127.0.0.1:${GATEWAY_PORT}" fi -export BREV_UI_URL python3 -c " import json, os cfg = json.load(open(os.environ['HOME'] + '/.openclaw/openclaw.json')) cfg['gateway']['controlUi'] = { 'allowInsecureAuth': True, - 'allowedOrigins': [os.environ['BREV_UI_URL']] + 'allowedOrigins': [os.environ['OPENCLAW_ORIGIN']] } json.dump(cfg, open(os.environ['HOME'] + '/.openclaw/openclaw.json', 'w'), indent=2) " nohup openclaw gateway > /tmp/gateway.log 2>&1 & +# Auto-approve pending device pairing requests so the browser is paired +# before the user notices the "pairing required" prompt in the Control UI. +( + _pair_deadline=$(($(date +%s) + 300)) + while [ "$(date +%s)" -lt "$_pair_deadline" ]; do + sleep 0.5 + if openclaw devices approve --latest --json 2>/dev/null | grep -q '"ok"'; then + echo "[auto-pair] Approved pending device pairing request." + fi + done +) >> /tmp/gateway.log 2>&1 & + CONFIG_FILE="${HOME}/.openclaw/openclaw.json" token=$(grep -o '"token"\s*:\s*"[^"]*"' "${CONFIG_FILE}" 2>/dev/null | head -1 | cut -d'"' -f4 || true) diff --git a/sandboxes/nemoclaw/nemoclaw-ui-extension/extension/index.ts b/sandboxes/nemoclaw/nemoclaw-ui-extension/extension/index.ts index 643e910..40321af 100644 --- a/sandboxes/nemoclaw/nemoclaw-ui-extension/extension/index.ts +++ b/sandboxes/nemoclaw/nemoclaw-ui-extension/extension/index.ts @@ -15,7 +15,7 @@ import { injectButton } from "./deploy-modal.ts"; import { injectNavGroup, activateNemoPage, watchOpenClawNavClicks } from "./nav-group.ts"; import { injectModelSelector, watchChatCompose } from "./model-selector.ts"; import { ingestKeysFromUrl, DEFAULT_MODEL, resolveApiKey } from "./model-registry.ts"; -import { waitForClient, patchConfig } from "./gateway-bridge.ts"; +import { waitForClient, patchConfig, waitForReconnect } from "./gateway-bridge.ts"; function inject(): boolean { const hasButton = injectButton(); @@ -66,7 +66,37 @@ function applyIngestedKeys(): void { }); } +/** + * Insert a full-screen loading overlay that covers the OpenClaw UI while the + * gateway connects and auto-pairs the device. The overlay is styled via + * styles.css and is automatically faded out once `data-nemoclaw-ready` is set + * on . We remove it from the DOM after the CSS transition completes. + */ +function showConnectOverlay(): void { + if (document.querySelector(".nemoclaw-connect-overlay")) return; + const overlay = document.createElement("div"); + overlay.className = "nemoclaw-connect-overlay"; + overlay.setAttribute("aria-live", "polite"); + overlay.innerHTML = + '' + + '
Auto-approving device pairing. Hang tight...
'; + document.body.prepend(overlay); +} + +function revealApp(): void { + document.body.setAttribute("data-nemoclaw-ready", ""); + const overlay = document.querySelector(".nemoclaw-connect-overlay"); + if (overlay) { + overlay.addEventListener("transitionend", () => overlay.remove(), { once: true }); + setTimeout(() => overlay.remove(), 600); + } +} + function bootstrap() { + showConnectOverlay(); + + waitForReconnect(30_000).then(revealApp).catch(revealApp); + const keysIngested = ingestKeysFromUrl(); watchOpenClawNavClicks(); diff --git a/sandboxes/nemoclaw/nemoclaw-ui-extension/extension/styles.css b/sandboxes/nemoclaw/nemoclaw-ui-extension/extension/styles.css index 5105fa7..415a7da 100644 --- a/sandboxes/nemoclaw/nemoclaw-ui-extension/extension/styles.css +++ b/sandboxes/nemoclaw/nemoclaw-ui-extension/extension/styles.css @@ -597,29 +597,71 @@ main.content { } /* =========================================== - Model Switching — Suppress OpenClaw disconnect artifacts + Initial Connection — Hide the entire app until gateway pairing completes. + The OpenClaw UI uses Lit Web Components with Shadow DOM, so external + CSS cannot target error elements inside the shadow root. Instead we + hide the whole custom element (which lives in the + light DOM) and show a branded loading overlay on top. =========================================== */ -body.nemoclaw-switching .card.chat > .callout { - display: none !important; +body:not([data-nemoclaw-ready]) openclaw-app { + opacity: 0 !important; + pointer-events: none !important; } -body.nemoclaw-switching .statusDot:not(.ok) { - visibility: hidden; +/* Loading overlay shown while gateway connects + auto-pairs */ +.nemoclaw-connect-overlay { + position: fixed; + inset: 0; + z-index: 9999; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 18px; + background: var(--bg, #12141a); + color: var(--text, #e4e4e7); + font-family: system-ui, -apple-system, sans-serif; + transition: opacity 400ms ease; } -body.nemoclaw-switching .topbar-status .pill .mono { - visibility: hidden; +:root[data-theme="light"] .nemoclaw-connect-overlay { + background: var(--bg-content, #f8f8fa); + color: #1a1a1a; } -body.nemoclaw-switching .chat-compose textarea[disabled] { - opacity: 1 !important; - color: var(--text, #e4e4e7) !important; - cursor: text; +body[data-nemoclaw-ready] .nemoclaw-connect-overlay { + opacity: 0; + pointer-events: none; } -body.nemoclaw-switching .chat-compose__actions button[disabled] { - opacity: 0.6; +.nemoclaw-connect-overlay__spinner { + width: 32px; + height: 32px; + border: 3px solid rgba(118, 185, 0, 0.2); + border-top-color: #76B900; + border-radius: 50%; + animation: nemoclaw-spin 0.8s linear infinite; +} + +.nemoclaw-connect-overlay__text { + font-size: 14px; + font-weight: 500; + letter-spacing: -0.01em; + color: var(--muted, #71717a); +} + +/* =========================================== + Model Switching — Suppress OpenClaw disconnect artifacts. + The OpenClaw UI renders inside Shadow DOM so we cannot target + individual elements with external CSS. Instead we reduce the + whole app's opacity during the brief config restart. + =========================================== */ + +body.nemoclaw-switching openclaw-app { + opacity: 0.4 !important; + pointer-events: none !important; + transition: opacity 200ms ease; } /* ===========================================