refactor: replace crypto.randomUUID with generateUUID utility (#638)

* refactor: replace crypto.randomUUID with generateUUID in spec editor

Use the centralized generateUUID utility from @/lib/utils instead of
direct crypto.randomUUID calls in spec editor components. This provides
better fallback handling for non-secure contexts (e.g., Docker via HTTP).

Files updated:
- array-field-editor.tsx
- features-section.tsx
- roadmap-section.tsx

* refactor: simplify generateUUID to always use crypto.getRandomValues

Remove conditional checks and fallbacks - crypto.getRandomValues() works
in all modern browsers including non-secure HTTP contexts (Docker).
This simplifies the code while maintaining the same security guarantees.

* refactor: add defensive check for crypto availability

Add check for crypto.getRandomValues() availability before use.
Throws a meaningful error if the crypto API is not available,
rather than failing with an unclear runtime error.

---------

Co-authored-by: Claude <noreply@anthropic.com>

apps/ui/src/components/views/spec-view/components/edit-mode/array-field-editor.tsx

@@ -3,6 +3,7 @@ import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Card } from '@/components/ui/card';
 import { useRef, useState, useEffect } from 'react';
+import { generateUUID } from '@/lib/utils';
 
 interface ArrayFieldEditorProps {
   values: string[];
@@ -17,10 +18,6 @@ interface ItemWithId {
   value: string;
 }
 
-function generateId(): string {
-  return crypto.randomUUID();
-}
-
 export function ArrayFieldEditor({
   values,
   onChange,
@@ -30,7 +27,7 @@ export function ArrayFieldEditor({
 }: ArrayFieldEditorProps) {
   // Track items with stable IDs
   const [items, setItems] = useState<ItemWithId[]>(() =>
-    values.map((value) => ({ id: generateId(), value }))
+    values.map((value) => ({ id: generateUUID(), value }))
   );
 
   // Track if we're making an internal change to avoid sync loops
@@ -44,11 +41,11 @@ export function ArrayFieldEditor({
     }
 
     // External change - rebuild items with new IDs
-    setItems(values.map((value) => ({ id: generateId(), value })));
+    setItems(values.map((value) => ({ id: generateUUID(), value })));
   }, [values]);
 
   const handleAdd = () => {
-    const newItems = [...items, { id: generateId(), value: '' }];
+    const newItems = [...items, { id: generateUUID(), value: '' }];
     setItems(newItems);
     isInternalChange.current = true;
     onChange(newItems.map((item) => item.value));

apps/ui/src/components/views/spec-view/components/edit-mode/features-section.tsx

@@ -9,6 +9,7 @@ import { Badge } from '@/components/ui/badge';
 import { ListChecks } from 'lucide-react';
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
 import type { SpecOutput } from '@automaker/spec-parser';
+import { generateUUID } from '@/lib/utils';
 
 type Feature = SpecOutput['implemented_features'][number];
 
@@ -22,15 +23,11 @@ interface FeatureWithId extends Feature {
   _locationIds?: string[];
 }
 
-function generateId(): string {
-  return crypto.randomUUID();
-}
-
 function featureToInternal(feature: Feature): FeatureWithId {
   return {
     ...feature,
-    _id: generateId(),
-    _locationIds: feature.file_locations?.map(() => generateId()),
+    _id: generateUUID(),
+    _locationIds: feature.file_locations?.map(() => generateUUID()),
   };
 }
 
@@ -63,7 +60,7 @@ function FeatureCard({ feature, index, onChange, onRemove }: FeatureCardProps) {
     onChange({
       ...feature,
       file_locations: [...locations, ''],
-      _locationIds: [...locationIds, generateId()],
+      _locationIds: [...locationIds, generateUUID()],
     });
   };
 

apps/ui/src/components/views/spec-view/components/edit-mode/roadmap-section.tsx

@@ -13,6 +13,7 @@ import {
   SelectValue,
 } from '@/components/ui/select';
 import type { SpecOutput } from '@automaker/spec-parser';
+import { generateUUID } from '@/lib/utils';
 
 type RoadmapPhase = NonNullable<SpecOutput['implementation_roadmap']>[number];
 type PhaseStatus = 'completed' | 'in_progress' | 'pending';
@@ -21,12 +22,8 @@ interface PhaseWithId extends RoadmapPhase {
   _id: string;
 }
 
-function generateId(): string {
-  return crypto.randomUUID();
-}
-
 function phaseToInternal(phase: RoadmapPhase): PhaseWithId {
-  return { ...phase, _id: generateId() };
+  return { ...phase, _id: generateUUID() };
 }
 
 function internalToPhase(internal: PhaseWithId): RoadmapPhase {