go-duck-cli 1.0.8 → 1.1.1

package/templates/docs/pages/wizard.hbs

@@ -0,0 +1,683 @@
+<div class="min-h-screen bg-[#f8fafc] text-[#1e293b] font-sans selection:bg-indigo-100 selection:text-indigo-900 overflow-x-hidden">
+    <!-- Professional Executive Header -->
+    <header class="sticky top-0 z-50 bg-white/90 backdrop-blur-2xl border-b border-slate-200 py-6 px-12 flex items-center justify-between shadow-sm">
+        <div class="flex items-center space-x-4">
+            <div class="w-12 h-12 bg-gradient-to-tr from-indigo-500 to-indigo-700 rounded-2xl flex items-center justify-center shadow-xl shadow-indigo-200">
+                <svg class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
+                </svg>
+            </div>
+            <div>
+                <h1 class="text-xl font-black tracking-tight text-slate-900 m-0">GO-DUCK INDUSTRIAL</h1>
+                <p class="text-[10px] font-bold text-indigo-600 tracking-[0.4em] uppercase opacity-80 leading-none mt-1">Config Orchestrator v361.Elite</p>
+            </div>
+        </div>
+        <div class="flex items-center space-x-6">
+            <div id="status-badge" class="flex items-center space-x-2 px-4 py-2 bg-emerald-50 rounded-full border border-emerald-100">
+                <div class="w-2 h-2 bg-emerald-500 rounded-full animate-pulse shadow-[0_0_8px_#10b981]"></div>
+                <span class="text-[10px] font-black text-emerald-600 uppercase tracking-widest">System Ready</span>
+            </div>
+            <button id="main-download-btn" class="px-8 py-3 bg-indigo-600 text-white rounded-xl font-black text-xs uppercase tracking-widest hover:bg-slate-900 hover:scale-[1.02] transition-all duration-300 shadow-xl shadow-indigo-200 group">
+                <span class="flex items-center">
+                    <svg class="w-4 h-4 mr-2 group-hover:translate-y-0.5 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M4 16v1a2 2 0 002 2h12a2 2 0 002-2v-1m-4-4l-4 4m0 0l-4-4m4 4V4" /></svg>
+                    Commit Blueprint
+                </span>
+            </button>
+        </div>
+    </header>
+
+    <div class="flex h-[calc(100vh-100px)] overflow-hidden">
+        <!-- Professional Commands Sidebar -->
+        <nav class="w-64 bg-white border-r border-slate-200 p-6 flex flex-col space-y-2 shrink-0 overflow-y-auto custom-scrollbar">
+            <h4 class="text-[9px] font-black text-slate-400 uppercase tracking-[0.3em] mb-6 px-4 leading-none">Management Domains</h4>
+            <button onclick="switchTab('core')" class="tab-btn active w-full flex items-center space-x-4 px-6 py-4 rounded-2xl transition-all duration-300 group">
+                <div class="w-1.5 h-1.5 rounded-full bg-indigo-500 opacity-0 group-[.active]:opacity-100 transition-opacity translate-x-[-10px] group-[.active]:translate-x-0"></div>
+                <span class="text-sm font-bold text-slate-500 group-hover:text-indigo-600 group-[.active]:text-indigo-700 transition-colors">Core API Specs</span>
+            </button>
+            <button onclick="switchTab('datastore')" class="tab-btn w-full flex items-center space-x-4 px-6 py-4 rounded-2xl transition-all duration-300 group hover:bg-slate-50">
+                <div class="w-1.5 h-1.5 rounded-full bg-indigo-500 opacity-0 group-[.active]:opacity-100 transition-opacity translate-x-[-10px] group-[.active]:translate-x-0"></div>
+                <span class="text-sm font-bold text-slate-500 group-hover:text-indigo-600 group-[.active]:text-indigo-700 transition-colors">Hybrid Datastore</span>
+            </button>
+            <button onclick="switchTab('security')" class="tab-btn w-full flex items-center space-x-4 px-6 py-4 rounded-2xl transition-all duration-300 group hover:bg-slate-50">
+                <div class="w-1.5 h-1.5 rounded-full bg-indigo-500 opacity-0 group-[.active]:opacity-100 transition-opacity translate-x-[-10px] group-[.active]:translate-x-0"></div>
+                <span class="text-sm font-bold text-slate-500 group-hover:text-indigo-600 group-[.active]:text-indigo-700 transition-colors">Security & Identity</span>
+            </button>
+            <button onclick="switchTab('messaging')" class="tab-btn w-full flex items-center space-x-4 px-6 py-4 rounded-2xl transition-all duration-300 group hover:bg-slate-50">
+                <div class="w-1.5 h-1.5 rounded-full bg-indigo-500 opacity-0 group-[.active]:opacity-100 transition-opacity translate-x-[-10px] group-[.active]:translate-x-0"></div>
+                <span class="text-sm font-bold text-slate-500 group-hover:text-indigo-600 group-[.active]:text-indigo-700 transition-colors">Messaging Bridge</span>
+            </button>
+            <button onclick="switchTab('infrastructure')" class="tab-btn w-full flex items-center space-x-4 px-6 py-4 rounded-2xl transition-all duration-300 group hover:bg-slate-50">
+                <div class="w-1.5 h-1.5 rounded-full bg-indigo-500 opacity-0 group-[.active]:opacity-100 transition-opacity translate-x-[-10px] group-[.active]:translate-x-0"></div>
+                <span class="text-sm font-bold text-slate-500 group-hover:text-indigo-600 group-[.active]:text-indigo-700 transition-colors">Universal Storage</span>
+            </button>
+            <button onclick="switchTab('observability')" class="tab-btn w-full flex items-center space-x-4 px-6 py-4 rounded-2xl transition-all duration-300 group hover:bg-slate-50">
+                <div class="w-1.5 h-1.5 rounded-full bg-indigo-500 opacity-0 group-[.active]:opacity-100 transition-opacity translate-x-[-10px] group-[.active]:translate-x-0"></div>
+                <span class="text-sm font-bold text-slate-500 group-hover:text-indigo-600 group-[.active]:text-indigo-700 transition-colors">Observability Engine</span>
+            </button>
+            
+            <div class="pt-12 mt-auto border-t border-slate-100 px-4 space-y-6">
+                <div>
+                    <span class="text-[8px] font-black text-slate-400 uppercase tracking-widest block mb-3 italic">Industrial Status</span>
+                    <div class="flex items-center space-x-2">
+                        <div class="flex-grow h-1.5 bg-slate-100 rounded-full overflow-hidden">
+                            <div class="w-[88%] h-full bg-indigo-500 shadow-[0_0_8px_rgba(99,102,241,0.5)]"></div>
+                        </div>
+                        <span class="text-[8px] font-black text-indigo-600 uppercase">361%</span>
+                    </div>
+                </div>
+            </div>
+        </nav>
+
+        <!-- Configuration Canvas -->
+        <main class="flex-grow overflow-y-auto bg-slate-50/50 p-12 custom-scrollbar">
+            <div class="max-w-4xl mx-auto space-y-12 pb-24">
+                
+                <!-- SECTION: CORE -->
+                <section id="tab-core" class="tab-content active space-y-8 animate-in fade-in slide-in-from-bottom-4 duration-700">
+                    <div class="p-12 bg-white rounded-[3rem] border border-slate-200 shadow-xl shadow-slate-200/50 relative overflow-hidden group">
+                        <div class="absolute -top-32 -right-32 w-80 h-80 bg-indigo-50 rounded-full blur-[80px] group-hover:scale-125 transition-transform duration-1000"></div>
+                        <h2 class="text-3xl font-black text-slate-900 italic m-0 mb-10 tracking-tight leading-none decoration-indigo-200 underline underline-offset-[12px] uppercase">Core Orchestration</h2>
+                        <div class="grid grid-cols-2 gap-8 relative z-10">
+                            <div class="col-span-2 space-y-3">
+                                <label class="text-[10px] font-black text-indigo-500 uppercase tracking-[0.2em] ml-2">App Name Identifier</label>
+                                <input type="text" id="app_name" value="go-duck-master-app" class="w-full bg-slate-50 border-2 border-slate-100 rounded-2xl px-6 py-5 text-sm font-bold text-slate-900 focus:outline-none focus:border-indigo-500/50 transition-all placeholder-slate-400" />
+                            </div>
+                            <div class="space-y-3">
+                                <label class="text-[10px] font-black text-indigo-500 uppercase tracking-[0.2em] ml-2">Blueprint Version</label>
+                                <input type="text" id="app_version" value="1.0.0" class="w-full bg-slate-50 border-2 border-slate-100 rounded-2xl px-6 py-5 text-sm font-bold text-slate-900 focus:outline-none focus:border-indigo-500/50 transition-all" />
+                            </div>
+                            <div class="space-y-3">
+                                <label class="text-[10px] font-black text-indigo-500 uppercase tracking-[0.2em] ml-2">Primary HTTP Port</label>
+                                <input type="number" id="server_port" value="8080" class="w-full bg-slate-50 border-2 border-slate-100 rounded-2xl px-6 py-5 text-sm font-bold text-slate-900 focus:outline-none focus:border-indigo-500/50 transition-all" />
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="p-12 bg-white border border-slate-200 rounded-[3rem] shadow-md relative overflow-hidden group">
+                        <div class="flex items-center justify-between mb-8">
+                            <h3 class="text-sm font-black text-slate-900 uppercase tracking-widest flex items-center">
+                                <div class="w-1.5 h-1.5 bg-indigo-500 rounded-full mr-3 shadow-md"></div>
+                                Internal Discovery / gRPC Addr
+                            </h3>
+                            <span class="text-[9px] font-bold text-slate-300 uppercase tracking-widest italic group-hover:text-indigo-400 transition-colors">Industrial Zero-Trust Interface</span>
+                        </div>
+                        <div class="grid grid-cols-2 gap-8">
+                            <input type="text" id="grpc_addr" value=":9000" class="bg-indigo-50/50 border border-indigo-100 rounded-2xl px-6 py-4 text-xs font-mono text-indigo-700 font-bold" />
+                            <input type="text" id="grpc_network" value="tcp" class="bg-indigo-50/50 border border-indigo-100 rounded-2xl px-6 py-4 text-xs font-mono text-indigo-700 font-bold text-center" />
+                        </div>
+                    </div>
+                </section>
+
+                <!-- SECTION: DATASTORE -->
+                <section id="tab-datastore" class="tab-content hidden space-y-8">
+                    <div class="p-12 bg-white rounded-[3rem] border border-slate-200 shadow-xl shadow-slate-200/40">
+                        <h2 class="text-3xl font-black text-slate-900 italic m-0 mb-12 tracking-tight leading-none decoration-emerald-200 underline underline-offset-[12px] uppercase">Hybrid-Store Perspective</h2>
+                        
+                        <div class="space-y-8">
+                            <div id="pg_card" class="p-10 bg-slate-50 border-2 border-transparent hover:border-emerald-500/20 rounded-[3rem] transition-all relative group shadow-sm">
+                                <div class="absolute top-10 right-10 flex items-center space-x-3">
+                                    <span class="text-[9px] font-black uppercase tracking-widest text-emerald-600 opacity-60">Postgres Connector</span>
+                                    <input type="checkbox" id="pg_enabled" checked onchange="updateUI()" class="w-5 h-5 text-emerald-600 border-slate-200 rounded-lg bg-white">
+                                </div>
+                                <h4 class="text-[10px] font-black text-slate-400 uppercase mb-8 flex items-center">
+                                    <svg class="w-4 h-4 mr-2 text-emerald-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4" /></svg>
+                                    Relational Repository (SQL)
+                                </h4>
+                                <div id="pg_grid" class="grid grid-cols-2 gap-6 transition-all duration-500">
+                                    <input type="text" id="db_host" placeholder="Silo Hostname" value="localhost" class="bg-white border-2 border-slate-100 rounded-xl px-5 py-4 text-xs font-bold text-slate-900 focus:outline-none focus:border-indigo-500/20" />
+                                    <input type="number" id="db_port" placeholder="Industrial Port" value="5432" class="bg-white border-2 border-slate-100 rounded-xl px-5 py-4 text-xs font-bold text-slate-900" />
+                                    <input type="text" id="db_user" placeholder="Postgres Authority" value="postgres" class="bg-white border-2 border-slate-100 rounded-xl px-5 py-4 text-xs font-bold text-slate-900" />
+                                    <input type="text" id="db_name" placeholder="Target Database" value="go_duck_db" class="bg-white border-2 border-slate-100 rounded-xl px-5 py-4 text-xs font-bold text-slate-900" />
+                                </div>
+                            </div>
+
+                            <div id="mongo_card" class="p-10 bg-slate-50 border-2 border-transparent hover:border-emerald-500/20 rounded-[3rem] transition-all relative group shadow-sm">
+                                <div class="absolute top-10 right-10 flex items-center space-x-3">
+                                    <span class="text-[9px] font-black uppercase tracking-widest text-emerald-600 opacity-60">Mongo Connector</span>
+                                    <input type="checkbox" id="mongo_enabled" onchange="updateUI()" class="w-5 h-5 text-emerald-600 border-slate-200 rounded-lg bg-white">
+                                </div>
+                                <h4 class="text-[10px] font-black text-slate-400 uppercase mb-8 flex items-center">
+                                    <svg class="w-4 h-4 mr-2 text-emerald-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" /></svg>
+                                    Document Registry (NoSQL)
+                                </h4>
+                                <div id="mongo_grid" class="space-y-6 opacity-20 pointer-events-none transition-all duration-500">
+                                    <input type="text" id="mongo_uri" placeholder="Cluster Connection URI" value="mongodb://localhost:27017" class="w-full bg-white border-2 border-slate-100 rounded-xl px-5 py-4 text-xs font-bold text-slate-900" />
+                                    <input type="text" id="mongo_db" placeholder="Cluster Instance" value="go_duck_mongo" class="w-full bg-white border-2 border-slate-100 rounded-xl px-5 py-4 text-xs font-bold text-slate-900" />
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </section>
+
+                <!-- SECTION: SECURITY -->
+                <section id="tab-security" class="tab-content hidden space-y-8">
+                    <div class="p-12 bg-white rounded-[3rem] border border-slate-200 shadow-xl shadow-slate-200/40">
+                        <h2 class="text-3xl font-black text-slate-900 italic m-0 mb-12 tracking-tight leading-none decoration-rose-200 underline underline-offset-[12px] uppercase">Security Dashboard</h2>
+                        
+                        <div class="space-y-8">
+                            <div class="p-10 bg-slate-50 rounded-[3rem] border border-slate-100 shadow-inner">
+                                <h4 class="text-[10px] font-black text-rose-500 uppercase tracking-[0.3em] mb-10 italic">OIDC Keycloak Integration</h4>
+                                <div class="grid grid-cols-2 gap-x-8 gap-y-6">
+                                    <div class="space-y-3">
+                                        <label class="text-[9px] font-bold text-slate-400 uppercase ml-2">Auth Provider Host</label>
+                                        <input type="text" id="keycloak_host" value="http://localhost:8080" class="w-full bg-white border border-slate-200 rounded-2xl px-6 py-4 text-xs font-bold text-slate-900" />
+                                    </div>
+                                    <div class="space-y-3">
+                                        <label class="text-[9px] font-bold text-slate-400 uppercase ml-2">Master Realm</label>
+                                        <input type="text" id="keycloak_realm" value="go-duck-realm" class="w-full bg-white border border-slate-200 rounded-2xl px-6 py-4 text-xs font-bold text-slate-900" />
+                                    </div>
+                                    <div class="col-span-2 grid grid-cols-2 gap-8 mt-4 pt-6 border-t border-slate-200">
+                                        <div class="space-y-3">
+                                            <label class="text-[9px] font-bold text-slate-400 uppercase ml-2 tracking-widest flex items-center">
+                                                <svg class="w-2.5 h-2.5 mr-2 text-indigo-500" fill="currentColor" viewBox="0 0 20 20"><path d="M13 6a3 3 0 11-6 0 3 3 0 016 0zM18 8a2 2 0 11-4 0 2 2 0 014 0zM14 15a4 4 0 00-8 0v3h8v-3zM6 8a2 2 0 11-4 0 2 2 0 014 0zM16 18v-3a5.972 5.972 0 00-.75-2.906A3.005 3.005 0 0119 15v3h-3zM4.75 12.094A5.973 5.973 0 004 15v3H1v-3a3 3 0 013.75-2.906z" /></svg>
+                                                App Client ID
+                                            </label>
+                                            <input type="text" id="keycloak_app_id" value="go-duck-app" class="w-full bg-white border border-slate-200 rounded-2xl px-6 py-4 text-xs font-bold text-slate-900" />
+                                        </div>
+                                        <div class="space-y-3">
+                                            <label class="text-[9px] font-bold text-slate-400 uppercase ml-2 tracking-widest flex items-center">
+                                                <svg class="w-2.5 h-2.5 mr-2 text-indigo-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M18 8a6 6 0 01-7.743 5.743L10 14l-1 1-1 1H6v2H2v-4l4.257-4.257A6 6 0 1118 8zm-6-4a1 1 0 100 2 2 2 0 012 2 1 1 0 102 0 4 4 0 00-4-4z" clip-rule="evenodd" /></svg>
+                                                App Client Secret
+                                            </label>
+                                            <input type="password" id="keycloak_app_secret" value="app-secret-123" class="w-full bg-slate-50 border border-slate-200 rounded-2xl px-6 py-4 text-[10px] font-mono text-indigo-600 font-bold" />
+                                        </div>
+                                    </div>
+                                    <div class="col-span-2 grid grid-cols-2 gap-8 mt-4 pt-6 border-t border-slate-200">
+                                        <div class="space-y-3">
+                                            <label class="text-[9px] font-bold text-slate-400 uppercase ml-2 tracking-widest flex items-center text-amber-600">
+                                                <svg class="w-2.5 h-2.5 mr-2" fill="currentColor" viewBox="0 0 20 20"><path d="M2 11a1 1 0 011-1h2a1 1 0 011 1v5a1 1 0 01-1 1H3a1 1 0 01-1-1v-5zM8 7a1 1 0 011-1h2a1 1 0 011 1v9a1 1 0 01-1 1H9a1 1 0 01-1-1V7zM14 4a1 1 0 011-1h2a1 1 0 011 1v12a1 1 0 01-1 1h-2a1 1 0 01-1-1V4z" /></svg>
+                                                Service Client ID
+                                            </label>
+                                            <input type="text" id="keycloak_service_id" value="go-duck-service" class="w-full bg-white border border-slate-200 rounded-2xl px-6 py-4 text-xs font-bold text-slate-900" />
+                                        </div>
+                                        <div class="space-y-3">
+                                            <label class="text-[9px] font-bold text-slate-400 uppercase ml-2 tracking-widest flex items-center text-amber-600">
+                                                <svg class="w-2.5 h-2.5 mr-2" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z" clip-rule="evenodd" /></svg>
+                                                Service Secret
+                                            </label>
+                                            <input type="password" id="keycloak_service_secret" value="service-secret-123" class="w-full bg-slate-50 border border-slate-200 rounded-2xl px-6 py-4 text-[10px] font-mono text-amber-700 font-bold" />
+                                        </div>
+                                    </div>
+                                    <div class="col-span-2 grid grid-cols-2 gap-8 mt-4 pt-6 border-t border-slate-200 bg-slate-100/50 -mx-10 px-10 py-8 rounded-b-[2rem]">
+                                        <div class="space-y-3">
+                                            <label class="text-[9px] font-bold text-indigo-500 uppercase ml-2 tracking-widest flex items-center">
+                                                <svg class="w-2.5 h-2.5 mr-2" fill="currentColor" viewBox="0 0 20 20"><path d="M10 2a5 5 0 00-5 5v2a2 2 0 00-2 2v5a2 2 0 002 2h10a2 2 0 002-2v-5a2 2 0 00-2-2V7a5 5 0 00-5-5zM7 7a3 3 0 016 0v2H7V7z" /></svg>
+                                                Keycloak Admin ID
+                                            </label>
+                                            <input type="text" id="keycloak_admin_id" value="admin-cli" class="w-full bg-white border border-slate-200 rounded-2xl px-6 py-4 text-xs font-bold text-slate-900" />
+                                        </div>
+                                        <div class="space-y-3">
+                                            <label class="text-[9px] font-bold text-indigo-500 uppercase ml-2 tracking-widest flex items-center">
+                                                <svg class="w-2.5 h-2.5 mr-2" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M2.166 4.9L9.03 1.103a1.11 1.11 0 011.088 0l6.864 3.797c.394.218.636.63.636 1.076v9a1.11 1.11 0 01-.636 1.077l-6.864 3.796a1.11 1.11 0 01-1.088 0l-6.864-3.796A1.11 1.11 0 011.53 15.077v-9c0-.447.242-.858.636-1.076zM7.003 8.24a1 1 0 00-1 1.732l3 1.732a1 1 0 001-1.732l-3-1.732z" clip-rule="evenodd" /></svg>
+                                                Admin Secret
+                                            </label>
+                                            <input type="password" id="keycloak_admin_secret" value="admin-secret-xyz" class="w-full bg-white border border-slate-200 rounded-2xl px-6 py-4 text-[10px] font-mono text-indigo-600 font-bold" />
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div class="p-10 bg-white rounded-[3rem] border border-slate-200 shadow-sm">
+                                <h4 class="text-[10px] font-black text-slate-400 uppercase tracking-[0.3em] mb-8">Executive CORS Policy</h4>
+                                <div class="space-y-6">
+                                    <div class="space-y-2">
+                                        <label class="text-[9px] font-bold text-slate-300 uppercase ml-3">Permitted Domains</label>
+                                        <input type="text" id="cors_origins" value="*" class="w-full bg-slate-50 border border-slate-100 rounded-2xl px-6 py-4 text-xs font-bold text-slate-900" />
+                                    </div>
+                                    <div class="grid grid-cols-2 gap-8">
+                                        <div class="space-y-2 text-xs font-bold">
+                                            <label class="text-[9px] font-bold text-slate-300 uppercase ml-3">Whitelist Methods</label>
+                                            <input type="text" id="cors_methods" value="GET, POST, PUT, DELETE, OPTIONS" class="w-full bg-indigo-50/50 border border-indigo-100 rounded-2xl px-6 py-4 text-[10px] text-indigo-700 font-mono" />
+                                        </div>
+                                        <div class="space-y-2 text-xs font-bold">
+                                            <label class="text-[9px] font-bold text-slate-300 uppercase ml-3">Security Headers</label>
+                                            <input type="text" id="cors_headers" value="Origin, Content-Type, Accept, Authorization, X-Tenant-ID" class="w-full bg-indigo-50/50 border border-indigo-100 rounded-2xl px-6 py-4 text-[9px] text-indigo-700 font-mono" />
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div class="grid grid-cols-2 gap-6">
+                                <div class="p-8 bg-slate-900 rounded-[2.5rem] flex items-center justify-between shadow-2xl">
+                                    <div class="space-y-1">
+                                        <span class="text-[10px] font-black text-white uppercase tracking-tighter block">Confidential Boundary</span>
+                                        <span class="text-[9px] text-slate-500 font-bold italic">Shields management silos</span>
+                                    </div>
+                                    <input type="checkbox" id="confidential_mode" checked class="w-6 h-6 text-indigo-500 rounded-lg">
+                                </div>
+                                <div class="p-8 bg-indigo-50 border border-indigo-100 rounded-[2.5rem] flex items-center justify-between">
+                                    <span class="text-[11px] font-black text-indigo-900 uppercase">Rate Limit (RPS)</span>
+                                    <input type="number" id="rate_limit_rps" value="100" class="w-16 bg-transparent border-none text-right font-black text-indigo-600 focus:ring-0 text-xl">
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </section>
+
+                <!-- SECTION: MESSAGING -->
+                <section id="tab-messaging" class="tab-content hidden space-y-8">
+                    <div class="p-12 bg-white rounded-[3rem] border border-slate-200 shadow-xl shadow-slate-200/40">
+                        <h2 class="text-3xl font-black text-slate-900 italic m-0 mb-12 tracking-tight leading-none decoration-amber-200 underline underline-offset-[12px] uppercase">Messaging Pipeline</h2>
+                        
+                        <div class="grid grid-cols-2 gap-8">
+                            <div class="p-10 bg-slate-50 rounded-[3rem] border border-slate-100 space-y-6 group">
+                                <div class="flex items-center space-x-3 mb-6">
+                                    <div class="w-3 h-3 bg-amber-500 rounded-full shadow-[0_0_8px_#f59e0b]"></div>
+                                    <h4 class="text-[10px] font-black text-slate-900 uppercase tracking-widest m-0 leading-none">MQTT Real-time Hub</h4>
+                                </div>
+                                <input type="text" id="mqtt_broker" value="tcp://localhost:1883" class="w-full bg-white border border-slate-200 rounded-2xl px-6 py-5 text-xs font-bold text-slate-900" />
+                                <div class="p-4 bg-amber-500/5 rounded-2xl border border-amber-500/10 flex items-center justify-between">
+                                    <span class="text-[9px] font-black text-slate-400 uppercase tracking-tighter">Event Sink Prefix</span>
+                                    <span class="text-[10px] text-amber-700 font-bold italic font-mono uppercase tracking-widest opacity-60">go-duck/events</span>
+                                </div>
+                            </div>
+                            <div class="p-10 bg-slate-50 rounded-[3rem] border border-slate-100 space-y-6">
+                                <div class="flex items-center space-x-3 mb-6">
+                                    <div class="w-3 h-3 bg-amber-500 rounded-full"></div>
+                                    <h4 class="text-[10px] font-black text-slate-900 uppercase tracking-widest m-0 leading-none">NATS High-Perf Streaming</h4>
+                                </div>
+                                <input type="text" id="nats_url" value="nats://localhost:4222" class="w-full bg-white border border-slate-200 rounded-2xl px-6 py-5 text-xs font-bold text-slate-900" />
+                                <div class="p-4 bg-emerald-500/5 rounded-2xl border border-emerald-500/10 flex items-center justify-between">
+                                    <span class="text-[9px] font-black text-slate-400 uppercase tracking-tighter">Cluster Peering</span>
+                                    <span class="text-[10px] text-emerald-700 font-bold uppercase tracking-widest opacity-60">Automatic</span>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="mt-8 p-12 bg-white border-2 border-indigo-600 rounded-[4rem] shadow-2xl shadow-indigo-100 relative group overflow-hidden">
+                            <div class="absolute -bottom-24 -right-24 w-64 h-64 bg-indigo-50 rounded-full blur-[60px] opacity-0 group-hover:opacity-100 transition-opacity duration-700"></div>
+                            <div class="flex items-center justify-between mb-10">
+                                <div class="space-y-1">
+                                    <h4 class="text-indigo-900 font-black text-2xl tracking-tight m-0 leading-none uppercase italic">Distributed Redis Stack</h4>
+                                    <p class="text-slate-400 text-[9px] font-black uppercase tracking-[0.2em] mt-3">Silo Lifecycle Management & Identity Caching</p>
+                                </div>
+                                <div class="flex items-center space-x-4">
+                                    <span class="text-[9px] font-black text-slate-300 uppercase tracking-widest opacity-60">Power Status</span>
+                                    <label class="relative inline-flex items-center cursor-pointer scale-110">
+                                        <input type="checkbox" id="redis_enabled" checked onchange="updateUI()" class="sr-only peer">
+                                        <div class="w-14 h-7 bg-slate-100 rounded-full peer peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-[4px] after:left-[4px] after:bg-white after:rounded-full after:h-6 after:w-6 after:transition-all peer-checked:bg-indigo-600 shadow-inner border border-slate-200"></div>
+                                    </label>
+                                </div>
+                            </div>
+                            <div id="redis_grid" class="grid grid-cols-2 gap-10 transition-all duration-700 items-end">
+                                <div class="space-y-3">
+                                    <label class="text-[9px] font-black text-indigo-500 uppercase tracking-widest ml-3">Primary Node Host</label>
+                                    <input type="text" id="redis_host" value="localhost:6379" class="w-full bg-slate-50 border-2 border-slate-100 rounded-2xl px-6 py-5 text-sm font-bold text-slate-900 focus:outline-none" />
+                                </div>
+                                <div class="space-y-3">
+                                    <label class="text-[9px] font-black text-indigo-500 uppercase tracking-widest ml-3">TTL Persistence Window</label>
+                                    <input type="text" id="redis_ttl" value="10m" class="w-full bg-slate-50 border-2 border-slate-100 rounded-2xl px-6 py-5 text-sm font-bold text-slate-900 focus:outline-none text-center italic tracking-widest" />
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </section>
+
+                <!-- SECTION: INFRASTRUCTURE -->
+                <section id="tab-infrastructure" class="tab-content hidden space-y-8">
+                    <div class="p-12 bg-white rounded-[3rem] border border-slate-200 shadow-xl shadow-slate-200/40">
+                        <h2 class="text-3xl font-black text-slate-900 italic m-0 mb-12 tracking-tight leading-none decoration-blue-200 underline underline-offset-[12px] uppercase">Universal Components</h2>
+                        
+                        <div class="space-y-10">
+                            <div class="p-10 bg-slate-50 rounded-[3rem] border border-slate-100">
+                                <h4 class="text-[10px] font-black text-blue-600 uppercase tracking-[0.3em] mb-10 italic">Industrial Storage Bridge</h4>
+                                <div class="flex items-center space-x-3 mb-10 overflow-x-auto pb-6 custom-scrollbar px-2">
+                                    <button onclick="setStorage('none')" id="store-none" class="store-btn px-8 py-4 bg-white border border-slate-200 rounded-2xl text-[10px] font-black uppercase text-slate-400 transition-all hover:border-indigo-500 active">None</button>
+                                    <button onclick="setStorage('s3')" id="store-s3" class="store-btn px-8 py-4 bg-white border border-slate-200 rounded-2xl text-[10px] font-black uppercase text-slate-400 transition-all hover:border-indigo-500">AWS S3</button>
+                                    <button onclick="setStorage('gcs')" id="store-gcs" class="store-btn px-8 py-4 bg-white border border-slate-200 rounded-2xl text-[10px] font-black uppercase text-slate-400 transition-all hover:border-indigo-500">GCP Cloud</button>
+                                    <button onclick="setStorage('minio')" id="store-minio" class="store-btn px-8 py-4 bg-white border border-slate-200 rounded-2xl text-[10px] font-black uppercase text-slate-400 transition-all hover:border-indigo-500">MinIO</button>
+                                    <button onclick="setStorage('github')" id="store-github" class="store-btn px-8 py-4 bg-white border border-slate-200 rounded-2xl text-[10px] font-black uppercase text-slate-400 transition-all hover:border-indigo-500">Git Bridge</button>
+                                </div>
+
+                                <div id="storage_details" class="hidden p-10 bg-white border-2 border-indigo-100 border-dashed rounded-[3.5rem] animate-pulse-slow">
+                                    <div id="fields_s3" class="storage-sub hidden grid grid-cols-2 gap-8">
+                                        <div class="space-y-3">
+                                            <label class="text-[9px] font-black text-blue-500 uppercase ml-2 tracking-widest">Environment Bucket</label>
+                                            <input type="text" id="s3_bucket" placeholder="e.g. production-blobs" class="w-full bg-slate-50 border border-slate-100 rounded-2xl px-6 py-4 text-xs font-bold text-slate-900" />
+                                        </div>
+                                        <div class="space-y-3">
+                                            <label class="text-[9px] font-black text-blue-500 uppercase ml-2 tracking-widest">Target Region</label>
+                                            <input type="text" id="s3_region" value="us-east-1" class="w-full bg-slate-50 border border-slate-100 rounded-2xl px-6 py-4 text-xs font-bold text-slate-900 text-center uppercase tracking-widest" />
+                                        </div>
+                                    </div>
+                                    <div id="fields_github" class="storage-sub hidden space-y-8 text-center py-6">
+                                        <p class="text-[11px] text-blue-600 font-black uppercase tracking-widest italic leading-relaxed">Federated Bootstrapping Protocol Active:<br><span class="text-slate-300 opacity-60 not-italic font-mono">Synchronizing SSH/Identity Secrets from Repository</span></p>
+                                        <input type="text" id="github_repo" placeholder="organization/infrastructure-secrets" class="w-full bg-slate-50 border border-slate-100 rounded-2xl px-6 py-5 text-sm font-bold text-slate-900 text-center" />
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div class="p-12 bg-indigo-900 rounded-[4rem] text-white shadow-2xl relative overflow-hidden group">
+                                <div class="absolute inset-0 bg-gradient-to-br from-indigo-500/20 to-transparent"></div>
+                                <h4 class="text-[10px] font-black text-indigo-400 uppercase tracking-[0.5em] mb-12 italic relative z-10 text-center">Global Resilience Policies</h4>
+                                <div class="grid grid-cols-2 gap-10 relative z-10">
+                                    <div class="p-8 bg-white/10 backdrop-blur-md border border-white/10 rounded-[2.5rem] flex items-center justify-between hover:bg-white/15 transition-all">
+                                        <div class="space-y-1">
+                                            <span class="text-[10px] font-black text-indigo-200 uppercase tracking-widest">Circuit Breaker</span>
+                                            <span class="text-xl font-black text-white block mt-1 tracking-tighter italic">Industrial Mode</span>
+                                        </div>
+                                        <div class="w-3 h-3 bg-indigo-300 rounded-full shadow-[0_0_15px_rgba(255,255,255,0.5)]"></div>
+                                    </div>
+                                    <div class="p-8 bg-white/10 backdrop-blur-md border border-white/10 rounded-[2.5rem] flex items-center justify-between hover:bg-white/15 transition-all">
+                                        <div class="space-y-1">
+                                            <span class="text-[10px] font-black text-indigo-200 uppercase tracking-widest">Outbox Worker</span>
+                                            <span class="text-xl font-black text-white block mt-1 tracking-tighter italic">Broadcast-Sync</span>
+                                        </div>
+                                        <input type="checkbox" checked class="w-6 h-6 text-white bg-transparent border-2 border-white/20 rounded-lg">
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </section>
+
+                <!-- SECTION: OBSERVABILITY -->
+                <section id="tab-observability" class="tab-content hidden space-y-8">
+                    <div class="p-12 bg-white rounded-[3rem] border border-slate-200 shadow-xl shadow-slate-200/40">
+                        <h2 class="text-3xl font-black text-slate-900 italic m-0 mb-12 tracking-tight leading-none decoration-purple-200 underline underline-offset-[12px] uppercase">Observability engine</h2>
+                        
+                        <div class="space-y-10">
+                            <div class="p-12 bg-[#fafbff] rounded-[4rem] border-2 border-purple-100 shadow-sm transition-all focus-within:border-purple-600/30">
+                                <div class="flex items-center justify-between mb-12">
+                                    <div class="flex items-center space-x-4">
+                                        <div class="w-14 h-14 bg-purple-100 rounded-3xl flex items-center justify-center text-purple-600 shadow-inner">
+                                            <svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /></svg>
+                                        </div>
+                                        <div>
+                                            <h4 class="text-purple-900 font-black text-lg tracking-tight m-0 uppercase leading-none italic">Elasticsearch Sync</h4>
+                                            <p class="text-[10px] font-black text-purple-400 uppercase tracking-widest mt-2">Spring-Style Federated Searching Engine</p>
+                                        </div>
+                                    </div>
+                                    <label class="relative inline-flex items-center cursor-pointer">
+                                        <input type="checkbox" id="es_enabled" checked onchange="updateUI()" class="sr-only peer">
+                                        <div class="w-14 h-7 bg-purple-200/50 rounded-full peer peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-[4px] after:left-[4px] after:bg-white after:rounded-full after:h-6 after:w-6 after:transition-all peer-checked:bg-purple-600 shadow-inner border border-purple-100"></div>
+                                    </label>
+                                </div>
+                                <div id="es_form" class="grid grid-cols-2 gap-10">
+                                    <div class="space-y-3">
+                                        <label class="text-[9px] font-black text-purple-500 uppercase tracking-widest ml-3">Internal Node URL</label>
+                                        <input type="text" id="es_addr" value="http://localhost:9200" class="w-full bg-white border border-purple-100 rounded-2xl px-6 py-5 text-xs font-mono text-slate-900 font-bold" />
+                                    </div>
+                                    <div class="space-y-3">
+                                        <label class="text-[9px] font-black text-purple-500 uppercase tracking-widest ml-3">Industrial Index Prefix</label>
+                                        <input type="text" value="go_duck_production" class="w-full bg-white border border-purple-100 rounded-2xl px-6 py-5 text-xs font-mono text-purple-300 font-bold opacity-40 italic cursor-not-allowed" disabled />
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div class="grid grid-cols-2 gap-10">
+                                <div class="p-10 bg-white border border-slate-200 rounded-[3.5rem] shadow-sm group hover:border-purple-200 transition-all">
+                                    <div class="flex items-center justify-between mb-10">
+                                        <h4 class="text-[10px] font-black text-slate-400 uppercase tracking-widest">Datadog APM Log Stream</h4>
+                                        <input type="checkbox" id="datadog_enabled" onchange="updateUI()" class="w-5 h-5 text-purple-600 border-slate-200 rounded-lg">
+                                    </div>
+                                    <div id="datadog_form" class="space-y-6 opacity-10 pointer-events-none transition-all duration-700">
+                                        <input type="password" id="datadog_key" placeholder="Industrial API Token" class="w-full bg-slate-50 border border-slate-100 rounded-2xl px-6 py-5 text-xs font-mono text-slate-900" />
+                                        <div class="flex items-center justify-between px-3">
+                                            <span class="text-[9px] font-black text-slate-300 uppercase tracking-tighter">Global Site Node</span>
+                                            <span class="text-[10px] text-purple-600 font-black italic tracking-widest uppercase">datadoghq.com</span>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="p-10 bg-white border border-slate-200 rounded-[3.5rem] shadow-sm group hover:border-indigo-200 transition-all">
+                                    <div class="flex items-center justify-between mb-10">
+                                        <h4 class="text-[10px] font-black text-slate-400 uppercase tracking-widest">OpenTelemetry Tracing</h4>
+                                        <input type="checkbox" id="otel_enabled" checked onchange="updateUI()" class="w-5 h-5 text-indigo-600 border-slate-200 rounded-lg">
+                                    </div>
+                                    <div id="otel_form" class="space-y-6 transition-all duration-700">
+                                        <input type="text" id="otel_endpoint" value="localhost:4317" class="w-full bg-slate-50 border border-slate-100 rounded-2xl px-6 py-5 text-xs font-mono text-slate-900" />
+                                        <div class="flex items-center justify-between px-3">
+                                            <span class="text-[9px] font-black text-slate-300 uppercase tracking-tighter">Distributed Trace Ratio</span>
+                                            <span class="text-[10px] text-indigo-600 font-black italic tracking-widest uppercase">1.0 (Audit Precision)</span>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </section>
+            </div>
+        </main>
+
+        <!-- Blueprint Inspector (Right Side Terminal) -->
+        <aside class="w-[660px] bg-white border-l border-slate-200 p-12 flex flex-col relative overflow-hidden shrink-0">
+            <div class="absolute top-0 right-0 w-96 h-96 bg-indigo-50/50 rounded-full blur-[100px] pointer-events-none"></div>
+            <div class="relative z-10 flex flex-col h-full">
+                <div class="flex items-center justify-between mb-8 border-b border-slate-100 pb-8">
+                    <div class="flex items-center space-x-4">
+                        <div class="w-10 h-10 bg-indigo-50 rounded-xl flex items-center justify-center text-indigo-600 shadow-sm">
+                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" /></svg>
+                        </div>
+                        <div>
+                            <h4 class="text-slate-900 font-black text-[12px] tracking-[0.2em] uppercase m-0 leading-none">Industrial blueprint</h4>
+                            <p class="text-slate-400 text-[9px] font-bold mt-2 leading-none uppercase tracking-widest italic opacity-60">config.yaml • Executive Standard</p>
+                        </div>
+                    </div>
+                    <button onclick="copyToClipboard()" class="p-4 bg-slate-50 border border-slate-200 rounded-2xl hover:bg-slate-100 transition-all group active:scale-95">
+                        <svg class="w-5 h-5 text-slate-500 group-hover:text-indigo-600 transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" /></svg>
+                    </button>
+                </div>
+                
+                <div class="flex-grow overflow-hidden relative bg-[#0a0a0a] rounded-[3rem] border border-slate-800 shadow-2xl p-1 group">
+                    <pre id="yaml-preview" class="text-[#00ff41] font-mono text-[13.5px] font-medium leading-[1.8] m-0 selection:bg-[#00ff41]/20 selection:text-white h-full overflow-y-auto custom-scrollbar p-12 pb-80">
+                    </pre>
+                    <div class="absolute inset-x-0 bottom-0 h-40 bg-gradient-to-t from-[#0a0a0a] via-[#0a0a0a]/90 to-transparent pointer-events-none"></div>
+                    <div class="absolute top-8 right-8 opacity-0 group-hover:opacity-100 transition-opacity">
+                        <span class="text-[10px] font-black text-[#00ff41] bg-[#00ff41]/10 px-3 py-1 rounded-full border border-[#00ff41]/20 animate-pulse">ELITE LIVE FEED</span>
+                    </div>
+                </div>
+
+                <div class="mt-8 p-8 bg-emerald-50/10 border border-emerald-500/20 rounded-[3rem] shadow-sm backdrop-blur-sm">
+                    <div class="flex items-center space-x-3">
+                        <div class="w-2 h-2 bg-emerald-500 rounded-full animate-pulse shadow-[0_0_15px_#10b981]"></div>
+                        <span class="text-[9px] font-black text-emerald-500 uppercase tracking-[0.3em] leading-none mt-0.5 italic">Industrial Pulse Protocol ACTIVE</span>
+                    </div>
+                </div>
+            </div>
+        </aside>
+    </div>
+</div>
+
+<style>
+    .custom-scrollbar::-webkit-scrollbar { width: 4px; height: 4px; }
+    .custom-scrollbar::-webkit-scrollbar-track { background: rgba(0,0,0,0.01); }
+    .custom-scrollbar::-webkit-scrollbar-thumb { background: rgba(99, 102, 241, 0.3); border-radius: 10px; }
+    .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: rgba(99, 102, 241, 0.5); }
+    
+    .tab-btn.active { background: rgba(99, 102, 241, 0.05); border-color: rgba(99, 102, 241, 0.1); }
+    .tab-btn.active span { color: #4338ca; }
+    
+    .animate-pulse-slow { animation: pulse 6s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
+    @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.8; } }
+
+    .store-btn.active { background: #4f46e5; border-color: transparent; color: white; shadow: 0 10px 15px -3px rgba(79, 70, 229, 0.3); }
+
+    input[type="checkbox"] { background: #f1f5f9; border: 2px solid #e2e8f0; cursor: pointer; transition: all 0.3s ease; }
+    input[type="checkbox"]:checked { background-color: #4f46e5; border-color: transparent; }
+</style>
+
+<!-- CLIENT LOGIC ENGINE -->
+<script>
+    const d = (id) => { const el = document.getElementById(id); return el ? el.value : ""; };
+    const b = (id) => { const el = document.getElementById(id); return el ? el.checked : false; };
+
+    const switchTab = (tab) => {
+        document.querySelectorAll('.tab-btn').forEach(btn => btn.classList.remove('active'));
+        document.querySelectorAll('.tab-content').forEach(content => content.classList.add('hidden'));
+        
+        event.currentTarget.classList.add('active');
+        document.getElementById(`tab-${tab}`).classList.remove('hidden');
+    };
+
+    const updateUI = () => {
+        const pg = b('pg_enabled');
+        const mongo = b('mongo_enabled');
+        const redis = b('redis_enabled');
+        const es = b('es_enabled');
+        const dd = b('datadog_enabled');
+        const otel = b('otel_enabled');
+
+        document.getElementById('pg_grid').style.opacity = pg ? '1' : '0.1';
+        document.getElementById('mongo_grid').style.opacity = mongo ? '1' : '0.1';
+        document.getElementById('redis_grid').style.opacity = redis ? '1' : '0.1';
+        document.getElementById('es_form').style.opacity = es ? '1' : '0.1';
+        document.getElementById('datadog_form').style.opacity = dd ? '1' : '0.1';
+        document.getElementById('otel_form').style.opacity = otel ? '1' : '0.1';
+
+        updatePreview();
+    };
+
+    let activeStorage = 'none';
+    const setStorage = (prov) => {
+        activeStorage = prov;
+        document.querySelectorAll('.store-btn').forEach(b => b.classList.remove('active'));
+        document.getElementById(`store-${prov}`).classList.add('active');
+        
+        const panel = document.getElementById('storage_details');
+        document.querySelectorAll('.storage-sub').forEach(s => s.classList.add('hidden'));
+        
+        if(prov !== 'none') {
+            panel.classList.remove('hidden');
+            const sub = document.getElementById(`fields_${prov}`);
+            if(sub) sub.classList.remove('hidden');
+        } else {
+            panel.classList.add('hidden');
+        }
+        updatePreview();
+    };
+
+    const generateYAML = () => {
+        const config = {
+            'go-duck': {
+                name: d('app_name'),
+                version: d('app_version'),
+                server: {
+                    port: parseInt(d('server_port')) || 8080,
+                    grpc: { addr: d('grpc_addr'), network: d('grpc_network'), timeout: "1s" },
+                    cors: {
+                        'allow-origins': d('cors_origins').split(',').map(s => s.trim()),
+                        'allow-methods': d('cors_methods').split(',').map(s => s.trim()),
+                        'allow-headers': d('cors_headers').split(',').map(s => s.trim())
+                    }
+                },
+                datasource: {},
+                security: {
+                    'keycloak-host': d('keycloak_host'),
+                    'keycloak-realm': d('keycloak_realm'),
+                    'keycloak-app-client-id': d('keycloak_app_id'),
+                    'keycloak-app-client-secret': d('keycloak_app_secret'),
+                    'keycloak-service-client-id': d('keycloak_service_id'),
+                    'keycloak-service-secret': d('keycloak_service_secret'),
+                    'keycloak-admin-client-id': d('keycloak_admin_id'),
+                    'keycloak-admin-secret': d('keycloak_admin_secret'),
+                    'confidential-mode': b('confidential_mode'),
+                    'rate-limit': { rps: parseInt(d('rate_limit_rps')), burst: 200 }
+                },
+                messaging: {
+                    mqtt: { enabled: true, broker: d('mqtt_broker') },
+                    nats: { enabled: true, url: d('nats_url') }
+                },
+                cache: {
+                    redis: { enabled: b('redis_enabled'), host: d('redis_host'), ttl: d('redis_ttl') }
+                },
+                resilience: {
+                    'circuit-breaker': { enabled: true, 'failure-threshold': 5 }
+                },
+                telemetry: {
+                    otel: { enabled: b('otel_enabled'), endpoint: d('otel_endpoint'), 'sampler-ratio': 1.0 }
+                }
+            }
+        };
+
+        if(b('pg_enabled')) {
+            config['go-duck'].datasource.host = d('db_host') || "localhost";
+            config['go-duck'].datasource.port = parseInt(d('db_port')) || 5432;
+            config['go-duck'].datasource.username = d('db_user') || "postgres";
+            config['go-duck'].datasource.database = d('db_name') || "go_duck_db";
+            config['go-duck'].datasource['ssl-mode'] = "disable";
+        }
+
+        if(b('mongo_enabled')) {
+            config['go-duck'].datasource.mongodb = {
+                enabled: true,
+                uri: d('mongo_uri') || "mongodb://localhost:27017",
+                database: d('mongo_db') || "go_duck_mongo"
+            };
+        }
+
+        if(b('datadog_enabled')) {
+            config['go-duck'].logging = {
+                datadog: { enabled: true, 'api-key': d('datadog_key') || "YOUR_KEY", site: "datadoghq.com" }
+            };
+        }
+
+        if(activeStorage !== 'none') {
+            config['go-duck'].storage = {};
+            config['go-duck'].storage[activeStorage] = { enabled: true };
+            if(activeStorage === 's3') {
+                config['go-duck'].storage.s3.bucket = d('s3_bucket');
+                config['go-duck'].storage.s3.region = d('s3_region');
+            }
+            if(activeStorage === 'github') {
+                config['go-duck'].storage.github = {
+                    owner: d('github_repo').split('/')[0] || "YOUR_ORG",
+                    repo: d('github_repo').split('/')[1] || "YOUR_REPO"
+                };
+                config['go-duck'].storage.bootstrap = { enabled: true, files: ["id_rsa"] };
+            }
+        }
+
+        if(b('es_enabled')) {
+            config['go-duck'].elasticsearch = { enabled: true, addresses: [d('es_addr')] };
+        }
+
+        config.environment = { active_profile: "dev" };
+
+        const toYAML = (obj, indent = 0) => {
+            let yaml = '';
+            const spaces = '  '.repeat(indent);
+            for (const key in obj) {
+                const val = obj[key];
+                if (typeof val === 'object' && !Array.isArray(val) && val !== null) {
+                    const keys = Object.keys(val);
+                    if(keys.length > 0) yaml += `${spaces}${key}:\n${toYAML(val, indent + 1)}`;
+                } else if (Array.isArray(val)) {
+                    yaml += `${spaces}${key}: [${val.map(v => v === '*' ? '"*"' : `"${v}"`).join(', ')}]\n`;
+                } else {
+                    const formattedVal = (typeof val === 'string' && val !== '*' && !val.includes(':') && !val.includes('/')) ? `"${val}"` : val;
+                    yaml += `${spaces}${key}: ${formattedVal}\n`;
+                }
+            }
+            return yaml;
+        };
+
+        return toYAML(config);
+    };
+
+    const updatePreview = () => {
+        document.getElementById('yaml-preview').textContent = generateYAML();
+    };
+
+    const copyToClipboard = () => {
+        const text = document.getElementById('yaml-preview').textContent;
+        navigator.clipboard.writeText(text);
+        const btn = event.currentTarget;
+        const original = btn.innerHTML;
+        btn.innerHTML = '<svg class="w-5 h-5 text-emerald-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7" /></svg>';
+        setTimeout(() => btn.innerHTML = original, 2000);
+    };
+
+    const bind = (id) => { const el = document.getElementById(id); if(el) el.addEventListener('input', updatePreview); if(el && el.type === 'checkbox') el.addEventListener('change', updatePreview); };
+
+    ['app_name', 'app_version', 'server_port', 'grpc_addr', 'grpc_network', 'keycloak_host', 'keycloak_realm', 'keycloak_app_id', 'keycloak_app_secret', 'keycloak_service_id', 'keycloak_service_secret', 'keycloak_admin_id', 'keycloak_admin_secret', 'cors_origins', 'cors_methods', 'cors_headers', 'confidential_mode', 'rate_limit_rps', 'db_host', 'db_port', 'db_user', 'db_name', 'mongo_uri', 'mongo_db', 'mqtt_broker', 'nats_url', 'redis_enabled', 'redis_host', 'redis_ttl', 's3_bucket', 's3_region', 'github_repo', 'es_enabled', 'es_addr', 'datadog_enabled', 'datadog_key', 'otel_enabled', 'otel_endpoint']
+    .forEach(bind);
+
+    document.getElementById('main-download-btn').addEventListener('click', () => {
+        const yaml = generateYAML();
+        const blob = new Blob([yaml], { type: 'text/yaml' });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a'); a.href = url; a.download = 'config.yaml'; document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(url);
+    });
+
+    updatePreview();
+</script>