fix(ui): use feature detection for crypto.randomUUID to support HTTP deployments (#1868)

**Summary**

- The UI uses `crypto.randomUUID()` which requires a [Secure
Context](https://developer.mozilla.org/en-US/docs/Web/API/Crypto/randomUUID)
(HTTPS or localhost). Deployments served over plain HTTP crash on
`/agents/new` with `Uncaught TypeError: crypto.randomUUID is not a
function`.
- Introduces a `generateId()` utility in `ui/src/lib/utils.ts` that
detects `crypto.randomUUID` availability at runtime and falls back to
the `uuid` package (already a dependency, v14) when unavailable.
- Replaces all 8 `crypto.randomUUID()` call sites across 4 source files.

**Changes**

| File | Change |
|------|--------|
| `ui/src/lib/utils.ts` | Add `generateId()` with runtime feature
detection |
| `ui/src/lib/promptSourceRow.ts` | `crypto.randomUUID()` →
`generateId()` |
| `ui/src/lib/openClawSandboxForm.ts` | `crypto.randomUUID()` →
`generateId()` |
| `ui/src/components/prompts/FragmentEntriesEditor.tsx` | 4×
`crypto.randomUUID()` → `generateId()` |
| `ui/src/app/agents/new/page.tsx` | 2× `crypto.randomUUID()` →
`generateId()` |

**Context**

`crypto.randomUUID()` is a Web Crypto API gated behind Secure Context.
Any deployment accessed via `http://` (common in internal/dev clusters
without TLS termination) crashes when rendering the agent creation form.
The `uuid` npm package (v14, already in `package.json`) uses
`crypto.getRandomValues()` which works in all contexts.

The fix uses runtime feature detection (`typeof crypto.randomUUID ===
"function"`) so it works with the pre-built Docker image regardless of
deployment configuration — no Helm or environment variable changes
needed.

`ui/public/mockServiceWorker.js` also calls `crypto.randomUUID()` but is
auto-generated by MSW and runs in a Service Worker context (always
secure), so it is not modified.

**Test plan**

- [ ] `cd ui && npm run build` passes
- [ ] `cd ui && npm run lint` passes
- [ ] Deploy over HTTP → `/agents/new` → "Skip wizard" → form loads
without crash
- [ ] Deploy over HTTPS → same flow works using native
`crypto.randomUUID()`
- [ ] `grep -r 'crypto.randomUUID' ui/src/` returns only `utils.ts`
feature-detection branch (and `mockServiceWorker.js`)

Signed-off-by: wsszh <wsszh@users.noreply.github.com>
Signed-off-by: sup <sup@supdeMacBook-Pro.local>
Co-authored-by: sup <sup@supdeMacBook-Pro.local>
Co-authored-by: Eitan Yarmush <eitan.yarmush@solo.io>

Author: 3 people

ui/src/app/agents/new/page.tsx

@@ -8,6 +8,7 @@ import { formAgentTypeFromApi, formUsesByoSections, formUsesDeclarativeSections
 import { ModelConfig, AgentType, ContextConfig, type DeclarativeRuntime } from "@/types";
 import { SystemPromptSection } from "@/components/create/SystemPromptSection";
 import { newPromptSourceRow, type PromptSourceRow } from "@/lib/promptSourceRow";
+import { generateId } from "@/lib/utils";
 import { ModelSelectionSection } from "@/components/create/ModelSelectionSection";
 import { ToolsSection } from "@/components/create/ToolsSection";
 import { MemorySection } from "@/components/create/MemorySection";
@@ -162,7 +163,7 @@ function AgentPageContent({ isEditMode, agentName, agentNamespace }: AgentPageCo
       return {
         ...prev,
         errors: { ...prev.errors, promptSources: undefined },
-        promptSourceRows: [...nonEmpty, { id: crypto.randomUUID(), name: t, alias: "" }],
+        promptSourceRows: [...nonEmpty, { id: generateId(), name: t, alias: "" }],
       };
     });
   }, []);
