webspresso 0.0.112 → 0.0.113

package/core/client/api.js

@@ -84,9 +84,28 @@ class ClientRequestError extends Error {
       this.status === 408;
     this.isDropped = Boolean(details.isDropped);
     this.isSuperseded = Boolean(details.isSuperseded);
+    this.dispatched =
+      details.dispatched !== undefined
+        ? Boolean(details.dispatched)
+        : !this.isDropped && (this.kind !== 'canceled' || Boolean(details.cause));
+    this.outcomeUnknown =
+      details.outcomeUnknown !== undefined
+        ? Boolean(details.outcomeUnknown)
+        : MUTATION_METHODS.has(this.method) &&
+          this.dispatched &&
+          !this.isDropped &&
+          (this.kind === 'timeout' || this.kind === 'network' || this.kind === 'canceled');
+    this.outcome = this.outcomeUnknown
+      ? 'unknown'
+      : !this.dispatched || this.isDropped
+        ? 'not_sent'
+        : 'failed';
     this.serverRollbackGuaranteed = false;
     if (this.isCanceled) {
       this.note = 'Client request cancellation/abort does not roll back server-side execution.';
+    } else if (this.outcomeUnknown) {
+      this.note =
+        'Mutation request was dispatched before response delivery failed; the server may have committed the operation.';
     }
     if (details.cause) {
       this.cause = details.cause;
@@ -599,6 +618,110 @@ function abortableSleep(ms, signals = []) {
   });
 }
 
