1<!doctype html> 2<html lang="en"> 3 <head> 4 <meta charset="UTF-8" /> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" /> 6 <title>OpenClaw Control</title> 7 <meta name="color-scheme" content="dark light" /> 8 <link rel="icon" type="image/svg+xml" href="./favicon.svg" /> 9 <link rel="icon" type="image/png" sizes="32x32" href="./favicon-32.png" /> 10 <link rel="apple-touch-icon" sizes="180x180" href="./apple-touch-icon.png" /> 11 <link rel="manifest" href="./manifest.webmanifest" /> 12
12<script> 13 (function () { 14 var THEMES = { claw: 1, knot: 1, dash: 1 }; 15 var MODES = { system: 1, light: 1, dark: 1 }; 16 var LEGACY = { 17 dark: "claw:dark", 18 light: "claw:light", 19 openknot: "knot:dark", 20 fieldmanual: "dash:dark", 21 clawdash: "dash:light", 22 system: "claw:system", 23 }; 24 try { 25 var keys = Object.keys(localStorage); 26 var raw; 27 for (var i = 0; i < keys.length; i++) { 28 if (keys[i].indexOf("openclaw.control.settings.v1") === 0) { 29 raw = localStorage.getItem(keys[i]); 30 if (raw) break; 31 } 32 } 33 if (!raw) return; 34 var s = JSON.parse(raw); 35 var t = s && s.theme; 36 var m = s && s.themeMode; 37 if (typeof t !== "string") t = ""; 38 if (typeof m !== "string") m = ""; 39 var legacy = LEGACY[t]; 40 var theme = THEMES[t] ? t : legacy ? legacy.split(":")[0] : "claw"; 41 var mode = MODES[m] ? m : legacy ? legacy.split(":")[1] : "system"; 42 if (mode === "system") { 43 mode = window.matchMedia("(prefers-color-scheme: light)").matches ? "light" : "dark"; 44 } 45 var resolved = 46 theme === "knot" 47 ? mode === "light" 48 ? "openknot-light" 49 : "openknot" 50 : theme === "dash" 51 ? mode === "light" 52 ? "dash-light" 53 : "dash" 54 : mode === "light" 55 ? "light" 56 : "dark"; 57 document.documentElement.setAttribute("data-theme", resolved); 58 document.documentElement.setAttribute( 59 "data-theme-mode", 60 resolved.includes("light") ? "light" : "dark", 61 ); 62 } catch (e) {} 63 })(); 64 </script>
64 65 <style> 66 body.openclaw-mount-fallback-active { 67 margin: 0; 68 min-width: 320px; 69 color: #eef4f8; 70 background: #101418; 71 font-family: 72 Inter, 73 ui-sans-serif, 74 system-ui, 75 -apple-system, 76 BlinkMacSystemFont, 77 "Segoe UI", 78 sans-serif; 79 } 80 81 body.openclaw-mount-fallback-active openclaw-app { 82 display: none; 83 } 84 85 .mount-fallback { 86 box-sizing: border-box; 87 min-height: 100vh; 88 padding: 24px; 89 place-items: center; 90 } 91 92 .mount-fallback:not([hidden]) { 93 display: grid; 94 } 95 96 .mount-fallback__panel { 97 box-sizing: border-box; 98 width: min(100%, 640px); 99 border: 1px solid rgba(148, 163, 184, 0.28); 100 border-radius: 8px; 101 background: #151b21; 102 box-shadow: 0 24px 80px rgba(0, 0, 0, 0.36); 103 padding: 28px; 104 } 105 106 .mount-fallback__eyebrow { 107 margin: 0 0 10px; 108 color: #9fb0bd; 109 font-size: 0.78rem; 110 font-weight: 700; 111 letter-spacing: 0.08em; 112 text-transform: uppercase; 113 } 114 115 .mount-fallback__panel h1 { 116 margin: 0; 117 color: inherit; 118 font-size: clamp(1.5rem, 3vw, 2rem); 119 line-height: 1.15; 120 } 121 122 .mount-fallback__panel p { 123 margin: 16px 0 0; 124 color: #c8d3da; 125 font-size: 1rem; 126 line-height: 1.6; 127 } 128 129 .mount-fallback__panel ul { 130 margin: 18px 0 0; 131 padding-left: 1.2rem; 132 color: #c8d3da; 133 line-height: 1.6; 134 } 135 136 .mount-fallback__panel a { 137 color: #8bd3ff; 138 text-decoration-thickness: 0.08em; 139 text-underline-offset: 0.18em; 140 } 141 142 .mount-fallback__actions { 143 display: flex; 144 flex-wrap: wrap; 145 gap: 10px; 146 margin-top: 24px; 147 } 148 149 .mount-fallback__button { 150 min-height: 42px; 151 border: 1px solid rgba(148, 163, 184, 0.36); 152 border-radius: 6px; 153 padding: 0 16px; 154 color: inherit; 155 background: transparent; 156 font: inherit; 157 font-weight: 700; 158 cursor: pointer; 159 } 160 161 .mount-fallback__button--primary { 162 border-color: #66c2ff; 163 color: #061019; 164 background: #8bd3ff; 165 } 166 167 .mount-fallback__panel:focus { 168 outline: none; 169 } 170 171 .mount-fallback__button:focus-visible, 172 .mount-fallback__panel a:focus-visible { 173 outline: 3px solid #f9c74f; 174 outline-offset: 3px; 175 } 176 177 html[data-theme-mode="light"] body.openclaw-mount-fallback-active { 178 color: #151b21; 179 background: #f5f7fa; 180 } 181 182 html[data-theme-mode="light"] .mount-fallback__panel { 183 border-color: rgba(71, 85, 105, 0.22); 184 background: #ffffff; 185 box-shadow: 0 24px 80px rgba(15, 23, 42, 0.14); 186 } 187 188 html[data-theme-mode="light"] .mount-fallback__eyebrow, 189 html[data-theme-mode="light"] .mount-fallback__panel p, 190 html[data-theme-mode="light"] .mount-fallback__panel ul { 191 color: #4b5963; 192 } 193 194 html[data-theme-mode="light"] .mount-fallback__panel a { 195 color: #0369a1; 196 } 197 </style> 198
198<script type="module" crossorigin src="./assets/index-DRTyMBOr.js"></script>
198 199 <link rel="modulepreload" crossorigin href="./assets/rolldown-runtime-QTnfLwEv.js"> 200 <link rel="modulepreload" crossorigin href="./assets/string-coerce-DwnRzrPh.js"> 201 <link rel="modulepreload" crossorigin href="./assets/lit-runtime-gkTRPNbC.js"> 202 <link rel="modulepreload" crossorigin href="./assets/gateway-runtime-CMyVbEq5.js"> 203 <link rel="modulepreload" crossorigin href="./assets/markdown-runtime-CUzFp-dW.js"> 204 <link rel="modulepreload" crossorigin href="./assets/config-runtime-CCw2hptH.js"> 205 <link rel="stylesheet" crossorigin href="./assets/index-CB7HsZcW.css"> 206 </head> 207 <body> 208 <openclaw-app></openclaw-app> 209 <section 210 id="openclaw-mount-fallback" 211 class="mount-fallback" 212 data-openclaw-mount-timeout-ms="12000" 213 role="alert" 214 aria-labelledby="openclaw-mount-fallback-title" 215 hidden 216 > 217 <div class="mount-fallback__panel" tabindex="-1"> 218 <p class="mount-fallback__eyebrow">OpenClaw Control UI</p> 219 <h1 id="openclaw-mount-fallback-title">Control UI did not start</h1> 220 <p> 221 The browser loaded the static page, but the app bundle did not register the 222 <code>openclaw-app</code> web component. A browser extension or early content script may 223 be blocking module execution. 224 </p> 225 <ul> 226 <li>Try again in a clean browser profile or private window.</li> 227 <li>Disable extensions that run on all pages, then reload this dashboard.</li> 228 <li> 229 See 230 <a 231 href="https://docs.openclaw.ai/web/control-ui#blank-control-ui-page" 232 target="_blank" 233 rel="noopener noreferrer" 234 >Control UI troubleshooting</a 235 >. 236 </li> 237 </ul> 238 <div class="mount-fallback__actions"> 239 <button 240 type="button" 241 id="openclaw-mount-retry" 242 class="mount-fallback__button mount-fallback__button--primary" 243 > 244 Try again 245 </button> 246 <button type="button" id="openclaw-mount-wait" class="mount-fallback__button"> 247 Keep waiting 248 </button> 249 </div> 250 </div> 251 </section> 252
252<script> 253 (function () { 254 var tagName = "openclaw-app"; 255 var app = document.querySelector(tagName); 256 var fallback = document.getElementById("openclaw-mount-fallback"); 257 if (!app || !fallback) return; 258 259 var panel = fallback.querySelector(".mount-fallback__panel"); 260 var retry = document.getElementById("openclaw-mount-retry"); 261 var wait = document.getElementById("openclaw-mount-wait"); 262 var rawDelay = Number(fallback.getAttribute("data-openclaw-mount-timeout-ms")); 263 var delay = Number.isFinite(rawDelay) && rawDelay > 0 ? rawDelay : 12000; 264 var timer; 265 266 function appMounted() { 267 try { 268 return Boolean( 269 app.isConnected && 270 window.customElements && 271 typeof window.customElements.get === "function" && 272 window.customElements.get(tagName), 273 ); 274 } catch (e) { 275 return false; 276 } 277 } 278 279 function hideFallback() { 280 fallback.hidden = true; 281 document.body.classList.remove("openclaw-mount-fallback-active"); 282 } 283 284 function showFallback() { 285 if (appMounted()) return; 286 fallback.hidden = false; 287 document.body.classList.add("openclaw-mount-fallback-active"); 288 if (panel && typeof panel.focus === "function") { 289 try { 290 panel.focus({ preventScroll: true }); 291 } catch (e) { 292 panel.focus(); 293 } 294 } 295 } 296 297 function armFallbackTimer() { 298 window.clearTimeout(timer); 299 timer = window.setTimeout(showFallback, delay); 300 } 301 302 armFallbackTimer(); 303 304 if (window.customElements && typeof window.customElements.whenDefined === "function") { 305 window.customElements.whenDefined(tagName).then( 306 function () { 307 window.clearTimeout(timer); 308 hideFallback(); 309 }, 310 function () {}, 311 ); 312 } 313 314 if (retry) { 315 retry.addEventListener("click", function () { 316 window.location.reload(); 317 }); 318 } 319 if (wait) { 320 wait.addEventListener("click", function () { 321 hideFallback(); 322 armFallbackTimer(); 323 }); 324 } 325 })(); 326 </script>
326 327 </body> 328</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.