@@ -207,7 +208,7 @@ function AgentPageContent({ isEditMode, agentName, agentNamespace }: AgentPageCo
                 const pt = decl?.promptTemplate;
                 const srcRows: PromptSourceRow[] =
                   pt?.dataSources?.map((ds) => ({
-                    id: crypto.randomUUID(),
+                    id: generateId(),
                     name: ds.name || "",
                     alias: ds.alias || "",
                   })) ?? [newPromptSourceRow()];

ui/src/components/prompts/FragmentEntriesEditor.tsx

@@ -6,6 +6,7 @@ import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
 import { Label } from "@/components/ui/label";
 import { Plus, Trash2 } from "lucide-react";
+import { generateId } from "@/lib/utils";
 
 export interface FragmentRow {
   id: string;
@@ -16,10 +17,10 @@ export interface FragmentRow {
 export function rowsFromData(data: Record<string, string>): FragmentRow[] {
   const keys = Object.keys(data);
   if (keys.length === 0) {
-    return [{ id: crypto.randomUUID(), key: "", value: "" }];
+    return [{ id: generateId(), key: "", value: "" }];
   }
   return keys.map((key) => ({
-    id: crypto.randomUUID(),
+    id: generateId(),
     key,
     value: data[key] ?? "",
   }));
@@ -51,11 +52,11 @@ export function FragmentEntriesEditor({
 
   const removeRow = (id: string) => {
     const next = rows.filter((r) => r.id !== id);
-    onRowsChange(next.length > 0 ? next : [{ id: crypto.randomUUID(), key: "", value: "" }]);
+    onRowsChange(next.length > 0 ? next : [{ id: generateId(), key: "", value: "" }]);
   };
 
   const addRow = () => {
-    onRowsChange([...rows, { id: crypto.randomUUID(), key: "", value: "" }]);
+    onRowsChange([...rows, { id: generateId(), key: "", value: "" }]);
   };
 
   return (

ui/src/lib/openClawSandboxForm.ts

@@ -1,5 +1,6 @@
 import type { ValueSource } from "@/types";
 import { k8sRefUtils } from "@/lib/k8sUtils";
+import { generateId } from "@/lib/utils";
 
 /** Default Sandbox CR backend when the harness form does not specify one. */
 const SANDBOX_BACKEND_OPENCLAW = "openclaw" as const;
@@ -39,7 +40,7 @@ export interface OpenClawChannelRow {
 
 export function newOpenClawChannelRow(): OpenClawChannelRow {
   return {
-    id: crypto.randomUUID(),
+    id: generateId(),
     name: "",
     channelType: "telegram",
     botTokenSource: "inline",

ui/src/lib/promptSourceRow.ts

@@ -1,9 +1,11 @@
+import { generateId } from "@/lib/utils";
+
 export interface PromptSourceRow {
   id: string;
   name: string;
   alias: string;
 }
 
 export function newPromptSourceRow(): PromptSourceRow {
-  return { id: crypto.randomUUID(), name: "", alias: "" };
+  return { id: generateId(), name: "", alias: "" };
 }

ui/src/lib/utils.ts

@@ -1,5 +1,6 @@
 import { clsx, type ClassValue } from "clsx";
 import { twMerge } from "tailwind-merge";
+import { v4 as uuidv4 } from "uuid";
 import { Message as A2AMessage, Task as A2ATask, TaskStatusUpdateEvent as A2ATaskStatusUpdateEvent, TaskArtifactUpdateEvent as A2ATaskArtifactUpdateEvent } from "@a2a-js/sdk";
 
 export function cn(...inputs: ClassValue[]) {
@@ -36,6 +37,13 @@ export function getBackendUrl() {
   return "http://localhost:8083/api";
 }
 
+export function generateId(): string {
+  if (typeof crypto.randomUUID === "function") {
+    return crypto.randomUUID();
+  }
+  return uuidv4();
+}
+
 export function getRelativeTimeString(date: string | number | Date): string {
   const now = new Date();
   const past = new Date(date);