fix(ui): consolidate HTML escaping into one helper that escapes single quotes

ui/src/components/aliases.ts

@@ -1,3 +1,4 @@
+import { escapeHtml } from '../escape';
 import { store } from '../state';
 import { api } from '../api';
 
@@ -128,7 +129,3 @@ export function renderAliases(): string {
     </div>
   `;
 }
-
-function escapeHtml(str: string): string {
-  return String(str || '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
-}

ui/src/components/approvals.ts

@@ -1,3 +1,4 @@
+import { escapeHtml } from '../escape';
 import { AppState } from '../state';
 
 export function renderApprovals(state: AppState): string {
@@ -213,8 +214,4 @@ export function renderApprovals(state: AppState): string {
   `;
 }
 
-function escapeHtml(str: string): string {
-  return String(str || '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
-}
-
 

ui/src/components/audit.ts

@@ -1,3 +1,4 @@
+import { escapeHtml } from '../escape';
 import { store } from '../state';
 import { api, AuditEventItem } from '../api';
 
@@ -408,13 +409,3 @@ export function renderAudit(): string {
   `;
 }
 
-function escapeHtml(str: string): string {
-  if (!str) return '';
-  return String(str)
-    .replace(/&/g, '&')
-    .replace(/</g, '&lt;')
-    .replace(/>/g, '&gt;')
-    .replace(/"/g, '&quot;')
-    .replace(/'/g, '&#039;');
-}
-

ui/src/components/overview.ts

@@ -1,3 +1,4 @@
+import { escapeHtml } from '../escape';
 import { store } from '../state';
 
 export function renderOverview(): string {
@@ -278,7 +279,3 @@ export function renderOverview(): string {
     </div>
   `;
 }
-
-function escapeHtml(str: string): string {
-  return String(str || '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
-}

ui/src/components/playground.ts

@@ -1,3 +1,4 @@
+import { escapeHtml } from '../escape';
 import { store } from '../state';
 import { api } from '../api';
 
@@ -747,12 +748,4 @@ function renderBatchModal(state: any): string {
   `;
 }
 
-function escapeHtml(str: string): string {
-  return String(str || '')
-    .replace(/&/g, '&')
-    .replace(/</g, '&lt;')
-    .replace(/>/g, '&gt;')
-    .replace(/"/g, '&quot;');
-}
-
 

ui/src/components/policy.ts

@@ -1,3 +1,4 @@
+import { escapeHtml } from '../escape';
 import { store } from '../state';
 import { api } from '../api';
 
@@ -253,7 +254,3 @@ export function renderPolicy(): string {
     </div>
   `;
 }
-
-function escapeHtml(str: string): string {
-  return String(str || '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
-}

ui/src/components/profiles.ts

@@ -1,3 +1,4 @@
+import { escapeHtml } from '../escape';
 import { store } from '../state';
 import { api } from '../api';
 
@@ -118,7 +119,3 @@ export function renderProfiles(): string {
     ${profilesListHtml}
   `;
 }
-
-function escapeHtml(str: string): string {
-  return String(str || '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
-}

ui/src/components/secrets.ts

@@ -1,3 +1,4 @@
+import { escapeHtml } from '../escape';
 import { store } from '../state';
 import { api } from '../api';
 import { findTemplateForServer } from '../templates';
@@ -136,7 +137,3 @@ export function renderSecrets(): string {
     </div>
   `;
 }
-
-function escapeHtml(str: string): string {
-  return String(str || '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
-}

ui/src/components/servers.ts

@@ -1,3 +1,4 @@
+import { escapeHtml } from '../escape';
 import { store } from '../state';
 import { api } from '../api';
 import { findTemplateForServer } from '../templates';
@@ -332,7 +333,3 @@ function renderClientIntegrations(): string {
     </div>
   `;
 }
-
-function escapeHtml(str: string): string {
-  return String(str || '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
-}

ui/src/components/tasks.ts

@@ -1,3 +1,4 @@
+import { escapeHtml } from '../escape';
 import { AppState } from '../state';
 import { TaskItem } from '../api';
 
@@ -337,7 +338,3 @@ export function renderTasks(state: AppState): string {
     </div>
   `;
 }
-
-function escapeHtml(str: string): string {
-  return String(str || '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
-}

ui/src/escape.ts

@@ -0,0 +1,21 @@
+// Escapes a value for safe interpolation into HTML text or an attribute.
+
+/**
+ * Escapes a value for safe interpolation into HTML text or an attribute.
+ *
+ * Also escapes the single quote, so the value is safe inside the single-quoted
+ * JavaScript string literals used by inline `on*` handlers.
+ *
+ * @param value Any value. Non-strings are coerced; nullish values become an
+ *   empty string.
+ * @returns The escaped string.
+ */
+export function escapeHtml(value: unknown): string {
+  if (value === null || value === undefined) return '';
+  return String(value)
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#039;');
+}

ui/src/main.ts

@@ -1,3 +1,4 @@
+import { escapeHtml } from './escape';
 import { store } from './state';
 import { api } from './api';
 import { renderOverview } from './components/overview';
@@ -2777,10 +2778,6 @@ class WarmplaneApp {
   }
 }
 
-function escapeHtml(str: string): string {
-  return String(str || '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
-}
-
 const app = new WarmplaneApp();
 (window as any).app = app;
 window.addEventListener('DOMContentLoaded', () => app.init());