+function parseXhrHeaders(rawHeaders) {
+  const map = new Map();
+  if (typeof rawHeaders === 'string' && rawHeaders) {
+    const lines = rawHeaders.trim().split(/[\r\n]+/);
+    for (let i = 0; i < lines.length; i++) {
+      const idx = lines[i].indexOf(':');
+      if (idx > 0) {
+        const k = lines[i].slice(0, idx).trim().toLowerCase();
+        const v = lines[i].slice(idx + 1).trim();
+        map.set(k, v);
+      }
+    }
+  }
+  return {
+    get(name) {
+      return map.get(String(name || '').toLowerCase()) ?? null;
+    },
+    has(name) {
+      return map.has(String(name || '').toLowerCase());
+    },
+  };
+}
+
+function executeXhrUpload({ url, method, headers, body, credentials, signal, onUploadProgress }) {
+  return new Promise((resolve, reject) => {
+    const xhr = new XMLHttpRequest();
+    xhr.open(method, url, true);
+    if (credentials === 'include' || credentials === 'same-origin') {
+      xhr.withCredentials = credentials === 'include';
+    }
+    if (headers && typeof headers === 'object') {
+      for (const [k, v] of Object.entries(headers)) {
+        if (v !== undefined && v !== null) {
+          xhr.setRequestHeader(k, String(v));
+        }
+      }
+    }
+
+    if (xhr.upload && typeof onUploadProgress === 'function') {
+      xhr.upload.onprogress = (evt) => {
+        const lengthComputable = Boolean(evt && evt.lengthComputable);
+        const loaded = evt && typeof evt.loaded === 'number' ? evt.loaded : 0;
+        const total = lengthComputable && evt && typeof evt.total === 'number' ? evt.total : 0;
+        const percent = lengthComputable && total > 0 ? Math.min(100, Math.round((loaded / total) * 100)) : null;
+        try {
+          onUploadProgress({ loaded, total, percent, lengthComputable });
+        } catch (_e) {}
+      };
+    }
+
+    const onAbort = () => {
+      try {
+        xhr.abort();
+      } catch (_e) {}
+    };
+    if (signal) {
+      if (signal.aborted) {
+        const abortErr = new Error('The operation was aborted.');
+        abortErr.name = 'AbortError';
+        reject(abortErr);
+        return;
+      }
+      signal.addEventListener('abort', onAbort, { once: true });
+    }
+
+    const cleanup = () => {
+      if (signal) {
+        try {
+          signal.removeEventListener('abort', onAbort);
+        } catch (_e) {}
+      }
+    };
+
+    xhr.onload = () => {
+      cleanup();
+      const status = xhr.status === 1223 ? 204 : xhr.status;
+      const rawText = typeof xhr.responseText === 'string' ? xhr.responseText : '';
+      const headerObj = parseXhrHeaders(xhr.getAllResponseHeaders ? xhr.getAllResponseHeaders() : '');
+      resolve({
+        ok: status >= 200 && status < 300,
+        status,
+        statusText: xhr.statusText || '',
+        headers: headerObj,
+        text: async () => rawText,
+        json: async () => (rawText ? JSON.parse(rawText) : null),
+      });
+    };
+
+    xhr.onerror = () => {
+      cleanup();
+      reject(new TypeError('Network request failed'));
+    };
+
+    xhr.onabort = () => {
+      cleanup();
+      const abortErr = new Error('The operation was aborted.');
+      abortErr.name = 'AbortError';
+      reject(abortErr);
+    };
+
+    xhr.send(body === undefined ? null : body);
+  });
+}
+
 /**
  * Create a Typed API Client instance.
  *
@@ -675,6 +798,8 @@ function createApiClient(config = {}) {
         method: upperMethod,
         url: requestUrl,
         key: requestKey,
+        dispatched: false,
+        outcomeUnknown: false,
       });
     }
 
@@ -883,13 +1008,25 @@ function createApiClient(config = {}) {
     try {
       let response;
       try {
-        response = await fetchImpl(requestUrl, {
-          method: upperMethod,
-          headers,
-          body: serializedBody,
-          credentials: options.credentials || 'same-origin',
-          signal: abortController.signal,
-        });
+        if (typeof options.onUploadProgress === 'function' && typeof XMLHttpRequest !== 'undefined') {
+          response = await executeXhrUpload({
+            url: requestUrl,
+            method: upperMethod,
+            headers,
+            body: serializedBody,
+            credentials: options.credentials || 'same-origin',
+            signal: abortController.signal,
+            onUploadProgress: options.onUploadProgress,
+          });
+        } else {
+          response = await fetchImpl(requestUrl, {
+            method: upperMethod,
+            headers,
+            body: serializedBody,
+            credentials: options.credentials || 'same-origin',
+            signal: abortController.signal,
+          });
+        }
       } catch (fetchErr) {
         if (timeoutTimer) {
           clearTimeout(timeoutTimer);
@@ -914,6 +1051,7 @@ function createApiClient(config = {}) {
               url: requestUrl,
               key: requestKey,
               isTimedOut: true,
+              dispatched: true,
               cause: fetchErr,
             }
           );
@@ -947,6 +1085,7 @@ function createApiClient(config = {}) {
               url: requestUrl,
               key: requestKey,
               isSuperseded: superseded,
+              dispatched: true,
               cause: fetchErr,
             }
           );
@@ -962,6 +1101,7 @@ function createApiClient(config = {}) {
             method: upperMethod,
             url: requestUrl,
             key: requestKey,
+            dispatched: true,
             cause: fetchErr,
           }
         );

package/core/client/controller.js

@@ -367,6 +367,8 @@ function defineController(definition = {}) {
     tasks: definition.tasks && typeof definition.tasks === 'object' ? definition.tasks : {},
     connect: typeof definition.connect === 'function' ? definition.connect : null,
     disconnect: typeof definition.disconnect === 'function' ? definition.disconnect : null,
+    beforePatch: typeof definition.beforePatch === 'function' ? definition.beforePatch : null,
+    afterPatch: typeof definition.afterPatch === 'function' ? definition.afterPatch : null,
     onError: typeof definition.onError === 'function' ? definition.onError : null,
     persist: definition.persist || null,
     watch: definition.watch && typeof definition.watch === 'object' ? definition.watch : null,
@@ -738,19 +740,26 @@ function createControllerRuntime(options = {}) {
       const signalPrefix = `__w_inst_${instanceId}.task_${taskKey}`;
 
       // React Query-style automatic revalidation options for tasks
+      const isMutationTask = taskOpts.mutation === true || taskOpts.kind === 'mutation';
       const staleTimeMs = parseDurationMs(taskOpts.staleTime, 0);
-      const refetchOnMountMode = parseRefetchMode(
-        taskOpts.refetchOnMount !== undefined ? taskOpts.refetchOnMount : taskOpts.refetchOnVisit,
-        false
-      );
-      const refetchOnFocusMode = parseRefetchMode(
-        taskOpts.refetchOnWindowFocus !== undefined ? taskOpts.refetchOnWindowFocus : taskOpts.refetchOnFocus,
-        false
-      );
-      const refetchOnReconnectMode = parseRefetchMode(taskOpts.refetchOnReconnect, false);
-      const refetchIntervalMs = parseDurationMs(taskOpts.refetchInterval, 0);
+      const refetchOnMountMode = isMutationTask
+        ? false
+        : parseRefetchMode(
+            taskOpts.refetchOnMount !== undefined ? taskOpts.refetchOnMount : taskOpts.refetchOnVisit,
+            false
+          );
+      const refetchOnFocusMode = isMutationTask
+        ? false
+        : parseRefetchMode(
+            taskOpts.refetchOnWindowFocus !== undefined ? taskOpts.refetchOnWindowFocus : taskOpts.refetchOnFocus,
+            false
+          );
+      const refetchOnReconnectMode = isMutationTask
+        ? false
+        : parseRefetchMode(taskOpts.refetchOnReconnect, false);
+      const refetchIntervalMs = isMutationTask ? 0 : parseDurationMs(taskOpts.refetchInterval, 0);
       const refetchIntervalInBg =
-        parseRefetchMode(taskOpts.refetchIntervalInBackground, false) === true;
+        !isMutationTask && parseRefetchMode(taskOpts.refetchIntervalInBackground, false) === true;
 
       let currentRunVersion = 0;
       let activeRuns = 0;
@@ -1507,6 +1516,15 @@ function createControllerRuntime(options = {}) {
           const inst = fragments && fragments.getInstance ? fragments.getInstance(idOrName) : null;
           return inst && inst.input ? { ...inst.input } : {};
         },
+        get inputs() {
+          if (!fragments || typeof fragments.getInstances !== 'function') return {};
+          const list = fragments.getInstances(idOrName);
+          const map = {};
+          for (const inst of list) {
+            map[inst.instanceId] = inst.input ? { ...inst.input } : {};
+          }
+          return map;
+        },
         refresh: (input, opts) => {
           checkFragmentPersistenceConflict(idOrName, input);
           if (!fragments) {
@@ -1797,6 +1815,33 @@ function createControllerRuntime(options = {}) {
       get isConnected() {
         return isConnected();
       },
+      invokeBeforePatch(meta = {}) {
+        if (!isConnected() || !reg.definition.beforePatch) return;
+        try {
+          const result = reg.definition.beforePatch(ctx, meta);
+          if (result && typeof result.then === 'function') {
+            // beforePatch must be synchronous; warn in dev and do not block morph
+            if (typeof process !== 'undefined' && process.env && process.env.NODE_ENV !== 'production' && typeof console !== 'undefined') {
+              console.warn(`[webspresso] Controller "${controllerName}" beforePatch() returned a Promise; beforePatch hooks are synchronous and are not awaited.`);
+            }
+          }
+        } catch (err) {
+          handleControllerError(err, { phase: 'beforePatch' });
+        }
+      },
+      invokeAfterPatch(meta = {}) {
+        if (!isConnected() || !reg.definition.afterPatch) return;
+        try {
+          const res = reg.definition.afterPatch(ctx, meta);
+          if (res && typeof res.then === 'function') {
+            res.catch((err) => {
+              handleControllerError(err, { phase: 'afterPatch' });
+            });
+          }
+        } catch (err) {
+          handleControllerError(err, { phase: 'afterPatch' });
+        }
+      },
       destroy() {
         if (!connected) return;
         connected = false;
@@ -2021,6 +2066,82 @@ function createControllerRuntime(options = {}) {
     return mounted;
   }
 
+  const patchCycleTracker = typeof WeakMap !== 'undefined' ? new WeakMap() : null;
+
+  function collectAffectedInstances(fragmentEl) {
+    if (!fragmentEl) return [];
+    const affected = [];
+    for (const inst of activeInstances.values()) {
+      if (!inst || !inst.el || !inst.isConnected) continue;
+      if (
+        inst.el === fragmentEl ||
+        (typeof fragmentEl.contains === 'function' && fragmentEl.contains(inst.el)) ||
+        (typeof inst.el.contains === 'function' && inst.el.contains(fragmentEl))
+      ) {
+        affected.push(inst);
+      }
+    }
+    // Sort deterministically: outer ancestors first, inner descendants second
+    affected.sort((a, b) => {
+      if (a.el === b.el) return 0;
+      if (typeof a.el.contains === 'function' && a.el.contains(b.el)) return -1;
+      if (typeof b.el.contains === 'function' && b.el.contains(a.el)) return 1;
+      if (typeof a.el.compareDocumentPosition === 'function') {
+        const pos = a.el.compareDocumentPosition(b.el);
+        if (pos & 4) return -1; // DOCUMENT_POSITION_FOLLOWING
+        if (pos & 2) return 1;  // DOCUMENT_POSITION_PRECEDING
+      }
+      return 0;
+    });
+    return affected;
+  }
+
+  function notifyBeforePatch(fragmentEl, meta = {}) {
+    const affected = collectAffectedInstances(fragmentEl);
+    for (let i = 0; i < affected.length; i++) {
+      const inst = affected[i];
+      inst.invokeBeforePatch({
+        ...meta,
+        isFragmentRoot: inst.el === fragmentEl,
+        isDescendant: inst.el !== fragmentEl && typeof fragmentEl.contains === 'function' && fragmentEl.contains(inst.el),
+      });
+    }
+  }
+
+  function notifyAfterPatch(fragmentEl, meta = {}) {
+    if (patchCycleTracker && fragmentEl) {
+      const now = Date.now();
+      const prev = patchCycleTracker.get(fragmentEl) || { count: 0, lastAt: 0 };
+      const count = now - prev.lastAt < 100 ? prev.count + 1 : 1;
+      patchCycleTracker.set(fragmentEl, { count, lastAt: now });
+      if (count > 5) {
+        const msg = `Possible patch hook refresh loop detected on fragment "${meta.fragmentName || meta.fragmentId || 'unknown'}" (${count} rapid patch cycles).`;
+        if (debug && typeof debug.recordEvent === 'function') {
+          debug.recordEvent('patch:loop-warning', {
+            code: 'PATCH_HOOK_LOOP_DETECTED',
+            fragmentId: meta.fragmentId || null,
+            fragmentName: meta.fragmentName || null,
+            count,
+            message: msg,
+          });
+        } else if (typeof process !== 'undefined' && process.env && process.env.NODE_ENV !== 'production' && typeof console !== 'undefined') {
+          console.warn(`[webspresso] ${msg}`);
+        }
+      }
+    }
+
+    const affected = collectAffectedInstances(fragmentEl);
+    // Reverse order for afterPatch: inner descendants first, outer ancestors second
+    for (let i = affected.length - 1; i >= 0; i--) {
+      const inst = affected[i];
+      inst.invokeAfterPatch({
+        ...meta,
+        isFragmentRoot: inst.el === fragmentEl,
+        isDescendant: inst.el !== fragmentEl && typeof fragmentEl.contains === 'function' && fragmentEl.contains(inst.el),
+      });
+    }
+  }
+
   return {
     register,
     services,
@@ -2034,6 +2155,8 @@ function createControllerRuntime(options = {}) {
     mountSubtree,
     syncTree: mountSubtree,
     unmountSubtree,
+    notifyBeforePatch,
+    notifyAfterPatch,
     mountControllerOnElement,
     getInstanceForElement(el, name) {
       const map = elementInstances.get(el);

package/core/client/devtool.js

@@ -75,6 +75,33 @@ function setupReduxDevToolsBridge(runtime) {
   }
 }
 
+function escapeHtml(val) {
+  return String(val ?? '')
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;');
+}
+
+function sanitizeHref(url, fallback = '#') {
+  if (!url || typeof url !== 'string') return fallback;
+  const trimmed = url.trim();
+  if (!trimmed || /[\u0000-\u001F\u007F-\u009F]/.test(trimmed)) return fallback;
+  if (trimmed.startsWith('/') && !trimmed.startsWith('//') && !trimmed.startsWith('/\\')) {
+    return escapeHtml(trimmed);
+  }
+  try {
+    const parsed = new URL(trimmed);
+    if (parsed.protocol === 'http:' || parsed.protocol === 'https:') {
+      return escapeHtml(parsed.href);
+    }
+  } catch {
+    return fallback;
+  }
+  return fallback;
+}
+
 /**
  * Format JSON with syntax-colored HTML or safe text.
  */
