lula2 0.3.2 → 0.3.4-nightly.0

package/dist/cli/server/websocketServer.js

@@ -132,7 +132,9 @@ var init_fileStore = __esm({
        * Get simple filename from control ID
        */
       getControlFilename(controlId) {
-        const sanitized = controlId.replace(/[^\w\-]/g, "_");
+        const sanitized = controlId.replace(/^([A-Z]+)-(.*)/, (match, prefix, suffix) => {
+          return `${prefix}-${suffix.replace(/[^\w]/g, "_")}`;
+        });
         return `${sanitized}.yaml`;
       }
       /**
@@ -1722,7 +1724,7 @@ var init_spreadsheetRoutes = __esm({
         if (req.body.fieldSchema) {
           try {
             frontendFieldSchema = JSON.parse(req.body.fieldSchema);
-          } catch (e) {
+          } catch {
           }
         }
         const fields = {};
@@ -1782,9 +1784,7 @@ var init_spreadsheetRoutes = __esm({
             uiType = "long_text";
           }
           let category = frontendConfig?.category || "custom";
-          if (justificationFields.includes(fieldName)) {
-            category = "mappings";
-          } else if (!frontendConfig) {
+          if (!frontendConfig) {
             if (fieldName.includes("status") || fieldName.includes("state")) {
               category = "compliance";
             } else if (fieldName.includes("title") || fieldName.includes("name") || fieldName.includes("description")) {
@@ -1812,7 +1812,7 @@ var init_spreadsheetRoutes = __esm({
             // Control ID is always first
             category: isControlIdField ? "core" : category,
             // Control ID is always core
-            tab: isControlIdField ? "overview" : justificationFields.includes(fieldName) ? "mappings" : frontendConfig?.tab || void 0
+            tab: isControlIdField ? "overview" : frontendConfig?.tab || void 0
             // Use frontend config or default
           };
           if (uiType === "select") {
@@ -1841,7 +1841,6 @@ var init_spreadsheetRoutes = __esm({
         writeFileSync2(join4(baseDir, "lula.yaml"), yaml4.dump(controlSetData));
         const controlsDir = join4(baseDir, "controls");
         const mappingsDir = join4(baseDir, "mappings");
-        const justificationFieldNames = justificationFields;
         families.forEach((familyControls, family) => {
           const familyDir = join4(controlsDir, family);
           const familyMappingsDir = join4(mappingsDir, family);
@@ -1876,7 +1875,6 @@ var init_spreadsheetRoutes = __esm({
               if (fieldName === "family") return;
               if (justificationFields.includes(fieldName) && control[fieldName] !== void 0 && control[fieldName] !== null) {
                 justificationContents.push(control[fieldName]);
-                filteredControl[fieldName] = control[fieldName];
               }
               const isInFrontendSchema = frontendFieldSchema?.some((f) => f.fieldName === fieldName);
               const isInFieldsMetadata = fields.hasOwnProperty(fieldName);
@@ -1992,7 +1990,7 @@ var init_spreadsheetRoutes = __esm({
         }
         const headerCandidates = rows.slice(0, 5).map((row, index) => ({
           row: index + 1,
-          preview: row.slice(0, 4).filter((v) => v != null).join(", ") + (row.length > 4 ? ", ..." : "")
+          preview: row.slice(0, 4).filter((v) => v !== null).filter((v) => v !== void 0).join(", ") + (row.length > 4 ? ", ..." : "")
         }));
         res.json({
           sheets,
@@ -2239,6 +2237,7 @@ var WebSocketManager = class {
                   `${control.id}.yaml`,
                   `${control.id.replace(/\./g, "_")}.yaml`,
                   // AC-1.1 -> AC-1_1.yaml
+                  // eslint-disable-next-line no-useless-escape
                   `${control.id.replace(/[^\w\-]/g, "_")}.yaml`
                   // General sanitization
                 ];
@@ -2460,17 +2459,15 @@ var WebSocketManager = class {
           id: control.id,
           family: control.family
         };
-        const fieldSchema = controlSetData.fieldSchema?.fields || {};
-        for (const [fieldName, fieldConfig] of Object.entries(fieldSchema)) {
-          if (fieldConfig.tab === "overview" && control[fieldName] !== void 0) {
+        const fieldSchema = controlSetData.fieldSchema?.fields || controlSetData.field_schema?.fields || {};
+        for (const [fieldName] of Object.entries(fieldSchema)) {
+          if (control[fieldName] !== void 0) {
             metadata[fieldName] = control[fieldName];
           }
         }
-        if (control.title !== void 0) metadata.title = control.title;
-        if (control.implementation_status !== void 0)
-          metadata.implementation_status = control.implementation_status;
-        if (control.compliance_status !== void 0)
-          metadata.compliance_status = control.compliance_status;
+        if (Object.keys(fieldSchema).length === 0) {
+          Object.assign(metadata, control);
+        }
         return metadata;
       });
       return {
@@ -2527,8 +2524,9 @@ var WebSocketManager = class {
           id: controlId,
           family: control.family || control["control-acronym"]?.toString().split("-")[0] || ""
         };
-        if (controlSetData.field_schema?.fields) {
-          for (const [fieldName] of Object.entries(controlSetData.field_schema.fields)) {
+        const schemaFields = controlSetData.field_schema?.fields || controlSetData.fieldSchema?.fields;
+        if (schemaFields) {
+          for (const [fieldName] of Object.entries(schemaFields)) {
             if (control[fieldName] !== void 0) {
               summary[fieldName] = control[fieldName];
             }

package/dist/index.html

@@ -6,28 +6,28 @@
 		<link rel="icon" href="/lula.png" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		
-		<link rel="modulepreload" href="/_app/immutable/entry/start.DtHY97nW.js">
-		<link rel="modulepreload" href="/_app/immutable/chunks/DVAnYkTd.js">
-		<link rel="modulepreload" href="/_app/immutable/chunks/C113Bo4B.js">
-		<link rel="modulepreload" href="/_app/immutable/entry/app.D0O4A2k5.js">
+		<link rel="modulepreload" href="/_app/immutable/entry/start.BWvTyytY.js">
+		<link rel="modulepreload" href="/_app/immutable/chunks/BcKIo18J.js">
+		<link rel="modulepreload" href="/_app/immutable/chunks/BhjtS45v.js">
+		<link rel="modulepreload" href="/_app/immutable/entry/app.rFT55pRO.js">
 		<link rel="modulepreload" href="/_app/immutable/chunks/DsnmJJEf.js">
-		<link rel="modulepreload" href="/_app/immutable/chunks/DY3-lqhI.js">
-		<link rel="modulepreload" href="/_app/immutable/chunks/CNOPXlDW.js">
-		<link rel="modulepreload" href="/_app/immutable/chunks/BtuEtkd3.js">
+		<link rel="modulepreload" href="/_app/immutable/chunks/DwdPeWTx.js">
+		<link rel="modulepreload" href="/_app/immutable/chunks/vNis_B2V.js">
+		<link rel="modulepreload" href="/_app/immutable/chunks/BkFSJLu9.js">
 	</head>
 	<body data-sveltekit-preload-data="hover">
 		<div style="display: contents">
 			<script>
 				{
-					__sveltekit_1pc01u8 = {
+					__sveltekit_11js13k = {
 						base: ""
 					};
 
 					const element = document.currentScript.parentElement;
 
 					Promise.all([
-						import("/_app/immutable/entry/start.DtHY97nW.js"),
-						import("/_app/immutable/entry/app.D0O4A2k5.js")
+						import("/_app/immutable/entry/start.BWvTyytY.js"),
+						import("/_app/immutable/entry/app.rFT55pRO.js")
 					]).then(([kit, app]) => {
 						kit.start(app, element);
 					});

package/dist/index.js

@@ -1704,7 +1704,9 @@ var init_fileStore = __esm({
        * Get simple filename from control ID
        */
       getControlFilename(controlId) {
-        const sanitized = controlId.replace(/[^\w\-]/g, "_");
+        const sanitized = controlId.replace(/^([A-Z]+)-(.*)/, (match, prefix, suffix) => {
+          return `${prefix}-${suffix.replace(/[^\w]/g, "_")}`;
+        });
         return `${sanitized}.yaml`;
       }
       /**
@@ -3294,7 +3296,7 @@ var init_spreadsheetRoutes = __esm({
         if (req.body.fieldSchema) {
           try {
             frontendFieldSchema = JSON.parse(req.body.fieldSchema);
-          } catch (e) {
+          } catch {
           }
         }
         const fields = {};
@@ -3354,9 +3356,7 @@ var init_spreadsheetRoutes = __esm({
             uiType = "long_text";
           }
           let category = frontendConfig?.category || "custom";
-          if (justificationFields.includes(fieldName)) {
-            category = "mappings";
-          } else if (!frontendConfig) {
+          if (!frontendConfig) {
             if (fieldName.includes("status") || fieldName.includes("state")) {
               category = "compliance";
             } else if (fieldName.includes("title") || fieldName.includes("name") || fieldName.includes("description")) {
@@ -3384,7 +3384,7 @@ var init_spreadsheetRoutes = __esm({
             // Control ID is always first
             category: isControlIdField ? "core" : category,
             // Control ID is always core
-            tab: isControlIdField ? "overview" : justificationFields.includes(fieldName) ? "mappings" : frontendConfig?.tab || void 0
+            tab: isControlIdField ? "overview" : frontendConfig?.tab || void 0
             // Use frontend config or default
           };
           if (uiType === "select") {
@@ -3413,7 +3413,6 @@ var init_spreadsheetRoutes = __esm({
         writeFileSync2(join4(baseDir, "lula.yaml"), yaml4.dump(controlSetData));
         const controlsDir = join4(baseDir, "controls");
         const mappingsDir = join4(baseDir, "mappings");
-        const justificationFieldNames = justificationFields;
         families.forEach((familyControls, family) => {
           const familyDir = join4(controlsDir, family);
           const familyMappingsDir = join4(mappingsDir, family);
@@ -3448,7 +3447,6 @@ var init_spreadsheetRoutes = __esm({
               if (fieldName === "family") return;
               if (justificationFields.includes(fieldName) && control[fieldName] !== void 0 && control[fieldName] !== null) {
                 justificationContents.push(control[fieldName]);
-                filteredControl[fieldName] = control[fieldName];
               }
               const isInFrontendSchema = frontendFieldSchema?.some((f) => f.fieldName === fieldName);
               const isInFieldsMetadata = fields.hasOwnProperty(fieldName);
@@ -3564,7 +3562,7 @@ var init_spreadsheetRoutes = __esm({
         }
         const headerCandidates = rows.slice(0, 5).map((row, index) => ({
           row: index + 1,
-          preview: row.slice(0, 4).filter((v) => v != null).join(", ") + (row.length > 4 ? ", ..." : "")
+          preview: row.slice(0, 4).filter((v) => v !== null).filter((v) => v !== void 0).join(", ") + (row.length > 4 ? ", ..." : "")
         }));
         res.json({
           sheets,
@@ -4686,6 +4684,7 @@ var WebSocketManager = class {
                   `${control.id}.yaml`,
                   `${control.id.replace(/\./g, "_")}.yaml`,
                   // AC-1.1 -> AC-1_1.yaml
+                  // eslint-disable-next-line no-useless-escape
                   `${control.id.replace(/[^\w\-]/g, "_")}.yaml`
                   // General sanitization
                 ];
@@ -4907,17 +4906,15 @@ var WebSocketManager = class {
           id: control.id,
           family: control.family
         };
-        const fieldSchema = controlSetData.fieldSchema?.fields || {};
-        for (const [fieldName, fieldConfig] of Object.entries(fieldSchema)) {
-          if (fieldConfig.tab === "overview" && control[fieldName] !== void 0) {
+        const fieldSchema = controlSetData.fieldSchema?.fields || controlSetData.field_schema?.fields || {};
+        for (const [fieldName] of Object.entries(fieldSchema)) {
+          if (control[fieldName] !== void 0) {
             metadata[fieldName] = control[fieldName];
           }
         }
-        if (control.title !== void 0) metadata.title = control.title;
-        if (control.implementation_status !== void 0)
-          metadata.implementation_status = control.implementation_status;
-        if (control.compliance_status !== void 0)
-          metadata.compliance_status = control.compliance_status;
+        if (Object.keys(fieldSchema).length === 0) {
+          Object.assign(metadata, control);
+        }
         return metadata;
       });
       return {
@@ -4974,8 +4971,9 @@ var WebSocketManager = class {
           id: controlId,
           family: control.family || control["control-acronym"]?.toString().split("-")[0] || ""
         };
-        if (controlSetData.field_schema?.fields) {
-          for (const [fieldName] of Object.entries(controlSetData.field_schema.fields)) {
+        const schemaFields = controlSetData.field_schema?.fields || controlSetData.fieldSchema?.fields;
+        if (schemaFields) {
+          for (const [fieldName] of Object.entries(schemaFields)) {
             if (control[fieldName] !== void 0) {
               summary[fieldName] = control[fieldName];
             }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lula2",
-  "version": "0.3.2",
+  "version": "0.3.4-nightly.0",
   "description": "A tool for managing compliance as code in your GitHub repositories.",
   "bin": {
     "lula2": "./dist/lula2"
@@ -33,25 +33,6 @@
     "!dist/**/*.test.js*",
     "!dist/**/*.test.d.ts*"
   ],
-  "scripts": {
-    "dev": "vite dev --port 5173",
-    "dev:api": "tsx --watch index.ts --debug ui --port 3000 --no-open-browser",
-    "dev:full": "concurrently \"npm run dev:api\" \"npm run dev\"",
-    "build": "npm run build:svelte && npm run build:cli && npm run postbuild:cli",
-    "build:svelte": "vite build",
-    "build:cli": "esbuild index.ts cli/**/*.ts --bundle --platform=node --target=node22 --format=esm --outdir=dist --external:express --external:commander --external:js-yaml --external:yaml --external:isomorphic-git --external:glob --external:open --external:ws --external:cors --external:multer --external:@octokit/rest --external:undici --external:exceljs --external:csv-parse",
-    "postbuild:cli": "cp cli-wrapper.mjs dist/lula2 && chmod +x dist/lula2",
-    "preview": "vite preview",
-    "prepare": "svelte-kit sync || echo ''",
-    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json && tsc --noEmit",
-    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-    "format": "prettier --write 'src/**/*.{ts,js,svelte}' 'cli/**/*.ts' 'index.ts' 'tests/**/*.ts'",
-    "format:check": "prettier --check 'src/**/*.{ts,js,svelte}' 'cli/**/*.ts' 'index.ts' 'tests/**/*.ts'",
-    "lint": "prettier --check 'src/**/*.{ts,js,svelte}' 'cli/**/*.ts' 'index.ts' 'tests/**/*.ts' && eslint src cli",
-    "test": "npm run test:unit -- --run --coverage",
-    "test:integration": "vitest --config integration/vitest.config.integration.ts",
-    "test:unit": "vitest"
-  },
   "dependencies": {
     "@octokit/rest": "^22.0.0",
     "@types/ws": "^8.18.1",
@@ -98,7 +79,7 @@
     "esbuild": "^0.25.9",
     "eslint": "^9.35.0",
     "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-jsdoc": "^57.0.8",
+    "eslint-plugin-jsdoc": "^58.1.1",
     "eslint-plugin-svelte": "^3.12.2",
     "globals": "^16.3.0",
     "husky": "^9.1.7",
@@ -124,5 +105,23 @@
       "main",
       "next"
     ]
+  },
+  "scripts": {
+    "dev": "vite dev --port 5173",
+    "dev:api": "tsx --watch index.ts --debug ui --port 3000 --no-open-browser",
+    "dev:full": "concurrently \"npm run dev:api\" \"npm run dev\"",
+    "build": "npm run build:svelte && npm run build:cli && npm run postbuild:cli",
+    "build:svelte": "vite build",
+    "build:cli": "esbuild index.ts cli/**/*.ts --bundle --platform=node --target=node22 --format=esm --outdir=dist --external:express --external:commander --external:js-yaml --external:yaml --external:isomorphic-git --external:glob --external:open --external:ws --external:cors --external:multer --external:@octokit/rest --external:undici --external:exceljs --external:csv-parse",
+    "postbuild:cli": "cp cli-wrapper.mjs dist/lula2 && chmod +x dist/lula2",
+    "preview": "vite preview",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json && tsc --noEmit",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "format": "prettier --write 'src/**/*.{ts,js,svelte}' 'cli/**/*.ts' 'index.ts' 'tests/**/*.ts'",
+    "format:check": "prettier --check 'src/**/*.{ts,js,svelte}' 'cli/**/*.ts' 'index.ts' 'tests/**/*.ts'",
+    "lint": "prettier --check 'src/**/*.{ts,js,svelte}' 'cli/**/*.ts' 'index.ts' 'tests/**/*.ts' && eslint src cli",
+    "test": "npm run test:unit -- --run --coverage",
+    "test:integration": "vitest --config integration/vitest.config.integration.ts",
+    "test:unit": "vitest"
   }
