From e0f686b08bd7b2aeb90d061681db12bfdd907a68 Mon Sep 17 00:00:00 2001
From: Joel Wetzell <git@jwetzell.com>
Date: Wed, 19 Aug 2026 10:00:40 -0500
Subject: [PATCH] add autogenerated ID to route and processors

---
 src/app/components/route-list/route-list.html | 2 +-
 src/app/components/route/route.html           | 4 ++--
 src/app/models/config.ts                      | 2 ++
 src/app/services/schema.ts                    | 6 +++++-
 4 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/app/components/route-list/route-list.html b/src/app/components/route-list/route-list.html
index 192215e..a8b9105 100644
--- a/src/app/components/route-list/route-list.html
+++ b/src/app/components/route-list/route-list.html
@@ -17,7 +17,7 @@
     (cdkDropListDropped)="drop($event)"
     [cdkDropListData]="routes()"
   >
-    @for (route of routes(); track $index + (route.input || ''); let i = $index) {
+    @for (route of routes(); track route.id; let i = $index) {
       <div class="m-2" cdkDrag>
         <app-route
           [id]="listService.pathToId(`routes/${i}`)"
diff --git a/src/app/components/route/route.html b/src/app/components/route/route.html
index d49a05c..f0a1cda 100644
--- a/src/app/components/route/route.html
+++ b/src/app/components/route/route.html
@@ -81,7 +81,7 @@
             (cdkDropListDropped)="drop($event)"
             [cdkDropListData]="route()?.processors"
           >
-            @for (processor of processors(); track $index + processor.type; let i = $index) {
+            @for (processor of processors(); track processor.id; let i = $index) {
               <div cdkDrag>
                 <app-processor
                   [path]="path() + '/processors/' + i"
@@ -237,7 +237,7 @@
               (cdkDropListDropped)="drop($event)"
               [cdkDropListData]="route()?.processors"
             >
-              @for (processor of processors(); track $index + processor.type; let i = $index) {
+              @for (processor of processors(); track processor.id; let i = $index) {
                 <div cdkDrag>
                   <app-processor
                     [path]="path() + '/processors/' + i"
diff --git a/src/app/models/config.ts b/src/app/models/config.ts
index 4ab71aa..9980275 100644
--- a/src/app/models/config.ts
+++ b/src/app/models/config.ts
@@ -22,11 +22,13 @@ export type ModuleConfig = {
 };
 
 export type RouteConfig = {
+  id: string;
   input?: string;
   processors?: ProcessorConfig[];
 };
 
 export type ProcessorConfig = {
+  id: string;
   type: string;
   params?: Record<string, any>;
 };
diff --git a/src/app/services/schema.ts b/src/app/services/schema.ts
index 2527677..5a36203 100644
--- a/src/app/services/schema.ts
+++ b/src/app/services/schema.ts
@@ -139,12 +139,16 @@ export class SchemaService {
   }
 
   getSkeletonForRoute(): RouteConfig {
-    const template: RouteConfig = {};
+    const template: RouteConfig = {
+      id: crypto.randomUUID(),
+      processors: [],
+    };
     return template;
   }
 
   getSkeletonForProcessor(processorType: string): ProcessorConfig {
     const template: ProcessorConfig = {
+      id: crypto.randomUUID(),
       type: processorType,
     };
     const itemInfo = this.processorTypes.find((itemInfo) => itemInfo.type === processorType);