@@ -83,13 +110,11 @@ function formatJsonHtml(data) {
   if (data === null) return '<span style="color:#f43f5e">null</span>';
   try {
     const jsonStr = JSON.stringify(data, null, 2);
-    return jsonStr
-      .replace(/&/g, '&amp;')
-      .replace(/</g, '&lt;')
-      .replace(/>/g, '&gt;')
-      .replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, (match) => {
+    return escapeHtml(jsonStr).replace(
+      /(&quot;(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\&])*&quot;(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g,
+      (match) => {
         let cls = 'color:#38bdf8;'; // number
-        if (/^"/.test(match)) {
+        if (/^&quot;/.test(match)) {
           if (/:$/.test(match)) {
             cls = 'color:#a78bfa;font-weight:600;'; // key
           } else {
@@ -101,9 +126,10 @@ function formatJsonHtml(data) {
           cls = 'color:#f43f5e;'; // null
         }
         return `<span style="${cls}">${match}</span>`;
-      });
+      }
+    );
   } catch (_) {
-    return String(data);
+    return escapeHtml(data);
   }
 }
 
@@ -549,12 +575,12 @@ function mountDevtool(runtime, options = {}) {
               (c) => `
             <div
               class="ws-card ws-controller-item"
-              data-inst-id="${c.instanceId}"
+              data-inst-id="${escapeHtml(c.instanceId)}"
               style="cursor:pointer;padding:8px 10px;margin-bottom:6px;${
                 c.instanceId === current.instanceId ? 'border-color:#f59e0b;background:#27272a;' : ''
               }">
-              <div style="font-weight:700;color:#f4f4f5;">${c.name || 'anonymous'}</div>
-              <div style="font-size:10px;color:#a1a1aa;">&lt;${c.tagName}&gt; • ${c.instanceId}</div>
+              <div style="font-weight:700;color:#f4f4f5;">${escapeHtml(c.name || 'anonymous')}</div>
+              <div style="font-size:10px;color:#a1a1aa;">&lt;${escapeHtml(c.tagName)}&gt; • ${escapeHtml(c.instanceId)}</div>
             </div>
           `
             )
@@ -565,10 +591,10 @@ function mountDevtool(runtime, options = {}) {
         <div style="overflow-y:auto;padding-right:4px;">
           <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;">
             <div>
-              <h3 style="font-size:14px;font-weight:700;color:#fff;">${current.name || 'anonymous'}</h3>
-              <p style="font-size:10px;color:#71717a;">Instance: ${current.instanceId} • Connected: ${current.isConnected ? '✅' : '❌'}</p>
+              <h3 style="font-size:14px;font-weight:700;color:#fff;">${escapeHtml(current.name || 'anonymous')}</h3>
+              <p style="font-size:10px;color:#71717a;">Instance: ${escapeHtml(current.instanceId)} • Connected: ${current.isConnected ? '✅' : '❌'}</p>
             </div>
-            <button class="ws-btn ws-btn-sm" id="ws-btn-highlight-ctrl" data-inst-id="${current.instanceId}">
+            <button class="ws-btn ws-btn-sm" id="ws-btn-highlight-ctrl" data-inst-id="${escapeHtml(current.instanceId)}">
               🎯 Highlight in DOM
             </button>
           </div>
@@ -577,7 +603,7 @@ function mountDevtool(runtime, options = {}) {
           <div class="ws-card">
             <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;">
               <strong style="color:#fbbf24;font-size:11px;">REACTIVE STATE</strong>
-              <button class="ws-btn ws-btn-sm" id="ws-btn-copy-state" data-inst-id="${current.instanceId}">📋 Copy</button>
+              <button class="ws-btn ws-btn-sm" id="ws-btn-copy-state" data-inst-id="${escapeHtml(current.instanceId)}">📋 Copy</button>
             </div>
             <div class="ws-code-block">${formatJsonHtml(current.state)}</div>
           </div>
@@ -614,14 +640,14 @@ function mountDevtool(runtime, options = {}) {
           <div class="ws-card" style="margin-bottom:10px;">
             <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;">
               <div>
-                <strong style="color:#38bdf8;font-size:12px;">${f.name}</strong>
-                <span style="font-size:10px;color:#71717a;margin-left:6px;">#${f.instanceId}</span>
+                <strong style="color:#38bdf8;font-size:12px;">${escapeHtml(f.name)}</strong>
+                <span style="font-size:10px;color:#71717a;margin-left:6px;">#${escapeHtml(f.instanceId)}</span>
               </div>
               <div style="display:flex;gap:6px;">
-                <button class="ws-btn ws-btn-sm" id="ws-btn-highlight-frag" data-inst-id="${f.instanceId}">
+                <button class="ws-btn ws-btn-sm" id="ws-btn-highlight-frag" data-inst-id="${escapeHtml(f.instanceId)}">
                   🎯 Highlight
                 </button>
-                <button class="ws-btn ws-btn-primary ws-btn-sm" id="ws-btn-refresh-frag" data-frag-name="${f.name}">
+                <button class="ws-btn ws-btn-primary ws-btn-sm" id="ws-btn-refresh-frag" data-frag-name="${escapeHtml(f.name)}">
                   🔄 Refresh
                 </button>
               </div>
@@ -631,13 +657,13 @@ function mountDevtool(runtime, options = {}) {
                 <span style="color:#a1a1aa;">Depends On Tags:</span>
                 ${
                   f.dependsOn.length > 0
-                    ? f.dependsOn.map((t) => `<span class="ws-badge ws-badge-info" style="margin-left:4px;">${t}</span>`).join('')
+                    ? f.dependsOn.map((t) => `<span class="ws-badge ws-badge-info" style="margin-left:4px;">${escapeHtml(t)}</span>`).join('')
                     : '<span style="color:#71717a;margin-left:4px;">(none)</span>'
                 }
               </div>
               <div>
                 <span style="color:#a1a1aa;">Version:</span>
-                <span style="color:#f4f4f5;margin-left:4px;">${f.version}</span>
+                <span style="color:#f4f4f5;margin-left:4px;">${escapeHtml(f.version)}</span>
               </div>
             </div>
             ${
@@ -674,11 +700,11 @@ function mountDevtool(runtime, options = {}) {
                     (r) => `
             <div class="ws-card" style="display:flex;align-items:center;justify-content:space-between;padding:8px 12px;margin-bottom:6px;">
               <div>
-                <span class="ws-badge ws-badge-${r.method === 'GET' ? 'info' : 'warning'}">${r.method}</span>
-                <span style="font-weight:600;margin-left:6px;">${r.url}</span>
+                <span class="ws-badge ws-badge-${r.method === 'GET' ? 'info' : 'warning'}">${escapeHtml(r.method)}</span>
+                <span style="font-weight:600;margin-left:6px;">${escapeHtml(r.url)}</span>
               </div>
               <div style="font-size:10px;color:#a1a1aa;">
-                Policy: <span style="color:#38bdf8;">${r.policy || 'none'}</span> • Status: <span style="color:#34d399;">${r.status}</span>
+                Policy: <span style="color:#38bdf8;">${escapeHtml(r.policy || 'none')}</span> • Status: <span style="color:#34d399;">${escapeHtml(r.status)}</span>
               </div>
             </div>
           `
@@ -696,7 +722,7 @@ function mountDevtool(runtime, options = {}) {
               .map(
                 (c) => `
               <div class="ws-card" style="padding:10px;margin-bottom:6px;">
-                <div style="font-weight:600;color:#f4f4f5;font-size:11px;">Chain: ${c.chainId}</div>
+                <div style="font-weight:600;color:#f4f4f5;font-size:11px;">Chain: ${escapeHtml(c.chainId)}</div>
                 <div class="ws-code-block" style="margin-top:4px;padding:6px;">${formatJsonHtml(c)}</div>
               </div>
             `
@@ -718,8 +744,8 @@ function mountDevtool(runtime, options = {}) {
                 .map(
                   (t) => `
                 <div style="display:flex;justify-content:space-between;padding:4px 0;border-bottom:1px solid #27272a;font-size:11px;">
-                  <span>${t.fragmentName || t.instanceId}</span>
-                  <span style="color:#fbbf24;">patch: ${t.patchMs}ms ${t.loadMs ? `(load: ${t.loadMs}ms, render: ${t.renderMs}ms)` : ''}</span>
+                  <span>${escapeHtml(t.fragmentName || t.instanceId)}</span>
+                  <span style="color:#fbbf24;">patch: ${escapeHtml(t.patchMs)}ms ${t.loadMs ? `(load: ${escapeHtml(t.loadMs)}ms, render: ${escapeHtml(t.renderMs)}ms)` : ''}</span>
                 </div>
               `
                 )
@@ -758,7 +784,7 @@ function mountDevtool(runtime, options = {}) {
                   .map(
                     (e) => `
             <div class="ws-card" style="margin-bottom:6px;">
-              <div style="font-weight:600;color:#38bdf8;font-size:11px;">${e.key}</div>
+              <div style="font-weight:600;color:#38bdf8;font-size:11px;">${escapeHtml(e.key)}</div>
               <div class="ws-code-block" style="margin-top:4px;padding:6px;">${formatJsonHtml(
                 (() => {
                   try {
@@ -784,7 +810,7 @@ function mountDevtool(runtime, options = {}) {
                   .map(
                     (e) => `
             <div class="ws-card" style="margin-bottom:6px;">
-              <div style="font-weight:600;color:#a78bfa;font-size:11px;">${e.key}</div>
+              <div style="font-weight:600;color:#a78bfa;font-size:11px;">${escapeHtml(e.key)}</div>
               <div class="ws-code-block" style="margin-top:4px;padding:6px;">${formatJsonHtml(
                 (() => {
                   try {
@@ -815,7 +841,7 @@ function mountDevtool(runtime, options = {}) {
             <div style="font-size:10px;color:#a1a1aa;margin-top:2px;">Visual database browser, query runner, and table inspector.</div>
             <div style="font-size:9px;color:#71717a;margin-top:4px;">Run in terminal: <code>npx webspresso studio</code> (port 4567)</div>
           </div>
-          <a href="${studioUrl}" target="_blank" rel="noopener noreferrer" class="ws-btn ws-btn-primary" id="ws-btn-open-studio" style="text-decoration:none;">
+          <a href="${sanitizeHref(studioUrl)}" target="_blank" rel="noopener noreferrer" class="ws-btn ws-btn-primary" id="ws-btn-open-studio" style="text-decoration:none;">
             Open DB Studio ↗
           </a>
         </div>
@@ -829,8 +855,8 @@ function mountDevtool(runtime, options = {}) {
             <div style="font-weight:700;color:#38bdf8;font-size:13px;">⚙️ Admin Panel SPA</div>
             <div style="font-size:10px;color:#a1a1aa;margin-top:2px;">Mithril.js model CRUD and staff administration cockpit.</div>
           </div>
-          <a href="${features.adminPath}" target="_blank" rel="noopener noreferrer" class="ws-btn" id="ws-btn-open-admin" style="text-decoration:none;">
-            Open ${features.adminPath} ↗
+          <a href="${sanitizeHref(features.adminPath)}" target="_blank" rel="noopener noreferrer" class="ws-btn" id="ws-btn-open-admin" style="text-decoration:none;">
+            Open ${escapeHtml(features.adminPath)} ↗
           </a>
         </div>
       `
@@ -918,7 +944,7 @@ function mountDevtool(runtime, options = {}) {
         <!-- Footer -->
         <div class="ws-footer">
           <span>Shortcuts: <strong>Alt + W</strong> to toggle • Console: <code>window.__WEBSPRESSO_DEVTOOLS__</code></span>
-          <span style="color:#a1a1aa;">Webspresso v${PKG_VERSION}</span>
+          <span style="color:#a1a1aa;">Webspresso v${escapeHtml(PKG_VERSION)}</span>
         </div>
       </div>
     `;