-}
+}

package/src/lib/components/control-sets/ControlSetSelector.svelte

@@ -30,7 +30,7 @@
 		onchange={handleChange}
 		class="block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-800 dark:text-white"
 	>
-		{#each availableSets as set}
+		{#each availableSets as set (set.id)}
 			<option value={set.id}>{set.name} {set.version}</option>
 		{/each}
 	</select>

package/src/lib/components/controls/ControlDetailsPanel.svelte

@@ -139,7 +139,7 @@
 	}
 
 	// Handle field changes from custom tab
-	function handleFieldChange(fieldName: string, value: any) {
+	function handleFieldChange(_fieldName: string, _value: any) {
 		triggerAutoSave();
 	}
 </script>

package/src/lib/components/controls/ControlsList.svelte

@@ -170,32 +170,6 @@
 		goto(`/control/${encodeURIComponent(control.id)}`);
 	}
 
-	function getStatusBadgeClass(status: string) {
-		switch (status) {
-			case 'Implemented':
-				return 'bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-300';
-			case 'Planned':
-				return 'bg-amber-100 dark:bg-amber-900/30 text-amber-800 dark:text-amber-300';
-			case 'Not Implemented':
-				return 'bg-red-100 dark:bg-red-900/30 text-red-800 dark:text-red-300';
-			default:
-				return 'bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-300';
-		}
-	}
-
-	function getComplianceBadgeClass(status: string) {
-		switch (status) {
-			case 'Compliant':
-				return 'bg-emerald-100 dark:bg-emerald-900/30 text-emerald-800 dark:text-emerald-300';
-			case 'Non-Compliant':
-				return 'bg-red-100 dark:bg-red-900/30 text-red-800 dark:text-red-300';
-			case 'Not Assessed':
-				return 'bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-300';
-			default:
-				return 'bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-300';
-		}
-	}
-
 	function extractDescriptionFromNested(data: any): string {
 		if (typeof data === 'string') {
 			return data;
@@ -224,24 +198,6 @@
 		return 'No description available';
 	}
 
-	// Helper to determine if a field should be truncated and show tooltip
-	function shouldTruncateField(field: FieldSchema | undefined, value: string): boolean {
-		if (!value) return false;
-		
-		// Always show tooltip for textarea fields if content is long
-		if (field?.ui_type === 'textarea' || field?.ui_type === 'long_text') {
-			return value.length > 100; // Lower threshold for long text fields
-		}
-		
-		// For short_text fields, only show if really long
-		if (field?.ui_type === 'short_text') {
-			return value.length > 200;
-		}
-		
-		// Default for unknown field types
-		return value.length > 150;
-	}
-
 	// Get truncation length based on field type
 	function getTruncationLength(field: FieldSchema | undefined): number {
 		if (field?.ui_type === 'textarea' || field?.ui_type === 'long_text') {
@@ -296,7 +252,7 @@
 			<!-- Active Filters Summary -->
 			{#if $activeFilters.length > 0}
 				<div class="mt-2 flex flex-wrap gap-2">
-					{#each $activeFilters as filter, index}
+					{#each $activeFilters as filter, index (index)}
 						<div class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-300">
 							<span>{filter.fieldName}: </span>
 							{#if filter.operator === 'exists' || filter.operator === 'not_exists'}
@@ -342,7 +298,7 @@
 						class="grid gap-4 px-6 py-3"
 						style="grid-template-columns: repeat({tableColumns.length + 1}, minmax(0, 1fr)); max-width: 100%;"
 					>
-						{#each tableColumns as { fieldName, field }}
+						{#each tableColumns as { fieldName, field }, index (index)} 
 							<div
 								class="text-left text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wider"
 							>
@@ -391,7 +347,7 @@
 			<!-- Scrollable Table Body -->
 			<div class="flex-1 overflow-auto">
 				<div class="divide-y divide-gray-200 dark:divide-gray-700">
-					{#each $filteredControlsWithMappings as control}
+					{#each $filteredControlsWithMappings as control, index (index)}
 						{@const rawDescription = (() => {
 							// Cast control to any to allow dynamic field access
 							const anyControl = control as any;
@@ -434,7 +390,7 @@
 								tabindex="0"
 								aria-label="Select control {control.id}"
 							>
-								{#each tableColumns as { fieldName, field }}
+								{#each tableColumns as { fieldName, field }, index (index)}
 									{@const value = (control as any)[fieldName]}
 									<div class="flex flex-col justify-center">
 										{#if field.ui_type === 'select' && value}

package/src/lib/components/controls/DynamicControlEditor.svelte

@@ -193,7 +193,7 @@
 							CCIs Found in Narrative
 						</div>
 						<div class="flex flex-wrap gap-2">
-							{#each ccisInNarrative as cci}
+							{#each ccisInNarrative as cci (cci)}
 								<span
 									class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 dark:bg-blue-800 text-blue-800 dark:text-blue-200"
 								>
@@ -215,7 +215,7 @@
 			{:else if activeTab === 'mappings'}
 				<div class="space-y-4">
 					{#if associatedMappings.length > 0}
-						{#each associatedMappings as mapping}
+						{#each associatedMappings as mapping (mapping.uuid)}
 							<div
 								class="border border-gray-200 dark:border-gray-600 rounded-lg p-4 bg-gray-50 dark:bg-gray-800"
 							>

package/src/lib/components/controls/MappingCard.svelte

@@ -80,7 +80,7 @@
 			<div class="mb-4">
 				<h4 class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase tracking-wider mb-2">Source References</h4>
 				<div class="space-y-2">
-					{#each mapping.source_entries as entry}
+					{#each mapping.source_entries as entry (entry)}
 						<div class="bg-gray-50 dark:bg-gray-800 rounded-lg p-3 border border-gray-200 dark:border-gray-700">
 							<div class="flex items-start justify-between">
 								<span class="text-xs font-mono text-blue-600 dark:text-blue-400 break-all">

package/src/lib/components/controls/MappingForm.svelte

@@ -110,7 +110,7 @@
 			<!-- Existing entries -->
 			{#if formData.source_entries.length > 0}
 				<div class="space-y-3">
-					{#each formData.source_entries as entry, index}
+					{#each formData.source_entries as entry, index (index)}
 						<div class="flex items-center gap-3 p-4 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm">
 							<div class="flex-1 min-w-0">
 								<div class="text-sm font-mono text-gray-900 dark:text-white break-all">

package/src/lib/components/controls/renderers/EditableFieldRenderer.svelte

@@ -38,7 +38,7 @@
 			class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-900 text-gray-900 dark:text-white disabled:opacity-50 disabled:cursor-not-allowed focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:focus:ring-blue-400"
 		>
 			<option value="">-- Select --</option>
-			{#each field.options as option}
+			{#each field.options as option (option)}
 				<option value={option}>{option}</option>
 			{/each}
 		</select>

package/src/lib/components/controls/renderers/FieldRenderer.svelte

@@ -12,7 +12,7 @@
 		readonly?: boolean;
 	}
 
-	let { fieldName, field, value, readonly = true }: Props = $props();
+	let { fieldName, field, value }: Props = $props();
 
 	const displayName = $derived(
 		field?.original_name || fieldName.replace(/_/g, ' ').replace(/\b\w/g, (l) => l.toUpperCase())
@@ -46,4 +46,4 @@
 			<span class="whitespace-pre-line">{value}</span>
 		{/if}
 	</div>
-</div>
+</div>

package/src/lib/components/controls/tabs/CustomFieldsTab.svelte

@@ -105,9 +105,9 @@
 					Additional fields specific to your organization
 				</div>
 				<div class="space-y-8">
-					{#each fieldGroups as fieldGroup}
+					{#each fieldGroups as fieldGroup, index (index)}
 						<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
-							{#each fieldGroup as [fieldName, field]}
+							{#each fieldGroup as [fieldName, field], index (index)}
 								<div class={getFieldLayoutClass(field)}>
 									<EditableFieldRenderer 
 										{fieldName} 
@@ -127,4 +127,4 @@
 			<p class="text-gray-500 dark:text-gray-400">No custom fields configured</p>
 		</div>
 	{/if}
-</div>
+</div>

package/src/lib/components/controls/tabs/ImplementationTab.svelte

@@ -102,9 +102,9 @@
 		<div class="space-y-4">
 			<div class="bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-800 dark:to-gray-900 border border-gray-200 dark:border-gray-700 rounded-xl shadow-sm hover:shadow-md transition-all duration-200 p-6">
 				<div class="space-y-8">
-					{#each fieldGroups as fieldGroup}
+					{#each fieldGroups as fieldGroup, index (index)}
 						<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
-							{#each fieldGroup as [fieldName, field]}
+							{#each fieldGroup as [fieldName, field], index (index)}
 								<div class={getFieldLayoutClass(field)}>
 									<FieldRenderer 
 										{fieldName} 
@@ -124,4 +124,4 @@
 			<p class="text-gray-500 dark:text-gray-400">No implementation fields available</p>
 		</div>
 	{/if}
-</div>
+</div>

package/src/lib/components/controls/tabs/MappingsTab.svelte

@@ -99,7 +99,7 @@
 	<!-- Existing Mappings -->
 	{#if mappings.length > 0}
 		<div class="space-y-4">
-			{#each mappings as mapping}
+			{#each mappings as mapping (mapping.uuid)}
 				{#if editingMapping && editingMapping.uuid === mapping.uuid}
 					<!-- Edit Form in place of the mapping being edited -->
 					<div

package/src/lib/components/controls/tabs/OverviewTab.svelte

@@ -107,9 +107,9 @@
 		<div class="space-y-4">
 			<div class="bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-800 dark:to-gray-900 border border-gray-200 dark:border-gray-700 rounded-xl shadow-sm hover:shadow-md transition-all duration-200 p-6">
 				<div class="space-y-8">
-					{#each fieldGroups as fieldGroup}
+					{#each fieldGroups as fieldGroup, index (index)}
 						<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
-							{#each fieldGroup as [fieldName, field]}
+							{#each fieldGroup as [fieldName, field], index (index)}
 								<div class={getFieldLayoutClass(field)}>
 									<FieldRenderer 
 										{fieldName} 
@@ -136,7 +136,7 @@
 			<h3 class="text-lg font-semibold text-gray-900 dark:text-white">Control Properties</h3>
 			<div class="bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-800 dark:to-gray-900 border border-gray-200 dark:border-gray-700 rounded-xl shadow-sm hover:shadow-md transition-all duration-200 p-6">
 				<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
-					{#each Object.entries(control.properties) as [key, value]}
+					{#each Object.entries(control.properties) as [key, value], index (index)}
 						<FieldRenderer 
 							fieldName={key.replace(/_/g, ' ')} 
 							field={null} 
@@ -148,4 +148,4 @@
 			</div>
 		</div>
 	{/if}
-</div>
+</div>

package/src/lib/components/controls/tabs/TimelineTab.svelte

@@ -3,15 +3,14 @@
 
 <script lang="ts">
 	import { TimelineItem } from '$components/version-control';
-	import type { Control } from '$lib/types';
 	import { EmptyState } from '../../ui';
 
 	interface Props {
-		control: Control;
+		// control: Control;
 		timeline?: any; // Timeline type from control.timeline
 	}
 
-	let { control, timeline }: Props = $props();
+	let { timeline }: Props = $props();
 
 	const commits = $derived(timeline?.commits || []);
 </script>
@@ -26,7 +25,7 @@
 	{:else if commits.length > 0}
 		<div class="mb-4">
 			<div class="space-y-6">
-				{#each commits as commit, index}
+				{#each commits as commit, index (index)}
 					<TimelineItem {commit} showConnector={index < commits.length - 1} />
 				{/each}
 			</div>

package/src/lib/components/controls/utils/ProcessedTextRenderer.svelte

@@ -14,7 +14,7 @@
 </script>
 
 <div class="space-y-3">
-	{#each sections as section}
+	{#each sections as section, index (index)}
 		{#if section.type === 'header'}
 			<h4 class="font-semibold text-gray-900 dark:text-gray-100 mt-4 first:mt-0">
 				{section.content}
@@ -23,9 +23,9 @@
 			<div class="overflow-x-auto">
 				<table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
 					<tbody class="divide-y divide-gray-200 dark:divide-gray-700">
-						{#each section.data.rows as row, i}
+						{#each section.data.rows as row, index (index)}
 							<tr class="hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
-								{#each row.columns as column, j}
+								{#each row.columns as column, j (j)}
 									<td class="px-3 py-2 text-sm {j === 0 ? 'font-medium text-gray-900 dark:text-gray-100' : 'text-gray-600 dark:text-gray-400'}">
 										{#if column.startsWith('CCI-')}
 											<code class="px-1.5 py-0.5 text-xs bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 rounded">
@@ -47,7 +47,7 @@
 			</div>
 		{:else if section.type === 'list' && section.data?.items}
 			<ul class="space-y-1 ml-4">
-				{#each section.data.items as item}
+				{#each section.data.items as item, index (index)}
 					<li class="flex items-start">
 						<span class="text-gray-400 dark:text-gray-500 mr-2 flex-shrink-0">•</span>
 						<span class="text-gray-600 dark:text-gray-400 text-sm">{item}</span>