fix: load D3.js locally for Traffic plugin to comply with CSP

D3.js was hardcoded to load from CDN (d3js.org) but CSP in local asset
mode only allows 'self', blocking the script and causing "d3 is not
defined" errors and a stuck loading spinner.

- Update traffic.templ and widgets.templ to use UseLocalAssets pattern
- Add d3js.org to production CSP whitelist
- Add D3.js to Makefile dev-assets download target
- D3.js v7 downloaded locally via make dev-assets or manual curl

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Author: sarg3nt

gearbox/Makefile

@@ -101,6 +101,8 @@ dev-assets: ## Download CDN assets locally for secure development (CSP-compliant
 	@curl -fsSL https://cdn.jsdelivr.net/npm/hammerjs@2.0.8/hammer.min.js -o static/js/vendor/hammer.min.js
 	@echo "  → Chart.js Zoom Plugin..."
 	@curl -fsSL https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom@2.0.1/dist/chartjs-plugin-zoom.min.js -o static/js/vendor/chartjs-plugin-zoom.min.js
+	@echo "  → D3.js..."
+	@curl -fsSL https://d3js.org/d3.v7.min.js -o static/js/vendor/d3.v7.min.js
 	@echo "  → Tabulator CSS..."
 	@curl -fsSL https://unpkg.com/tabulator-tables@6.3.0/dist/css/tabulator.min.css -o static/css/vendor/tabulator.min.css
 	@echo "  → Tabulator JS..."

gearbox/internal/framework/middleware/security_headers.go

@@ -72,7 +72,7 @@ func buildCSP() string {
 		// CDNs provide automatic updates and good performance via edge caching
 		directives = []string{
 			"default-src 'self'",
-			"script-src 'self' 'unsafe-inline' https://cdn.tailwindcss.com https://unpkg.com https://cdn.jsdelivr.net",
+			"script-src 'self' 'unsafe-inline' https://cdn.tailwindcss.com https://unpkg.com https://cdn.jsdelivr.net https://d3js.org",
 			"style-src 'self' 'unsafe-inline' https://unpkg.com",
 			"img-src 'self' data: blob:",
 			"font-src 'self' data:",

gearbox/internal/framework/templates/pages/traffic.templ

@@ -1,6 +1,7 @@
 package pages
 
 import (
+	"github.com/sarg3nt/gearbox/internal/framework/middleware"
 	"github.com/sarg3nt/gearbox/internal/framework/models"
 	"github.com/sarg3nt/gearbox/internal/framework/templates/layouts"
 	"github.com/sarg3nt/gearbox/internal/framework/templates/pages/traffic"
@@ -26,7 +27,11 @@ templ TrafficPage(user *models.User, servers []models.BoxConfig) {
 			</div>
 		}
 		<!-- D3.js for force-directed graph -->
-		<script src="https://d3js.org/d3.v7.min.js"></script>
+		if middleware.UseLocalAssets(ctx) {
+			<script src="/static/js/vendor/d3.v7.min.js"></script>
+		} else {
+			<script src="https://d3js.org/d3.v7.min.js"></script>
+		}
 		<script src="/static/js/traffic/traffic-visualization.js"></script>
 	}
 }

gearbox/internal/plugins/traffic/widgets.templ

@@ -1,6 +1,10 @@
 package traffic
 
-import "fmt"
+import (
+	"fmt"
+
+	"github.com/sarg3nt/gearbox/internal/framework/middleware"
+)
 
 
 // TrafficSummaryCardWidget shows 5-card summary of traffic metrics
@@ -118,7 +122,11 @@ templ TrafficFlowVisualizationWidget(serverID string, height int, showControls b
 		</div>
 	</div>
 	<!-- D3.js and visualization script -->
-	<script src="https://d3js.org/d3.v7.min.js"></script>
+	if middleware.UseLocalAssets(ctx) {
+		<script src="/static/js/vendor/d3.v7.min.js"></script>
+	} else {
+		<script src="https://d3js.org/d3.v7.min.js"></script>
+	}
 	<script src="/static/js/traffic/traffic-visualization.js"></script>
 }