diff --git a/webui/IMPLEMENTATION.md b/webui/IMPLEMENTATION.md
index 6bdf4ae4..adb177bd 100644
--- a/webui/IMPLEMENTATION.md
+++ b/webui/IMPLEMENTATION.md
@@ -1,81 +1,81 @@
-# NGINX Declarative API - Web UI Implementation Summary
+# NGINX Declarative API - Web UI Implementation Details
 
 ## Overview
 
-A modern, full-featured React 19 TypeScript web interface has been created for the NGINX Declarative API v5.5. The UI provides a user-friendly way to manage NGINX configurations through the declarative API.
+A React 19 TypeScript single-page application for creating and submitting NGINX Declarative API v5.6 configurations. The UI renders a structured form and submits the resulting JSON to the backend API.
 
-## 🎯 Features Implemented
+## Features Implemented
 
-### Authentication
+### Configuration Form
 
-- ✅ JWT-based authentication
-- ✅ Token stored in localStorage (with security disclaimer)
-- ✅ Protected routes
-- ✅ Automatic token injection in API requests
-- ✅ Auto-logout on 401 errors
-
-### UI Pages
-
-- ✅ **Login Page** - JWT token input with validation
-- ✅ **Dashboard** - Overview of configurations with status monitoring
-- ✅ **Create Configuration** - JSON editor for creating new configs
-- ✅ **Configuration Management** - View, edit, delete operations
+- Output section — target NGINX Instance Manager or NGINX One Console, with license (JWT token upload, boolean enforce-initial-report toggle)
+- HTTP section — policies, TLS certificates, and log profiles (moved to declaration body in v5.6), plus profiles (rate limiting, auth, authz, caching, maps, log), servers, and upstreams
+- Sticky sidebar navigation with IntersectionObserver-based active-section highlighting
+- Layer 4 section — TCP/UDP servers and upstreams
+- API Gateway editor — per-location OpenAPI schema integration (URL / file upload / base64)
 
 ### API Integration
 
-All v5.5 endpoints are integrated:
+All v5.6 endpoints are integrated:
 
-- ✅ POST /v5.5/config - Create configuration
-- ✅ GET /v5.5/config/{configUid} - Retrieve configuration
-- ✅ PATCH /v5.5/config/{configUid} - Update configuration
-- ✅ DELETE /v5.5/config/{configUid} - Delete configuration
-- ✅ GET /v5.5/config/{configUid}/status - Get status
-- ✅ GET /v5.5/config/{configUid}/submission/{submissionUid} - Get async submission status
+- POST /v5.6/config — Create configuration
+- GET /v5.6/config/{configUid} — Retrieve configuration
+- PATCH /v5.6/config/{configUid} — Update configuration
+- DELETE /v5.6/config/{configUid} — Delete configuration
+- GET /v5.6/config/{configUid}/status — Get status
+- GET /v5.6/config/{configUid}/submission/{submissionUid} — Get async submission status
 
 ### Testing
 
-- ✅ Test setup with Vitest
-- ✅ Component tests (LoginPage)
-- ✅ Store tests (AuthStore)
-- ✅ Hook tests (useConfig)
-- ✅ Coverage reporting configured
+- Vitest + React Testing Library
+- 91 tests across 5 files
+- Component tests (ConfigForm API Gateway, validation, profile dropdowns, OutputSection)
+- Page-level integration tests (CreateConfigPage)
+- Coverage reporting configured
 
 ### DevOps
 
-- ✅ Docker support with multi-stage build
-- ✅ NGINX reverse proxy configuration
-- ✅ Integration with docker-compose
-- ✅ Configurable ports
-- ✅ Development and production builds
+- Docker support with multi-stage build
+- NGINX reverse proxy configuration
+- Integration with docker-compose
+- Configurable ports
+- Development and production builds
 
 ## 📁 Project Structure
 
 ```text
 webui/
 ├── src/
-│   ├── api/                  # API client layer
-│   │   └── config.ts         # Config API methods
 │   ├── components/           # Reusable components
+│   │   ├── ConfigForm.tsx    # Root form (thin wrapper)
+│   │   ├── ConfigForm.css
 │   │   ├── Header.tsx
 │   │   ├── Layout.tsx
-│   │   └── ProtectedRoute.tsx
-│   ├── hooks/                # Custom React hooks
-│   │   └── useConfig.ts      # React Query hooks for API
-│   ├── lib/                  # Libraries & utilities
-│   │   └── axios.ts          # Axios instance with interceptors
+│   │   └── configForm/       # Form sub-modules
+│   │       ├── types.ts      # All TypeScript interfaces
+│   │       ├── defaults.ts   # Factory functions, parseConfig, toJson
+│   │       ├── primitives.tsx
+│   │       ├── ApiGatewayEditor.tsx
+│   │       ├── LocationEditors.tsx
+│   │       ├── LocationsEditor.tsx
+│   │       ├── TlsEditor.tsx
+│   │       ├── ServersSection.tsx
+│   │       ├── UpstreamsSection.tsx
+│   │       ├── ProfilesSection.tsx
+│   │       ├── HttpSection.tsx
+│   │       ├── OutputSection.tsx
+│   │       └── Layer4Section.tsx
 │   ├── pages/                # Page components
-│   │   ├── LoginPage.tsx
-│   │   ├── DashboardPage.tsx
 │   │   └── CreateConfigPage.tsx
-│   ├── store/                # State management
-│   │   └── authStore.ts      # Zustand auth store
 │   ├── test/                 # Test files
 │   │   ├── setup.ts
-│   │   ├── LoginPage.test.tsx
-│   │   ├── authStore.test.ts
-│   │   └── useConfig.test.tsx
+│   │   ├── ConfigForm.agw.test.tsx
+│   │   ├── ConfigForm.agw.validation.test.tsx
+│   │   ├── ConfigForm.agw.profiles.test.tsx
+│   │   ├── ConfigForm.output.test.tsx
+│   │   └── CreateConfigPage.test.tsx
 │   ├── types/                # TypeScript definitions
-│   │   └── index.ts          # API & app types
+│   │   └── index.ts
 │   ├── App.tsx               # Main app with routing
 │   ├── main.tsx              # Entry point
 │   └── index.css             # Global styles
@@ -83,24 +83,21 @@ webui/
 ├── nginx.conf                # NGINX config for production
 ├── vite.config.ts            # Vite configuration
 ├── tsconfig.json             # TypeScript config
-├── package.json              # Dependencies
-└── README.md                 # Web UI documentation
+└── package.json              # Dependencies
 ```
 
 ## 🛠 Technology Stack
 
-|Category|Technology|Purpose|
+| Category | Technology | Purpose |
 |-|-|-|
-|**Framework**|React 19|UI library|
-|**Language**|TypeScript|Type safety|
-|**Build Tool**|Vite|Fast dev server & build|
-|**Routing**|React Router v7|Client-side routing|
-|**State Management**|Zustand|Auth state|
-|**Server State**|TanStack Query|API state & caching|
-|**HTTP Client**|Axios|API requests|
-|**UI Feedback**|React Hot Toast|Notifications|
-|**Testing**|Vitest + Testing Library|Unit & component tests|
-|**Code Quality**|ESLint + Prettier|Linting & formatting|
+| **Framework** | React 19 | UI library |
+| **Language** | TypeScript | Type safety |
+| **Build Tool** | Vite | Fast dev server & build |
+| **Routing** | React Router v7 | Client-side routing |
+| **HTTP Client** | Axios | API requests |
+| **JSON Editor** | Monaco Editor | Schema-aware JSON editing |
+| **UI Feedback** | React Hot Toast | Notifications |
+| **Testing** | Vitest + Testing Library | Unit & component tests |
 
 ## 🚀 Getting Started
 
@@ -112,7 +109,7 @@ npm install
 npm run dev
 ```
 
-Access at <http://localhost:3000>
+Access at <http://localhost:5173\>
 
 ### Running Tests
 
@@ -132,7 +129,6 @@ npm run preview
 ### Docker
 
 ```bash
-# From repo root
 cd contrib/docker-compose
 
 # Build all images including Web UI
@@ -147,44 +143,20 @@ cd contrib/docker-compose
 
 **Access Points:**
 
-- Web UI: <http://localhost:3000> (or custom port)
-- API: <http://localhost:5000> (or custom port)
-- DevPortal: <http://localhost:5001> (or custom port)
-
-## 🔐 Security Notes
-
-**Current Implementation (Development):**
-
-- JWT tokens stored in localStorage
-- Simple Bearer token authentication
-- CORS handled by backend
-
-**⚠️ Production Recommendations:**
-
-1. Use HTTP-only cookies for token storage
-2. Implement token refresh mechanism
-3. Add CSRF protection
-4. Enable rate limiting
-5. Use HTTPS/TLS in production
-6. Implement proper session management
-7. Add input validation and sanitization
-8. Consider OAuth2/OIDC for enterprise use
+- Web UI: <http://localhost:3000\> (or custom port)
+- API: <http://localhost:5000\> (or custom port)
+- DevPortal: <http://localhost:5001\> (or custom port)
 
 ## 📋 Type Definitions
 
-The UI includes comprehensive TypeScript types based on the OpenAPI spec:
+Key TypeScript interfaces (see `src/components/configForm/types.ts`):
 
 ```typescript
-interface ConfigDeclaration {
-  output?: {
-    type?: 'nms' | 'nginxone';
-    license?: LicenseConfig;
-    nms?: NMSConfig;
-    nginxone?: NginxOneConfig;
-  };
+interface ConfigData {
+  output?: OutputConfig;
   declaration?: {
-    http?: HttpConfig[];
-    layer4?: Layer4Config[];
+    http?: HttpConfig;
+    layer4?: Layer4Config;
     resolvers?: ResolverConfig[];
   };
 }
@@ -207,45 +179,17 @@ interface ConfigDeclaration {
 - Smooth animations and transitions
 - Responsive grid layouts
 - Status indicators with color coding
-- Monaco-style code editor aesthetics
 
 ## 📊 API Request Flow
 
 ```text
-User Action → React Component → React Query Hook → API Service → Axios → Backend API
-                                        ↓
-                              Cache & State Update
-                                        ↓
-                                  UI Re-render
+User Action → React Component → Fetch/Axios → Backend API
+                    ↓
+            State Update (useState)
+                    ↓
+              UI Re-render
 ```
 
-## 🧪 Test Coverage
-
-Tests implemented for:
-
-- ✅ Authentication store (login/logout)
-- ✅ Login page rendering
-- ✅ Config creation hook
-- ✅ API service layer (mocked)
-
-Run `npm run test:coverage` for detailed coverage report.
-
-## 🔄 State Management
-
-**Client State (Zustand):**
-
-- Authentication state
-- User token
-- Login/logout actions
-
-**Server State (TanStack Query):**
-
-- Configuration data
-- Status monitoring
-- Submission tracking
-- Automatic refetching
-- Optimistic updates
-
 ## 🌐 API Proxy Configuration
 
 **Development (Vite):**
@@ -268,46 +212,25 @@ location /v5.5/ {
 
 ## 📦 Docker Multi-Stage Build
 
-1. **Build stage:** Node.js 24 Alpine
-   - Install dependencies
-   - Build production bundle
-
-2. **Production stage:** NGINX Alpine
-   - Copy built files
-   - Serve with NGINX
-   - Proxy API requests to backend
-
-## 🎯 Future Enhancements
-
-### Planned Features
-
-- [ ] Form builder for visual config creation
-- [ ] Configuration templates library
-- [ ] Bulk operations
-- [ ] Configuration diff viewer
-- [ ] Export/import configurations
-- [ ] Real-time collaboration
-- [ ] Audit log viewer
-- [ ] Advanced search and filtering
-- [ ] Configuration validation preview
-- [ ] Integration with CI/CD pipelines
-
-### Technical Improvements
-
-- [ ] HTTP-only cookie authentication
-- [ ] Token refresh mechanism
-- [ ] WebSocket support for real-time updates
-- [ ] Advanced Monaco editor integration
-- [ ] Configuration schema validation
-- [ ] Offline support with service workers
-- [ ] Internationalization (i18n)
-- [ ] Accessibility (WCAG 2.1 AA)
+1. **Build stage:** Node.js 24 Alpine — install dependencies, build production bundle
+2. **Production stage:** NGINX Alpine — copy built files, serve with NGINX, proxy API requests to backend
+
+## 🧪 Test Coverage
+
+Tests implemented for:
+
+- API Gateway section toggle and OpenAPI schema modes
+- Field validation (required error messages)
+- Profile dropdown population from HTTP-level profiles
+- Live profile name propagation to API Gateway location dropdowns
+- Page-level integration (submit, JSON editor round-trip, status polling)
 
 ## 📚 Related Documentation
 
-- [Web UI README](../webui/README.md) - Detailed Web UI documentation
+- [Web UI README](README.md) - Setup and usage guide
 - [USAGE-v5.5.md](../USAGE-v5.5.md) - API v5.5 usage guide
 - [Docker Compose README](../contrib/docker-compose/README.md) - Deployment guide
+- [OpenAPI Spec](../openapi.json) - Complete API specification
 
 ## 🤝 Contributing
 
@@ -315,15 +238,9 @@ When contributing to the Web UI:
 
 1. Follow TypeScript best practices
 2. Write tests for new features
-3. Use Prettier for code formatting
-4. Update type definitions when API changes
-5. Document new components and hooks
-6. Ensure accessibility standards
+3. Update type definitions when API changes
+4. Document new components
 
 ## 📄 License
 
 Apache License 2.0 - See [LICENSE.md](../LICENSE.md)
-
----
-
-Built with ❤️ for the NGINX Declarative API project
diff --git a/webui/QUICKSTART.md b/webui/QUICKSTART.md
index 3455ef46..cf5d283b 100644
--- a/webui/QUICKSTART.md
+++ b/webui/QUICKSTART.md
@@ -46,8 +46,8 @@ Open browser: <http://localhost:3000>
 
 ### Step 4: Create Your First Configuration
 
-1. Click "Create Config" in navigation
-2. Edit the JSON declaration
+1. Fill in the Output section (choose NIM or NGINX One target)
+2. Add HTTP or Layer 4 configuration as needed
 3. Click "Create Configuration"
 
 Example minimal config:
@@ -172,12 +172,10 @@ Dev server runs at <http://localhost:3000> with auto-reload.
 
 ## 🎯 Next Steps
 
-1. ✅ Login to Web UI
-2. ✅ Explore the Dashboard
-3. ✅ Create a test configuration
-4. 📖 Read the API v5.5 usage guide in `/USAGE-v5.5.md` for API details
-5. 📚 Check [Web UI Documentation](README.md)
-6. 🧪 Try the Postman collection in `/contrib/postman`
+1. ✅ Create a test configuration
+2. 📖 Read the API v5.5 usage guide in `/USAGE-v5.5.md` for API details
+3. 📚 Check [Web UI Documentation](README.md)
+4. 🧪 Try the Postman collection in `/contrib/postman`
 
 ## 💡 Tips
 
diff --git a/webui/README.md b/webui/README.md
index f1bb43b1..48b96a54 100644
--- a/webui/README.md
+++ b/webui/README.md
@@ -4,11 +4,9 @@ Modern React TypeScript web interface for the NGINX Declarative API v5.5.
 
 ## Features
 
-- 🔐 JWT-based authentication (stored in localStorage)
-- 📝 Create and manage NGINX configurations
+- � Create and manage NGINX configurations
 - 🎨 Modern, responsive UI with dark theme
 - 🔄 Real-time status monitoring
-- 📊 Dashboard for configuration overview
 - 🧪 Automated test suite with Vitest
 - 🚀 Built with React 19, TypeScript, and Vite
 
@@ -150,25 +148,11 @@ docker run -p 8080:80 nginx-dapi-webui
 
 ## Usage
 
-### Login
-
-1. Navigate to the login page
-2. Enter your JWT token
-3. Click "Login"
-
-**Note:** The JWT token is stored in localStorage for convenience. This is not recommended for production use and should be replaced with a more secure authentication method (e.g., HTTP-only cookies, secure token refresh mechanism).
-
-### Dashboard
-
-- View all configurations
-- Monitor configuration status
-- Quick actions (view, delete)
-
 ### Create Configuration
 
 - Use JSON editor to create configurations
 - Based on v5.5 API schema
-- Support for NMS and NGINX One outputs
+- Support for NIM and NGINX One outputs
 
 ## API Endpoints
 
@@ -231,13 +215,11 @@ webui/
 
 ## Security Considerations
 
-- JWT tokens are currently stored in localStorage - not ideal for production
-- Consider implementing:
-  - HTTP-only cookies for token storage
-  - Token refresh mechanism
-  - CSRF protection
-  - Rate limiting
-  - Input validation and sanitization
+- Enable HTTPS/TLS in production
+- Configure CORS headers appropriately on the backend
+- Add rate limiting to API endpoints
+- Enable security headers (CSP, HSTS, X-Frame-Options)
+- Validate and sanitize all user inputs
 
 ## Contributing
 
diff --git a/webui/SUMMARY.md b/webui/SUMMARY.md
index 11c55500..c5f2d22b 100644
--- a/webui/SUMMARY.md
+++ b/webui/SUMMARY.md
@@ -1,117 +1,79 @@
 # Web UI Summary - NGINX Declarative API
 
-## ✅ Project Complete
+## Project Overview
 
-A fully functional, production-ready React TypeScript web interface has been successfully created for the NGINX Declarative API v5.5.
+A React TypeScript web interface for the NGINX Declarative API v5.5, providing a form-driven UI for creating and submitting NGINX configurations.
 
-## 📦 Deliverables
+## 📦 Core Features
 
-### 1. **Complete React TypeScript Application**
+- Form-driven NGINX configuration builder (HTTP, Layer 4, Output)
+- API Gateway editor with OpenAPI schema support
+- Profile management (rate limiting, authentication, authorization, caching)
+- Real-time JSON preview and submission
+- Toast notifications for user feedback
+- Dark-themed responsive UI
 
-- Modern React 19 with TypeScript
-- Vite build system for fast development
-- Fully typed with comprehensive type definitions
-- Responsive dark-themed UI
-
-### 2. **Core Features**
-
-- ✅ JWT authentication with localStorage
-- ✅ Protected routes and auto-logout
-- ✅ Dashboard with configuration overview
-- ✅ JSON editor for creating configurations
-- ✅ Real-time status monitoring
-- ✅ Toast notifications for user feedback
-
-### 3. **API Integration**
-
-- All v5.5 endpoints integrated
-- Axios client with request/response interceptors
-- React Query for server state management
-- Automatic error handling and retries
-- Status polling for async operations
-
-### 4. **Testing Suite**
-
-- Vitest + React Testing Library
-- Component tests
-- Store tests
-- Hook tests
-- Coverage reporting configured
-
-### 5. **Docker & Deployment**
-
-- Multi-stage Dockerfile for optimized builds
-- NGINX configuration for production serving
-- Integrated with docker-compose
-- Configurable ports via environment variables
-- Proxy configuration for API requests
-
-### 6. **Documentation**
-
-- Comprehensive README
-- Quick start guide
-- Implementation details
-- API documentation
-- Troubleshooting guide
-
-## 📁 Files Created
+## 📁 Source Structure
 
 ```text
 webui/
 ├── src/
-│   ├── api/config.ts                    # API client
 │   ├── components/
+│   │   ├── ConfigForm.tsx               # Root config form (thin wrapper)
+│   │   ├── ConfigForm.css               # Form styles
 │   │   ├── Header.tsx                   # Navigation header
 │   │   ├── Header.css
-│   │   ├── Layout.tsx                   # Page layout
+│   │   ├── Layout.tsx                   # Page layout wrapper
 │   │   ├── Layout.css
-│   │   └── ProtectedRoute.tsx           # Route guard
-│   ├── hooks/useConfig.ts               # React Query hooks
-│   ├── lib/axios.ts                     # Axios instance
+│   │   └── configForm/                  # Config form modules
+│   │       ├── types.ts                 # All TypeScript interfaces
+│   │       ├── defaults.ts              # Factory functions, parseConfig, toJson
+│   │       ├── primitives.tsx           # Shared UI primitives (Field, TextInput, etc.)
+│   │       ├── ApiGatewayEditor.tsx     # API Gateway location editor
+│   │       ├── LocationEditors.tsx      # Location sub-editors (auth, cache, etc.)
+│   │       ├── LocationsEditor.tsx      # Locations list editor
+│   │       ├── TlsEditor.tsx            # TLS configuration editor
+│   │       ├── ServersSection.tsx       # HTTP servers section
+│   │       ├── UpstreamsSection.tsx     # HTTP upstreams section
+│   │       ├── ProfilesSection.tsx      # HTTP profiles (rate limit, auth, etc.)
+│   │       ├── HttpSection.tsx          # HTTP section wrapper
+│   │       ├── OutputSection.tsx        # Output target section (NIM / NGINX One)
+│   │       └── Layer4Section.tsx        # Layer 4 TCP/UDP section
 │   ├── pages/
-│   │   ├── LoginPage.tsx                # Login page
-│   │   ├── LoginPage.css
-│   │   ├── DashboardPage.tsx            # Main dashboard
-│   │   ├── DashboardPage.css
-│   │   ├── CreateConfigPage.tsx         # Config creator
+│   │   ├── CreateConfigPage.tsx         # Main (and only) page
 │   │   └── CreateConfigPage.css
-│   ├── store/authStore.ts               # Auth state
 │   ├── test/
-│   │   ├── setup.ts                     # Test config
-│   │   ├── LoginPage.test.tsx           # Component test
-│   │   ├── authStore.test.ts            # Store test
-│   │   └── useConfig.test.tsx           # Hook test
-│   ├── types/index.ts                   # Type definitions
-│   ├── App.tsx                          # Main app
-│   ├── main.tsx                         # Entry point
+│   │   ├── setup.ts                     # Test setup (IntersectionObserver + clipboard polyfills)
+│   │   ├── ConfigForm.agw.test.tsx      # AGW section toggle + OpenAPI schema tests
+│   │   ├── ConfigForm.agw.validation.test.tsx  # AGW field validation tests
+│   │   ├── ConfigForm.agw.profiles.test.tsx    # Profile dropdown tests
+│   │   ├── ConfigForm.output.test.tsx   # OutputSection — type cards, license, resolver, sidebar, clipboard
+│   │   └── CreateConfigPage.test.tsx    # Page-level integration tests
+│   ├── types/index.ts                   # Shared type definitions
+│   ├── App.tsx                          # App entry — single route to CreateConfigPage
+│   ├── main.tsx                         # React entry point
 │   └── index.css                        # Global styles
 ├── Dockerfile                           # Production build
-├── nginx.conf                           # NGINX config
+├── nginx.conf                           # NGINX serving config
 ├── vite.config.ts                       # Vite config
-├── tsconfig.json                        # TS config
-├── tsconfig.node.json                   # TS node config
+├── tsconfig.json                        # TypeScript config
 ├── package.json                         # Dependencies
-├── .eslintrc.cjs                        # Linting
-├── .prettierrc                          # Formatting
-├── .gitignore                           # Git ignore
-├── index.html                           # HTML template
-├── README.md                            # Documentation
-├── QUICKSTART.md                        # Quick start guide
-└── IMPLEMENTATION.md                    # Implementation details
+└── index.html                           # HTML template
 ```
 
-## 🔄 Updated Files
+## 🚀 How to Use
 
-```text
-contrib/docker-compose/
-├── docker-compose.yaml                  # Added webui service
-├── nginx-dapi.sh                        # Added -w flag for webui port
-└── README.md                            # Updated with webui info
+### Development
+
+```bash
+cd webui
+npm install
+npm run dev
 ```
 
-## 🚀 How to Use
+Access at: <http://localhost:5173\>
 
-### Quick Start
+### Production (Docker Compose)
 
 ```bash
 cd contrib/docker-compose
@@ -119,87 +81,61 @@ cd contrib/docker-compose
 ./nginx-dapi.sh -c start
 ```
 
-Access at: <http://localhost:3000>
-
-### Development
-
-```bash
-cd webui
-npm install
-npm run dev
-```
+Access at: <http://localhost:3000\>
 
 ### Testing
 
 ```bash
+cd webui
 npm test
 npm run test:coverage
 ```
 
-## 🎨 UI Features
-
-### Pages
+## 🎨 UI Structure
 
-1. **Login** (`/login`)
-   - JWT token input
-   - Security warning
-   - Auto-redirect after login
+### Page
 
-2. **Dashboard** (`/`)
-   - Configuration cards grid
-   - Status indicators
-   - Quick actions (view, delete)
-   - Create new button
+**Create Config** (`/`) — the single page of the application.
 
-3. **Create Config** (`/create`)
-   - JSON editor with syntax highlighting
-   - Template suggestions
-   - Validation
-   - Submit/cancel actions
+- Output section (NGINX Instance Manager or NGINX One Console target, license with JWT upload)
+- HTTP section includes policies (WAF), TLS certificates, and log profiles (at declaration level per v5.6 schema)
+- HTTP section (profiles, servers, upstreams — resolver field uses a ProfileSelect dropdown)
+- Layer 4 section (TCP/UDP servers and upstreams)
+- Sticky sidebar navigation with active-section highlighting
+- Submit button sends the generated JSON to the API
 
 ### Components
 
-- **Header** - Navigation and logout
-- **Layout** - Consistent page structure  
-- **ProtectedRoute** - Auth guard
-
-## 🔒 Security Implementation
-
-### Current (Development)
-
-- JWT in localStorage
-- Bearer token authentication
-- Auto-logout on 401
-
-### Recommended (Production)
-
-- HTTP-only cookies
-- Token refresh mechanism
-- CSRF protection
-- Rate limiting
-- HTTPS only
+- **Header** — application title bar
+- **Layout** — consistent page wrapper
+- **ConfigForm** — root form, composed from 13 focused sub-modules in `configForm/`
 
 ## 📊 Technology Stack
 
-|Layer|Technology|
-|-|-|
-|Framework|React 19|
-|Language|TypeScript|
-|Build|Vite|
-|Routing|React Router v7|
-|State|Zustand + TanStack Query|
-|HTTP|Axios|
-|Styling|CSS3 with custom properties|
-|Testing|Vitest + Testing Library|
-|Container|Docker + NGINX|
+| Layer | Technology |
+|---|---|
+| Framework | React 19 |
+| Language | TypeScript |
+| Build | Vite |
+| Routing | React Router v7 |
+| HTTP | Fetch / Axios |
+| Styling | CSS3 with custom properties |
+| Testing | Vitest + Testing Library |
+| Container | Docker + NGINX |
 
 ## 🧪 Test Coverage
 
-- ✅ Authentication store
-- ✅ Login page rendering
-- ✅ API hooks
-- ✅ Component integration
-- 📊 Ready for expanded coverage
+- ✅ API Gateway section toggle behaviour
+- ✅ OpenAPI schema URL/file/base64 modes
+- ✅ Field validation (required errors)
+- ✅ Profile dropdown population from HTTP-level profiles
+- ✅ Live profile name propagation to API Gateway dropdowns
+- ✅ Page-level integration (submit, JSON editor round-trip)
+- ✅ Output type card labels (NGINX Instance Manager / NGINX One Console)
+- ✅ License section toggle, grace_period boolean, JWT file upload
+- ✅ Resolver ProfileSelect dropdown population and emission
+- ✅ Sidebar navigation rendering and indented subsection links
+- ✅ Clipboard execCommand fallback (non-secure context)
 
 ## 🌐 API Endpoints Used
 
@@ -210,71 +146,8 @@ npm run test:coverage
 - `GET /v5.5/config/{configUid}/status`
 - `GET /v5.5/config/{configUid}/submission/{submissionUid}`
 
-## 📝 Key Features
-
-✅ Modern React architecture
-✅ Full TypeScript coverage
-✅ Comprehensive error handling
-✅ Real-time status updates
-✅ Responsive design
-✅ Dark theme UI
-✅ Toast notifications
-✅ Protected routes
-✅ Docker deployment
-✅ Automated tests
-✅ Complete documentation
-
-## 🎯 Production Checklist
-
-Before deploying to production:
-
-- [ ] Configure proper JWT validation on backend
-- [ ] Implement HTTP-only cookie authentication
-- [ ] Add token refresh mechanism
-- [ ] Enable HTTPS/TLS
-- [ ] Set up CORS properly
-- [ ] Add rate limiting
-- [ ] Enable security headers
-- [ ] Configure CSP
-- [ ] Add monitoring/logging
-- [ ] Run security audit
-- [ ] Perform load testing
-- [ ] Review error handling
-- [ ] Configure backups
-
 ## 📚 Documentation
 
-1. **README.md** - Comprehensive guide
-2. **QUICKSTART.md** - 5-minute setup
-3. **IMPLEMENTATION.md** - Technical details
-4. **Inline comments** - Code documentation
-
-## 🔧 Customization
-
-The UI is designed to be easily customizable:
-
-- **Colors:** Update CSS variables in `index.css`
-- **API endpoint:** Modify `vite.config.ts` and `nginx.conf`
-- **Features:** Add new pages in `src/pages/`
-- **Types:** Extend `src/types/index.ts`
-
-## 🎉 Ready to Deploy
-
-The Web UI is fully functional and ready for:
-
-- ✅ Local development
-- ✅ Docker deployment
-- ✅ Testing
-- ✅ Production (with security enhancements)
-
-## 📞 Support
-
-- 📖 Documentation in `/webui/README.md`
-- 🚀 Quick start in `/webui/QUICKSTART.md`
-- 🔍 Implementation details in `/webui/IMPLEMENTATION.md`
-
----
-
-Status: ✅ Complete and Ready
-
-The NGINX Declarative API now has a modern, professional web interface that makes configuration management intuitive and efficient!
+1. **README.md** — Overview and setup instructions
+2. **QUICKSTART.md** — 5-minute getting started guide
+3. **IMPLEMENTATION.md** — Technical implementation details
diff --git a/webui/index.html b/webui/index.html
index 5ef838ac..ef2370bd 100644
--- a/webui/index.html
+++ b/webui/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>NGINX Declarative API</title>
   </head>
diff --git a/webui/public/favicon.ico b/webui/public/favicon.ico
new file mode 100644
index 00000000..c509adfe
Binary files /dev/null and b/webui/public/favicon.ico differ
diff --git a/webui/src/components/ConfigForm.css b/webui/src/components/ConfigForm.css
index 88358353..0bfa8a49 100644
--- a/webui/src/components/ConfigForm.css
+++ b/webui/src/components/ConfigForm.css
@@ -2,11 +2,70 @@
    Polished Hardcoded Form — ConfigForm
    ============================================================ */
 
+/* ─── Two-column layout: sidebar + content ──────────────────── */
+.cf-layout {
+  display: flex;
+  gap: 1rem;
+  align-items: flex-start;
+  width: 100%;
+}
+
+/* Sticky sidebar nav */
+.cf-sidenav {
+  flex: 0 0 auto;
+  width: 150px;
+  position: sticky;
+  top: calc(var(--header-height, 5rem) + 1rem);
+  display: flex;
+  flex-direction: column;
+  gap: 0.15rem;
+  background: var(--cf-surface-section, rgba(255,255,255,0.04));
+  border: 1px solid var(--border-n1, rgba(255,255,255,0.1));
+  border-radius: 9px;
+  padding: 0.6rem 0.4rem;
+}
+
+.cf-sidenav-item {
+  display: block;
+  width: 100%;
+  text-align: left;
+  background: none;
+  border: none;
+  border-radius: 5px;
+  padding: 0.32rem 0.6rem;
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--text-45, rgba(255,255,255,0.45));
+  cursor: pointer;
+  transition: background 0.12s, color 0.12s;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.cf-sidenav-item.indent {
+  padding-left: 1.1rem;
+  font-size: 0.7rem;
+  font-weight: 400;
+}
+
+.cf-sidenav-item:hover {
+  background: rgba(255,255,255,0.07);
+  color: var(--text-88, rgba(255,255,255,0.88));
+}
+
+.cf-sidenav-item.active {
+  background: rgba(0, 150, 57, 0.18);
+  color: #00bf47;
+  font-weight: 600;
+}
+
 .config-form {
+  flex: 1;
+  min-width: 0;
   display: flex;
   flex-direction: column;
   gap: 0.6rem;
-  width: 100%;
 }
 
 /* ─── Sections ─────────────────────────────────────────────── */
@@ -369,3 +428,152 @@ select.cf-input option { background: var(--cf-surface-select-option); }
   margin: 0;
 }
 .cf-empty-top { margin-top: -0.25rem; }
+
+/* --- API Gateway Editor ---------------------------------------------------- */
+
+.cf-subsection-agw {
+  border-top: 1px solid var(--border-accent-1);
+  margin-top: 0.875rem;
+  padding-top: 0.75rem;
+}
+
+.cf-agw-card {
+  border: 1px solid var(--border-accent-1);
+  border-radius: 7px;
+  margin-bottom: 0.4rem;
+  overflow: hidden;
+}
+
+.cf-agw-card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.5rem 0.875rem;
+  background: var(--surface-form-input);
+}
+
+.cf-agw-card-title {
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--text-45);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.cf-agw-card-body {
+  padding: 0.75rem 0.875rem;
+  border-top: 1px solid var(--border-accent-1);
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.cf-agw-toggles {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+  padding-top: 0.25rem;
+}
+
+.cf-agw-item-row {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
+  gap: 0.65rem;
+  align-items: start;
+  padding: 0.65rem 0.875rem;
+  border-top: 1px solid var(--border-accent-1);
+}
+
+.cf-agw-item-remove {
+  display: flex;
+  align-items: flex-start;
+  padding-top: 1.55rem;
+}
+
+.cf-empty-sm {
+  font-size: 0.74rem;
+  color: var(--text-empty);
+  font-style: italic;
+  margin: 0;
+  padding: 0.5rem 0.875rem;
+}
+
+.cf-textarea-sm {
+  min-height: 62px;
+  font-size: 0.8rem;
+  resize: vertical;
+  line-height: 1.4;
+}
+
+/* 3-column grid for location basic fields */
+.cf-grid-3 {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 0.75rem;
+}
+@media (max-width: 900px) {
+  .cf-grid-3 { grid-template-columns: 1fr 1fr; }
+}
+@media (max-width: 600px) {
+  .cf-grid-3 { grid-template-columns: 1fr; }
+}
+
+/* OpenAPI schema URL / file mode switcher */
+.cf-agw-schema-mode {
+  display: flex;
+  gap: 0;
+  border: 1px solid var(--border-accent-1);
+  border-radius: 5px;
+  overflow: hidden;
+  align-self: flex-start;
+}
+
+.cf-agw-mode-btn {
+  padding: 0.25rem 0.7rem;
+  font-size: 0.78rem;
+  font-weight: 500;
+  cursor: pointer;
+  border: none;
+  background: var(--surface-form-input);
+  color: var(--text-45);
+  transition: background 0.15s, color 0.15s;
+}
+
+.cf-agw-mode-btn + .cf-agw-mode-btn {
+  border-left: 1px solid var(--border-accent-1);
+}
+
+.cf-agw-mode-btn.active {
+  background: var(--accent-blue, #3b82f6);
+  color: #fff;
+}
+
+.cf-agw-file-row {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  flex-wrap: wrap;
+}
+
+.cf-agw-file-input {
+  font-size: 0.8rem;
+  color: var(--text-main);
+}
+
+.cf-agw-file-ok {
+  font-size: 0.75rem;
+  color: var(--text-success, #22c55e);
+  font-style: italic;
+}
+
+/* Validation */
+.cf-input-error {
+  border-color: #ef4444 !important;
+  outline-color: #ef4444;
+}
+
+.cf-field-error {
+  font-size: 0.72rem;
+  color: #ef4444;
+  margin: 0.15rem 0 0;
+}
diff --git a/webui/src/components/ConfigForm.tsx b/webui/src/components/ConfigForm.tsx
index 52afb5c6..9e56999a 100644
--- a/webui/src/components/ConfigForm.tsx
+++ b/webui/src/components/ConfigForm.tsx
@@ -1,775 +1,124 @@
 import { useState, useEffect, useCallback } from 'react';
 import './ConfigForm.css';
+import type { ConfigData } from './configForm/types';
+import { parseConfig, toJson, emptyNms, emptyNginxOne } from './configForm/defaults';
+import { OutputSection } from './configForm/OutputSection';
+import { HttpSection } from './configForm/HttpSection';
+import { Layer4Section } from './configForm/Layer4Section';
 
-// ─── Types ────────────────────────────────────────────────────────────────────
-
-interface Origin {
-  server: string;
-  weight?: number;
-  max_fails?: number;
-  fail_timeout?: string;
-  backup?: boolean;
-}
-
-interface Location {
-  uri: string;
-  urimatch?: string;
-  upstream?: string;
-}
-
-interface TlsConfig {
-  certificate?: string;
-  key?: string;
-  protocols?: string[];
-}
-
-interface Server {
-  name: string;
-  names?: string[];
-  listen?: { address?: string; http2?: boolean; tls?: TlsConfig };
-  locations?: Location[];
-}
-
-interface Upstream {
-  name: string;
-  origin: Origin[];
-  resolver?: string;
-}
-
-interface OutputNMS {
-  url: string;
-  username: string;
-  password: string;
-  instancegroup: string;
-  synctime?: number;
-  modules?: string[];
-}
-
-interface OutputNGINXOne {
-  url: string;
-  namespace: string;
-  token: string;
-  configsyncgroup: string;
-  synctime?: number;
-  modules?: string[];
-}
-
-interface ConfigData {
-  output: {
-    type: 'nms' | 'nginxone';
-    nms?: OutputNMS;
-    nginxone?: OutputNGINXOne;
-  };
+const DEFAULT_CFG: ConfigData = {
+  output: { type: 'nim', synchronous: true, nms: emptyNms(), nginxone: emptyNginxOne() },
   declaration: {
-    http?: { servers?: Server[]; upstreams?: Upstream[] };
-    layer4?: {
-      servers?: Array<{ name: string; listen?: { address?: string }; upstream?: string }>;
-      upstreams?: Array<{ name: string; origin?: Array<{ server: string }> }>;
-    };
-  };
-}
-
-// ─── Defaults ─────────────────────────────────────────────────────────────────
-
-const emptyNms = (): OutputNMS => ({
-  url: '', username: '', password: '', instancegroup: '', synctime: 0, modules: [],
-});
-const emptyNginxOne = (): OutputNGINXOne => ({
-  url: '', namespace: '', token: '', configsyncgroup: '', synctime: 0, modules: [],
-});
-const emptyServer = (): Server => ({
-  name: '', names: [], listen: { address: '', http2: false }, locations: [],
-});
-const emptyLocation = (): Location => ({ uri: '/', urimatch: 'prefix', upstream: '' });
-const emptyUpstream = (): Upstream => ({ name: '', origin: [{ server: '', weight: 1 }] });
-const emptyOrigin = (): Origin => ({ server: '', weight: 1, max_fails: 1, fail_timeout: '10s' });
-
-function parseConfig(json: string): ConfigData | null {
-  try {
-    const p = JSON.parse(json);
-    return {
-      output: {
-        type: p?.output?.type ?? 'nms',
-        nms: { ...emptyNms(), ...(p?.output?.nms ?? {}) },
-        nginxone: { ...emptyNginxOne(), ...(p?.output?.nginxone ?? {}) },
-      },
-      declaration: {
-        http: {
-          servers: p?.declaration?.http?.servers ?? [],
-          upstreams: p?.declaration?.http?.upstreams ?? [],
-        },
-        layer4: {
-          servers: p?.declaration?.layer4?.servers ?? [],
-          upstreams: p?.declaration?.layer4?.upstreams ?? [],
-        },
-      },
-    };
-  } catch {
-    return null;
-  }
-}
-
-function toJson(cfg: ConfigData): string {
-  const out: Record<string, unknown> = { type: cfg.output.type };
-  if (cfg.output.type === 'nms') out.nms = cfg.output.nms;
-  else out.nginxone = cfg.output.nginxone;
-
-  const decl: Record<string, unknown> = {};
-  const http = cfg.declaration.http;
-  if ((http?.servers?.length ?? 0) + (http?.upstreams?.length ?? 0) > 0) {
-    decl.http = {
-      ...(http?.servers?.length ? { servers: http.servers } : {}),
-      ...(http?.upstreams?.length ? { upstreams: http.upstreams } : {}),
-    };
-  }
-  const l4 = cfg.declaration.layer4;
-  if ((l4?.servers?.length ?? 0) + (l4?.upstreams?.length ?? 0) > 0) {
-    decl.layer4 = {
-      ...(l4?.servers?.length ? { servers: l4.servers } : {}),
-      ...(l4?.upstreams?.length ? { upstreams: l4.upstreams } : {}),
-    };
-  }
-
-  return JSON.stringify({ output: out, declaration: decl }, null, 2);
-}
-
-// ─── Primitive field components ───────────────────────────────────────────────
-
-function Field({
-  label, required, hint, children, span,
-}: {
-  label: string; required?: boolean; hint?: string; children: React.ReactNode; span?: 'full';
-}) {
-  return (
-    <div className={`cf-field${span === 'full' ? ' cf-field-full' : ''}`}>
-      <label className="cf-label">
-        {label}{required && <span className="cf-required">*</span>}
-      </label>
-      {children}
-      {hint && <p className="cf-hint">{hint}</p>}
-    </div>
-  );
-}
-
-function TextInput({
-  value, onChange, placeholder, type = 'text', mono,
-}: {
-  value: string; onChange: (v: string) => void; placeholder?: string; type?: string; mono?: boolean;
-}) {
-  return (
-    <input
-      className={`cf-input${mono ? ' cf-mono' : ''}`}
-      type={type}
-      value={value}
-      placeholder={placeholder}
-      autoComplete="off"
-      spellCheck={false}
-      onChange={e => onChange(e.target.value)}
-    />
-  );
-}
-
-function NumberInput({ value, onChange, min = 0 }: { value: number; onChange: (v: number) => void; min?: number }) {
-  return (
-    <input
-      className="cf-input cf-input-sm"
-      type="number"
-      value={value}
-      min={min}
-      onChange={e => onChange(Number(e.target.value))}
-    />
-  );
-}
-
-function SelectInput({ value, onChange, options }: {
-  value: string; onChange: (v: string) => void;
-  options: { value: string; label: string }[];
-}) {
-  return (
-    <select className="cf-input" value={value} onChange={e => onChange(e.target.value)}>
-      {options.map(o => <option key={o.value} value={o.value}>{o.label}</option>)}
-    </select>
-  );
-}
-
-function Toggle({ checked, onChange, label }: { checked: boolean; onChange: (v: boolean) => void; label: string }) {
-  return (
-    <label className="cf-toggle">
-      <input type="checkbox" checked={checked} onChange={e => onChange(e.target.checked)} />
-      <span className="cf-toggle-text">{label}</span>
-    </label>
-  );
-}
-
-const MODULES = [
-  { value: 'ngx_http_app_protect_module', label: 'NGINX App Protect WAF' },
-  { value: 'ngx_http_js_module',          label: 'NGINX JavaScript (njs) — HTTP' },
-  { value: 'ngx_stream_js_module',        label: 'NGINX JavaScript (njs) — Stream' },
-  { value: 'ngx_http_geoip2_module',      label: 'GeoIP2' },
-];
-
-function ModulesField({ value, onChange }: { value: string[]; onChange: (v: string[]) => void }) {
-  const toggle = (mod: string) =>
-    onChange(value.includes(mod) ? value.filter(m => m !== mod) : [...value, mod]);
-  return (
-    <div className="cf-modules">
-      {MODULES.map(m => (
-        <label key={m.value} className="cf-toggle">
-          <input type="checkbox" checked={value.includes(m.value)} onChange={() => toggle(m.value)} />
-          <span className="cf-toggle-text">{m.label}</span>
-        </label>
-      ))}
-    </div>
-  );
-}
-
-// ─── Section chrome ───────────────────────────────────────────────────────────
-
-function SectionTitle({ title, sub }: { title: string; sub?: string }) {
-  return (
-    <div className="cf-section-head">
-      <div className="cf-section-text">
-        <span className="cf-section-title">{title}</span>
-        {sub && <span className="cf-section-sub">{sub}</span>}
-      </div>
-    </div>
-  );
-}
+    certificates: [],
+    http: { servers: [], upstreams: [], rate_limit: [], authentication: { client: [] }, authorization: [], cache: [], maps: [], logformats: [], njs: [], njs_profiles: [], acme_issuers: [], policies: [], log_profiles: [] },
+    layer4: { servers: [], upstreams: [] },
+    resolvers: [],
+  },
+};
 
-function AddBtn({ label, onClick }: { label: string; onClick: () => void }) {
-  return (
-    <button type="button" className="cf-btn-add" onClick={onClick}>
-      <span className="cf-btn-add-icon">+</span> {label}
-    </button>
-  );
+interface ConfigFormProps {
+  initialJson: string;
+  onChange: (json: string) => void;
 }
 
-function RemoveBtn({ onClick }: { onClick: () => void }) {
-  return (
-    <button type="button" className="cf-btn-remove" title="Remove" onClick={onClick}>
-      ✕
-    </button>
-  );
+function scrollToSection(id: string) {
+  const el = document.getElementById(id);
+  if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
 }
 
-// ─── Collapsible card ─────────────────────────────────────────────────────────
-
-function CollapseCard({
-  title, meta, children, defaultOpen,
-}: {
-  title: React.ReactNode; meta?: string; children: React.ReactNode; defaultOpen?: boolean;
-}) {
-  const [open, setOpen] = useState(defaultOpen ?? false);
-  return (
-    <div className={`cf-card${open ? ' cf-card-open' : ''}`}>
-      <div className="cf-card-header" onClick={() => setOpen(o => !o)}>
-        <span className="cf-card-caret">{open ? '▾' : '▸'}</span>
-        <span className="cf-card-title">{title}</span>
-        {meta && <span className="cf-card-meta">{meta}</span>}
-      </div>
-      {open && <div className="cf-card-body">{children}</div>}
-    </div>
-  );
+interface NavItem {
+  id: string;
+  label: string;
+  indent?: boolean;
 }
 
-// ─── Locations sub-editor ─────────────────────────────────────────────────────
-
-const URI_MATCH_OPTIONS = [
-  { value: 'prefix',  label: 'Prefix — matches any path starting with URI' },
-  { value: 'exact',   label: 'Exact — matches only this exact URI' },
-  { value: 'regex',   label: 'Regex — case-sensitive regular expression' },
-  { value: 'iregex',  label: 'iRegex — case-insensitive regular expression' },
-  { value: 'best',    label: 'Best — longest prefix + regex priority' },
+const NAV_ITEMS: NavItem[] = [
+  { id: 'cf-sec-output',         label: 'Output' },
+  { id: 'cf-sec-license',        label: 'License',        indent: true },
+  { id: 'cf-sec-http',           label: 'HTTP' },
+  { id: 'cf-sec-http-profiles',  label: 'Profiles',       indent: true },
+  { id: 'cf-sec-http-servers',   label: 'Servers',        indent: true },
+  { id: 'cf-sec-http-upstreams', label: 'Upstreams',      indent: true },
+  { id: 'cf-sec-certificates',   label: 'Certificates',   indent: true },
+  { id: 'cf-sec-policies',       label: 'Policies',       indent: true },
+  { id: 'cf-sec-log-profiles',   label: 'Log Profiles',   indent: true },
+  { id: 'cf-sec-layer4',         label: 'Layer 4' },
 ];
 
-function LocationsEditor({ locations, onChange }: { locations: Location[]; onChange: (l: Location[]) => void }) {
-  const update = (i: number, l: Location) => onChange(locations.map((x, idx) => idx === i ? l : x));
-  const remove = (i: number) => onChange(locations.filter((_, idx) => idx !== i));
-
-  return (
-    <div className="cf-subsection">
-      <div className="cf-subsection-header">
-        <span className="cf-subsection-title">Locations</span>
-        <AddBtn label="Add location" onClick={() => onChange([...locations, emptyLocation()])} />
-      </div>
-      {locations.length === 0 && (
-        <p className="cf-empty">No locations — add one to route traffic to an upstream.</p>
-      )}
-      {locations.map((loc, i) => (
-        <div key={i} className="cf-row-card">
-          <div className="cf-row-num">#{i + 1}</div>
-          <div className="cf-row-fields">
-            <Field label="URI" required hint="Request path this location handles. Interpreted according to the match type.">
-              <TextInput value={loc.uri} onChange={v => update(i, { ...loc, uri: v })} placeholder="/" mono />
-            </Field>
-            <Field label="Match type" hint="How NGINX matches the incoming request URI against this location.">
-              <SelectInput
-                value={loc.urimatch ?? 'prefix'}
-                onChange={v => update(i, { ...loc, urimatch: v })}
-                options={URI_MATCH_OPTIONS}
-              />
-            </Field>
-            <Field label="Upstream" hint='Full upstream reference including scheme, e.g. "http://my-upstream". Leave empty to use directives from a snippet.'>
-              <TextInput value={loc.upstream ?? ''} onChange={v => update(i, { ...loc, upstream: v })} placeholder="http://my-upstream" mono />
-            </Field>
-          </div>
-          <RemoveBtn onClick={() => remove(i)} />
-        </div>
-      ))}
-    </div>
-  );
-}
-
-// ─── TLS sub-editor ───────────────────────────────────────────────────────────
-
-function TlsEditor({ tls, onChange }: {
-  tls: TlsConfig | undefined;
-  onChange: (t: TlsConfig | undefined) => void;
-}) {
-  const enabled = !!tls?.certificate || !!tls?.key;
-  const [show, setShow] = useState(enabled);
-  const t = tls ?? {};
-
-  const handleEnable = (v: boolean) => {
-    setShow(v);
-    if (!v) onChange(undefined);
-    else onChange({ certificate: '', key: '', protocols: ['TLSv1.2', 'TLSv1.3'] });
-  };
-
-  const TLS_PROTOCOL_OPTIONS = ['TLSv1.2', 'TLSv1.3', 'TLSv1.1'];
-  const toggleProto = (p: string) => {
-    const protos = t.protocols ?? [];
-    onChange({ ...t, protocols: protos.includes(p) ? protos.filter(x => x !== p) : [...protos, p] });
-  };
-
-  return (
-    <div className="cf-subsection cf-subsection-tls">
-      <div className="cf-subsection-header">
-        <span className="cf-subsection-title">TLS / SSL</span>
-        <Toggle checked={show} onChange={handleEnable} label={show ? 'Enabled' : 'Disabled'} />
-      </div>
-      {show && (
-        <div className="cf-grid-3">
-          <Field label="Certificate" required hint="Name of the certificate object managed by NMS or NGINX One (not a file path).">
-            <TextInput value={t.certificate ?? ''} onChange={v => onChange({ ...t, certificate: v })} placeholder="my-tls-cert" />
-          </Field>
-          <Field label="Private key" required hint="Name of the private key object matching the certificate above.">
-            <TextInput value={t.key ?? ''} onChange={v => onChange({ ...t, key: v })} placeholder="my-tls-key" />
-          </Field>
-          <Field label="Protocols" hint="TLS protocol versions to accept. TLSv1.3 + TLSv1.2 is the recommended baseline.">
-            <div className="cf-modules">
-              {TLS_PROTOCOL_OPTIONS.map(p => (
-                <label key={p} className="cf-toggle">
-                  <input type="checkbox" checked={(t.protocols ?? []).includes(p)} onChange={() => toggleProto(p)} />
-                  <span className="cf-toggle-text">{p}</span>
-                </label>
-              ))}
-            </div>
-          </Field>
-        </div>
-      )}
-    </div>
-  );
-}
-
-// ─── HTTP Servers ─────────────────────────────────────────────────────────────
-
-function ServersSection({ servers, onChange }: { servers: Server[]; onChange: (s: Server[]) => void }) {
-  const update = (i: number, s: Server) => onChange(servers.map((x, idx) => idx === i ? s : x));
-  const remove = (i: number) => onChange(servers.filter((_, idx) => idx !== i));
-
-  return (
-    <div className="cf-group">
-      <div className="cf-group-header">
-        <span className="cf-group-title">Servers</span>
-        <AddBtn label="Add server" onClick={() => onChange([...servers, emptyServer()])} />
-      </div>
-
-      {servers.length === 0 && (
-        <p className="cf-empty">No HTTP servers defined. Add a server to start routing traffic.</p>
-      )}
-
-      {servers.map((srv, i) => (
-        <CollapseCard
-          key={i}
-          title={srv.name || <em>server #{i + 1}</em>}
-          meta={srv.listen?.address || '—'}
-          defaultOpen={i === 0 && servers.length === 1}
-        >
-          <div className="cf-card-actions">
-            <RemoveBtn onClick={() => remove(i)} />
-          </div>
-
-          <div className="cf-grid-2">
-            <Field label="Server name" required
-              hint='Unique identifier for this server. Alphanumeric, hyphens, underscores. Referenced as the "name" key in the declaration.'>
-              <TextInput value={srv.name} onChange={v => update(i, { ...srv, name: v })} placeholder="my-server" />
-            </Field>
-            <Field label="Listen address"
-              hint='IP address and port to bind to. Use 0.0.0.0 to listen on all interfaces. Examples: "0.0.0.0:80", "0.0.0.0:443", "[::]:8080".'>
-              <TextInput
-                value={srv.listen?.address ?? ''}
-                onChange={v => update(i, { ...srv, listen: { ...(srv.listen ?? {}), address: v } })}
-                placeholder="0.0.0.0:80"
-                mono
-              />
-            </Field>
-            <Field label="Server names" span="full"
-              hint='Space-separated list of hostnames this server responds to (HTTP Host header matching). Example: "example.com www.example.com".'>
-              <TextInput
-                value={(srv.names ?? []).join(' ')}
-                onChange={v => update(i, { ...srv, names: v.split(/\s+/).filter(Boolean) })}
-                placeholder="example.com www.example.com"
-                mono
-              />
-            </Field>
-          </div>
-
-          <div className="cf-field cf-field-inline">
-            <Toggle
-              checked={srv.listen?.http2 ?? false}
-              onChange={v => update(i, { ...srv, listen: { ...(srv.listen ?? {}), http2: v } })}
-              label="Enable HTTP/2"
-            />
-            <p className="cf-hint">Enables HTTP/2 protocol support on this listener via the http2 directive.</p>
-          </div>
-
-          <TlsEditor
-            tls={srv.listen?.tls}
-            onChange={t => update(i, { ...srv, listen: { ...(srv.listen ?? {}), tls: t } })}
-          />
-
-          <LocationsEditor
-            locations={srv.locations ?? []}
-            onChange={locs => update(i, { ...srv, locations: locs })}
-          />
-        </CollapseCard>
-      ))}
-    </div>
-  );
-}
-
-// ─── HTTP Upstreams ───────────────────────────────────────────────────────────
-
-function UpstreamsSection({ upstreams, onChange }: { upstreams: Upstream[]; onChange: (u: Upstream[]) => void }) {
-  const update = (i: number, u: Upstream) => onChange(upstreams.map((x, idx) => idx === i ? u : x));
-  const remove = (i: number) => onChange(upstreams.filter((_, idx) => idx !== i));
-  const updOrigin = (i: number, oi: number, o: Origin) =>
-    update(i, { ...upstreams[i], origin: (upstreams[i].origin ?? []).map((x, oIdx) => oIdx === oi ? o : x) });
-  const remOrigin = (i: number, oi: number) =>
-    update(i, { ...upstreams[i], origin: (upstreams[i].origin ?? []).filter((_, oIdx) => oIdx !== oi) });
-  const addOrigin = (i: number) =>
-    update(i, { ...upstreams[i], origin: [...(upstreams[i].origin ?? []), emptyOrigin()] });
-
-  return (
-    <div className="cf-group">
-      <div className="cf-group-header">
-        <span className="cf-group-title">Upstreams</span>
-        <AddBtn label="Add upstream" onClick={() => onChange([...upstreams, emptyUpstream()])} />
-      </div>
-
-      {upstreams.length === 0 && (
-        <p className="cf-empty">No upstreams defined. Add an upstream to reference from your server locations.</p>
-      )}
-
-      {upstreams.map((up, i) => (
-        <CollapseCard
-          key={i}
-          title={up.name || <em>upstream #{i + 1}</em>}
-          meta={`${up.origin?.length ?? 0} origin${(up.origin?.length ?? 0) !== 1 ? 's' : ''}`}
-          defaultOpen={i === 0 && upstreams.length === 1}
-        >
-          <div className="cf-card-actions"><RemoveBtn onClick={() => remove(i)} /></div>
-
-          <div className="cf-grid-2">
-            <Field label="Upstream name" required
-              hint='Identifier for this upstream group. Reference it from a location as "http://&lt;name&gt;". Alphanumeric, hyphens, underscores.'>
-              <TextInput value={up.name} onChange={v => update(i, { ...up, name: v })} placeholder="backend" />
-            </Field>
-            <Field label="Resolver"
-              hint="Optional DNS resolver name (from the resolvers section) for dynamic upstream addresses. Leave empty for static IPs.">
-              <TextInput value={up.resolver ?? ''} onChange={v => update(i, { ...up, resolver: v })} placeholder="my-resolver" />
-            </Field>
-          </div>
-
-          <div className="cf-subsection">
-            <div className="cf-subsection-header">
-              <span className="cf-subsection-title">Origins</span>
-              <AddBtn label="Add origin" onClick={() => addOrigin(i)} />
-            </div>
-            <p className="cf-hint cf-hint-top">Each origin is a backend server. NGINX will load-balance requests across all non-backup origins.</p>
-            {(up.origin ?? []).map((o, oi) => (
-              <div key={oi} className="cf-origin-row">
-                <Field label="Server address" hint='Format: "host:port" or IP. Example: "10.0.0.1:8080" or "backend.internal:443".'>
-                  <TextInput value={o.server} onChange={v => updOrigin(i, oi, { ...o, server: v })} placeholder="10.0.0.1:8080" mono />
-                </Field>
-                <Field label="Weight" hint="Relative weight for weighted round-robin. Higher = more requests. Default: 1.">
-                  <NumberInput value={o.weight ?? 1} onChange={v => updOrigin(i, oi, { ...o, weight: v })} min={1} />
-                </Field>
-                <Field label="Max fails" hint="Failures before marking server as unavailable. 0 disables fail tracking.">
-                  <NumberInput value={o.max_fails ?? 1} onChange={v => updOrigin(i, oi, { ...o, max_fails: v })} min={0} />
-                </Field>
-                <Field label="Fail timeout" hint='Time window for max_fails counting, and recovery time. Example: "10s", "30s".'>
-                  <TextInput value={o.fail_timeout ?? '10s'} onChange={v => updOrigin(i, oi, { ...o, fail_timeout: v })} placeholder="10s" mono />
-                </Field>
-                <Field label="Backup">
-                  <Toggle checked={o.backup ?? false} onChange={v => updOrigin(i, oi, { ...o, backup: v })} label="Backup only" />
-                </Field>
-                <div className="cf-origin-remove"><RemoveBtn onClick={() => remOrigin(i, oi)} /></div>
-              </div>
-            ))}
-          </div>
-        </CollapseCard>
-      ))}
-    </div>
-  );
-}
-
-// ─── HTTP wrapper ────────────────────────────────────────────────────────────
-
-function HttpSection({ servers, onServersChange, upstreams, onUpstreamsChange }: {
-  servers: Server[];
-  onServersChange: (s: Server[]) => void;
-  upstreams: Upstream[];
-  onUpstreamsChange: (u: Upstream[]) => void;
-}) {
-  return (
-    <section className="cf-section">
-      <SectionTitle title="HTTP" sub="Virtual servers and upstream groups for HTTP/S traffic" />
-      <ServersSection servers={servers} onChange={onServersChange} />
-      <UpstreamsSection upstreams={upstreams} onChange={onUpstreamsChange} />
-    </section>
-  );
-}
-
-// ─── Output Section ───────────────────────────────────────────────────────────
-
-function OutputSection({ output, onChange }: {
-  output: ConfigData['output'];
-  onChange: (o: ConfigData['output']) => void;
-}) {
-  const nms = output.nms ?? emptyNms();
-  const no = output.nginxone ?? emptyNginxOne();
-
-  return (
-    <section className="cf-section">
-      <SectionTitle title="Output" sub="Where to push the generated NGINX configuration" />
-
-      <div className="cf-type-row">
-        <button
-          type="button"
-          className={`cf-type-card${output.type === 'nms' ? ' active' : ''}`}
-          onClick={() => onChange({ ...output, type: 'nms' })}
-        >
-          <span className="cf-type-card-title">NGINX Instance Manager</span>
-          <span className="cf-type-card-sub">Push to an NMS instance group</span>
-        </button>
-        <button
-          type="button"
-          className={`cf-type-card${output.type === 'nginxone' ? ' active' : ''}`}
-          onClick={() => onChange({ ...output, type: 'nginxone' })}
-        >
-          <span className="cf-type-card-title">NGINX One Console</span>
-          <span className="cf-type-card-sub">Push to a config sync group</span>
-        </button>
-      </div>
-
-      {output.type === 'nms' && (
-        <div className="cf-grid-2">
-          <Field label="NMS URL" required
-            hint="Base URL of your NGINX Management Suite instance. Include scheme and port. Example: https://nms.example.com:443">
-            <TextInput value={nms.url} onChange={v => onChange({ ...output, nms: { ...nms, url: v } })} placeholder="https://nms.example.com" mono />
-          </Field>
-          <Field label="Username" required hint="API username for the NGINX Management Suite. Usually 'admin' for initial setup.">
-            <TextInput value={nms.username} onChange={v => onChange({ ...output, nms: { ...nms, username: v } })} placeholder="admin" />
-          </Field>
-          <Field label="Password" required hint="Password for the NMS API user. Stored only in your local session — never sent to this UI's server.">
-            <TextInput value={nms.password} onChange={v => onChange({ ...output, nms: { ...nms, password: v } })} type="password" placeholder="••••••••" />
-          </Field>
-          <Field label="Instance group" required hint="Name of the NMS instance group to push configuration to. The group must already exist in NMS.">
-            <TextInput value={nms.instancegroup} onChange={v => onChange({ ...output, nms: { ...nms, instancegroup: v } })} placeholder="production" />
-          </Field>
-          <Field label="Sync time (seconds)"
-            hint="How often (in seconds) the API will re-push the configuration. Set to 0 to push once and stop. Use a positive integer for continuous synchronisation.">
-            <NumberInput value={nms.synctime ?? 0} onChange={v => onChange({ ...output, nms: { ...nms, synctime: v } })} />
-          </Field>
-          <Field label="Dynamic modules"
-            hint="Select any additional NGINX dynamic modules that must be loaded. These are inserted as load_module directives at the top of nginx.conf.">
-            <ModulesField value={nms.modules ?? []} onChange={v => onChange({ ...output, nms: { ...nms, modules: v } })} />
-          </Field>
-        </div>
-      )}
-
-      {output.type === 'nginxone' && (
-        <div className="cf-grid-2">
-          <Field label="NGINX One URL" required
-            hint="Base URL of your NGINX One Console instance. Example: https://nginx-one.example.com">
-            <TextInput value={no.url} onChange={v => onChange({ ...output, nginxone: { ...no, url: v } })} placeholder="https://nginx-one.example.com" mono />
-          </Field>
-          <Field label="Namespace" required hint="The NGINX One namespace that contains your config sync group. Case-sensitive.">
-            <TextInput value={no.namespace} onChange={v => onChange({ ...output, nginxone: { ...no, namespace: v } })} placeholder="default" />
-          </Field>
-          <Field label="API token" required hint="Bearer token for authenticating to the NGINX One API. Generate this in the NGINX One Console under API keys.">
-            <TextInput value={no.token} onChange={v => onChange({ ...output, nginxone: { ...no, token: v } })} type="password" placeholder="••••••••" />
-          </Field>
-          <Field label="Config sync group" required hint="Name of the config sync group to target. Instances in this group will receive the generated configuration.">
-            <TextInput value={no.configsyncgroup} onChange={v => onChange({ ...output, nginxone: { ...no, configsyncgroup: v } })} placeholder="production-group" />
-          </Field>
-          <Field label="Sync time (seconds)"
-            hint="How often (in seconds) to re-push the configuration. Set to 0 to push once and stop.">
-            <NumberInput value={no.synctime ?? 0} onChange={v => onChange({ ...output, nginxone: { ...no, synctime: v } })} />
-          </Field>
-          <Field label="Dynamic modules"
-            hint="Select any additional NGINX dynamic modules required by this configuration.">
-            <ModulesField value={no.modules ?? []} onChange={v => onChange({ ...output, nginxone: { ...no, modules: v } })} />
-          </Field>
-        </div>
-      )}
-    </section>
-  );
-}
-
-// ─── Layer 4 Section ──────────────────────────────────────────────────────────
-
-function L4ServersSection({ servers, onChange }: {
-  servers: NonNullable<ConfigData['declaration']['layer4']>['servers'];
-  onChange: (s: NonNullable<ConfigData['declaration']['layer4']>['servers']) => void;
-}) {
-  const items = servers ?? [];
-  const update = (i: number, s: typeof items[0]) => onChange(items.map((x, idx) => idx === i ? s : x));
-  const remove = (i: number) => onChange(items.filter((_, idx) => idx !== i));
-
-  return (
-    <div className="cf-group">
-      <div className="cf-group-header">
-        <span className="cf-group-title">Servers</span>
-        <AddBtn label="Add server" onClick={() => onChange([...items, { name: '', listen: { address: '' }, upstream: '' }])} />
-      </div>
-      {items.length === 0 && (
-        <p className="cf-empty">No L4 servers defined. Add one to proxy TCP/UDP connections.</p>
-      )}
-      {items.map((sv, i) => (
-        <CollapseCard key={i} title={sv.name || <em>server #{i + 1}</em>} meta={sv.listen?.address || '—'}>
-          <div className="cf-card-actions"><RemoveBtn onClick={() => remove(i)} /></div>
-          <Field label="Name" required hint="Alphanumeric identifier for this stream server.">
-            <TextInput value={sv.name} onChange={v => update(i, { ...sv, name: v })} placeholder="l4-server" />
-          </Field>
-          <Field label="Listen address" hint='TCP/UDP address and port to bind to. Example: "0.0.0.0:5432".'>
-            <TextInput value={sv.listen?.address ?? ''} onChange={v => update(i, { ...sv, listen: { address: v } })} placeholder="0.0.0.0:5432" mono />
-          </Field>
-          <Field label="Upstream" hint="Name of the L4 upstream group that connections will be proxied to.">
-            <TextInput value={sv.upstream ?? ''} onChange={v => update(i, { ...sv, upstream: v })} placeholder="l4-backend" />
-          </Field>
-        </CollapseCard>
-      ))}
-    </div>
-  );
-}
-
-function L4UpstreamsSection({ upstreams, onChange }: {
-  upstreams: NonNullable<ConfigData['declaration']['layer4']>['upstreams'];
-  onChange: (u: NonNullable<ConfigData['declaration']['layer4']>['upstreams']) => void;
-}) {
-  const items = upstreams ?? [];
-  const update = (i: number, u: typeof items[0]) => onChange(items.map((x, idx) => idx === i ? u : x));
-  const remove = (i: number) => onChange(items.filter((_, idx) => idx !== i));
-
-  return (
-    <div className="cf-group">
-      <div className="cf-group-header">
-        <span className="cf-group-title">Upstreams</span>
-        <AddBtn label="Add upstream" onClick={() => onChange([...items, { name: '', origin: [{ server: '' }] }])} />
-      </div>
-      {items.length === 0 && (
-        <p className="cf-empty">No L4 upstreams defined. Add one to reference from an L4 server.</p>
-      )}
-      {items.map((up, i) => (
-        <CollapseCard key={i} title={up.name || <em>upstream #{i + 1}</em>} meta={`${up.origin?.length ?? 0} origin${(up.origin?.length ?? 0) !== 1 ? 's' : ''}`}>
-          <div className="cf-card-actions"><RemoveBtn onClick={() => remove(i)} /></div>
-          <Field label="Name" required hint="Alphanumeric identifier for this stream upstream group.">
-            <TextInput value={up.name} onChange={v => update(i, { ...up, name: v })} placeholder="l4-backend" />
-          </Field>
-          <div className="cf-subsection">
-            <div className="cf-subsection-header">
-              <span className="cf-subsection-title">Origins</span>
-              <AddBtn label="Add origin" onClick={() => update(i, { ...up, origin: [...(up.origin ?? []), { server: '' }] })} />
-            </div>
-            <p className="cf-hint cf-hint-top">Backend server addresses for this upstream group.</p>
-            {(up.origin ?? []).map((o, oi) => (
-              <div key={oi} className="cf-inline-row">
-                <TextInput
-                  value={o.server}
-                  onChange={v => update(i, { ...up, origin: (up.origin ?? []).map((x, xIdx) => xIdx === oi ? { ...x, server: v } : x) })}
-                  placeholder="10.0.0.1:5432"
-                  mono
-                />
-                <RemoveBtn onClick={() => update(i, { ...up, origin: (up.origin ?? []).filter((_, xIdx) => xIdx !== oi) })} />
-              </div>
-            ))}
-          </div>
-        </CollapseCard>
-      ))}
-    </div>
-  );
-}
-
-// ─── Layer 4 wrapper ──────────────────────────────────────────────────────────
-
-function Layer4Section({ servers, onServersChange, upstreams, onUpstreamsChange }: {
-  servers: NonNullable<ConfigData['declaration']['layer4']>['servers'];
-  onServersChange: (s: NonNullable<ConfigData['declaration']['layer4']>['servers']) => void;
-  upstreams: NonNullable<ConfigData['declaration']['layer4']>['upstreams'];
-  onUpstreamsChange: (u: NonNullable<ConfigData['declaration']['layer4']>['upstreams']) => void;
-}) {
-  return (
-    <section className="cf-section">
-      <SectionTitle title="Layer 4 (TCP/UDP)" sub="Stream proxy servers and upstream groups — optional" />
-      <L4ServersSection servers={servers} onChange={onServersChange} />
-      <L4UpstreamsSection upstreams={upstreams} onChange={onUpstreamsChange} />
-    </section>
-  );
-}
-
-// ─── Root component ───────────────────────────────────────────────────────────
-
-interface ConfigFormProps {
-  initialJson: string;
-  onChange: (json: string) => void;
-}
-
-const DEFAULT_CFG: ConfigData = {
-  output: { type: 'nms', nms: emptyNms(), nginxone: emptyNginxOne() },
-  declaration: { http: { servers: [], upstreams: [] }, layer4: { servers: [], upstreams: [] } },
-};
-
 export function ConfigForm({ initialJson, onChange }: ConfigFormProps) {
   const [cfg, setCfg] = useState<ConfigData>(() => parseConfig(initialJson) ?? DEFAULT_CFG);
+  const [activeSection, setActiveSection] = useState('cf-sec-output');
 
   useEffect(() => {
     const parsed = parseConfig(initialJson);
     if (parsed) setCfg(parsed);
   }, [initialJson]);
 
+  // Track active section via IntersectionObserver
+  useEffect(() => {
+    const ids = NAV_ITEMS.map(n => n.id);
+    const observers: IntersectionObserver[] = [];
+    const visible = new Set<string>();
+
+    ids.forEach(id => {
+      const el = document.getElementById(id);
+      if (!el) return;
+      const obs = new IntersectionObserver(
+        entries => {
+          entries.forEach(e => {
+            if (e.isIntersecting) visible.add(id); else visible.delete(id);
+          });
+          // Pick the topmost visible section
+          const first = ids.find(i => visible.has(i));
+          if (first) setActiveSection(first);
+        },
+        { rootMargin: '-10% 0px -80% 0px' }
+      );
+      obs.observe(el);
+      observers.push(obs);
+    });
+    return () => observers.forEach(o => o.disconnect());
+  }, []);
+
   const update = useCallback((next: ConfigData) => {
     setCfg(next);
     onChange(toJson(next));
   }, [onChange]);
 
-  return (
-    <div className="config-form">
-      <OutputSection output={cfg.output} onChange={o => update({ ...cfg, output: o })} />
-      <HttpSection
-        servers={cfg.declaration.http?.servers ?? []}
-        onServersChange={s => update({ ...cfg, declaration: { ...cfg.declaration, http: { ...cfg.declaration.http, servers: s } } })}
-        upstreams={cfg.declaration.http?.upstreams ?? []}
-        onUpstreamsChange={u => update({ ...cfg, declaration: { ...cfg.declaration, http: { ...cfg.declaration.http, upstreams: u } } })}
-      />
-      <Layer4Section
-        servers={cfg.declaration.layer4?.servers}
-        onServersChange={s => update({ ...cfg, declaration: { ...cfg.declaration, layer4: { ...cfg.declaration.layer4, servers: s } } })}
-        upstreams={cfg.declaration.layer4?.upstreams}
-        onUpstreamsChange={u => update({ ...cfg, declaration: { ...cfg.declaration, layer4: { ...cfg.declaration.layer4, upstreams: u } } })}
-      />
+  const http = cfg.declaration.http ?? {};
+
+  return (
+    <div className="cf-layout">
+      <nav className="cf-sidenav">
+        {NAV_ITEMS.map(item => (
+          <button
+            key={item.id}
+            type="button"
+            className={`cf-sidenav-item${item.indent ? ' indent' : ''}${activeSection === item.id ? ' active' : ''}`}
+            onClick={() => scrollToSection(item.id)}
+          >
+            {item.label}
+          </button>
+        ))}
+      </nav>
+      <div className="config-form">
+        <OutputSection output={cfg.output} onChange={o => update({ ...cfg, output: o })} />
+        <HttpSection
+          http={http}
+          onChange={h => update({ ...cfg, declaration: { ...cfg.declaration, http: h } })}
+          resolvers={cfg.declaration.resolvers ?? []}
+          onResolversChange={v => update({ ...cfg, declaration: { ...cfg.declaration, resolvers: v } })}
+          certificates={cfg.declaration.certificates ?? []}
+          onCertificatesChange={v => update({ ...cfg, declaration: { ...cfg.declaration, certificates: v } })}
+          outputType={cfg.output.type}
+        />
+        <Layer4Section
+          servers={cfg.declaration.layer4?.servers}
+          onServersChange={s => update({ ...cfg, declaration: { ...cfg.declaration, layer4: { ...cfg.declaration.layer4, servers: s } } })}
+          upstreams={cfg.declaration.layer4?.upstreams}
+          onUpstreamsChange={u => update({ ...cfg, declaration: { ...cfg.declaration, layer4: { ...cfg.declaration.layer4, upstreams: u } } })}
+        />
+      </div>
     </div>
   );
 }
diff --git a/webui/src/components/configForm/ApiGatewayEditor.tsx b/webui/src/components/configForm/ApiGatewayEditor.tsx
new file mode 100644
index 00000000..87904817
--- /dev/null
+++ b/webui/src/components/configForm/ApiGatewayEditor.tsx
@@ -0,0 +1,471 @@
+import { useState, useRef, type ReactNode } from 'react';
+import type { APIGateway, HttpProfiles, AGWDeveloperPortal } from './types';
+import { emptyAGWRateLimit, emptyAGWAuthorization, emptyAGWCache, emptyAGWVisibility } from './defaults';
+import { Field, TextInput, NumberInput, SelectInput, ProfileSelect, Toggle, AddBtn, RemoveBtn } from './primitives';
+
+export function PathsInput({
+  value, onChange, placeholder,
+}: { value: string[]; onChange: (v: string[]) => void; placeholder?: string }) {
+  return (
+    <textarea
+      className="cf-input cf-textarea-sm cf-mono"
+      rows={3}
+      placeholder={placeholder ?? '/path/one\n/path/two'}
+      value={value.join('\n')}
+      onChange={e => onChange(e.target.value.split('\n').filter(Boolean))}
+      autoComplete="off"
+      spellCheck={false}
+    />
+  );
+}
+
+export function AgwCard({
+  title, right, children,
+}: { title: string; right: ReactNode; children?: ReactNode }) {
+  return (
+    <div className="cf-agw-card">
+      <div className="cf-agw-card-header">
+        <span className="cf-agw-card-title">{title}</span>
+        {right}
+      </div>
+      {children && <div className="cf-agw-card-body">{children}</div>}
+    </div>
+  );
+}
+
+export function ApiGatewayEditor({
+  agw, onChange, profiles = { rateLimitNames: [], authClientNames: [], authServerNames: [], authzNames: [], cacheNames: [] },
+}: { agw: APIGateway | undefined; onChange: (agw: APIGateway | undefined) => void; profiles?: HttpProfiles }) {
+  const enabled = agw != null;
+  const g = agw ?? {};
+  const [schemaInputMode, setSchemaInputMode] = useState<'url' | 'file'>('url');
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  if (!enabled) {
+    return (
+      <div className="cf-subsection cf-subsection-agw">
+        <div className="cf-subsection-header">
+          <span className="cf-subsection-title">API Gateway</span>
+          <Toggle checked={false} onChange={v => v && onChange({})} label="Disabled" />
+        </div>
+      </div>
+    );
+  }
+
+  // — OpenAPI Schema —
+  const schemaEnabled = g.openapi_schema != null;
+  const schema = g.openapi_schema ?? {};
+
+  // — API Gateway settings —
+  const apiGwEnabled = g.api_gateway != null;
+  const apiGw = g.api_gateway ?? {};
+
+  // — Developer Portal —
+  const devPortalEnabled = g.developer_portal != null;
+  const dp = g.developer_portal ?? {};
+
+  // — Rate Limiting —
+  const rateLimits = g.rate_limit ?? [];
+
+  // — Authentication —
+  const authEnabled = g.authentication != null;
+  const auth = g.authentication ?? {};
+
+  // — Authorization —
+  const authzItems = g.authorization ?? [];
+
+  // — Cache —
+  const cacheItems = g.cache ?? [];
+
+  // — Visibility —
+  const visibilityItems = g.visibility ?? [];
+
+  return (
+    <div className="cf-subsection cf-subsection-agw">
+      <div className="cf-subsection-header">
+        <span className="cf-subsection-title">API Gateway</span>
+        <Toggle checked={true} onChange={v => !v && onChange(undefined)} label="Enabled" />
+      </div>
+
+      {/* OpenAPI Schema */}
+      <AgwCard
+        title="OpenAPI Schema"
+        right={
+          <Toggle
+            checked={schemaEnabled}
+            onChange={v => onChange(v ? { ...g, openapi_schema: { content: '' } } : { ...g, openapi_schema: undefined })}
+            label={schemaEnabled ? 'Configured' : 'Not configured'}
+          />
+        }
+      >
+        {schemaEnabled && (
+          <>
+            <div className="cf-agw-schema-mode">
+              <button
+                className={`cf-agw-mode-btn${schemaInputMode === 'url' ? ' active' : ''}`}
+                onClick={() => setSchemaInputMode('url')}
+                type="button"
+              >URL</button>
+              <button
+                className={`cf-agw-mode-btn${schemaInputMode === 'file' ? ' active' : ''}`}
+                onClick={() => { setSchemaInputMode('file'); onChange({ ...g, openapi_schema: { ...schema, content: '' } }); }}
+                type="button"
+              >Local file</button>
+            </div>
+            {schemaInputMode === 'url' ? (
+              <Field label="URL" span="full"
+                hint="HTTP/HTTPS URL to the OpenAPI schema (JSON or YAML)."
+                error={!schema.content?.trim() ? 'Required' : undefined}>
+                <TextInput
+                  value={schema.content ?? ''}
+                  onChange={v => onChange({ ...g, openapi_schema: { ...schema, content: v } })}
+                  placeholder="https://example.com/openapi.yaml"
+                  mono
+                  error={!schema.content?.trim()}
+                />
+              </Field>
+            ) : (
+              <Field label="File" span="full"
+                hint="Select a local OpenAPI JSON or YAML file. It will be base64-encoded and stored in the declaration.">
+                <div className="cf-agw-file-row">
+                  <input
+                    ref={fileInputRef}
+                    type="file"
+                    accept=".json,.yaml,.yml"
+                    className="cf-agw-file-input"
+                    onChange={e => {
+                      const file = e.target.files?.[0];
+                      if (!file) return;
+                      const reader = new FileReader();
+                      reader.onload = () => {
+                        const b64 = btoa(
+                          new Uint8Array(reader.result as ArrayBuffer)
+                            .reduce((s, b) => s + String.fromCharCode(b), '')
+                        );
+                        onChange({ ...g, openapi_schema: { ...schema, content: b64 } });
+                      };
+                      reader.readAsArrayBuffer(file);
+                    }}
+                  />
+                  {schema.content && (
+                    <span className="cf-agw-file-ok">Encoded ({Math.ceil(schema.content.length * 3 / 4)} bytes)</span>
+                  )}
+                </div>
+              </Field>
+            )}
+          </>
+        )}
+      </AgwCard>
+
+      {/* API Gateway Settings */}
+      <AgwCard
+        title="API Gateway Settings"
+        right={
+          <Toggle
+            checked={apiGwEnabled}
+            onChange={v => onChange(v
+              ? { ...g, api_gateway: { enabled: true, strip_uri: false, server_url: '' } }
+              : { ...g, api_gateway: undefined })}
+            label={apiGwEnabled ? 'Configured' : 'Not configured'}
+          />
+        }
+      >
+        {apiGwEnabled && (
+          <div className="cf-grid-2">
+            <Field label="Server URL"
+              hint='Full URL of the upstream API server for proxy_pass. Example: "http://api-backend".'
+              error={!apiGw.server_url?.trim() ? 'Required' : undefined}>
+              <TextInput
+                value={apiGw.server_url ?? ''}
+                onChange={v => onChange({ ...g, api_gateway: { ...apiGw, server_url: v } })}
+                placeholder="http://api-backend"
+                mono
+                error={!apiGw.server_url?.trim()}
+              />
+            </Field>
+            <Field label="Options">
+              <div className="cf-agw-toggles">
+                <Toggle
+                  checked={apiGw.enabled ?? true}
+                  onChange={v => onChange({ ...g, api_gateway: { ...apiGw, enabled: v } })}
+                  label="Enabled"
+                />
+                <Toggle
+                  checked={apiGw.strip_uri ?? false}
+                  onChange={v => onChange({ ...g, api_gateway: { ...apiGw, strip_uri: v } })}
+                  label="Strip URI prefix"
+                />
+              </div>
+            </Field>
+          </div>
+        )}
+      </AgwCard>
+
+      {/* Developer Portal */}
+      <AgwCard
+        title="Developer Portal"
+        right={
+          <Toggle
+            checked={devPortalEnabled}
+            onChange={v => onChange(v
+              ? { ...g, developer_portal: { enabled: true, type: 'redocly', redocly: { uri: '/devportal.html' } } }
+              : { ...g, developer_portal: undefined })}
+            label={devPortalEnabled ? 'Configured' : 'Not configured'}
+          />
+        }
+      >
+        {devPortalEnabled && (
+          <>
+            <div className="cf-grid-2">
+              <Field label="Type"
+                hint='"redocly" serves an HTML viewer for the OpenAPI spec. "backstage" registers the API in Backstage.'
+                error={!dp.type ? 'Required' : undefined}>
+                <SelectInput
+                  value={dp.type ?? ''}
+                  onChange={v => {
+                    const next: AGWDeveloperPortal = { ...dp, type: v };
+                    if (v === 'redocly' && !next.redocly) next.redocly = { uri: '/devportal.html' };
+                    if (v === 'backstage' && !next.backstage) next.backstage = { name: '', lifecycle: 'production', owner: '', system: '' };
+                    onChange({ ...g, developer_portal: next });
+                  }}
+                  options={[
+                    { value: '',          label: '— select type —' },
+                    { value: 'redocly',   label: 'Redocly (HTML viewer)' },
+                    { value: 'backstage', label: 'Backstage (catalog)' },
+                  ]}
+                  error={!dp.type}
+                />
+              </Field>
+              <Field label="Enable">
+                <Toggle
+                  checked={dp.enabled ?? true}
+                  onChange={v => onChange({ ...g, developer_portal: { ...dp, enabled: v } })}
+                  label={dp.enabled ?? true ? 'Enabled' : 'Disabled'}
+                />
+              </Field>
+            </div>
+            {dp.type === 'redocly' && (
+              <Field label="Redocly URI" hint='URI path that serves the Redocly HTML viewer. Example: "/devportal.html".'
+                error={!dp.redocly?.uri?.trim() ? 'Required' : undefined}>
+                <TextInput
+                  value={dp.redocly?.uri ?? '/devportal.html'}
+                  onChange={v => onChange({ ...g, developer_portal: { ...dp, redocly: { uri: v } } })}
+                  placeholder="/devportal.html"
+                  mono
+                  error={!dp.redocly?.uri?.trim()}
+                />
+              </Field>
+            )}
+            {dp.type === 'backstage' && (
+              <div className="cf-grid-2">
+                <Field label="Name" hint="API name as it will appear in Backstage."
+                  error={!dp.backstage?.name?.trim() ? 'Required' : undefined}>
+                  <TextInput value={dp.backstage?.name ?? ''} onChange={v => onChange({ ...g, developer_portal: { ...dp, backstage: { ...(dp.backstage ?? {}), name: v } } })} placeholder="my-api" error={!dp.backstage?.name?.trim()} />
+                </Field>
+                <Field label="Lifecycle" hint='Backstage lifecycle stage, e.g. "production" or "experimental".'
+                  error={!dp.backstage?.lifecycle?.trim() ? 'Required' : undefined}>
+                  <TextInput value={dp.backstage?.lifecycle ?? 'production'} onChange={v => onChange({ ...g, developer_portal: { ...dp, backstage: { ...(dp.backstage ?? {}), lifecycle: v } } })} placeholder="production" error={!dp.backstage?.lifecycle?.trim()} />
+                </Field>
+                <Field label="Owner" hint="Team or user that owns this API in Backstage."
+                  error={!dp.backstage?.owner?.trim() ? 'Required' : undefined}>
+                  <TextInput value={dp.backstage?.owner ?? ''} onChange={v => onChange({ ...g, developer_portal: { ...dp, backstage: { ...(dp.backstage ?? {}), owner: v } } })} placeholder="team-platform" error={!dp.backstage?.owner?.trim()} />
+                </Field>
+                <Field label="System" hint="Optional Backstage system this API belongs to.">
+                  <TextInput value={dp.backstage?.system ?? ''} onChange={v => onChange({ ...g, developer_portal: { ...dp, backstage: { ...(dp.backstage ?? {}), system: v } } })} placeholder="api-platform" />
+                </Field>
+              </div>
+            )}
+          </>
+        )}
+      </AgwCard>
+
+      {/* Rate Limiting */}
+      <AgwCard
+        title="Rate Limiting"
+        right={<AddBtn label="Add rule" onClick={() => onChange({ ...g, rate_limit: [...rateLimits, emptyAGWRateLimit()] })} />}
+      >
+        {rateLimits.length === 0
+          ? <p className="cf-empty cf-empty-sm">No rate limiting rules. Add one to reference a pre-defined rate limit profile.</p>
+          : rateLimits.map((rl, ri) => (
+            <div key={ri} className="cf-agw-item-row">
+              <Field label="Profile" hint="Name of the rate limit profile defined in the HTTP section."
+                error={!rl.profile?.trim() ? 'Required' : undefined}>
+                <ProfileSelect value={rl.profile ?? ''} onChange={v => onChange({ ...g, rate_limit: rateLimits.map((x, idx) => idx === ri ? { ...x, profile: v } : x) })} options={profiles.rateLimitNames} placeholder="my-rate-limit" error={!rl.profile?.trim()} />
+              </Field>
+              <Field label="HTTP code" hint="Status code returned when rate-limited.">
+                <NumberInput value={rl.httpcode ?? 429} onChange={v => onChange({ ...g, rate_limit: rateLimits.map((x, idx) => idx === ri ? { ...x, httpcode: v } : x) })} />
+              </Field>
+              <Field label="Burst" hint="Extra requests to queue before rejecting. 0 = no burst.">
+                <NumberInput value={rl.burst ?? 0} onChange={v => onChange({ ...g, rate_limit: rateLimits.map((x, idx) => idx === ri ? { ...x, burst: v } : x) })} />
+              </Field>
+              <Field label="Delay" hint="Requests to delay before the limit applies. 0 = nodelay.">
+                <NumberInput value={rl.delay ?? 0} onChange={v => onChange({ ...g, rate_limit: rateLimits.map((x, idx) => idx === ri ? { ...x, delay: v } : x) })} />
+              </Field>
+              <Field label="Paths" hint="Paths this rule applies to, one per line. Empty = all paths.">
+                <PathsInput value={rl.paths ?? []} onChange={v => onChange({ ...g, rate_limit: rateLimits.map((x, idx) => idx === ri ? { ...x, paths: v } : x) })} />
+              </Field>
+              <Field label="Enforce on paths">
+                <Toggle checked={rl.enforceOnPaths ?? true} onChange={v => onChange({ ...g, rate_limit: rateLimits.map((x, idx) => idx === ri ? { ...x, enforceOnPaths: v } : x) })} label={rl.enforceOnPaths ?? true ? 'Yes' : 'No'} />
+              </Field>
+              <div className="cf-agw-item-remove"><RemoveBtn onClick={() => onChange({ ...g, rate_limit: rateLimits.filter((_, idx) => idx !== ri) })} /></div>
+            </div>
+          ))
+        }
+      </AgwCard>
+
+      {/* Authentication */}
+      <AgwCard
+        title="Authentication"
+        right={
+          <Toggle
+            checked={authEnabled}
+            onChange={v => onChange(v
+              ? { ...g, authentication: { client: [{ profile: '' }], enforceOnPaths: true, paths: [] } }
+              : { ...g, authentication: undefined })}
+            label={authEnabled ? 'Configured' : 'Not configured'}
+          />
+        }
+      >
+        {authEnabled && (
+          <div className="cf-grid-2">
+            <div>
+              <div className="cf-subsection-header" style={{ marginBottom: '0.5rem' }}>
+                <span style={{ fontSize: '0.8rem', fontWeight: 500 }}>Client profiles</span>
+                <AddBtn label="Add" onClick={() => onChange({ ...g, authentication: { ...auth, client: [...(auth.client ?? []), { profile: '' }] } })} />
+              </div>
+              {(auth.client ?? []).length === 0
+                ? <p className="cf-hint">No client profiles. Add one to reference an authentication profile.</p>
+                : (auth.client ?? []).map((ac, aci) => (
+                  <div key={aci} className="cf-agw-item-row" style={{ marginBottom: '0.4rem' }}>
+                    <Field label={`Profile ${aci + 1}`} required error={!ac.profile?.trim() ? 'Required' : undefined}>
+                      <ProfileSelect
+                        value={ac.profile ?? ''}
+                        onChange={v => onChange({ ...g, authentication: { ...auth, client: (auth.client ?? []).map((x, j) => j === aci ? { ...x, profile: v } : x) } })}
+                        options={profiles.authClientNames}
+                        placeholder="jwt-auth"
+                        error={!ac.profile?.trim()}
+                      />
+                    </Field>
+                    <div className="cf-agw-item-remove">
+                      <RemoveBtn onClick={() => onChange({ ...g, authentication: { ...auth, client: (auth.client ?? []).filter((_, j) => j !== aci) } })} />
+                    </div>
+                  </div>
+                ))
+              }
+            </div>
+            <div>
+              <Field label="Enforce on paths">
+                <Toggle
+                  checked={auth.enforceOnPaths ?? true}
+                  onChange={v => onChange({ ...g, authentication: { ...auth, enforceOnPaths: v } })}
+                  label={auth.enforceOnPaths ?? true ? 'Yes' : 'No'}
+                />
+              </Field>
+              <Field label="Paths" hint="Paths this policy applies to, one per line. Empty = all paths.">
+                <PathsInput value={auth.paths ?? []} onChange={v => onChange({ ...g, authentication: { ...auth, paths: v } })} />
+              </Field>
+            </div>
+          </div>
+        )}
+      </AgwCard>
+
+      {/* Authorization */}
+      <AgwCard
+        title="Authorization"
+        right={<AddBtn label="Add profile" onClick={() => onChange({ ...g, authorization: [...authzItems, emptyAGWAuthorization()] })} />}
+      >
+        {authzItems.length === 0
+          ? <p className="cf-empty cf-empty-sm">No authorization rules. Add a profile reference to enforce access control.</p>
+          : authzItems.map((az, ai) => (
+            <div key={ai} className="cf-agw-item-row">
+              <Field label="Profile" required hint="Name of an authorization profile defined in the HTTP section."
+                error={!az.profile?.trim() ? 'Required' : undefined}>
+                <ProfileSelect value={az.profile} onChange={v => onChange({ ...g, authorization: authzItems.map((x, idx) => idx === ai ? { ...x, profile: v } : x) })} options={profiles.authzNames} placeholder="my-authz-profile" error={!az.profile?.trim()} />
+              </Field>
+              <Field label="Paths" hint="Paths this rule applies to, one per line. Empty = all.">
+                <PathsInput value={az.paths ?? []} onChange={v => onChange({ ...g, authorization: authzItems.map((x, idx) => idx === ai ? { ...x, paths: v } : x) })} />
+              </Field>
+              <Field label="Enforce on paths">
+                <Toggle checked={az.enforceOnPaths ?? true} onChange={v => onChange({ ...g, authorization: authzItems.map((x, idx) => idx === ai ? { ...x, enforceOnPaths: v } : x) })} label={az.enforceOnPaths ?? true ? 'Yes' : 'No'} />
+              </Field>
+              <div className="cf-agw-item-remove"><RemoveBtn onClick={() => onChange({ ...g, authorization: authzItems.filter((_, idx) => idx !== ai) })} /></div>
+            </div>
+          ))
+        }
+      </AgwCard>
+
+      {/* Cache */}
+      <AgwCard
+        title="Cache"
+        right={<AddBtn label="Add profile" onClick={() => onChange({ ...g, cache: [...cacheItems, emptyAGWCache()] })} />}
+      >
+        {cacheItems.length === 0
+          ? <p className="cf-empty cf-empty-sm">No cache configurations. Add a profile reference to enable response caching.</p>
+          : cacheItems.map((c, ci) => (
+            <div key={ci} className="cf-agw-item-row">
+              <Field label="Profile" required hint="Name of a cache zone profile defined in the HTTP section."
+                error={!c.profile?.trim() ? 'Required' : undefined}>
+                <ProfileSelect value={c.profile} onChange={v => onChange({ ...g, cache: cacheItems.map((x, idx) => idx === ci ? { ...x, profile: v } : x) })} options={profiles.cacheNames} placeholder="my-cache" error={!c.profile?.trim()} />
+              </Field>
+              <Field label="Cache key" hint='NGINX variable expression for the cache key.'>
+                <TextInput value={c.key ?? '$scheme$proxy_host$request_uri'} onChange={v => onChange({ ...g, cache: cacheItems.map((x, idx) => idx === ci ? { ...x, key: v } : x) })} placeholder="$scheme$proxy_host$request_uri" mono />
+              </Field>
+              <Field label="Paths" hint="Paths this cache applies to, one per line. Empty = all.">
+                <PathsInput value={c.paths ?? []} onChange={v => onChange({ ...g, cache: cacheItems.map((x, idx) => idx === ci ? { ...x, paths: v } : x) })} />
+              </Field>
+              <Field label="Enforce on paths">
+                <Toggle checked={c.enforceOnPaths ?? true} onChange={v => onChange({ ...g, cache: cacheItems.map((x, idx) => idx === ci ? { ...x, enforceOnPaths: v } : x) })} label={c.enforceOnPaths ?? true ? 'Yes' : 'No'} />
+              </Field>
+              <div className="cf-agw-item-remove"><RemoveBtn onClick={() => onChange({ ...g, cache: cacheItems.filter((_, idx) => idx !== ci) })} /></div>
+            </div>
+          ))
+        }
+      </AgwCard>
+
+      {/* Visibility */}
+      <AgwCard
+        title="Visibility"
+        right={<AddBtn label="Add provider" onClick={() => onChange({ ...g, visibility: [...visibilityItems, emptyAGWVisibility()] })} />}
+      >
+        {visibilityItems.length === 0
+          ? <p className="cf-empty cf-empty-sm">No visibility providers configured.</p>
+          : visibilityItems.map((vis, vi) => (
+            <div key={vi} className="cf-agw-item-row">
+              <Field label="Type" hint='"moesif" enables API analytics via the Moesif NGINX plugin.'
+                error={!vis.type ? 'Required' : undefined}>
+                <SelectInput
+                  value={vis.type ?? ''}
+                  onChange={v => {
+                    const next = { ...vis, type: v };
+                    if (v === 'moesif' && !next.moesif) next.moesif = { application_id: '', plugin_path: '/usr/local/share/lua/5.1/resty/moesif' };
+                    onChange({ ...g, visibility: visibilityItems.map((x, idx) => idx === vi ? next : x) });
+                  }}
+                  options={[
+                    { value: '',       label: '— select type —' },
+                    { value: 'moesif', label: 'Moesif (API analytics)' },
+                  ]}
+                  error={!vis.type}
+                />
+              </Field>
+              <Field label="Enable">
+                <Toggle checked={vis.enabled ?? true} onChange={v => onChange({ ...g, visibility: visibilityItems.map((x, idx) => idx === vi ? { ...x, enabled: v } : x) })} label={vis.enabled ?? true ? 'Enabled' : 'Disabled'} />
+              </Field>
+              {vis.type === 'moesif' && (
+                <>
+                  <Field label="Application ID" required hint="Your Moesif application ID from the Moesif dashboard."
+                    error={!vis.moesif?.application_id?.trim() ? 'Required' : undefined}>
+                    <TextInput value={vis.moesif?.application_id ?? ''} onChange={v => onChange({ ...g, visibility: visibilityItems.map((x, idx) => idx === vi ? { ...x, moesif: { ...(x.moesif ?? {}), application_id: v } } : x) })} placeholder="your-moesif-app-id" error={!vis.moesif?.application_id?.trim()} />
+                  </Field>
+                  <Field label="Plugin path" hint='Path to the Moesif Lua plugin. Default: "/usr/local/share/lua/5.1/resty/moesif".'>
+                    <TextInput value={vis.moesif?.plugin_path ?? '/usr/local/share/lua/5.1/resty/moesif'} onChange={v => onChange({ ...g, visibility: visibilityItems.map((x, idx) => idx === vi ? { ...x, moesif: { ...(x.moesif ?? {}), plugin_path: v } } : x) })} placeholder="/usr/local/share/lua/5.1/resty/moesif" mono />
+                  </Field>
+                </>
+              )}
+              <div className="cf-agw-item-remove"><RemoveBtn onClick={() => onChange({ ...g, visibility: visibilityItems.filter((_, idx) => idx !== vi) })} /></div>
+            </div>
+          ))
+        }
+      </AgwCard>
+    </div>
+  );
+}
diff --git a/webui/src/components/configForm/HttpSection.tsx b/webui/src/components/configForm/HttpSection.tsx
new file mode 100644
index 00000000..77bb4cd3
--- /dev/null
+++ b/webui/src/components/configForm/HttpSection.tsx
@@ -0,0 +1,191 @@
+import type {
+  ConfigData, HttpResolver, HttpProfiles, NMSCertificate,
+} from './types';
+import { emptyCertificate, emptyLogProfile } from './defaults';
+import { SectionTitle, Field, TextInput, SelectInput, AddBtn, RemoveBtn, CollapseCard } from './primitives';
+import { ProfilesSection } from './ProfilesSection';
+import { ServersSection } from './ServersSection';
+import { UpstreamsSection } from './UpstreamsSection';
+import { PoliciesEditor } from './OutputSection';
+
+type Http = NonNullable<ConfigData['declaration']['http']>;
+
+export function HttpSection({ http, onChange, resolvers, onResolversChange, certificates, onCertificatesChange, outputType }: {
+  http: Http;
+  onChange: (h: Http) => void;
+  resolvers: HttpResolver[];
+  onResolversChange: (v: HttpResolver[]) => void;
+  certificates: NMSCertificate[];
+  onCertificatesChange: (v: NMSCertificate[]) => void;
+  outputType?: 'nim' | 'n1c';
+}) {
+  const servers      = http.servers      ?? [];
+  const upstreams    = http.upstreams    ?? [];
+  const rateLimits   = http.rate_limit   ?? [];
+  const authentication = http.authentication ?? { client: [] };
+  const authorization  = http.authorization  ?? [];
+  const cache          = http.cache          ?? [];
+  const maps           = http.maps           ?? [];
+  const logformats     = http.logformats     ?? [];
+  const njs            = http.njs            ?? [];
+  const njsProfiles    = http.njs_profiles   ?? [];
+  const acmeIssuers    = http.acme_issuers   ?? [];
+  const nginxPlusApi   = http.nginx_plus_api;
+  const policies       = http.policies       ?? [];
+  const logProfiles    = http.log_profiles   ?? [];
+
+  const njsProfileNames = njsProfiles.map(p => p.name).filter(Boolean);
+  const authServerNames = (authentication.server ?? []).map(s => s.name).filter(Boolean);
+  const resolverNames   = resolvers.map(r => r.name).filter(Boolean);
+
+  const profiles: HttpProfiles = {
+    rateLimitNames:  rateLimits.map(r => r.name).filter(Boolean),
+    authClientNames: (authentication.client ?? []).map(c => c.name).filter(Boolean),
+    authServerNames,
+    authzNames:      authorization.map(a => a.name).filter(Boolean),
+    cacheNames:      cache.map(c => c.name).filter(Boolean),
+  };
+
+  return (
+    <section className="cf-section" id="cf-sec-http">
+      <SectionTitle title="HTTP" sub="Virtual servers and upstream groups for HTTP/S traffic" />
+
+      <div id="cf-sec-http-profiles">
+      <ProfilesSection
+        rateLimits={rateLimits}
+        onRateLimitsChange={v => onChange({ ...http, rate_limit: v })}
+        authentication={authentication}
+        onAuthenticationChange={v => onChange({ ...http, authentication: v })}
+        authorization={authorization}
+        onAuthorizationChange={v => onChange({ ...http, authorization: v })}
+        cache={cache}
+        onCacheChange={v => onChange({ ...http, cache: v })}
+        maps={maps}
+        onMapsChange={v => onChange({ ...http, maps: v })}
+        logformats={logformats}
+        onLogFormatsChange={v => onChange({ ...http, logformats: v })}
+        njs={njs}
+        onNjsChange={v => onChange({ ...http, njs: v })}
+        njsProfiles={njsProfiles}
+        onNjsProfilesChange={v => onChange({ ...http, njs_profiles: v })}
+        acmeIssuers={acmeIssuers}
+        onAcmeIssuersChange={v => onChange({ ...http, acme_issuers: v })}
+        nginxPlusApi={nginxPlusApi}
+        onNginxPlusApiChange={v => onChange({ ...http, nginx_plus_api: v })}
+        resolvers={resolvers}
+        onResolversChange={onResolversChange}
+      />
+      </div>
+
+      <div id="cf-sec-http-servers">
+      <ServersSection
+        servers={servers}
+        onChange={v => onChange({ ...http, servers: v })}
+        profiles={profiles}
+        authServerNames={authServerNames}
+        njsProfileNames={njsProfileNames}
+        resolverNames={resolverNames}
+      />
+      </div>
+
+      <div id="cf-sec-http-upstreams">
+      <UpstreamsSection
+        upstreams={upstreams}
+        onChange={v => onChange({ ...http, upstreams: v })}
+        resolverNames={resolverNames}
+      />
+      </div>
+
+      {/* Certificates — declaration-level, referenced by server TLS configs */}
+      <div className="cf-subsection" id="cf-sec-certificates">
+        <div className="cf-subsection-header">
+          <span className="cf-subsection-title">Certificates</span>
+          <AddBtn label="Add certificate" onClick={() => onCertificatesChange([...certificates, emptyCertificate()])} />
+        </div>
+        {certificates.length === 0
+          ? <p className="cf-empty">No certificates — add TLS certificate and key objects to include in the declaration.</p>
+          : certificates.map((cert, ci) => (
+            <CollapseCard key={ci} title={cert.name || <em>cert #{ci + 1}</em>} meta={cert.type} defaultOpen={!cert.name}>
+              <div className="cf-grid-2">
+                <Field label="Type">
+                  <SelectInput
+                    value={cert.type}
+                    onChange={v => onCertificatesChange(certificates.map((x, idx) => idx === ci ? { ...x, type: v as NMSCertificate['type'] } : x))}
+                    options={[{ value: 'certificate', label: 'Certificate' }, { value: 'key', label: 'Private key' }]}
+                  />
+                </Field>
+                <Field label="Name" required>
+                  <TextInput
+                    value={cert.name}
+                    onChange={v => onCertificatesChange(certificates.map((x, idx) => idx === ci ? { ...x, name: v } : x))}
+                    placeholder="my-tls-cert"
+                  />
+                </Field>
+                <Field label="Contents / URL" span="full" hint="PEM content or a URL/path to fetch it from.">
+                  <TextInput
+                    value={cert.contents?.content ?? ''}
+                    onChange={v => onCertificatesChange(certificates.map((x, idx) => idx === ci ? { ...x, contents: { content: v } } : x))}
+                    placeholder="-----BEGIN CERTIFICATE-----"
+                    mono
+                  />
+                </Field>
+              </div>
+              <div className="cf-card-actions"><RemoveBtn onClick={() => onCertificatesChange(certificates.filter((_, idx) => idx !== ci))} /></div>
+            </CollapseCard>
+          ))
+        }
+      </div>
+
+      {/* WAF Policies — declaration.http.policies */}
+      <div id="cf-sec-policies">
+        <PoliciesEditor
+          policies={policies}
+          onChange={v => onChange({ ...http, policies: v })}
+          outputType={outputType}
+        />
+      </div>
+
+      {/* Log Profiles — declaration.http.log_profiles */}
+      <div className="cf-subsection" id="cf-sec-log-profiles">
+        <div className="cf-subsection-header">
+          <span className="cf-subsection-title">Log Profiles</span>
+          <AddBtn label="Add profile" onClick={() => onChange({ ...http, log_profiles: [...logProfiles, emptyLogProfile()] })} />
+        </div>
+        {logProfiles.length === 0
+          ? <p className="cf-empty">No log profiles — add one to enable App Protect security event logging.</p>
+          : logProfiles.map((lp, li) => {
+            const ap = lp.app_protect ?? { name: '', format: 'default', type: 'blocked', max_request_size: '2k', max_message_size: '5k' };
+            return (
+              <CollapseCard key={li} title={ap.name || <em>log profile #{li + 1}</em>} meta={lp.type} defaultOpen={!ap.name}>
+                <div className="cf-grid-2">
+                  <Field label="Profile name" required>
+                    <TextInput
+                      value={ap.name}
+                      onChange={v => onChange({ ...http, log_profiles: logProfiles.map((x, idx) => idx === li ? { ...x, app_protect: { ...ap, name: v } } : x) })}
+                      placeholder="blocked-requests"
+                    />
+                  </Field>
+                  <Field label="Log format">
+                    <SelectInput
+                      value={ap.format ?? 'default'}
+                      onChange={v => onChange({ ...http, log_profiles: logProfiles.map((x, idx) => idx === li ? { ...x, app_protect: { ...ap, format: v } } : x) })}
+                      options={[{ value: 'default', label: 'default' }, { value: 'grpc', label: 'grpc' }, { value: 'arcsight', label: 'arcsight' }, { value: 'splunk', label: 'splunk' }, { value: 'user-defined', label: 'user-defined' }]}
+                    />
+                  </Field>
+                  <Field label="Log type">
+                    <SelectInput
+                      value={ap.type ?? 'blocked'}
+                      onChange={v => onChange({ ...http, log_profiles: logProfiles.map((x, idx) => idx === li ? { ...x, app_protect: { ...ap, type: v } } : x) })}
+                      options={[{ value: 'blocked', label: 'blocked' }, { value: 'illegal', label: 'illegal' }, { value: 'all', label: 'all' }]}
+                    />
+                  </Field>
+                </div>
+                <div className="cf-card-actions"><RemoveBtn onClick={() => onChange({ ...http, log_profiles: logProfiles.filter((_, idx) => idx !== li) })} /></div>
+              </CollapseCard>
+            );
+          })
+        }
+      </div>
+    </section>
+  );
+}
diff --git a/webui/src/components/configForm/Layer4Section.tsx b/webui/src/components/configForm/Layer4Section.tsx
new file mode 100644
index 00000000..998c72ac
--- /dev/null
+++ b/webui/src/components/configForm/Layer4Section.tsx
@@ -0,0 +1,134 @@
+import type { ConfigData } from './types';
+import { Field, TextInput, NumberInput, Toggle, AddBtn, RemoveBtn, CollapseCard, SectionTitle } from './primitives';
+import { SnippetEditor } from './LocationEditors';
+
+type L4Servers  = NonNullable<NonNullable<ConfigData['declaration']['layer4']>['servers']>;
+type L4Server   = L4Servers[number];
+type L4Upstreams = NonNullable<NonNullable<ConfigData['declaration']['layer4']>['upstreams']>;
+type L4Upstream = L4Upstreams[number];
+type L4Origin   = NonNullable<L4Upstream['origin']>[number];
+
+function L4ServersSection({ servers, onChange }: { servers: L4Servers; onChange: (s: L4Servers) => void }) {
+  const update = (i: number, s: L4Server) => onChange(servers.map((x, idx) => idx === i ? s : x));
+  const remove = (i: number) => onChange(servers.filter((_, idx) => idx !== i));
+  const emptyL4Server = (): L4Server => ({ name: '', listen: { address: '' } } as L4Server);
+
+  return (
+    <div className="cf-group">
+      <div className="cf-group-header">
+        <span className="cf-group-title">Layer 4 Servers</span>
+        <AddBtn label="Add server" onClick={() => onChange([...servers, emptyL4Server()])} />
+      </div>
+      {servers.length === 0 && <p className="cf-empty">No Layer 4 servers. Add a server to handle TCP/UDP traffic.</p>}
+      {servers.map((sv, i) => (
+        <CollapseCard key={i} title={(sv as any).name || <em>server #{i + 1}</em>} meta={(sv as any).listen?.address || '—'} defaultOpen={i === 0 && servers.length === 1}>
+          <div className="cf-card-actions"><RemoveBtn onClick={() => remove(i)} /></div>
+          <div className="cf-grid-2">
+            <Field label="Server name" required>
+              <TextInput value={(sv as any).name ?? ''} onChange={v => update(i, { ...sv, name: v } as L4Server)} placeholder="my-l4-server" />
+            </Field>
+            <Field label="Listen address" required hint='IP:port to listen on. Use "udp" suffix for UDP, e.g. "0.0.0.0:5000 udp".'>
+              <TextInput value={(sv as any).listen?.address ?? ''} onChange={v => update(i, { ...sv, listen: { ...(sv as any).listen, address: v } } as L4Server)} placeholder="0.0.0.0:9000" mono />
+            </Field>
+            <Field label="Upstream" hint="Name of the Layer 4 upstream group to proxy to.">
+              <TextInput value={(sv as any).upstream ?? ''} onChange={v => update(i, { ...sv, upstream: v } as L4Server)} placeholder="my-l4-upstream" />
+            </Field>
+            <Field label="Resolver">
+              <TextInput value={(sv as any).resolver ?? ''} onChange={v => update(i, { ...sv, resolver: v || undefined } as L4Server)} placeholder="my-resolver" />
+            </Field>
+          </div>
+          <div className="cf-field cf-field-inline">
+            <Toggle checked={!!(sv as any).listen?.ssl} onChange={v => update(i, { ...sv, listen: { ...(sv as any).listen, ssl: v } } as L4Server)} label="TLS passthrough" />
+            <p className="cf-hint">Enables SSL termination on the Layer 4 listener.</p>
+          </div>
+          <SnippetEditor snippet={(sv as any).snippet} onChange={v => update(i, { ...sv, snippet: v } as L4Server)} />
+        </CollapseCard>
+      ))}
+    </div>
+  );
+}
+
+function L4UpstreamsSection({ upstreams, onChange }: { upstreams: L4Upstreams; onChange: (u: L4Upstreams) => void }) {
+  const update = (i: number, u: L4Upstream) => onChange(upstreams.map((x, idx) => idx === i ? u : x));
+  const remove = (i: number) => onChange(upstreams.filter((_, idx) => idx !== i));
+  const emptyL4Upstream = (): L4Upstream => ({ name: '', origin: [] } as unknown as L4Upstream);
+  const emptyL4Origin = (): L4Origin => ({ server: '' } as L4Origin);
+
+  const addOrigin = (i: number) =>
+    update(i, { ...upstreams[i], origin: [...((upstreams[i] as any).origin ?? []), emptyL4Origin()] } as L4Upstream);
+  const updOrigin = (i: number, oi: number, o: L4Origin) =>
+    update(i, { ...upstreams[i], origin: ((upstreams[i] as any).origin ?? []).map((x: L4Origin, oIdx: number) => oIdx === oi ? o : x) } as L4Upstream);
+  const remOrigin = (i: number, oi: number) =>
+    update(i, { ...upstreams[i], origin: ((upstreams[i] as any).origin ?? []).filter((_: L4Origin, oIdx: number) => oIdx !== oi) } as L4Upstream);
+
+  return (
+    <div className="cf-group">
+      <div className="cf-group-header">
+        <span className="cf-group-title">Layer 4 Upstreams</span>
+        <AddBtn label="Add upstream" onClick={() => onChange([...upstreams, emptyL4Upstream()])} />
+      </div>
+      {upstreams.length === 0 && <p className="cf-empty">No Layer 4 upstreams. Add an upstream to define backend servers for TCP/UDP traffic.</p>}
+      {upstreams.map((up, i) => (
+        <CollapseCard key={i} title={(up as any).name || <em>upstream #{i + 1}</em>} meta={`${((up as any).origin ?? []).length} origin(s)`} defaultOpen={i === 0 && upstreams.length === 1}>
+          <div className="cf-card-actions"><RemoveBtn onClick={() => remove(i)} /></div>
+          <div className="cf-grid-2">
+            <Field label="Upstream name" required>
+              <TextInput value={(up as any).name ?? ''} onChange={v => update(i, { ...up, name: v } as L4Upstream)} placeholder="my-l4-upstream" />
+            </Field>
+            <Field label="Resolver">
+              <TextInput value={(up as any).resolver ?? ''} onChange={v => update(i, { ...up, resolver: v || undefined } as L4Upstream)} placeholder="my-resolver" />
+            </Field>
+          </div>
+          <div className="cf-subsection">
+            <div className="cf-subsection-header">
+              <span className="cf-subsection-title">Origins</span>
+              <AddBtn label="Add origin" onClick={() => addOrigin(i)} />
+            </div>
+            {((up as any).origin ?? []).length === 0
+              ? <p className="cf-hint">No origins. Add a backend server.</p>
+              : ((up as any).origin ?? []).map((o: L4Origin, oi: number) => (
+                <div key={oi} className="cf-origin-row">
+                  <Field label="Server address" hint='"host:port"'>
+                    <TextInput value={(o as any).server ?? ''} onChange={v => updOrigin(i, oi, { ...o, server: v } as L4Origin)} placeholder="10.0.0.1:9000" mono />
+                  </Field>
+                  <Field label="Weight">
+                    <NumberInput value={(o as any).weight ?? 1} onChange={v => updOrigin(i, oi, { ...o, weight: v } as L4Origin)} min={1} />
+                  </Field>
+                  <Field label="Max fails">
+                    <NumberInput value={(o as any).max_fails ?? 1} onChange={v => updOrigin(i, oi, { ...o, max_fails: v } as L4Origin)} min={0} />
+                  </Field>
+                  <Field label="Fail timeout">
+                    <TextInput value={(o as any).fail_timeout ?? '10s'} onChange={v => updOrigin(i, oi, { ...o, fail_timeout: v } as L4Origin)} placeholder="10s" mono />
+                  </Field>
+                  <Field label="Backup">
+                    <Toggle checked={(o as any).backup ?? false} onChange={v => updOrigin(i, oi, { ...o, backup: v } as L4Origin)} label="Backup only" />
+                  </Field>
+                  <div className="cf-origin-remove"><RemoveBtn onClick={() => remOrigin(i, oi)} /></div>
+                </div>
+              ))
+            }
+          </div>
+        </CollapseCard>
+      ))}
+    </div>
+  );
+}
+
+export { L4ServersSection, L4UpstreamsSection };
+
+export function Layer4Section({
+  servers, onServersChange, upstreams, onUpstreamsChange,
+}: {
+  servers: L4Servers | undefined;
+  onServersChange: (s: L4Servers) => void;
+  upstreams: L4Upstreams | undefined;
+  onUpstreamsChange: (u: L4Upstreams) => void;
+}) {
+  return (
+    <section className="cf-section" id="cf-sec-layer4">
+      <SectionTitle title="Layer 4 (TCP/UDP)" sub="Stream proxy servers and upstream groups — optional" />
+      <L4ServersSection servers={servers ?? []} onChange={onServersChange} />
+      <L4UpstreamsSection upstreams={upstreams ?? []} onChange={onUpstreamsChange} />
+    </section>
+  );
+}
diff --git a/webui/src/components/configForm/LocationEditors.tsx b/webui/src/components/configForm/LocationEditors.tsx
new file mode 100644
index 00000000..8b4a92f2
--- /dev/null
+++ b/webui/src/components/configForm/LocationEditors.tsx
@@ -0,0 +1,474 @@
+import type {
+  Log, AppProtect, SourceOfTruth, LocationHeaders, LocationAuth, AuthzRef,
+  CacheItem, RateLimitRef, HealthCheck, NjsHookServer, NjsHookLocation,
+} from './types';
+import { emptyNjsHookServer, emptyNjsHookLocation } from './defaults';
+import { Field, TextInput, NumberInput, SelectInput, ProfileSelect, Toggle, AddBtn, RemoveBtn } from './primitives';
+
+// ─── Constants ────────────────────────────────────────────────────────────────
+
+export const LOG_ERROR_LEVELS = [
+  { value: 'debug', label: 'debug' }, { value: 'info', label: 'info' },
+  { value: 'notice', label: 'notice' }, { value: 'warn', label: 'warn' },
+  { value: 'error', label: 'error' }, { value: 'crit', label: 'crit' },
+  { value: 'alert', label: 'alert' }, { value: 'emerg', label: 'emerg' },
+];
+
+export const NJS_SERVER_HOOK_TYPES = [
+  { value: 'js_preload_object', label: 'js_preload_object' },
+  { value: 'js_set', label: 'js_set' },
+];
+
+export const NJS_LOCATION_HOOK_TYPES = [
+  { value: 'js_body_filter', label: 'js_body_filter' },
+  { value: 'js_content', label: 'js_content' },
+  { value: 'js_header_filter', label: 'js_header_filter' },
+  { value: 'js_periodic', label: 'js_periodic' },
+  { value: 'js_preload_object', label: 'js_preload_object' },
+  { value: 'js_set', label: 'js_set' },
+];
+
+// ─── Log Editor ───────────────────────────────────────────────────────────────
+
+export function LogEditor({ log, onChange }: { log: Log | undefined; onChange: (l: Log | undefined) => void }) {
+  const enabled = log != null && (!!log.access || !!log.error);
+  const l = log ?? {};
+
+  return (
+    <div className="cf-subsection cf-subsection-tls">
+      <div className="cf-subsection-header">
+        <span className="cf-subsection-title">Logging</span>
+        <Toggle
+          checked={enabled}
+          onChange={v => onChange(v ? { access: { destination: 'syslog:server=127.0.0.1', format: 'combined' }, error: { destination: 'syslog:server=127.0.0.1', level: 'info' } } : undefined)}
+          label={enabled ? 'Configured' : 'Not configured'}
+        />
+      </div>
+      {enabled && (
+        <div className="cf-grid-2">
+          <Field label="Access log destination" hint='Destination for access logs, e.g. "/var/log/nginx/access.log" or "syslog:server=...".'>
+            <TextInput value={l.access?.destination ?? ''} onChange={v => onChange({ ...l, access: { ...(l.access ?? { destination: '', format: 'combined' }), destination: v } })} placeholder="/var/log/nginx/access.log" mono />
+          </Field>
+          <Field label="Access log format" hint='Log format name. Use "combined" for the default combined format.'>
+            <TextInput value={l.access?.format ?? 'combined'} onChange={v => onChange({ ...l, access: { ...(l.access ?? { destination: '' }), format: v } })} placeholder="combined" mono />
+          </Field>
+          <Field label="Error log destination" hint='Destination for error logs, e.g. "/var/log/nginx/error.log" or "syslog:server=...".'>
+            <TextInput value={l.error?.destination ?? ''} onChange={v => onChange({ ...l, error: { ...(l.error ?? { destination: '', level: 'info' }), destination: v } })} placeholder="/var/log/nginx/error.log" mono />
+          </Field>
+          <Field label="Error log level">
+            <SelectInput value={l.error?.level ?? 'info'} onChange={v => onChange({ ...l, error: { ...(l.error ?? { destination: '' }), level: v } })} options={LOG_ERROR_LEVELS} />
+          </Field>
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ─── App Protect Editor ───────────────────────────────────────────────────────
+
+export function AppProtectEditor({ ap, onChange }: { ap: AppProtect | undefined; onChange: (a: AppProtect | undefined) => void }) {
+  const enabled = ap != null;
+  const a = ap ?? { enabled: false, policy: '' };
+
+  return (
+    <div className="cf-subsection cf-subsection-tls">
+      <div className="cf-subsection-header">
+        <span className="cf-subsection-title">App Protect WAF</span>
+        <Toggle
+          checked={enabled}
+          onChange={v => onChange(v ? { enabled: true, policy: '', log: { enabled: false, profile_name: '', destination: '' } } : undefined)}
+          label={enabled ? 'Configured' : 'Not configured'}
+        />
+      </div>
+      {enabled && (
+        <div className="cf-grid-2">
+          <Field label="Policy name" required hint="Name of the App Protect policy (as defined in the output policies section)."
+            error={!a.policy?.trim() ? 'Required' : undefined}>
+            <TextInput value={a.policy} onChange={v => onChange({ ...a, policy: v })} placeholder="production-policy" error={!a.policy?.trim()} />
+          </Field>
+          <Field label="Enabled">
+            <Toggle checked={a.enabled ?? true} onChange={v => onChange({ ...a, enabled: v })} label={a.enabled ?? true ? 'Yes' : 'No'} />
+          </Field>
+          <Field label="Log profile" hint="Name of the App Protect log profile to use.">
+            <TextInput value={a.log?.profile_name ?? ''} onChange={v => onChange({ ...a, log: { ...(a.log ?? { enabled: true, destination: '' }), profile_name: v } })} placeholder="log_all" mono />
+          </Field>
+          <Field label="Log destination" hint='Log destination, e.g. "syslog:server=127.0.0.1:5144".'>
+            <TextInput value={a.log?.destination ?? ''} onChange={v => onChange({ ...a, log: { ...(a.log ?? { enabled: true, profile_name: '' }), destination: v } })} placeholder="syslog:server=127.0.0.1:5144" mono />
+          </Field>
+          <Field label="Log enabled">
+            <Toggle checked={a.log?.enabled ?? true} onChange={v => onChange({ ...a, log: { ...(a.log ?? { profile_name: '', destination: '' }), enabled: v } })} label={a.log?.enabled ?? true ? 'Yes' : 'No'} />
+          </Field>
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ─── Snippet Editor ───────────────────────────────────────────────────────────
+
+export function SnippetEditor({ snippet, onChange }: { snippet: SourceOfTruth | undefined; onChange: (s: SourceOfTruth | undefined) => void }) {
+  const enabled = snippet != null;
+
+  return (
+    <div className="cf-subsection cf-subsection-tls">
+      <div className="cf-subsection-header">
+        <span className="cf-subsection-title">Snippet</span>
+        <Toggle
+          checked={enabled}
+          onChange={v => onChange(v ? { content: '' } : undefined)}
+          label={enabled ? 'Configured' : 'Not configured'}
+        />
+      </div>
+      {enabled && (
+        <Field label="Content / URL" span="full" hint='URL or inline NGINX configuration snippet. Supports {{variable}} substitution and GitOps URLs.'>
+          <TextInput value={snippet?.content ?? ''} onChange={v => onChange({ ...(snippet ?? {}), content: v })} placeholder="https://example.com/snippet.conf" mono />
+        </Field>
+      )}
+    </div>
+  );
+}
+
+// ─── Headers Editor ───────────────────────────────────────────────────────────
+
+export function HeadersEditor({ headers, onChange }: { headers: LocationHeaders | undefined; onChange: (h: LocationHeaders | undefined) => void }) {
+  const enabled = headers != null;
+  const h = headers ?? {};
+
+  const addToServerSet = () => onChange({ ...h, to_server: { ...(h.to_server ?? {}), set: [...(h.to_server?.set ?? []), { name: '', value: '' }] } });
+  const addToServerDel = () => onChange({ ...h, to_server: { ...(h.to_server ?? {}), delete: [...(h.to_server?.delete ?? []), ''] } });
+  const addToClientAdd = () => onChange({ ...h, to_client: { ...(h.to_client ?? {}), add: [...(h.to_client?.add ?? []), { name: '', value: '' }] } });
+  const addToClientDel = () => onChange({ ...h, to_client: { ...(h.to_client ?? {}), delete: [...(h.to_client?.delete ?? []), ''] } });
+  const addToClientReplace = () => onChange({ ...h, to_client: { ...(h.to_client ?? {}), replace: [...(h.to_client?.replace ?? []), { name: '', value: '' }] } });
+
+  return (
+    <div className="cf-subsection cf-subsection-tls">
+      <div className="cf-subsection-header">
+        <span className="cf-subsection-title">Headers</span>
+        <Toggle
+          checked={enabled}
+          onChange={v => onChange(v ? {} : undefined)}
+          label={enabled ? 'Configured' : 'Not configured'}
+        />
+      </div>
+      {enabled && (
+        <>
+          {/* To Server */}
+          <div className="cf-subsection">
+            <div className="cf-subsection-header">
+              <span style={{ fontSize: '0.75rem', fontWeight: 600, color: 'var(--text-dim)' }}>To Server</span>
+              <div style={{ display: 'flex', gap: '0.35rem' }}>
+                <AddBtn label="Set" onClick={addToServerSet} />
+                <AddBtn label="Delete" onClick={addToServerDel} />
+              </div>
+            </div>
+            {(h.to_server?.set ?? []).map((hdr, i) => (
+              <div key={i} className="cf-origin-row" style={{ gridTemplateColumns: '1fr 1fr auto' }}>
+                <Field label="Name"><TextInput value={hdr.name} onChange={v => onChange({ ...h, to_server: { ...(h.to_server ?? {}), set: (h.to_server?.set ?? []).map((x, j) => j === i ? { ...x, name: v } : x) } })} placeholder="X-Custom-Header" mono /></Field>
+                <Field label="Value"><TextInput value={hdr.value} onChange={v => onChange({ ...h, to_server: { ...(h.to_server ?? {}), set: (h.to_server?.set ?? []).map((x, j) => j === i ? { ...x, value: v } : x) } })} placeholder="$remote_addr" mono /></Field>
+                <div className="cf-origin-remove"><RemoveBtn onClick={() => onChange({ ...h, to_server: { ...(h.to_server ?? {}), set: (h.to_server?.set ?? []).filter((_, j) => j !== i) } })} /></div>
+              </div>
+            ))}
+            {(h.to_server?.delete ?? []).map((name, i) => (
+              <div key={i} className="cf-inline-row">
+                <span style={{ fontSize: '0.73rem', color: 'var(--text-muted)', flexShrink: 0 }}>Delete:</span>
+                <TextInput value={name} onChange={v => onChange({ ...h, to_server: { ...(h.to_server ?? {}), delete: (h.to_server?.delete ?? []).map((x, j) => j === i ? v : x) } })} placeholder="Authorization" mono />
+                <RemoveBtn onClick={() => onChange({ ...h, to_server: { ...(h.to_server ?? {}), delete: (h.to_server?.delete ?? []).filter((_, j) => j !== i) } })} />
+              </div>
+            ))}
+          </div>
+          {/* To Client */}
+          <div className="cf-subsection">
+            <div className="cf-subsection-header">
+              <span style={{ fontSize: '0.75rem', fontWeight: 600, color: 'var(--text-dim)' }}>To Client</span>
+              <div style={{ display: 'flex', gap: '0.35rem' }}>
+                <AddBtn label="Add" onClick={addToClientAdd} />
+                <AddBtn label="Delete" onClick={addToClientDel} />
+                <AddBtn label="Replace" onClick={addToClientReplace} />
+              </div>
+            </div>
+            {(h.to_client?.add ?? []).map((hdr, i) => (
+              <div key={i} className="cf-origin-row" style={{ gridTemplateColumns: '1fr 1fr auto' }}>
+                <Field label="Add Name"><TextInput value={hdr.name} onChange={v => onChange({ ...h, to_client: { ...(h.to_client ?? {}), add: (h.to_client?.add ?? []).map((x, j) => j === i ? { ...x, name: v } : x) } })} placeholder="X-Response-Header" mono /></Field>
+                <Field label="Value"><TextInput value={hdr.value} onChange={v => onChange({ ...h, to_client: { ...(h.to_client ?? {}), add: (h.to_client?.add ?? []).map((x, j) => j === i ? { ...x, value: v } : x) } })} placeholder="my-value" mono /></Field>
+                <div className="cf-origin-remove"><RemoveBtn onClick={() => onChange({ ...h, to_client: { ...(h.to_client ?? {}), add: (h.to_client?.add ?? []).filter((_, j) => j !== i) } })} /></div>
+              </div>
+            ))}
+            {(h.to_client?.replace ?? []).map((hdr, i) => (
+              <div key={i} className="cf-origin-row" style={{ gridTemplateColumns: '1fr 1fr auto' }}>
+                <Field label="Replace Name"><TextInput value={hdr.name} onChange={v => onChange({ ...h, to_client: { ...(h.to_client ?? {}), replace: (h.to_client?.replace ?? []).map((x, j) => j === i ? { ...x, name: v } : x) } })} placeholder="Server" mono /></Field>
+                <Field label="Value"><TextInput value={hdr.value} onChange={v => onChange({ ...h, to_client: { ...(h.to_client ?? {}), replace: (h.to_client?.replace ?? []).map((x, j) => j === i ? { ...x, value: v } : x) } })} placeholder="nginx" mono /></Field>
+                <div className="cf-origin-remove"><RemoveBtn onClick={() => onChange({ ...h, to_client: { ...(h.to_client ?? {}), replace: (h.to_client?.replace ?? []).filter((_, j) => j !== i) } })} /></div>
+              </div>
+            ))}
+            {(h.to_client?.delete ?? []).map((name, i) => (
+              <div key={i} className="cf-inline-row">
+                <span style={{ fontSize: '0.73rem', color: 'var(--text-muted)', flexShrink: 0 }}>Delete:</span>
+                <TextInput value={name} onChange={v => onChange({ ...h, to_client: { ...(h.to_client ?? {}), delete: (h.to_client?.delete ?? []).map((x, j) => j === i ? v : x) } })} placeholder="X-Powered-By" mono />
+                <RemoveBtn onClick={() => onChange({ ...h, to_client: { ...(h.to_client ?? {}), delete: (h.to_client?.delete ?? []).filter((_, j) => j !== i) } })} />
+              </div>
+            ))}
+          </div>
+        </>
+      )}
+    </div>
+  );
+}
+
+// ─── Location Auth/Authz/Cache/RL/HealthCheck editors ────────────────────────
+
+export function LocationAuthEditor({ auth, authClientNames, authServerNames, onChange }: {
+  auth: LocationAuth | undefined;
+  authClientNames: string[];
+  authServerNames: string[];
+  onChange: (a: LocationAuth | undefined) => void;
+}) {
+  const enabled = auth != null;
+  const a = auth ?? {};
+
+  return (
+    <div className="cf-subsection cf-subsection-tls">
+      <div className="cf-subsection-header">
+        <span className="cf-subsection-title">Authentication</span>
+        <Toggle checked={enabled} onChange={v => onChange(v ? { client: [], server: [] } : undefined)} label={enabled ? 'Configured' : 'Not configured'} />
+      </div>
+      {enabled && (
+        <div className="cf-grid-2">
+          <div>
+            <div className="cf-subsection-header" style={{ marginBottom: '0.4rem' }}>
+              <span style={{ fontSize: '0.75rem', fontWeight: 600, color: 'var(--text-dim)' }}>Client profiles</span>
+              <AddBtn label="Add" onClick={() => onChange({ ...a, client: [...(a.client ?? []), { profile: '' }] })} />
+            </div>
+            {(a.client ?? []).length === 0
+              ? <p className="cf-hint">No client auth profiles.</p>
+              : (a.client ?? []).map((c, i) => (
+                <div key={i} className="cf-inline-row">
+                  <ProfileSelect value={c.profile ?? ''} onChange={v => onChange({ ...a, client: (a.client ?? []).map((x, j) => j === i ? { ...x, profile: v } : x) })} options={authClientNames} placeholder="jwt-auth" />
+                  <RemoveBtn onClick={() => onChange({ ...a, client: (a.client ?? []).filter((_, j) => j !== i) })} />
+                </div>
+              ))
+            }
+          </div>
+          <div>
+            <div className="cf-subsection-header" style={{ marginBottom: '0.4rem' }}>
+              <span style={{ fontSize: '0.75rem', fontWeight: 600, color: 'var(--text-dim)' }}>Server profiles</span>
+              <AddBtn label="Add" onClick={() => onChange({ ...a, server: [...(a.server ?? []), { profile: '' }] })} />
+            </div>
+            {(a.server ?? []).length === 0
+              ? <p className="cf-hint">No server auth profiles.</p>
+              : (a.server ?? []).map((s, i) => (
+                <div key={i} className="cf-inline-row">
+                  <ProfileSelect value={s.profile ?? ''} onChange={v => onChange({ ...a, server: (a.server ?? []).map((x, j) => j === i ? { ...x, profile: v } : x) })} options={authServerNames} placeholder="token-auth" />
+                  <RemoveBtn onClick={() => onChange({ ...a, server: (a.server ?? []).filter((_, j) => j !== i) })} />
+                </div>
+              ))
+            }
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export function LocationAuthzEditor({ authz, authzNames, onChange }: {
+  authz: AuthzRef | undefined;
+  authzNames: string[];
+  onChange: (a: AuthzRef | undefined) => void;
+}) {
+  const enabled = authz != null;
+  return (
+    <div className="cf-subsection cf-subsection-tls">
+      <div className="cf-subsection-header">
+        <span className="cf-subsection-title">Authorization</span>
+        <Toggle checked={enabled} onChange={v => onChange(v ? { profile: '' } : undefined)} label={enabled ? 'Configured' : 'Not configured'} />
+      </div>
+      {enabled && (
+        <Field label="Profile" hint="Name of the authorization profile from the HTTP profiles section.">
+          <ProfileSelect value={authz?.profile ?? ''} onChange={v => onChange({ profile: v })} options={authzNames} placeholder="jwt-authz" />
+        </Field>
+      )}
+    </div>
+  );
+}
+
+export function LocationCacheEditor({ cache, cacheNames, onChange }: {
+  cache: CacheItem | undefined;
+  cacheNames: string[];
+  onChange: (c: CacheItem | undefined) => void;
+}) {
+  const enabled = cache != null;
+  const c = cache ?? {};
+  return (
+    <div className="cf-subsection cf-subsection-tls">
+      <div className="cf-subsection-header">
+        <span className="cf-subsection-title">Cache</span>
+        <Toggle checked={enabled} onChange={v => onChange(v ? { profile: '', key: '$scheme$proxy_host$request_uri', validity: [] } : undefined)} label={enabled ? 'Configured' : 'Not configured'} />
+      </div>
+      {enabled && (
+        <div className="cf-grid-2">
+          <Field label="Profile" hint="Cache zone profile from the HTTP profiles section.">
+            <ProfileSelect value={c.profile ?? ''} onChange={v => onChange({ ...c, profile: v })} options={cacheNames} placeholder="my-cache" />
+          </Field>
+          <Field label="Cache key" hint='NGINX variable expression for the cache key.'>
+            <TextInput value={c.key ?? '$scheme$proxy_host$request_uri'} onChange={v => onChange({ ...c, key: v })} placeholder="$scheme$proxy_host$request_uri" mono />
+          </Field>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export function LocationRateLimitEditor({ rl, rateLimitNames, onChange }: {
+  rl: RateLimitRef | undefined;
+  rateLimitNames: string[];
+  onChange: (r: RateLimitRef | undefined) => void;
+}) {
+  const enabled = rl != null;
+  const r = rl ?? {};
+  return (
+    <div className="cf-subsection cf-subsection-tls">
+      <div className="cf-subsection-header">
+        <span className="cf-subsection-title">Rate Limiting</span>
+        <Toggle checked={enabled} onChange={v => onChange(v ? { profile: '', httpcode: 429, burst: 0, delay: 0 } : undefined)} label={enabled ? 'Configured' : 'Not configured'} />
+      </div>
+      {enabled && (
+        <div className="cf-grid-2">
+          <Field label="Profile" hint="Rate limit zone profile from the HTTP profiles section.">
+            <ProfileSelect value={r.profile ?? ''} onChange={v => onChange({ ...r, profile: v })} options={rateLimitNames} placeholder="my-rate-limit" />
+          </Field>
+          <Field label="HTTP code" hint="Status code returned when rate-limited.">
+            <NumberInput value={r.httpcode ?? 429} onChange={v => onChange({ ...r, httpcode: v })} />
+          </Field>
+          <Field label="Burst" hint="Extra requests to queue before rejecting. 0 = no burst.">
+            <NumberInput value={r.burst ?? 0} onChange={v => onChange({ ...r, burst: v })} />
+          </Field>
+          <Field label="Delay" hint="Requests to delay before the limit applies. 0 = nodelay.">
+            <NumberInput value={r.delay ?? 0} onChange={v => onChange({ ...r, delay: v })} />
+          </Field>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export function HealthCheckEditor({ hc, onChange }: { hc: HealthCheck | undefined; onChange: (h: HealthCheck | undefined) => void }) {
+  const enabled = hc != null;
+  const h = hc ?? {};
+  return (
+    <div className="cf-subsection cf-subsection-tls">
+      <div className="cf-subsection-header">
+        <span className="cf-subsection-title">Health Check (NGINX Plus)</span>
+        <Toggle checked={enabled} onChange={v => onChange(v ? { enabled: true, uri: '/', interval: 5, fails: 1, passes: 1 } : undefined)} label={enabled ? 'Configured' : 'Not configured'} />
+      </div>
+      {enabled && (
+        <div className="cf-grid-2">
+          <Field label="URI" hint="URI path used for health check probes.">
+            <TextInput value={h.uri ?? '/'} onChange={v => onChange({ ...h, uri: v })} placeholder="/" mono />
+          </Field>
+          <Field label="Enabled">
+            <Toggle checked={h.enabled ?? true} onChange={v => onChange({ ...h, enabled: v })} label={h.enabled ?? true ? 'Yes' : 'No'} />
+          </Field>
+          <Field label="Interval (s)" hint="Seconds between health check probes.">
+            <NumberInput value={h.interval ?? 5} onChange={v => onChange({ ...h, interval: v })} min={1} />
+          </Field>
+          <Field label="Fails" hint="Consecutive failures to mark unhealthy.">
+            <NumberInput value={h.fails ?? 1} onChange={v => onChange({ ...h, fails: v })} min={1} />
+          </Field>
+          <Field label="Passes" hint="Consecutive passes to mark healthy again.">
+            <NumberInput value={h.passes ?? 1} onChange={v => onChange({ ...h, passes: v })} min={1} />
+          </Field>
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ─── NJS hooks editors ────────────────────────────────────────────────────────
+
+export function NjsHooksServerEditor({ hooks, onChange, njsProfileNames }: {
+  hooks: NjsHookServer[];
+  onChange: (h: NjsHookServer[]) => void;
+  njsProfileNames: string[];
+}) {
+  return (
+    <div className="cf-subsection cf-subsection-tls">
+      <div className="cf-subsection-header">
+        <span className="cf-subsection-title">NJS Hooks</span>
+        <AddBtn label="Add hook" onClick={() => onChange([...hooks, emptyNjsHookServer()])} />
+      </div>
+      {hooks.length === 0 ? <p className="cf-hint">No NJS hooks configured.</p> : hooks.map((hook, i) => (
+        <div key={i} className="cf-agw-item-row">
+          <Field label="Hook type">
+            <SelectInput value={hook.hook.type} onChange={v => onChange(hooks.map((x, j) => j === i ? { ...x, hook: { ...x.hook, type: v } } : x))} options={NJS_SERVER_HOOK_TYPES} />
+          </Field>
+          <Field label="NJS profile" hint="Name of the NJS profile (njs_profiles section).">
+            <ProfileSelect value={hook.profile} onChange={v => onChange(hooks.map((x, j) => j === i ? { ...x, profile: v } : x))} options={njsProfileNames} placeholder="myProfile" />
+          </Field>
+          <Field label="Function" hint="NJS function name to invoke.">
+            <TextInput value={hook.function} onChange={v => onChange(hooks.map((x, j) => j === i ? { ...x, function: v } : x))} placeholder="myFunction" mono />
+          </Field>
+          {hook.hook.type === 'js_set' && (
+            <Field label="Variable">
+              <TextInput value={hook.hook.js_set?.variable ?? ''} onChange={v => onChange(hooks.map((x, j) => j === i ? { ...x, hook: { ...x.hook, js_set: { variable: v } } } : x))} placeholder="$myVar" mono />
+            </Field>
+          )}
+          {hook.hook.type === 'js_preload_object' && (
+            <Field label="File">
+              <TextInput value={hook.hook.js_preload_object?.file ?? ''} onChange={v => onChange(hooks.map((x, j) => j === i ? { ...x, hook: { ...x.hook, js_preload_object: { file: v } } } : x))} placeholder="/etc/nginx/mydata.json" mono />
+            </Field>
+          )}
+          <div className="cf-agw-item-remove"><RemoveBtn onClick={() => onChange(hooks.filter((_, j) => j !== i))} /></div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export function NjsHooksLocationEditor({ hooks, onChange, njsProfileNames }: {
+  hooks: NjsHookLocation[];
+  onChange: (h: NjsHookLocation[]) => void;
+  njsProfileNames: string[];
+}) {
+  return (
+    <div className="cf-subsection cf-subsection-tls">
+      <div className="cf-subsection-header">
+        <span className="cf-subsection-title">NJS Hooks</span>
+        <AddBtn label="Add hook" onClick={() => onChange([...hooks, emptyNjsHookLocation()])} />
+      </div>
+      {hooks.length === 0 ? <p className="cf-hint">No NJS hooks configured.</p> : hooks.map((hook, i) => (
+        <div key={i} className="cf-agw-item-row">
+          <Field label="Hook type">
+            <SelectInput value={hook.hook.type} onChange={v => onChange(hooks.map((x, j) => j === i ? { ...x, hook: { ...x.hook, type: v } } : x))} options={NJS_LOCATION_HOOK_TYPES} />
+          </Field>
+          <Field label="NJS profile">
+            <ProfileSelect value={hook.profile} onChange={v => onChange(hooks.map((x, j) => j === i ? { ...x, profile: v } : x))} options={njsProfileNames} placeholder="myProfile" />
+          </Field>
+          <Field label="Function">
+            <TextInput value={hook.function} onChange={v => onChange(hooks.map((x, j) => j === i ? { ...x, function: v } : x))} placeholder="myFunction" mono />
+          </Field>
+          {hook.hook.type === 'js_set' && (
+            <Field label="Variable">
+              <TextInput value={hook.hook.js_set?.variable ?? ''} onChange={v => onChange(hooks.map((x, j) => j === i ? { ...x, hook: { ...x.hook, js_set: { variable: v } } } : x))} placeholder="$myVar" mono />
+            </Field>
+          )}
+          {hook.hook.type === 'js_preload_object' && (
+            <Field label="File">
+              <TextInput value={hook.hook.js_preload_object?.file ?? ''} onChange={v => onChange(hooks.map((x, j) => j === i ? { ...x, hook: { ...x.hook, js_preload_object: { file: v } } } : x))} placeholder="/etc/nginx/mydata.json" mono />
+            </Field>
+          )}
+          {hook.hook.type === 'js_body_filter' && (
+            <Field label="Buffer type" hint='e.g. "string" or "buffer"'>
+              <TextInput value={hook.hook.js_body_filter?.buffer_type ?? ''} onChange={v => onChange(hooks.map((x, j) => j === i ? { ...x, hook: { ...x.hook, js_body_filter: { buffer_type: v } } } : x))} placeholder="string" mono />
+            </Field>
+          )}
+          {hook.hook.type === 'js_periodic' && (
+            <>
+              <Field label="Interval"><TextInput value={hook.hook.js_periodic?.interval ?? ''} onChange={v => onChange(hooks.map((x, j) => j === i ? { ...x, hook: { ...x.hook, js_periodic: { ...(x.hook.js_periodic ?? {}), interval: v } } } : x))} placeholder="1h" mono /></Field>
+              <Field label="Jitter (ms)"><NumberInput value={hook.hook.js_periodic?.jitter ?? 0} onChange={v => onChange(hooks.map((x, j) => j === i ? { ...x, hook: { ...x.hook, js_periodic: { ...(x.hook.js_periodic ?? {}), jitter: v } } } : x))} /></Field>
+            </>
+          )}
+          <div className="cf-agw-item-remove"><RemoveBtn onClick={() => onChange(hooks.filter((_, j) => j !== i))} /></div>
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/webui/src/components/configForm/LocationsEditor.tsx b/webui/src/components/configForm/LocationsEditor.tsx
new file mode 100644
index 00000000..7478ce96
--- /dev/null
+++ b/webui/src/components/configForm/LocationsEditor.tsx
@@ -0,0 +1,91 @@
+import type { Location, HttpProfiles } from './types';
+import { emptyLocation } from './defaults';
+import { Field, TextInput, SelectInput, Toggle, AddBtn, RemoveBtn, CollapseCard, ProfileSelect } from './primitives';
+import {
+  LogEditor, AppProtectEditor, SnippetEditor, HeadersEditor,
+  LocationAuthEditor, LocationAuthzEditor, LocationCacheEditor,
+  LocationRateLimitEditor, HealthCheckEditor, NjsHooksLocationEditor,
+} from './LocationEditors';
+import { ApiGatewayEditor } from './ApiGatewayEditor';
+
+export const URI_MATCH_OPTIONS = [
+  { value: 'prefix',  label: 'Prefix — matches any path starting with URI' },
+  { value: 'exact',   label: 'Exact — matches only this exact URI' },
+  { value: 'regex',   label: 'Regex — case-sensitive regular expression' },
+  { value: 'iregex',  label: 'iRegex — case-insensitive regular expression' },
+  { value: 'best',    label: 'Best — longest prefix + regex priority' },
+];
+
+export function LocationsEditor({ locations, onChange, profiles, njsProfileNames }: {
+  locations: Location[];
+  onChange: (l: Location[]) => void;
+  profiles?: HttpProfiles;
+  njsProfileNames?: string[];
+}) {
+  const update = (i: number, l: Location) => onChange(locations.map((x, idx) => idx === i ? l : x));
+  const remove = (i: number) => onChange(locations.filter((_, idx) => idx !== i));
+
+  return (
+    <div className="cf-subsection">
+      <div className="cf-subsection-header">
+        <span className="cf-subsection-title">Locations</span>
+        <AddBtn label="Add location" onClick={() => onChange([...locations, emptyLocation()])} />
+      </div>
+      {locations.length === 0 && (
+        <p className="cf-empty">No locations — add one to route traffic to an upstream.</p>
+      )}
+      {locations.map((loc, i) => (
+        <CollapseCard
+          key={i}
+          title={loc.uri || <em>location #{i + 1}</em>}
+          meta={loc.apigateway != null ? 'API Gateway' : (loc.upstream || '—')}
+          defaultOpen={i === 0 && locations.length === 1}
+        >
+          <div className="cf-card-actions"><RemoveBtn onClick={() => remove(i)} /></div>
+          <div className="cf-grid-3">
+            <Field label="URI" required hint="Request path this location handles. Interpreted according to the match type.">
+              <TextInput value={loc.uri} onChange={v => update(i, { ...loc, uri: v })} placeholder="/" mono />
+            </Field>
+            <Field label="Match type" hint="How NGINX matches the incoming request URI against this location.">
+              <SelectInput
+                value={loc.urimatch ?? 'prefix'}
+                onChange={v => update(i, { ...loc, urimatch: v })}
+                options={URI_MATCH_OPTIONS}
+              />
+            </Field>
+            <Field label="Upstream" hint='Full upstream reference including scheme, e.g. "http://my-upstream". Leave empty when using API Gateway routing.'>
+              <TextInput value={loc.upstream ?? ''} onChange={v => update(i, { ...loc, upstream: v })} placeholder="http://my-upstream" mono />
+            </Field>
+          </div>
+          {/* Caching profile reference (http.caching style) */}
+          <div className="cf-subsection cf-subsection-tls">
+            <div className="cf-subsection-header">
+              <span className="cf-subsection-title">Caching Zone</span>
+              <Toggle checked={!!loc.caching} onChange={v => update(i, { ...loc, caching: v ? '' : undefined })} label={loc.caching ? 'Configured' : 'Not configured'} />
+            </div>
+            {loc.caching !== undefined && (
+              <Field label="Caching profile name" hint="Name of a caching zone defined in the HTTP caching section.">
+                <ProfileSelect value={loc.caching ?? ''} onChange={v => update(i, { ...loc, caching: v })} options={profiles?.cacheNames ?? []} />
+              </Field>
+            )}
+          </div>
+          <LocationRateLimitEditor rl={loc.rate_limit} rateLimitNames={profiles?.rateLimitNames ?? []} onChange={v => update(i, { ...loc, rate_limit: v })} />
+          <HealthCheckEditor hc={loc.health_check} onChange={v => update(i, { ...loc, health_check: v })} />
+          <LocationCacheEditor cache={loc.cache} cacheNames={profiles?.cacheNames ?? []} onChange={v => update(i, { ...loc, cache: v })} />
+          <LocationAuthEditor auth={loc.authentication} authClientNames={profiles?.authClientNames ?? []} authServerNames={profiles?.authServerNames ?? []} onChange={v => update(i, { ...loc, authentication: v })} />
+          <LocationAuthzEditor authz={loc.authorization} authzNames={profiles?.authzNames ?? []} onChange={v => update(i, { ...loc, authorization: v })} />
+          <HeadersEditor headers={loc.headers} onChange={v => update(i, { ...loc, headers: v })} />
+          <AppProtectEditor ap={loc.app_protect} onChange={v => update(i, { ...loc, app_protect: v })} />
+          <LogEditor log={loc.log} onChange={v => update(i, { ...loc, log: v })} />
+          <NjsHooksLocationEditor hooks={loc.njs ?? []} onChange={v => update(i, { ...loc, njs: v })} njsProfileNames={njsProfileNames ?? []} />
+          <SnippetEditor snippet={loc.snippet} onChange={v => update(i, { ...loc, snippet: v })} />
+          <ApiGatewayEditor
+            agw={loc.apigateway}
+            onChange={agw => update(i, { ...loc, apigateway: agw })}
+            profiles={profiles}
+          />
+        </CollapseCard>
+      ))}
+    </div>
+  );
+}
diff --git a/webui/src/components/configForm/OutputSection.tsx b/webui/src/components/configForm/OutputSection.tsx
new file mode 100644
index 00000000..1031c67b
--- /dev/null
+++ b/webui/src/components/configForm/OutputSection.tsx
@@ -0,0 +1,273 @@
+import type { ConfigData, NMSPolicy } from './types';
+import {
+  emptyNms, emptyNginxOne, emptyLicense, emptyNMSPolicy, emptyNMSPolicyVersion,
+} from './defaults';
+import { Field, TextInput, NumberInput, SelectInput, Toggle, AddBtn, RemoveBtn, CollapseCard, ModulesField } from './primitives';
+
+export function PoliciesEditor({ policies, onChange, outputType }: {
+  policies: NMSPolicy[];
+  onChange: (p: NMSPolicy[]) => void;
+  outputType?: 'nim' | 'n1c';
+}) {
+  const update = (i: number, p: NMSPolicy) => onChange(policies.map((x, idx) => idx === i ? p : x));
+  const remove = (i: number) => onChange(policies.filter((_, idx) => idx !== i));
+
+  const destination = outputType === 'n1c' ? 'NGINX One Console' : 'NGINX Instance Manager';
+  const emptyMsg = `No policies — add one to manage an App Protect WAF policy in ${destination}.`;
+
+  return (
+    <div className="cf-subsection">
+      <div className="cf-subsection-header">
+        <span className="cf-subsection-title">Policies</span>
+        <AddBtn label="Add policy" onClick={() => onChange([...policies, emptyNMSPolicy()])} />
+      </div>
+      {policies.length === 0 && (
+        <p className="cf-empty">{emptyMsg}</p>
+      )}
+      {policies.map((pol, pi) => (
+        <CollapseCard
+          key={pi}
+          title={pol.name || <em>policy #{pi + 1}</em>}
+          meta={pol.type || undefined}
+          defaultOpen={!pol.name}
+        >
+          <div className="cf-grid-2">
+            <Field label="Type" required
+              error={!pol.type ? 'Required' : undefined}>
+              <SelectInput
+                value={pol.type}
+                onChange={v => update(pi, { ...pol, type: v })}
+                options={[{ value: 'app_protect', label: 'App Protect' }]}
+                error={!pol.type}
+              />
+            </Field>
+            <Field label="Name" required
+              error={!pol.name.trim() ? 'Required' : undefined}>
+              <TextInput
+                value={pol.name}
+                onChange={v => update(pi, { ...pol, name: v })}
+                placeholder="production-policy"
+                error={!pol.name.trim()}
+              />
+            </Field>
+            <Field label="Active tag" required
+              hint="Tag of the currently active policy version. Must match one of the version tags below."
+              error={!pol.active_tag.trim() ? 'Required' : undefined}>
+              <TextInput
+                value={pol.active_tag}
+                onChange={v => update(pi, { ...pol, active_tag: v })}
+                placeholder="xss-blocked"
+                error={!pol.active_tag.trim()}
+              />
+            </Field>
+          </div>
+
+          <div className="cf-subsection">
+            <div className="cf-subsection-header">
+              <span className="cf-subsection-title">Versions</span>
+              <AddBtn
+                label="Add version"
+                onClick={() => update(pi, { ...pol, versions: [...pol.versions, emptyNMSPolicyVersion()] })}
+              />
+            </div>
+            {pol.versions.length === 0 && (
+              <p className="cf-empty cf-empty-sm">No versions — add at least one version with a tag and policy content URL.</p>
+            )}
+            {pol.versions.map((ver, vi) => (
+              <div key={vi} className="cf-agw-item-row">
+                <Field label="Tag" required
+                  hint='Unique identifier for this version, e.g. "xss-blocked".'
+                  error={!ver.tag.trim() ? 'Required' : undefined}>
+                  <TextInput
+                    value={ver.tag}
+                    onChange={v => update(pi, { ...pol, versions: pol.versions.map((vx, j) => j === vi ? { ...vx, tag: v } : vx) })}
+                    placeholder="xss-blocked"
+                    error={!ver.tag.trim()}
+                  />
+                </Field>
+                <Field label="Display name"
+                  hint="Human-readable name shown in NGINX Instance Manager.">
+                  <TextInput
+                    value={ver.displayName}
+                    onChange={v => update(pi, { ...pol, versions: pol.versions.map((vx, j) => j === vi ? { ...vx, displayName: v } : vx) })}
+                    placeholder="Production Policy - XSS blocked"
+                  />
+                </Field>
+                <Field label="Description"
+                  hint="Short description of this policy version.">
+                  <TextInput
+                    value={ver.description}
+                    onChange={v => update(pi, { ...pol, versions: pol.versions.map((vx, j) => j === vi ? { ...vx, description: v } : vx) })}
+                    placeholder="XSS attack protection enabled"
+                  />
+                </Field>
+                <Field label="Content" span="full" required
+                  hint='URL or path to the policy JSON file. Supports {{variable}} substitution.'
+                  error={!ver.contents.content.trim() ? 'Required' : undefined}>
+                  <TextInput
+                    value={ver.contents.content}
+                    onChange={v => update(pi, { ...pol, versions: pol.versions.map((vx, j) => j === vi ? { ...vx, contents: { content: v } } : vx) })}
+                    placeholder="https://example.com/policy.json"
+                    mono
+                    error={!ver.contents.content.trim()}
+                  />
+                </Field>
+                <div className="cf-agw-item-remove">
+                  <RemoveBtn onClick={() => update(pi, { ...pol, versions: pol.versions.filter((_, j) => j !== vi) })} />
+                </div>
+              </div>
+            ))}
+          </div>
+
+          <div className="cf-card-actions"><RemoveBtn onClick={() => remove(pi)} /></div>
+        </CollapseCard>
+      ))}
+    </div>
+  );
+}
+
+export function OutputSection({ output, onChange }: {
+  output: ConfigData['output'];
+  onChange: (o: ConfigData['output']) => void;
+}) {
+  const nms = output.nms ?? emptyNms();
+  const no = output.nginxone ?? emptyNginxOne();
+  const license = output.license;
+
+  return (
+    <section className="cf-section" id="cf-sec-output">
+
+      <div className="cf-type-row">
+        <button
+          type="button"
+          className={`cf-type-card${output.type === 'nim' ? ' active' : ''}`}
+          onClick={() => onChange({ ...output, type: 'nim' })}
+        >
+          <span className="cf-type-card-title">NGINX Instance Manager</span>
+          <span className="cf-type-card-sub">Push to an instance group</span>
+        </button>
+        <button
+          type="button"
+          className={`cf-type-card${output.type === 'n1c' ? ' active' : ''}`}
+          onClick={() => onChange({ ...output, type: 'n1c' })}
+        >
+          <span className="cf-type-card-title">NGINX One Console</span>
+          <span className="cf-type-card-sub">Push to a config sync group</span>
+        </button>
+      </div>
+
+      {/* Synchronous toggle (applies to both output types) */}
+      <div className="cf-field cf-field-inline">
+        <Toggle
+          checked={output.synchronous ?? true}
+          onChange={v => onChange({ ...output, synchronous: v })}
+          label="Synchronous push"
+        />
+        <p className="cf-hint">When enabled the API waits for NGINX to apply the configuration before responding.</p>
+      </div>
+
+      {/* License section */}
+      <div className="cf-subsection cf-subsection-tls" id="cf-sec-license">
+        <div className="cf-subsection-header">
+          <span className="cf-subsection-title">License (NGINX Plus)</span>
+          <Toggle checked={license != null} onChange={v => onChange({ ...output, license: v ? emptyLicense() : undefined })} label={license != null ? 'Configured' : 'Not configured'} />
+        </div>
+        {license != null && (
+          <div className="cf-grid-2">
+            <Field label="Endpoint" hint="License server endpoint URL.">
+              <TextInput value={license.endpoint ?? 'product.connect.nginx.com'} onChange={v => onChange({ ...output, license: { ...license, endpoint: v } })} placeholder="product.connect.nginx.com" mono />
+            </Field>
+            <Field label="JWT token" hint="NGINX Plus license JWT. Paste the token content or upload a .jwt file.">
+              <div style={{ display: 'flex', gap: '0.4rem', alignItems: 'center' }}>
+                <TextInput value={license.token ?? ''} onChange={v => onChange({ ...output, license: { ...license, token: v } })} placeholder="eyJ..." mono />
+                <label className="cf-btn-add" style={{ cursor: 'pointer', whiteSpace: 'nowrap', margin: 0 }} title="Upload JWT file">
+                  <span className="cf-btn-add-icon">↑</span> Upload
+                  <input type="file" accept=".jwt,.txt,text/plain" style={{ display: 'none' }}
+                    onChange={e => {
+                      const f = e.target.files?.[0];
+                      if (!f) return;
+                      const reader = new FileReader();
+                      reader.onload = ev => onChange({ ...output, license: { ...license, token: (ev.target?.result as string ?? '').trim() } });
+                      reader.readAsText(f);
+                      e.target.value = '';
+                    }} />
+                </label>
+              </div>
+            </Field>
+            <Field label="Enforce initial report" hint='When enabled, enforces the initial license report to the licensing server. Controls the enforce_initial_report directive.'>
+              <Toggle checked={license.grace_period ?? false} onChange={v => onChange({ ...output, license: { ...license, grace_period: v } })} label={license.grace_period ? 'Enabled' : 'Disabled'} />
+            </Field>
+            <Field label="SSL verify">
+              <Toggle checked={license.ssl_verify ?? true} onChange={v => onChange({ ...output, license: { ...license, ssl_verify: v } })} label={license.ssl_verify ?? true ? 'Yes' : 'No'} />
+            </Field>
+            <Field label="Proxy URL" hint="HTTP proxy for license server connectivity.">
+              <TextInput value={license.proxy ?? ''} onChange={v => onChange({ ...output, license: { ...license, proxy: v || undefined } })} placeholder="http://proxy.example.com:3128" mono />
+            </Field>
+            <Field label="Proxy username">
+              <TextInput value={license.proxy_username ?? ''} onChange={v => onChange({ ...output, license: { ...license, proxy_username: v || undefined } })} placeholder="proxyuser" />
+            </Field>
+            <Field label="Proxy password">
+              <TextInput value={license.proxy_password ?? ''} type="password" onChange={v => onChange({ ...output, license: { ...license, proxy_password: v || undefined } })} placeholder="••••••••" />
+            </Field>
+          </div>
+        )}
+      </div>
+
+      {output.type === 'nim' && (
+        <>
+          <div className="cf-grid-2">
+            <Field label="URL" required
+              hint="Base URL of your NGINX Instance Manager instance. Include scheme and port. Example: https://nim.example.com:443">
+              <TextInput value={nms.url} onChange={v => onChange({ ...output, nms: { ...nms, url: v } })} placeholder="https://nms.example.com" mono />
+            </Field>
+            <Field label="Username" required hint="API username for NGINX Instance Manager. Usually 'admin' for initial setup.">
+              <TextInput value={nms.username} onChange={v => onChange({ ...output, nms: { ...nms, username: v } })} placeholder="admin" />
+            </Field>
+            <Field label="Password" required hint="Password for the NGINX Instance Manager API user. Stored only in your local session — never sent to this UI's server.">
+              <TextInput value={nms.password} onChange={v => onChange({ ...output, nms: { ...nms, password: v } })} type="password" placeholder="••••••••" />
+            </Field>
+            <Field label="Instance group" required hint="Name of the NGINX Instance Manager instance group to push configuration to. The group must already exist.">
+              <TextInput value={nms.instancegroup} onChange={v => onChange({ ...output, nms: { ...nms, instancegroup: v } })} placeholder="production" />
+            </Field>
+            <Field label="Sync time (seconds)"
+              hint="How often (in seconds) the API will re-push the configuration. Set to 0 to push once and stop. Use a positive integer for continuous synchronisation.">
+              <NumberInput value={nms.synctime ?? 0} onChange={v => onChange({ ...output, nms: { ...nms, synctime: v } })} />
+            </Field>
+            <Field label="Dynamic modules"
+              hint="Select any additional NGINX dynamic modules that must be loaded. These are inserted as load_module directives at the top of nginx.conf.">
+              <ModulesField value={nms.modules ?? []} onChange={v => onChange({ ...output, nms: { ...nms, modules: v } })} />
+            </Field>
+          </div>
+        </>
+      )}
+
+      {output.type === 'n1c' && (
+        <>
+          <div className="cf-grid-2">
+            <Field label="NGINX One URL" required
+              hint="Base URL of your NGINX One Console instance. Example: https://nginx-one.example.com">
+              <TextInput value={no.url} onChange={v => onChange({ ...output, nginxone: { ...no, url: v } })} placeholder="https://nginx-one.example.com" mono />
+            </Field>
+            <Field label="Namespace" required hint="The NGINX One namespace that contains your config sync group. Case-sensitive.">
+              <TextInput value={no.namespace} onChange={v => onChange({ ...output, nginxone: { ...no, namespace: v } })} placeholder="default" />
+            </Field>
+            <Field label="API token" required hint="Bearer token for authenticating to the NGINX One API. Generate this in the NGINX One Console under API keys.">
+              <TextInput value={no.token} onChange={v => onChange({ ...output, nginxone: { ...no, token: v } })} type="password" placeholder="••••••••" />
+            </Field>
+            <Field label="Config sync group" required hint="Name of the config sync group to target. Instances in this group will receive the generated configuration.">
+              <TextInput value={no.configsyncgroup} onChange={v => onChange({ ...output, nginxone: { ...no, configsyncgroup: v } })} placeholder="production-group" />
+            </Field>
+            <Field label="Sync time (seconds)"
+              hint="How often (in seconds) to re-push the configuration. Set to 0 to push once and stop.">
+              <NumberInput value={no.synctime ?? 0} onChange={v => onChange({ ...output, nginxone: { ...no, synctime: v } })} />
+            </Field>
+            <Field label="Dynamic modules"
+              hint="Select any additional NGINX dynamic modules required by this configuration.">
+              <ModulesField value={no.modules ?? []} onChange={v => onChange({ ...output, nginxone: { ...no, modules: v } })} />
+            </Field>
+          </div>
+        </>
+      )}
+    </section>
+  );
+}
diff --git a/webui/src/components/configForm/ProfilesSection.tsx b/webui/src/components/configForm/ProfilesSection.tsx
new file mode 100644
index 00000000..ae290ac4
--- /dev/null
+++ b/webui/src/components/configForm/ProfilesSection.tsx
@@ -0,0 +1,696 @@
+import type {
+  HttpRateLimit, HttpAuthentication, HttpAuthorization, HttpCache, HttpMap,
+  HttpLogFormat, NjsHookServer, NjsFile, AcmeIssuer, NginxPlusApi, HttpResolver,
+} from './types';
+import {
+  emptyHttpRateLimit, emptyHttpAuthClient, emptyHttpAuthServerToken, emptyHttpAuthServerMtls,
+  emptyHttpAuthorization, emptyHttpAuthzClaim, emptyHttpCache, emptyHttpMap, emptyMapEntry,
+  emptyHttpLogFormat, emptyNjsFile, emptyAcmeIssuer, emptyHttpResolver,
+} from './defaults';
+import { Field, TextInput, NumberInput, SelectInput, Toggle, AddBtn, RemoveBtn, CollapseCard } from './primitives';
+import { NjsHooksServerEditor } from './LocationEditors';
+import { PathsInput } from './ApiGatewayEditor';
+
+export const AUTH_CLIENT_TYPE_OPTIONS = [
+  { value: 'jwt',   label: 'JWT' },
+  { value: 'mtls',  label: 'mTLS' },
+  { value: 'oidc',  label: 'OIDC' },
+];
+
+export const AUTH_SERVER_TYPE_OPTIONS = [
+  { value: 'token', label: 'Token' },
+  { value: 'mtls',  label: 'mTLS' },
+];
+
+export const AUTH_TYPE_OPTIONS = [
+  { value: 'jwt', label: 'JWT' },
+];
+
+export function ProfilesSection({
+  rateLimits, onRateLimitsChange,
+  authentication, onAuthenticationChange,
+  authorization, onAuthorizationChange,
+  cache, onCacheChange,
+  maps, onMapsChange,
+  logformats, onLogFormatsChange,
+  njs, onNjsChange,
+  njsProfiles, onNjsProfilesChange,
+  acmeIssuers, onAcmeIssuersChange,
+  nginxPlusApi, onNginxPlusApiChange,
+  resolvers, onResolversChange,
+}: {
+  rateLimits: HttpRateLimit[];            onRateLimitsChange: (v: HttpRateLimit[]) => void;
+  authentication: HttpAuthentication;     onAuthenticationChange: (v: HttpAuthentication) => void;
+  authorization: HttpAuthorization[];     onAuthorizationChange: (v: HttpAuthorization[]) => void;
+  cache: HttpCache[];                     onCacheChange: (v: HttpCache[]) => void;
+  maps: HttpMap[];                        onMapsChange: (v: HttpMap[]) => void;
+  logformats: HttpLogFormat[];            onLogFormatsChange: (v: HttpLogFormat[]) => void;
+  njs: NjsHookServer[];                   onNjsChange: (v: NjsHookServer[]) => void;
+  njsProfiles: NjsFile[];                 onNjsProfilesChange: (v: NjsFile[]) => void;
+  acmeIssuers: AcmeIssuer[];              onAcmeIssuersChange: (v: AcmeIssuer[]) => void;
+  nginxPlusApi: NginxPlusApi | undefined; onNginxPlusApiChange: (v: NginxPlusApi | undefined) => void;
+  resolvers: HttpResolver[];              onResolversChange: (v: HttpResolver[]) => void;
+}) {
+  const clients = authentication.client ?? [];
+  const servers = authentication.server ?? [];
+  const njsProfileNames = njsProfiles.map(p => p.name).filter(Boolean);
+
+  return (
+    <div className="cf-subsection">
+      <div className="cf-subsection-header">
+        <span className="cf-subsection-title">Profiles</span>
+      </div>
+
+      {/* ── Rate Limiting ── */}
+      <div className="cf-subsection">
+        <div className="cf-subsection-header">
+          <span className="cf-subsection-title">Rate Limiting</span>
+          <AddBtn label="Add profile" onClick={() => onRateLimitsChange([...rateLimits, emptyHttpRateLimit()])} />
+        </div>
+        {rateLimits.length === 0
+          ? <p className="cf-empty cf-empty-sm">No rate limit profiles. Add one to define a named zone for use in API Gateway configurations.</p>
+          : rateLimits.map((rl, i) => (
+            <CollapseCard key={i} title={rl.name || <em>rate limit #{i + 1}</em>} meta={rl.rate || undefined} defaultOpen={!rl.name}>
+              <div className="cf-grid-2">
+                <Field label="Name" required error={!rl.name.trim() ? 'Required' : undefined}
+                  hint="Zone name — referenced by API Gateway rate limit rules.">
+                  <TextInput value={rl.name}
+                    onChange={v => onRateLimitsChange(rateLimits.map((x, idx) => idx === i ? { ...x, name: v } : x))}
+                    placeholder="petstore_ratelimit"
+                    error={!rl.name.trim()} />
+                </Field>
+                <Field label="Rate" required error={!rl.rate.trim() ? 'Required' : undefined}
+                  hint='Requests per second or minute, e.g. "10r/s" or "100r/m".'>
+                  <TextInput value={rl.rate}
+                    onChange={v => onRateLimitsChange(rateLimits.map((x, idx) => idx === i ? { ...x, rate: v } : x))}
+                    placeholder="10r/s" mono
+                    error={!rl.rate.trim()} />
+                </Field>
+                <Field label="Key" required error={!rl.key.trim() ? 'Required' : undefined}
+                  hint='NGINX variable used to differentiate clients, e.g. "$binary_remote_addr".'>
+                  <TextInput value={rl.key}
+                    onChange={v => onRateLimitsChange(rateLimits.map((x, idx) => idx === i ? { ...x, key: v } : x))}
+                    placeholder="$binary_remote_addr" mono
+                    error={!rl.key.trim()} />
+                </Field>
+                <Field label="Zone size" required error={!rl.size.trim() ? 'Required' : undefined}
+                  hint='Shared memory zone size, e.g. "10m".'>
+                  <TextInput value={rl.size}
+                    onChange={v => onRateLimitsChange(rateLimits.map((x, idx) => idx === i ? { ...x, size: v } : x))}
+                    placeholder="10m" mono
+                    error={!rl.size.trim()} />
+                </Field>
+              </div>
+              <div className="cf-card-actions"><RemoveBtn onClick={() => onRateLimitsChange(rateLimits.filter((_, idx) => idx !== i))} /></div>
+            </CollapseCard>
+          ))
+        }
+      </div>
+
+      {/* ── Authentication Client ── */}
+      <div className="cf-subsection">
+        <div className="cf-subsection-header">
+          <span className="cf-subsection-title">Authentication — Client Profiles</span>
+          <AddBtn label="Add profile" onClick={() => onAuthenticationChange({ ...authentication, client: [...clients, emptyHttpAuthClient()] })} />
+        </div>
+        {clients.length === 0
+          ? <p className="cf-empty cf-empty-sm">No client authentication profiles. Add one to define a named client authentication policy.</p>
+          : clients.map((c, i) => {
+            const jwt = c.jwt ?? { realm: '', key: '', jwt_type: 'signed', cachetime: 0, token_location: '' };
+            const mtls = c.mtls ?? { enabled: 'on', client_certificates: '', trusted_ca_certificates: '' };
+            const oidc = c.oidc ?? { issuer: '', client_id: '', client_secret: '', redirect_uri: '/oidc_callback', scope: 'openid', session_timeout: '8h' };
+            return (
+              <CollapseCard key={i} title={c.name || <em>client #{i + 1}</em>} meta={c.type || undefined} defaultOpen={!c.name}>
+                <div className="cf-grid-2">
+                  <Field label="Name" required error={!c.name.trim() ? 'Required' : undefined}
+                    hint="Profile name — referenced by server/location authentication rules.">
+                    <TextInput value={c.name}
+                      onChange={v => onAuthenticationChange({ ...authentication, client: clients.map((x, idx) => idx === i ? { ...x, name: v } : x) })}
+                      placeholder="Petstore JWT Authentication"
+                      error={!c.name.trim()} />
+                  </Field>
+                  <Field label="Type" required>
+                    <SelectInput value={c.type}
+                      onChange={v => onAuthenticationChange({ ...authentication, client: clients.map((x, idx) => idx === i ? { ...x, type: v } : x) })}
+                      options={AUTH_CLIENT_TYPE_OPTIONS} />
+                  </Field>
+                </div>
+                {c.type === 'jwt' && (
+                  <div className="cf-grid-2">
+                    <Field label="Realm" hint='JWT realm string shown in WWW-Authenticate challenges.'>
+                      <TextInput value={jwt.realm}
+                        onChange={v => onAuthenticationChange({ ...authentication, client: clients.map((x, idx) => idx === i ? { ...x, jwt: { ...jwt, realm: v } } : x) })}
+                        placeholder="My API" />
+                    </Field>
+                    <Field label="JWT type">
+                      <SelectInput value={jwt.jwt_type ?? 'signed'}
+                        onChange={v => onAuthenticationChange({ ...authentication, client: clients.map((x, idx) => idx === i ? { ...x, jwt: { ...jwt, jwt_type: v } } : x) })}
+                        options={[{ value: 'signed', label: 'Signed' }, { value: 'encrypted', label: 'Encrypted' }, { value: 'nested', label: 'Nested' }]} />
+                    </Field>
+                    <Field label="Cache time (s)" hint="Seconds to cache JWT validation results. 0 disables caching.">
+                      <NumberInput value={jwt.cachetime ?? 0}
+                        onChange={v => onAuthenticationChange({ ...authentication, client: clients.map((x, idx) => idx === i ? { ...x, jwt: { ...jwt, cachetime: v } } : x) })} />
+                    </Field>
+                    <Field label="Token location" hint='Optional variable holding the JWT, e.g. "$arg_token". Leave empty to use Authorization header.'>
+                      <TextInput value={jwt.token_location ?? ''}
+                        onChange={v => onAuthenticationChange({ ...authentication, client: clients.map((x, idx) => idx === i ? { ...x, jwt: { ...jwt, token_location: v } } : x) })}
+                        placeholder="$arg_token" mono />
+                    </Field>
+                    <Field label="Key / JWKS" span="full" required
+                      error={!jwt.key.trim() ? 'Required' : undefined}
+                      hint="Inline JWKS JSON, a JWKS URL, or a symmetric secret key.">
+                      <TextInput value={jwt.key}
+                        onChange={v => onAuthenticationChange({ ...authentication, client: clients.map((x, idx) => idx === i ? { ...x, jwt: { ...jwt, key: v } } : x) })}
+                        placeholder='{"keys":[{"k":"...","kty":"oct","kid":"0001"}]}'
+                        mono
+                        error={!jwt.key.trim()} />
+                    </Field>
+                  </div>
+                )}
+                {c.type === 'mtls' && (
+                  <div className="cf-grid-2">
+                    <Field label="Enabled" hint='"on", "off", "optional", "optional_no_ca".'>
+                      <SelectInput value={mtls.enabled ?? 'on'}
+                        onChange={v => onAuthenticationChange({ ...authentication, client: clients.map((x, idx) => idx === i ? { ...x, mtls: { ...mtls, enabled: v } } : x) })}
+                        options={[{ value: 'on', label: 'on' }, { value: 'off', label: 'off' }, { value: 'optional', label: 'optional' }, { value: 'optional_no_ca', label: 'optional_no_ca' }]} />
+                    </Field>
+                    <Field label="Client certificates" required hint="Name of the certificate bundle (from certificates section).">
+                      <TextInput value={mtls.client_certificates}
+                        onChange={v => onAuthenticationChange({ ...authentication, client: clients.map((x, idx) => idx === i ? { ...x, mtls: { ...mtls, client_certificates: v } } : x) })}
+                        placeholder="client-ca-bundle" />
+                    </Field>
+                    <Field label="Trusted CA certificates" hint="Name of the trusted CA bundle for verification.">
+                      <TextInput value={mtls.trusted_ca_certificates ?? ''}
+                        onChange={v => onAuthenticationChange({ ...authentication, client: clients.map((x, idx) => idx === i ? { ...x, mtls: { ...mtls, trusted_ca_certificates: v } } : x) })}
+                        placeholder="trusted-ca" />
+                    </Field>
+                  </div>
+                )}
+                {c.type === 'oidc' && (
+                  <div className="cf-grid-2">
+                    <Field label="Issuer" required hint="OIDC provider issuer URL.">
+                      <TextInput value={oidc.issuer}
+                        onChange={v => onAuthenticationChange({ ...authentication, client: clients.map((x, idx) => idx === i ? { ...x, oidc: { ...oidc, issuer: v } } : x) })}
+                        placeholder="https://idp.example.com" mono />
+                    </Field>
+                    <Field label="Client ID" required>
+                      <TextInput value={oidc.client_id}
+                        onChange={v => onAuthenticationChange({ ...authentication, client: clients.map((x, idx) => idx === i ? { ...x, oidc: { ...oidc, client_id: v } } : x) })}
+                        placeholder="my-client-id" />
+                    </Field>
+                    <Field label="Client secret" required>
+                      <TextInput value={oidc.client_secret} type="password"
+                        onChange={v => onAuthenticationChange({ ...authentication, client: clients.map((x, idx) => idx === i ? { ...x, oidc: { ...oidc, client_secret: v } } : x) })}
+                        placeholder="••••••••" />
+                    </Field>
+                    <Field label="Config URL" hint="Optional OIDC discovery URL override.">
+                      <TextInput value={oidc.config_url ?? ''}
+                        onChange={v => onAuthenticationChange({ ...authentication, client: clients.map((x, idx) => idx === i ? { ...x, oidc: { ...oidc, config_url: v } } : x) })}
+                        placeholder="https://idp.example.com/.well-known/openid-configuration" mono />
+                    </Field>
+                    <Field label="Redirect URI" hint='Callback URI registered in the IdP, e.g. "/oidc_callback".'>
+                      <TextInput value={oidc.redirect_uri ?? '/oidc_callback'}
+                        onChange={v => onAuthenticationChange({ ...authentication, client: clients.map((x, idx) => idx === i ? { ...x, oidc: { ...oidc, redirect_uri: v } } : x) })}
+                        placeholder="/oidc_callback" mono />
+                    </Field>
+                    <Field label="Scope">
+                      <TextInput value={oidc.scope ?? 'openid'}
+                        onChange={v => onAuthenticationChange({ ...authentication, client: clients.map((x, idx) => idx === i ? { ...x, oidc: { ...oidc, scope: v } } : x) })}
+                        placeholder="openid profile email" mono />
+                    </Field>
+                    <Field label="Session timeout">
+                      <TextInput value={oidc.session_timeout ?? '8h'}
+                        onChange={v => onAuthenticationChange({ ...authentication, client: clients.map((x, idx) => idx === i ? { ...x, oidc: { ...oidc, session_timeout: v } } : x) })}
+                        placeholder="8h" mono />
+                    </Field>
+                  </div>
+                )}
+                <div className="cf-card-actions"><RemoveBtn onClick={() => onAuthenticationChange({ ...authentication, client: clients.filter((_, idx) => idx !== i) })} /></div>
+              </CollapseCard>
+            );
+          })
+        }
+      </div>
+
+      {/* ── Authentication Server ── */}
+      <div className="cf-subsection">
+        <div className="cf-subsection-header">
+          <span className="cf-subsection-title">Authentication — Server Profiles</span>
+          <div style={{ display: 'flex', gap: '0.35rem' }}>
+            <AddBtn label="Add token" onClick={() => onAuthenticationChange({ ...authentication, server: [...servers, emptyHttpAuthServerToken()] })} />
+            <AddBtn label="Add mTLS" onClick={() => onAuthenticationChange({ ...authentication, server: [...servers, emptyHttpAuthServerMtls()] })} />
+          </div>
+        </div>
+        {servers.length === 0
+          ? <p className="cf-empty cf-empty-sm">No server authentication profiles. Add one to define outbound authentication to upstream servers.</p>
+          : servers.map((s, i) => {
+            const tok = s.token ?? { token: '', type: 'bearer' };
+            const smtls = s.mtls ?? { certificate: '', key: '' };
+            return (
+              <CollapseCard key={i} title={s.name || <em>server #{i + 1}</em>} meta={s.type || undefined} defaultOpen={!s.name}>
+                <div className="cf-grid-2">
+                  <Field label="Name" required error={!s.name.trim() ? 'Required' : undefined}>
+                    <TextInput value={s.name}
+                      onChange={v => onAuthenticationChange({ ...authentication, server: servers.map((x, idx) => idx === i ? { ...x, name: v } : x) })}
+                      placeholder="upstream-auth"
+                      error={!s.name.trim()} />
+                  </Field>
+                  <Field label="Type" required>
+                    <SelectInput value={s.type}
+                      onChange={v => onAuthenticationChange({ ...authentication, server: servers.map((x, idx) => idx === i ? { ...x, type: v } : x) })}
+                      options={AUTH_SERVER_TYPE_OPTIONS} />
+                  </Field>
+                </div>
+                {s.type === 'token' && (
+                  <div className="cf-grid-2">
+                    <Field label="Token type" hint='"bearer", "header", or "basic"'>
+                      <SelectInput value={tok.type ?? 'bearer'}
+                        onChange={v => onAuthenticationChange({ ...authentication, server: servers.map((x, idx) => idx === i ? { ...x, token: { ...tok, type: v } } : x) })}
+                        options={[{ value: 'bearer', label: 'Bearer' }, { value: 'header', label: 'Header' }, { value: 'basic', label: 'Basic' }]} />
+                    </Field>
+                    {(tok.type === 'bearer' || tok.type === '' || tok.type === undefined) && (
+                      <Field label="Token value" required>
+                        <TextInput value={tok.token}
+                          onChange={v => onAuthenticationChange({ ...authentication, server: servers.map((x, idx) => idx === i ? { ...x, token: { ...tok, token: v } } : x) })}
+                          placeholder="eyJ..." mono />
+                      </Field>
+                    )}
+                    {tok.type === 'header' && (
+                      <>
+                        <Field label="Token value" required>
+                          <TextInput value={tok.token}
+                            onChange={v => onAuthenticationChange({ ...authentication, server: servers.map((x, idx) => idx === i ? { ...x, token: { ...tok, token: v } } : x) })}
+                            placeholder="my-token-value" mono />
+                        </Field>
+                        <Field label="Header name" required hint="Name of the request header to set.">
+                          <TextInput value={tok.location ?? ''}
+                            onChange={v => onAuthenticationChange({ ...authentication, server: servers.map((x, idx) => idx === i ? { ...x, token: { ...tok, location: v } } : x) })}
+                            placeholder="X-Api-Key" mono />
+                        </Field>
+                      </>
+                    )}
+                    {tok.type === 'basic' && (
+                      <>
+                        <Field label="Username" required>
+                          <TextInput value={tok.username ?? ''}
+                            onChange={v => onAuthenticationChange({ ...authentication, server: servers.map((x, idx) => idx === i ? { ...x, token: { ...tok, username: v } } : x) })}
+                            placeholder="user" />
+                        </Field>
+                        <Field label="Password" required>
+                          <TextInput value={tok.password ?? ''} type="password"
+                            onChange={v => onAuthenticationChange({ ...authentication, server: servers.map((x, idx) => idx === i ? { ...x, token: { ...tok, password: v } } : x) })}
+                            placeholder="••••••••" />
+                        </Field>
+                      </>
+                    )}
+                  </div>
+                )}
+                {s.type === 'mtls' && (
+                  <div className="cf-grid-2">
+                    <Field label="Client certificate" required hint="Name of the certificate from the certificates section.">
+                      <TextInput value={smtls.certificate}
+                        onChange={v => onAuthenticationChange({ ...authentication, server: servers.map((x, idx) => idx === i ? { ...x, mtls: { ...smtls, certificate: v } } : x) })}
+                        placeholder="client-cert" />
+                    </Field>
+                    <Field label="Client key" required>
+                      <TextInput value={smtls.key}
+                        onChange={v => onAuthenticationChange({ ...authentication, server: servers.map((x, idx) => idx === i ? { ...x, mtls: { ...smtls, key: v } } : x) })}
+                        placeholder="client-key" />
+                    </Field>
+                  </div>
+                )}
+                <div className="cf-card-actions"><RemoveBtn onClick={() => onAuthenticationChange({ ...authentication, server: servers.filter((_, idx) => idx !== i) })} /></div>
+              </CollapseCard>
+            );
+          })
+        }
+      </div>
+
+      {/* ── Authorization ── */}
+      <div className="cf-subsection">
+        <div className="cf-subsection-header">
+          <span className="cf-subsection-title">Authorization</span>
+          <AddBtn label="Add profile" onClick={() => onAuthorizationChange([...authorization, emptyHttpAuthorization()])} />
+        </div>
+        {authorization.length === 0
+          ? <p className="cf-empty cf-empty-sm">No authorization profiles. Add one to define JWT claim-based access control policies.</p>
+          : authorization.map((az, i) => {
+            const claims = az.jwt?.claims ?? [];
+            return (
+              <CollapseCard key={i} title={az.name || <em>authz #{i + 1}</em>} meta={az.type || undefined} defaultOpen={!az.name}>
+                <div className="cf-grid-2">
+                  <Field label="Name" required error={!az.name.trim() ? 'Required' : undefined}
+                    hint="Profile name — referenced by API Gateway authorization rules.">
+                    <TextInput value={az.name}
+                      onChange={v => onAuthorizationChange(authorization.map((x, idx) => idx === i ? { ...x, name: v } : x))}
+                      placeholder="JWT role based authorization"
+                      error={!az.name.trim()} />
+                  </Field>
+                  <Field label="Type" required>
+                    <SelectInput value={az.type}
+                      onChange={v => onAuthorizationChange(authorization.map((x, idx) => idx === i ? { ...x, type: v } : x))}
+                      options={AUTH_TYPE_OPTIONS} />
+                  </Field>
+                </div>
+                {az.type === 'jwt' && (
+                  <div className="cf-subsection">
+                    <div className="cf-subsection-header">
+                      <span className="cf-subsection-title">Claims</span>
+                      <AddBtn label="Add claim" onClick={() => onAuthorizationChange(authorization.map((x, idx) => idx === i
+                        ? { ...x, jwt: { claims: [...claims, emptyHttpAuthzClaim()] } }
+                        : x))} />
+                    </div>
+                    {claims.length === 0
+                      ? <p className="cf-empty cf-empty-sm">No claims. Add a claim to restrict access based on JWT payload values.</p>
+                      : claims.map((cl, ci) => (
+                        <div key={ci} className="cf-agw-item-row">
+                          <Field label="Claim name" required error={!cl.name.trim() ? 'Required' : undefined}
+                            hint='JWT claim key to check, e.g. "roles".'>
+                            <TextInput value={cl.name}
+                              onChange={v => onAuthorizationChange(authorization.map((x, idx) => idx === i
+                                ? { ...x, jwt: { claims: claims.map((c, j) => j === ci ? { ...c, name: v } : c) } }
+                                : x))}
+                              placeholder="roles"
+                              error={!cl.name.trim()} />
+                          </Field>
+                          <Field label="Allowed values" hint="One value per line. Regex patterns are supported (prefix with ~).">
+                            <PathsInput
+                              value={cl.value}
+                              onChange={v => onAuthorizationChange(authorization.map((x, idx) => idx === i
+                                ? { ...x, jwt: { claims: claims.map((c, j) => j === ci ? { ...c, value: v } : c) } }
+                                : x))}
+                              placeholder="~(devops)&#10;admin" />
+                          </Field>
+                          <Field label="Error code" hint="HTTP status code returned when the claim check fails.">
+                            <NumberInput value={cl.errorcode ?? 403}
+                              onChange={v => onAuthorizationChange(authorization.map((x, idx) => idx === i
+                                ? { ...x, jwt: { claims: claims.map((c, j) => j === ci ? { ...c, errorcode: v } : c) } }
+                                : x))} />
+                          </Field>
+                          <div className="cf-agw-item-remove">
+                            <RemoveBtn onClick={() => onAuthorizationChange(authorization.map((x, idx) => idx === i
+                              ? { ...x, jwt: { claims: claims.filter((_, j) => j !== ci) } }
+                              : x))} />
+                          </div>
+                        </div>
+                      ))
+                    }
+                  </div>
+                )}
+                <div className="cf-card-actions"><RemoveBtn onClick={() => onAuthorizationChange(authorization.filter((_, idx) => idx !== i))} /></div>
+              </CollapseCard>
+            );
+          })
+        }
+      </div>
+
+      {/* ── Cache ── */}
+      <div className="cf-subsection">
+        <div className="cf-subsection-header">
+          <span className="cf-subsection-title">Cache</span>
+          <AddBtn label="Add profile" onClick={() => onCacheChange([...cache, emptyHttpCache()])} />
+        </div>
+        {cache.length === 0
+          ? <p className="cf-empty cf-empty-sm">No cache profiles. Add one to define a named proxy cache zone.</p>
+          : cache.map((c, i) => (
+            <CollapseCard key={i} title={c.name || <em>cache #{i + 1}</em>} meta={c.size || undefined} defaultOpen={!c.name}>
+              <div className="cf-grid-2">
+                <Field label="Name" required error={!c.name.trim() ? 'Required' : undefined}
+                  hint="Zone name — referenced by API Gateway and server/location cache rules.">
+                  <TextInput value={c.name}
+                    onChange={v => onCacheChange(cache.map((x, idx) => idx === i ? { ...x, name: v } : x))}
+                    placeholder="10m cache"
+                    error={!c.name.trim()} />
+                </Field>
+                <Field label="Zone size" required error={!c.size.trim() ? 'Required' : undefined}
+                  hint='Shared memory zone size, e.g. "10m".'>
+                  <TextInput value={c.size}
+                    onChange={v => onCacheChange(cache.map((x, idx) => idx === i ? { ...x, size: v } : x))}
+                    placeholder="10m" mono
+                    error={!c.size.trim()} />
+                </Field>
+                <Field label="Base path" required error={!c.basepath.trim() ? 'Required' : undefined}
+                  hint="Filesystem directory where cache files are stored.">
+                  <TextInput value={c.basepath}
+                    onChange={v => onCacheChange(cache.map((x, idx) => idx === i ? { ...x, basepath: v } : x))}
+                    placeholder="/var/cache/nginx/api" mono
+                    error={!c.basepath.trim()} />
+                </Field>
+                <Field label="Default TTL" required error={!c.ttl.trim() ? 'Required' : undefined}
+                  hint='Time to live for cached responses with no explicit Expires/Cache-Control, e.g. "10m".'>
+                  <TextInput value={c.ttl}
+                    onChange={v => onCacheChange(cache.map((x, idx) => idx === i ? { ...x, ttl: v } : x))}
+                    placeholder="10m" mono
+                    error={!c.ttl.trim()} />
+                </Field>
+                <Field label="Max size" hint='Maximum size of the cache on disk, e.g. "1g". Leave empty for no limit.'>
+                  <TextInput value={c.max_size ?? ''}
+                    onChange={v => onCacheChange(cache.map((x, idx) => idx === i ? { ...x, max_size: v } : x))}
+                    placeholder="1g" mono />
+                </Field>
+                <Field label="Min free" hint='Minimum free space to maintain on the filesystem, e.g. "512m".'>
+                  <TextInput value={c.min_free ?? ''}
+                    onChange={v => onCacheChange(cache.map((x, idx) => idx === i ? { ...x, min_free: v } : x))}
+                    placeholder="512m" mono />
+                </Field>
+              </div>
+              <div className="cf-card-actions"><RemoveBtn onClick={() => onCacheChange(cache.filter((_, idx) => idx !== i))} /></div>
+            </CollapseCard>
+          ))
+        }
+      </div>
+
+      {/* ── Maps ── */}
+      <div className="cf-subsection">
+        <div className="cf-subsection-header">
+          <span className="cf-subsection-title">Maps</span>
+          <AddBtn label="Add map" onClick={() => onMapsChange([...maps, emptyHttpMap()])} />
+        </div>
+        {maps.length === 0
+          ? <p className="cf-empty cf-empty-sm">No maps. Add one to define variable mappings using NGINX map blocks.</p>
+          : maps.map((m, i) => (
+            <CollapseCard key={i} title={m.variable || <em>map #{i + 1}</em>} meta={m.match || undefined} defaultOpen={!m.variable}>
+              <div className="cf-grid-2">
+                <Field label="Source variable" required hint='NGINX variable to match against, e.g. "$uri" or "$http_host".'>
+                  <TextInput value={m.match}
+                    onChange={v => onMapsChange(maps.map((x, idx) => idx === i ? { ...x, match: v } : x))}
+                    placeholder="$uri" mono />
+                </Field>
+                <Field label="Destination variable" required hint='Variable to set, e.g. "$target_uri". Must include the $ prefix.'>
+                  <TextInput value={m.variable}
+                    onChange={v => onMapsChange(maps.map((x, idx) => idx === i ? { ...x, variable: v } : x))}
+                    placeholder="$target_uri" mono />
+                </Field>
+              </div>
+              <div className="cf-subsection">
+                <div className="cf-subsection-header">
+                  <span style={{ fontSize: '0.75rem', fontWeight: 600, color: 'var(--text-dim)' }}>Entries</span>
+                  <AddBtn label="Add entry" onClick={() => onMapsChange(maps.map((x, idx) => idx === i ? { ...x, entries: [...(x.entries ?? []), emptyMapEntry()] } : x))} />
+                </div>
+                {(m.entries ?? []).length === 0
+                  ? <p className="cf-hint">No entries — add key/value pairs to define the map.</p>
+                  : (m.entries ?? []).map((e, ei) => (
+                    <div key={ei} className="cf-agw-item-row">
+                      <Field label="Key">
+                        <TextInput value={e.key} onChange={v => onMapsChange(maps.map((x, idx) => idx === i ? { ...x, entries: (x.entries ?? []).map((en, j) => j === ei ? { ...en, key: v } : en) } : x))} placeholder="default" mono />
+                      </Field>
+                      <Field label="Match type">
+                        <SelectInput value={e.keymatch} onChange={v => onMapsChange(maps.map((x, idx) => idx === i ? { ...x, entries: (x.entries ?? []).map((en, j) => j === ei ? { ...en, keymatch: v } : en) } : x))}
+                          options={[{ value: 'exact', label: 'Exact' }, { value: 'regex', label: 'Regex' }, { value: 'iregex', label: 'iRegex' }]} />
+                      </Field>
+                      <Field label="Value">
+                        <TextInput value={e.value} onChange={v => onMapsChange(maps.map((x, idx) => idx === i ? { ...x, entries: (x.entries ?? []).map((en, j) => j === ei ? { ...en, value: v } : en) } : x))} placeholder="/api/v1" mono />
+                      </Field>
+                      <div className="cf-agw-item-remove"><RemoveBtn onClick={() => onMapsChange(maps.map((x, idx) => idx === i ? { ...x, entries: (x.entries ?? []).filter((_, j) => j !== ei) } : x))} /></div>
+                    </div>
+                  ))
+                }
+              </div>
+              <div className="cf-card-actions"><RemoveBtn onClick={() => onMapsChange(maps.filter((_, idx) => idx !== i))} /></div>
+            </CollapseCard>
+          ))
+        }
+      </div>
+
+      {/* ── Log Formats ── */}
+      <div className="cf-subsection">
+        <div className="cf-subsection-header">
+          <span className="cf-subsection-title">Log Formats</span>
+          <AddBtn label="Add format" onClick={() => onLogFormatsChange([...logformats, emptyHttpLogFormat()])} />
+        </div>
+        {logformats.length === 0
+          ? <p className="cf-empty cf-empty-sm">No log formats. Add one to define custom NGINX access log formats.</p>
+          : logformats.map((lf, i) => (
+            <CollapseCard key={i} title={lf.name || <em>logformat #{i + 1}</em>} meta={lf.escape || undefined} defaultOpen={!lf.name}>
+              <div className="cf-grid-2">
+                <Field label="Name" required>
+                  <TextInput value={lf.name}
+                    onChange={v => onLogFormatsChange(logformats.map((x, idx) => idx === i ? { ...x, name: v } : x))}
+                    placeholder="custom_json" />
+                </Field>
+                <Field label="Escape" hint='Escape mode for special characters in log values.'>
+                  <SelectInput value={lf.escape}
+                    onChange={v => onLogFormatsChange(logformats.map((x, idx) => idx === i ? { ...x, escape: v } : x))}
+                    options={[{ value: 'default', label: 'default' }, { value: 'json', label: 'json' }, { value: 'none', label: 'none' }]} />
+                </Field>
+                <Field label="Format string" span="full" required hint='NGINX log format string. Use NGINX variables like $remote_addr, $request, $status, etc.'>
+                  <textarea
+                    className="cf-input cf-textarea-sm cf-mono"
+                    rows={3}
+                    value={lf.format}
+                    onChange={e => onLogFormatsChange(logformats.map((x, idx) => idx === i ? { ...x, format: e.target.value } : x))}
+                    placeholder='$remote_addr - $remote_user [$time_local] "$request" $status $body_bytes_sent'
+                    spellCheck={false}
+                  />
+                </Field>
+              </div>
+              <div className="cf-card-actions"><RemoveBtn onClick={() => onLogFormatsChange(logformats.filter((_, idx) => idx !== i))} /></div>
+            </CollapseCard>
+          ))
+        }
+      </div>
+
+      {/* ── NJS Profiles ── */}
+      <div className="cf-subsection">
+        <div className="cf-subsection-header">
+          <span className="cf-subsection-title">NJS Profiles</span>
+          <AddBtn label="Add profile" onClick={() => onNjsProfilesChange([...njsProfiles, emptyNjsFile()])} />
+        </div>
+        {njsProfiles.length === 0
+          ? <p className="cf-empty cf-empty-sm">No NJS profiles. Add one to reference an NJS JavaScript file.</p>
+          : njsProfiles.map((np, i) => (
+            <CollapseCard key={i} title={np.name || <em>profile #{i + 1}</em>} defaultOpen={!np.name}>
+              <div className="cf-grid-2">
+                <Field label="Name" required hint="Profile name referenced by NJS hooks.">
+                  <TextInput value={np.name}
+                    onChange={v => onNjsProfilesChange(njsProfiles.map((x, idx) => idx === i ? { ...x, name: v } : x))}
+                    placeholder="myProfile" />
+                </Field>
+                <Field label="File / URL" span="full" required hint="URL or path to the NJS JavaScript file.">
+                  <TextInput value={np.file.content}
+                    onChange={v => onNjsProfilesChange(njsProfiles.map((x, idx) => idx === i ? { ...x, file: { ...x.file, content: v } } : x))}
+                    placeholder="https://example.com/myProfile.js" mono />
+                </Field>
+              </div>
+              <div className="cf-card-actions"><RemoveBtn onClick={() => onNjsProfilesChange(njsProfiles.filter((_, idx) => idx !== i))} /></div>
+            </CollapseCard>
+          ))
+        }
+      </div>
+
+      {/* ── HTTP-level NJS Hooks ── */}
+      <NjsHooksServerEditor hooks={njs} onChange={onNjsChange} njsProfileNames={njsProfileNames} />
+
+      {/* ── ACME Issuers ── */}
+      <div className="cf-subsection">
+        <div className="cf-subsection-header">
+          <span className="cf-subsection-title">ACME Issuers</span>
+          <AddBtn label="Add issuer" onClick={() => onAcmeIssuersChange([...acmeIssuers, emptyAcmeIssuer()])} />
+        </div>
+        {acmeIssuers.length === 0
+          ? <p className="cf-empty cf-empty-sm">No ACME issuers. Add one to enable automatic certificate provisioning via Let's Encrypt or other ACME servers.</p>
+          : acmeIssuers.map((ai, i) => (
+            <CollapseCard key={i} title={ai.name || <em>issuer #{i + 1}</em>} meta={ai.uri || undefined} defaultOpen={!ai.name}>
+              <div className="cf-grid-2">
+                <Field label="Name" required>
+                  <TextInput value={ai.name}
+                    onChange={v => onAcmeIssuersChange(acmeIssuers.map((x, idx) => idx === i ? { ...x, name: v } : x))}
+                    placeholder="lets-encrypt" />
+                </Field>
+                <Field label="ACME server URI" required hint="ACME directory URL, e.g. the Let's Encrypt production or staging endpoint.">
+                  <TextInput value={ai.uri}
+                    onChange={v => onAcmeIssuersChange(acmeIssuers.map((x, idx) => idx === i ? { ...x, uri: v } : x))}
+                    placeholder="https://acme-v02.api.letsencrypt.org/directory" mono />
+                </Field>
+                <Field label="Account key" hint="Path or URL to the ACME account private key file.">
+                  <TextInput value={ai.account_key ?? ''}
+                    onChange={v => onAcmeIssuersChange(acmeIssuers.map((x, idx) => idx === i ? { ...x, account_key: v } : x))}
+                    placeholder="/etc/nginx/acme/account.key" mono />
+                </Field>
+                <Field label="Contact email" hint="Email address for ACME account registration.">
+                  <TextInput value={ai.contact ?? ''}
+                    onChange={v => onAcmeIssuersChange(acmeIssuers.map((x, idx) => idx === i ? { ...x, contact: v } : x))}
+                    placeholder="admin@example.com" />
+                </Field>
+                <Field label="State path" hint="Directory for ACME state and challenge files.">
+                  <TextInput value={ai.state_path ?? ''}
+                    onChange={v => onAcmeIssuersChange(acmeIssuers.map((x, idx) => idx === i ? { ...x, state_path: v } : x))}
+                    placeholder="/etc/nginx/acme" mono />
+                </Field>
+                <Field label="Trusted CA certificate" hint="Path to trusted CA bundle for verifying the ACME server's TLS certificate.">
+                  <TextInput value={ai.ssl_trusted_certificate ?? ''}
+                    onChange={v => onAcmeIssuersChange(acmeIssuers.map((x, idx) => idx === i ? { ...x, ssl_trusted_certificate: v } : x))}
+                    placeholder="/etc/ssl/ca-bundle.crt" mono />
+                </Field>
+                <Field label="SSL verify">
+                  <Toggle checked={ai.ssl_verify ?? false} onChange={v => onAcmeIssuersChange(acmeIssuers.map((x, idx) => idx === i ? { ...x, ssl_verify: v } : x))} label={ai.ssl_verify ? 'Yes' : 'No'} />
+                </Field>
+                <Field label="Accept terms of service">
+                  <Toggle checked={ai.accept_terms_of_service ?? false} onChange={v => onAcmeIssuersChange(acmeIssuers.map((x, idx) => idx === i ? { ...x, accept_terms_of_service: v } : x))} label={ai.accept_terms_of_service ? 'Accepted' : 'Not accepted'} />
+                </Field>
+              </div>
+              <div className="cf-card-actions"><RemoveBtn onClick={() => onAcmeIssuersChange(acmeIssuers.filter((_, idx) => idx !== i))} /></div>
+            </CollapseCard>
+          ))
+        }
+      </div>
+
+      {/* ── NGINX Plus API ── */}
+      <div className="cf-subsection">
+        <div className="cf-subsection-header">
+          <span className="cf-subsection-title">NGINX Plus API</span>
+          <Toggle checked={nginxPlusApi != null} onChange={v => onNginxPlusApiChange(v ? { write: false, listen: '127.0.0.1:8080', allow_acl: '127.0.0.1' } : undefined)} label={nginxPlusApi != null ? 'Enabled' : 'Disabled'} />
+        </div>
+        {nginxPlusApi != null && (
+          <div className="cf-grid-2">
+            <Field label="Listen address" hint='Address and port for the NGINX Plus API listener, e.g. "127.0.0.1:8080".'>
+              <TextInput value={nginxPlusApi.listen ?? '127.0.0.1:8080'} onChange={v => onNginxPlusApiChange({ ...nginxPlusApi, listen: v })} placeholder="127.0.0.1:8080" mono />
+            </Field>
+            <Field label="Allow ACL" hint='CIDR or IP address allowed to access the API, e.g. "127.0.0.1".'>
+              <TextInput value={nginxPlusApi.allow_acl ?? ''} onChange={v => onNginxPlusApiChange({ ...nginxPlusApi, allow_acl: v })} placeholder="127.0.0.1" mono />
+            </Field>
+            <Field label="Write access">
+              <Toggle checked={nginxPlusApi.write ?? false} onChange={v => onNginxPlusApiChange({ ...nginxPlusApi, write: v })} label={nginxPlusApi.write ? 'Enabled' : 'Disabled'} />
+            </Field>
+          </div>
+        )}
+      </div>
+
+      {/* ── Resolvers ── */}
+      <div className="cf-subsection">
+        <div className="cf-subsection-header">
+          <span className="cf-subsection-title">Resolvers</span>
+          <AddBtn label="Add resolver" onClick={() => onResolversChange([...resolvers, emptyHttpResolver()])} />
+        </div>
+        {resolvers.length === 0
+          ? <p className="cf-empty cf-empty-sm">No resolvers. Add one to configure DNS resolver addresses for dynamic upstream resolution.</p>
+          : resolvers.map((r, i) => (
+            <CollapseCard key={i} title={r.name || <em>resolver #{i + 1}</em>} meta={r.address || undefined} defaultOpen={!r.name}>
+              <div className="cf-grid-2">
+                <Field label="Name" required hint="Profile name — referenced by server/upstream resolver fields.">
+                  <TextInput value={r.name} onChange={v => onResolversChange(resolvers.map((x, idx) => idx === i ? { ...x, name: v } : x))} placeholder="my-resolver" />
+                </Field>
+                <Field label="Address" required hint='DNS server address and optional port, e.g. "8.8.8.8" or "1.1.1.1:53".'>
+                  <TextInput value={r.address} onChange={v => onResolversChange(resolvers.map((x, idx) => idx === i ? { ...x, address: v } : x))} placeholder="8.8.8.8" mono />
+                </Field>
+                <Field label="Valid TTL" hint='Override DNS TTL for resolved addresses, e.g. "30s".'>
+                  <TextInput value={r.valid ?? ''} onChange={v => onResolversChange(resolvers.map((x, idx) => idx === i ? { ...x, valid: v || undefined } : x))} placeholder="30s" mono />
+                </Field>
+                <Field label="Timeout" hint='Resolver response timeout, e.g. "5s".'>
+                  <TextInput value={r.timeout ?? ''} onChange={v => onResolversChange(resolvers.map((x, idx) => idx === i ? { ...x, timeout: v || undefined } : x))} placeholder="5s" mono />
+                </Field>
+                <Field label="IPv4">
+                  <Toggle checked={r.ipv4 ?? true} onChange={v => onResolversChange(resolvers.map((x, idx) => idx === i ? { ...x, ipv4: v } : x))} label={r.ipv4 ?? true ? 'Enabled' : 'Disabled'} />
+                </Field>
+                <Field label="IPv6">
+                  <Toggle checked={r.ipv6 ?? true} onChange={v => onResolversChange(resolvers.map((x, idx) => idx === i ? { ...x, ipv6: v } : x))} label={r.ipv6 ?? true ? 'Enabled' : 'Disabled'} />
+                </Field>
+              </div>
+              <div className="cf-card-actions"><RemoveBtn onClick={() => onResolversChange(resolvers.filter((_, idx) => idx !== i))} /></div>
+            </CollapseCard>
+          ))
+        }
+      </div>
+    </div>
+  );
+}
diff --git a/webui/src/components/configForm/ServersSection.tsx b/webui/src/components/configForm/ServersSection.tsx
new file mode 100644
index 00000000..2ad0feef
--- /dev/null
+++ b/webui/src/components/configForm/ServersSection.tsx
@@ -0,0 +1,105 @@
+import type { Server, HttpProfiles } from './types';
+import { emptyServer } from './defaults';
+import { Field, TextInput, Toggle, AddBtn, RemoveBtn, CollapseCard, ProfileSelect } from './primitives';
+import { LocationsEditor } from './LocationsEditor';
+import {
+  LogEditor, AppProtectEditor, SnippetEditor, HeadersEditor,
+  LocationAuthEditor, LocationAuthzEditor, LocationCacheEditor, NjsHooksServerEditor,
+} from './LocationEditors';
+import { TlsEditor } from './TlsEditor';
+
+export function ServersSection({ servers, onChange, profiles, authServerNames, njsProfileNames, resolverNames }: {
+  servers: Server[];
+  onChange: (s: Server[]) => void;
+  profiles?: HttpProfiles;
+  authServerNames?: string[];
+  njsProfileNames?: string[];
+  resolverNames?: string[];
+}) {
+  const update = (i: number, s: Server) => onChange(servers.map((x, idx) => idx === i ? s : x));
+  const remove = (i: number) => onChange(servers.filter((_, idx) => idx !== i));
+
+  return (
+    <div className="cf-group">
+      <div className="cf-group-header">
+        <span className="cf-group-title">Servers</span>
+        <AddBtn label="Add server" onClick={() => onChange([...servers, emptyServer()])} />
+      </div>
+
+      {servers.length === 0 && (
+        <p className="cf-empty">No HTTP servers defined. Add a server to start routing traffic.</p>
+      )}
+
+      {servers.map((srv, i) => (
+        <CollapseCard
+          key={i}
+          title={srv.name || <em>server #{i + 1}</em>}
+          meta={srv.listen?.address || '—'}
+          defaultOpen={i === 0 && servers.length === 1}
+        >
+          <div className="cf-card-actions">
+            <RemoveBtn onClick={() => remove(i)} />
+          </div>
+
+          <div className="cf-grid-2">
+            <Field label="Server name" required
+              hint='Unique identifier for this server. Alphanumeric, hyphens, underscores. Referenced as the "name" key in the declaration.'>
+              <TextInput value={srv.name} onChange={v => update(i, { ...srv, name: v })} placeholder="my-server" />
+            </Field>
+            <Field label="Listen address"
+              hint='IP address and port to bind to. Use 0.0.0.0 to listen on all interfaces. Examples: "0.0.0.0:80", "0.0.0.0:443", "[::]:8080".'>
+              <TextInput
+                value={srv.listen?.address ?? ''}
+                onChange={v => update(i, { ...srv, listen: { ...(srv.listen ?? {}), address: v } })}
+                placeholder="0.0.0.0:80"
+                mono
+              />
+            </Field>
+            <Field label="Server names" span="full"
+              hint='Space-separated list of hostnames this server responds to (HTTP Host header matching). Example: "example.com www.example.com".'>
+              <TextInput
+                value={(srv.names ?? []).join(' ')}
+                onChange={v => update(i, { ...srv, names: v.split(/\s+/).filter(Boolean) })}
+                placeholder="example.com www.example.com"
+                mono
+              />
+            </Field>
+            <Field label="Resolver" hint='Select a resolver profile defined in the HTTP Profiles → Resolvers section.'>
+              <ProfileSelect value={srv.resolver ?? ''} onChange={v => update(i, { ...srv, resolver: v || undefined })} options={resolverNames ?? []} />
+            </Field>
+          </div>
+
+          <div className="cf-field cf-field-inline">
+            <Toggle
+              checked={srv.listen?.http2 ?? false}
+              onChange={v => update(i, { ...srv, listen: { ...(srv.listen ?? {}), http2: v } })}
+              label="Enable HTTP/2"
+            />
+            <p className="cf-hint">Enables HTTP/2 protocol support on this listener via the http2 directive.</p>
+          </div>
+
+          <TlsEditor
+            tls={srv.listen?.tls}
+            onChange={t => update(i, { ...srv, listen: { ...(srv.listen ?? {}), tls: t } })}
+          />
+
+          <LogEditor log={srv.log} onChange={v => update(i, { ...srv, log: v })} />
+          <AppProtectEditor ap={srv.app_protect} onChange={v => update(i, { ...srv, app_protect: v })} />
+          <LocationCacheEditor cache={srv.cache} cacheNames={profiles?.cacheNames ?? []} onChange={v => update(i, { ...srv, cache: v })} />
+          <LocationAuthEditor auth={srv.authentication} authClientNames={profiles?.authClientNames ?? []} authServerNames={authServerNames ?? profiles?.authServerNames ?? []} onChange={v => update(i, { ...srv, authentication: v })} />
+          <LocationAuthzEditor authz={srv.authorization} authzNames={profiles?.authzNames ?? []} onChange={v => update(i, { ...srv, authorization: v })} />
+          <HeadersEditor headers={srv.headers} onChange={v => update(i, { ...srv, headers: v })} />
+          <NjsHooksServerEditor hooks={srv.njs ?? []} onChange={v => update(i, { ...srv, njs: v })} njsProfileNames={njsProfileNames ?? []} />
+          <SnippetEditor snippet={srv.snippet} onChange={v => update(i, { ...srv, snippet: v })} />
+
+          <LocationsEditor
+            locations={srv.locations ?? []}
+            onChange={locs => update(i, { ...srv, locations: locs })}
+            profiles={profiles}
+            njsProfileNames={njsProfileNames}
+          />
+        </CollapseCard>
+      ))}
+    </div>
+  );
+}
diff --git a/webui/src/components/configForm/TlsEditor.tsx b/webui/src/components/configForm/TlsEditor.tsx
new file mode 100644
index 00000000..5f588131
--- /dev/null
+++ b/webui/src/components/configForm/TlsEditor.tsx
@@ -0,0 +1,56 @@
+import { useState } from 'react';
+import type { TlsConfig } from './types';
+import { Field, TextInput, Toggle } from './primitives';
+
+export function TlsEditor({ tls, onChange }: {
+  tls: TlsConfig | undefined;
+  onChange: (t: TlsConfig | undefined) => void;
+}) {
+  const enabled = !!tls?.certificate || !!tls?.key;
+  const [show, setShow] = useState(enabled);
+  const t = tls ?? {};
+
+  const handleEnable = (v: boolean) => {
+    setShow(v);
+    if (!v) onChange(undefined);
+    else onChange({ certificate: '', key: '', protocols: ['TLSv1.2', 'TLSv1.3'] });
+  };
+
+  const TLS_PROTOCOL_OPTIONS = ['TLSv1.2', 'TLSv1.3', 'TLSv1.1'];
+  const toggleProto = (p: string) => {
+    const protos = t.protocols ?? [];
+    onChange({ ...t, protocols: protos.includes(p) ? protos.filter(x => x !== p) : [...protos, p] });
+  };
+
+  return (
+    <div className="cf-subsection cf-subsection-tls">
+      <div className="cf-subsection-header">
+        <span className="cf-subsection-title">TLS / SSL</span>
+        <Toggle checked={show} onChange={handleEnable} label={show ? 'Enabled' : 'Disabled'} />
+      </div>
+      {show && (
+        <div className="cf-grid-3">
+          <Field label="Certificate" required hint="Name of the certificate object managed by NIM or NGINX One (not a file path).">
+            <TextInput value={t.certificate ?? ''} onChange={v => onChange({ ...t, certificate: v })} placeholder="my-tls-cert" />
+          </Field>
+          <Field label="Private key" required hint="Name of the private key object matching the certificate above.">
+            <TextInput value={t.key ?? ''} onChange={v => onChange({ ...t, key: v })} placeholder="my-tls-key" />
+          </Field>
+          <Field label="Protocols" hint="TLS protocol versions to accept. TLSv1.3 + TLSv1.2 is the recommended baseline.">
+            <div className="cf-modules">
+              {TLS_PROTOCOL_OPTIONS.map(p => (
+                <label key={p} className="cf-toggle">
+                  <input type="checkbox" checked={(t.protocols ?? []).includes(p)} onChange={() => toggleProto(p)} />
+                  <span className="cf-toggle-text">{p}</span>
+                </label>
+              ))}
+            </div>
+          </Field>
+          <Field label="Ciphers" hint='OpenSSL cipher list string, e.g. "HIGH:!aNULL:!MD5". Leave empty to use the NGINX default.'>
+            <TextInput value={t.ciphers ?? ''} onChange={v => onChange({ ...t, ciphers: v || undefined })} placeholder="HIGH:!aNULL:!MD5" mono />
+          </Field>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/webui/src/components/configForm/UpstreamsSection.tsx b/webui/src/components/configForm/UpstreamsSection.tsx
new file mode 100644
index 00000000..f3e07944
--- /dev/null
+++ b/webui/src/components/configForm/UpstreamsSection.tsx
@@ -0,0 +1,110 @@
+import type { Upstream, Origin } from './types';
+import { emptyUpstream, emptyOrigin } from './defaults';
+import { Field, TextInput, NumberInput, Toggle, AddBtn, RemoveBtn, CollapseCard, ProfileSelect } from './primitives';
+import { SnippetEditor } from './LocationEditors';
+
+export function UpstreamsSection({ upstreams, onChange, resolverNames }: { upstreams: Upstream[]; onChange: (u: Upstream[]) => void; resolverNames?: string[] }) {
+  const update = (i: number, u: Upstream) => onChange(upstreams.map((x, idx) => idx === i ? u : x));
+  const remove = (i: number) => onChange(upstreams.filter((_, idx) => idx !== i));
+  const updOrigin = (i: number, oi: number, o: Origin) =>
+    update(i, { ...upstreams[i], origin: (upstreams[i].origin ?? []).map((x, oIdx) => oIdx === oi ? o : x) });
+  const remOrigin = (i: number, oi: number) =>
+    update(i, { ...upstreams[i], origin: (upstreams[i].origin ?? []).filter((_, oIdx) => oIdx !== oi) });
+  const addOrigin = (i: number) =>
+    update(i, { ...upstreams[i], origin: [...(upstreams[i].origin ?? []), emptyOrigin()] });
+
+  return (
+    <div className="cf-group">
+      <div className="cf-group-header">
+        <span className="cf-group-title">Upstreams</span>
+        <AddBtn label="Add upstream" onClick={() => onChange([...upstreams, emptyUpstream()])} />
+      </div>
+
+      {upstreams.length === 0 && (
+        <p className="cf-empty">No upstreams defined. Add an upstream to reference from your server locations.</p>
+      )}
+
+      {upstreams.map((up, i) => (
+        <CollapseCard
+          key={i}
+          title={up.name || <em>upstream #{i + 1}</em>}
+          meta={`${up.origin?.length ?? 0} origin${(up.origin?.length ?? 0) !== 1 ? 's' : ''}`}
+          defaultOpen={i === 0 && upstreams.length === 1}
+        >
+          <div className="cf-card-actions"><RemoveBtn onClick={() => remove(i)} /></div>
+
+          <div className="cf-grid-2">
+            <Field label="Upstream name" required
+              hint='Identifier for this upstream group. Reference it from a location as "http://&lt;name&gt;". Alphanumeric, hyphens, underscores.'>
+              <TextInput value={up.name} onChange={v => update(i, { ...up, name: v })} placeholder="backend" />
+            </Field>
+            <Field label="Resolver"
+              hint="Select a resolver profile (from the HTTP Profiles → Resolvers section) for dynamic upstream addresses. Leave empty for static IPs.">
+              <ProfileSelect value={up.resolver ?? ''} onChange={v => update(i, { ...up, resolver: v || undefined })} options={resolverNames ?? []} />
+            </Field>
+          </div>
+
+          {/* Sticky cookie session persistence */}
+          <div className="cf-subsection cf-subsection-tls">
+            <div className="cf-subsection-header">
+              <span className="cf-subsection-title">Sticky Session (NGINX Plus)</span>
+              <Toggle checked={up.sticky != null} onChange={v => update(i, { ...up, sticky: v ? { cookie: 'srv_id' } : undefined })} label={up.sticky != null ? 'Enabled' : 'Disabled'} />
+            </div>
+            {up.sticky != null && (
+              <div className="cf-grid-2">
+                <Field label="Cookie name" required hint="Name of the sticky session cookie.">
+                  <TextInput value={up.sticky.cookie} onChange={v => update(i, { ...up, sticky: { ...up.sticky!, cookie: v } })} placeholder="srv_id" mono />
+                </Field>
+                <Field label="Expires" hint='Cookie max-age, e.g. "1h". Leave empty for session cookie.'>
+                  <TextInput value={up.sticky.expires ?? ''} onChange={v => update(i, { ...up, sticky: { ...up.sticky!, expires: v || undefined } })} placeholder="1h" mono />
+                </Field>
+                <Field label="Domain" hint='Cookie domain attribute, e.g. ".example.com".'>
+                  <TextInput value={up.sticky.domain ?? ''} onChange={v => update(i, { ...up, sticky: { ...up.sticky!, domain: v || undefined } })} placeholder=".example.com" mono />
+                </Field>
+                <Field label="Path" hint='Cookie path attribute. Default is "/".'>
+                  <TextInput value={up.sticky.path ?? ''} onChange={v => update(i, { ...up, sticky: { ...up.sticky!, path: v || undefined } })} placeholder="/" mono />
+                </Field>
+              </div>
+            )}
+          </div>
+
+          <SnippetEditor snippet={up.snippet} onChange={v => update(i, { ...up, snippet: v })} />
+
+          <div className="cf-subsection">
+            <div className="cf-subsection-header">
+              <span className="cf-subsection-title">Origins</span>
+              <AddBtn label="Add origin" onClick={() => addOrigin(i)} />
+            </div>
+            <p className="cf-hint cf-hint-top">Each origin is a backend server. NGINX will load-balance requests across all non-backup origins.</p>
+            {(up.origin ?? []).map((o, oi) => (
+              <div key={oi} className="cf-origin-row">
+                <Field label="Server address" hint='Format: "host:port" or IP. Example: "10.0.0.1:8080" or "backend.internal:443".'>
+                  <TextInput value={o.server} onChange={v => updOrigin(i, oi, { ...o, server: v })} placeholder="10.0.0.1:8080" mono />
+                </Field>
+                <Field label="Weight" hint="Relative weight for weighted round-robin. Higher = more requests. Default: 1.">
+                  <NumberInput value={o.weight ?? 1} onChange={v => updOrigin(i, oi, { ...o, weight: v })} min={1} />
+                </Field>
+                <Field label="Max fails" hint="Failures before marking server as unavailable. 0 disables fail tracking.">
+                  <NumberInput value={o.max_fails ?? 1} onChange={v => updOrigin(i, oi, { ...o, max_fails: v })} min={0} />
+                </Field>
+                <Field label="Fail timeout" hint='Time window for max_fails counting, and recovery time. Example: "10s", "30s".'>
+                  <TextInput value={o.fail_timeout ?? '10s'} onChange={v => updOrigin(i, oi, { ...o, fail_timeout: v })} placeholder="10s" mono />
+                </Field>
+                <Field label="Max connections" hint="Maximum concurrent connections to this origin. 0 means unlimited (NGINX Plus only).">
+                  <NumberInput value={o.max_conns ?? 0} onChange={v => updOrigin(i, oi, { ...o, max_conns: v })} min={0} />
+                </Field>
+                <Field label="Slow start" hint='Gradually ramp up connections after recovery, e.g. "30s". Leave empty to disable (NGINX Plus only).'>
+                  <TextInput value={o.slow_start ?? ''} onChange={v => updOrigin(i, oi, { ...o, slow_start: v || undefined })} placeholder="30s" mono />
+                </Field>
+                <Field label="Backup">
+                  <Toggle checked={o.backup ?? false} onChange={v => updOrigin(i, oi, { ...o, backup: v })} label="Backup only" />
+                </Field>
+                <div className="cf-origin-remove"><RemoveBtn onClick={() => remOrigin(i, oi)} /></div>
+              </div>
+            ))}
+          </div>
+        </CollapseCard>
+      ))}
+    </div>
+  );
+}
diff --git a/webui/src/components/configForm/defaults.ts b/webui/src/components/configForm/defaults.ts
new file mode 100644
index 00000000..355815f8
--- /dev/null
+++ b/webui/src/components/configForm/defaults.ts
@@ -0,0 +1,190 @@
+import type {
+  OutputNMS, OutputNGINXOne, LicenseConfig, Server, Location, Upstream, Origin,
+  NMSCertificate, LogProfile, HttpMap, MapEntry, HttpLogFormat, HttpResolver,
+  NjsFile, AcmeIssuer, NjsHookServer, NjsHookLocation, HttpAuthServer,
+  AGWRateLimit, AGWAuthorization, AGWCache, AGWVisibility,
+  NMSPolicyVersion, NMSPolicy, HttpRateLimit, HttpAuthClient, HttpAuthzJwtClaim,
+  HttpAuthorization, HttpCache, ConfigData,
+} from './types';
+
+export const emptyNms = (): OutputNMS => ({
+  url: '', username: '', password: '', instancegroup: '', synctime: 0, modules: [],
+});
+
+export const emptyNginxOne = (): OutputNGINXOne => ({
+  url: '', namespace: '', token: '', configsyncgroup: '', synctime: 0, modules: [],
+});
+
+export const emptyLicense = (): LicenseConfig => ({
+  endpoint: 'product.connect.nginx.com', token: '', ssl_verify: true,
+  proxy: '', proxy_username: '', proxy_password: '',
+});
+
+export const emptyServer = (): Server => ({
+  name: '', names: [], listen: { address: '', http2: false }, locations: [],
+});
+
+export const emptyLocation = (): Location => ({ uri: '/', urimatch: 'prefix', upstream: '' });
+
+export const emptyUpstream = (): Upstream => ({ name: '', origin: [{ server: '', weight: 1 }] });
+
+export const emptyOrigin = (): Origin => ({ server: '', weight: 1, max_fails: 1, fail_timeout: '10s', max_conns: 0, slow_start: '0' });
+
+export const emptyCertificate = (): NMSCertificate => ({ type: 'certificate', name: '', contents: { content: '' } });
+
+export const emptyLogProfile = (): LogProfile => ({ type: 'app_protect', app_protect: { name: '', format: 'default', type: 'blocked', max_request_size: 'any', max_message_size: '5k' } });
+
+export const emptyHttpMap = (): HttpMap => ({ match: '', variable: '', entries: [] });
+
+export const emptyMapEntry = (): MapEntry => ({ key: '', keymatch: 'exact', value: '' });
+
+export const emptyHttpLogFormat = (): HttpLogFormat => ({ name: '', escape: 'default', format: '$remote_addr - $remote_user [$time_local] "$request" $status $body_bytes_sent' });
+
+export const emptyHttpResolver = (): HttpResolver => ({ name: '', address: '', valid: '', ipv4: true, ipv6: true, timeout: '30s' });
+
+export const emptyNjsFile = (): NjsFile => ({ name: '', file: { content: '' } });
+
+export const emptyAcmeIssuer = (): AcmeIssuer => ({ name: '', uri: 'https://acme-v02.api.letsencrypt.org/directory', accept_terms_of_service: false, ssl_verify: false });
+
+export const emptyNjsHookServer = (): NjsHookServer => ({ hook: { type: 'js_set', js_set: { variable: '' } }, profile: '', function: '' });
+
+export const emptyNjsHookLocation = (): NjsHookLocation => ({ hook: { type: 'js_content' }, profile: '', function: '' });
+
+export const emptyHttpAuthServerToken = (): HttpAuthServer => ({ name: '', type: 'token', token: { token: '', type: 'bearer', location: '', username: '', password: '' } });
+
+export const emptyHttpAuthServerMtls = (): HttpAuthServer => ({ name: '', type: 'mtls', mtls: { certificate: '', key: '' } });
+
+export const emptyAGWRateLimit = (): AGWRateLimit => ({
+  profile: '', httpcode: 429, burst: 0, delay: 0, enforceOnPaths: true, paths: [],
+});
+
+export const emptyAGWAuthorization = (): AGWAuthorization => ({
+  profile: '', enforceOnPaths: true, paths: [],
+});
+
+export const emptyAGWCache = (): AGWCache => ({
+  profile: '', key: '$scheme$proxy_host$request_uri', validity: [], enforceOnPaths: true, paths: [],
+});
+
+export const emptyAGWVisibility = (): AGWVisibility => ({
+  enabled: true, type: 'moesif',
+  moesif: { application_id: '', plugin_path: '/usr/local/share/lua/5.1/resty/moesif' },
+});
+
+export const emptyNMSPolicyVersion = (): NMSPolicyVersion => ({
+  tag: '', displayName: '', description: '', contents: { content: '' },
+});
+
+export const emptyNMSPolicy = (): NMSPolicy => ({
+  type: 'app_protect', name: '', active_tag: '', versions: [],
+});
+
+export const emptyHttpRateLimit = (): HttpRateLimit => ({ name: '', key: '$binary_remote_addr', size: '10m', rate: '10r/s' });
+
+export const emptyHttpAuthClient = (): HttpAuthClient => ({ name: '', type: 'jwt', jwt: { realm: '', key: '', jwt_type: 'signed', cachetime: 0, token_location: '' } });
+
+export const emptyHttpAuthzClaim = (): HttpAuthzJwtClaim => ({ name: '', value: [], errorcode: 403 });
+
+export const emptyHttpAuthorization = (): HttpAuthorization => ({ name: '', type: 'jwt', jwt: { claims: [] } });
+
+export const emptyHttpCache = (): HttpCache => ({ name: '', basepath: '/tmp', size: '10m', ttl: '10m' });
+
+export function parseConfig(json: string): ConfigData | null {
+  try {
+    const p = JSON.parse(json);
+    return {
+      output: {
+        type: p?.output?.type ?? 'nim',
+        synchronous: p?.output?.synchronous ?? true,
+        license: p?.output?.license ?? undefined,
+        nms: { ...emptyNms(), ...(p?.output?.nms ?? {}) },
+        nginxone: { ...emptyNginxOne(), ...(p?.output?.nginxone ?? {}) },
+      },
+      declaration: {
+        certificates: p?.declaration?.certificates ?? [],
+        http: {
+          servers: p?.declaration?.http?.servers ?? [],
+          upstreams: p?.declaration?.http?.upstreams ?? [],
+          rate_limit: p?.declaration?.http?.rate_limit ?? [],
+          authentication: p?.declaration?.http?.authentication ?? { client: [] },
+          authorization: p?.declaration?.http?.authorization ?? [],
+          cache: p?.declaration?.http?.cache ?? [],
+          maps: p?.declaration?.http?.maps ?? [],
+          logformats: p?.declaration?.http?.logformats ?? [],
+          njs: p?.declaration?.http?.njs ?? [],
+          njs_profiles: p?.declaration?.http?.njs_profiles ?? [],
+          acme_issuers: p?.declaration?.http?.acme_issuers ?? [],
+          nginx_plus_api: p?.declaration?.http?.nginx_plus_api ?? undefined,
+          policies: p?.declaration?.http?.policies ?? [],
+          log_profiles: p?.declaration?.http?.log_profiles ?? [],
+        },
+        layer4: {
+          servers: p?.declaration?.layer4?.servers ?? [],
+          upstreams: p?.declaration?.layer4?.upstreams ?? [],
+        },
+        resolvers: p?.declaration?.resolvers ?? [],
+      },
+    };
+  } catch {
+    return null;
+  }
+}
+
+export function toJson(cfg: ConfigData): string {
+  const out: Record<string, unknown> = { type: cfg.output.type, synchronous: cfg.output.synchronous ?? true };
+  if (cfg.output.license) out.license = cfg.output.license;
+  if (cfg.output.type === 'nim') out.nms = cfg.output.nms;
+  else out.nginxone = cfg.output.nginxone;
+
+  const decl: Record<string, unknown> = {};
+  if (cfg.declaration.certificates?.length) {
+    decl.certificates = cfg.declaration.certificates;
+  }
+  const http = cfg.declaration.http;
+  const httpHasContent = (
+    (http?.servers?.length ?? 0) +
+    (http?.upstreams?.length ?? 0) +
+    (http?.rate_limit?.length ?? 0) +
+    (http?.authentication?.client?.length ?? 0) +
+    (http?.authorization?.length ?? 0) +
+    (http?.cache?.length ?? 0) +
+    (http?.maps?.length ?? 0) +
+    (http?.logformats?.length ?? 0) +
+    (http?.njs?.length ?? 0) +
+    (http?.njs_profiles?.length ?? 0) +
+    (http?.acme_issuers?.length ?? 0) +
+    (http?.nginx_plus_api ? 1 : 0) +
+    (http?.policies?.length ?? 0) +
+    (http?.log_profiles?.length ?? 0)
+  ) > 0;
+  if (httpHasContent) {
+    decl.http = {
+      ...(http?.rate_limit?.length           ? { rate_limit:     http.rate_limit }     : {}),
+      ...(http?.authentication?.client?.length || http?.authentication?.server?.length ? { authentication: http.authentication } : {}),
+      ...(http?.authorization?.length        ? { authorization:  http.authorization }  : {}),
+      ...(http?.cache?.length                ? { cache:          http.cache }          : {}),
+      ...(http?.maps?.length                 ? { maps:           http.maps }           : {}),
+      ...(http?.logformats?.length           ? { logformats:     http.logformats }     : {}),
+      ...(http?.njs?.length                  ? { njs:            http.njs }            : {}),
+      ...(http?.njs_profiles?.length         ? { njs_profiles:   http.njs_profiles }   : {}),
+      ...(http?.acme_issuers?.length         ? { acme_issuers:   http.acme_issuers }   : {}),
+      ...(http?.nginx_plus_api               ? { nginx_plus_api: http.nginx_plus_api } : {}),
+      ...(http?.policies?.length             ? { policies:       http.policies }       : {}),
+      ...(http?.log_profiles?.length         ? { log_profiles:   http.log_profiles }   : {}),
+      ...(http?.servers?.length              ? { servers:        http.servers }        : {}),
+      ...(http?.upstreams?.length            ? { upstreams:      http.upstreams }      : {}),
+    };
+  }
+  const l4 = cfg.declaration.layer4;
+  if ((l4?.servers?.length ?? 0) + (l4?.upstreams?.length ?? 0) > 0) {
+    decl.layer4 = {
+      ...(l4?.servers?.length ? { servers: l4.servers } : {}),
+      ...(l4?.upstreams?.length ? { upstreams: l4.upstreams } : {}),
+    };
+  }
+  if (cfg.declaration.resolvers?.length) {
+    decl.resolvers = cfg.declaration.resolvers;
+  }
+
+  return JSON.stringify({ output: out, declaration: decl }, null, 2);
+}
diff --git a/webui/src/components/configForm/primitives.tsx b/webui/src/components/configForm/primitives.tsx
new file mode 100644
index 00000000..bc2c2283
--- /dev/null
+++ b/webui/src/components/configForm/primitives.tsx
@@ -0,0 +1,167 @@
+import { useState, type ReactNode } from 'react';
+import type { HttpProfiles } from './types';
+
+export function Field({
+  label, required, hint, error, children, span,
+}: {
+  label: string; required?: boolean; hint?: string; error?: string; children: ReactNode; span?: 'full';
+}) {
+  return (
+    <div className={`cf-field${span === 'full' ? ' cf-field-full' : ''}`}>
+      <label className="cf-label">
+        {label}{required && <span className="cf-required">*</span>}
+      </label>
+      {children}
+      {error && <p className="cf-field-error">{error}</p>}
+      {!error && hint && <p className="cf-hint">{hint}</p>}
+    </div>
+  );
+}
+
+export function TextInput({
+  value, onChange, placeholder, type = 'text', mono, error,
+}: {
+  value: string; onChange: (v: string) => void; placeholder?: string; type?: string; mono?: boolean; error?: boolean;
+}) {
+  return (
+    <input
+      className={`cf-input${mono ? ' cf-mono' : ''}${error ? ' cf-input-error' : ''}`}
+      type={type}
+      value={value}
+      placeholder={placeholder}
+      autoComplete="off"
+      spellCheck={false}
+      onChange={e => onChange(e.target.value)}
+    />
+  );
+}
+
+export function NumberInput({ value, onChange, min = 0 }: { value: number; onChange: (v: number) => void; min?: number }) {
+  return (
+    <input
+      className="cf-input cf-input-sm"
+      type="number"
+      value={value}
+      min={min}
+      onChange={e => onChange(Number(e.target.value))}
+    />
+  );
+}
+
+export function SelectInput({ value, onChange, options, error }: {
+  value: string; onChange: (v: string) => void;
+  options: { value: string; label: string }[];
+  error?: boolean;
+}) {
+  return (
+    <select className={`cf-input${error ? ' cf-input-error' : ''}`} value={value} onChange={e => onChange(e.target.value)}>
+      {options.map(o => <option key={o.value} value={o.value}>{o.label}</option>)}
+    </select>
+  );
+}
+
+export function ProfileSelect({ value, onChange, options, error }: {
+  value: string;
+  onChange: (v: string) => void;
+  options: string[];
+  placeholder?: string;
+  error?: boolean;
+}) {
+  const isEmpty = options.length === 0;
+  return (
+    <select
+      className={`cf-input cf-input-mono${error ? ' cf-input-error' : ''}`}
+      value={value}
+      onChange={e => onChange(e.target.value)}
+      disabled={isEmpty}
+      title={isEmpty ? 'Define profiles in the HTTP section first' : undefined}
+    >
+      {isEmpty
+        ? <option value="">— no profiles defined —</option>
+        : <>
+            <option value="">— select profile —</option>
+            {options.map(n => <option key={n} value={n}>{n}</option>)}
+          </>
+      }
+    </select>
+  );
+}
+
+export function Toggle({ checked, onChange, label }: { checked: boolean; onChange: (v: boolean) => void; label: string }) {
+  return (
+    <label className="cf-toggle">
+      <input type="checkbox" checked={checked} onChange={e => onChange(e.target.checked)} />
+      <span className="cf-toggle-text">{label}</span>
+    </label>
+  );
+}
+
+export const MODULES = [
+  { value: 'ngx_http_app_protect_module', label: 'NGINX App Protect WAF' },
+  { value: 'ngx_http_js_module',          label: 'NGINX JavaScript (njs) — HTTP' },
+  { value: 'ngx_stream_js_module',        label: 'NGINX JavaScript (njs) — Stream' },
+  { value: 'ngx_http_geoip2_module',      label: 'GeoIP2' },
+];
+
+export function ModulesField({ value, onChange }: { value: string[]; onChange: (v: string[]) => void }) {
+  const toggle = (mod: string) =>
+    onChange(value.includes(mod) ? value.filter(m => m !== mod) : [...value, mod]);
+  return (
+    <div className="cf-modules">
+      {MODULES.map(m => (
+        <label key={m.value} className="cf-toggle">
+          <input type="checkbox" checked={value.includes(m.value)} onChange={() => toggle(m.value)} />
+          <span className="cf-toggle-text">{m.label}</span>
+        </label>
+      ))}
+    </div>
+  );
+}
+
+export function SectionTitle({ title, sub }: { title: string; sub?: string }) {
+  return (
+    <div className="cf-section-head">
+      <div className="cf-section-text">
+        <span className="cf-section-title">{title}</span>
+        {sub && <span className="cf-section-sub">{sub}</span>}
+      </div>
+    </div>
+  );
+}
+
+export function AddBtn({ label, onClick }: { label: string; onClick: () => void }) {
+  return (
+    <button type="button" className="cf-btn-add" onClick={onClick}>
+      <span className="cf-btn-add-icon">+</span> {label}
+    </button>
+  );
+}
+
+export function RemoveBtn({ onClick }: { onClick: () => void }) {
+  return (
+    <button type="button" className="cf-btn-remove" title="Remove" onClick={onClick}>
+      ✕
+    </button>
+  );
+}
+
+export function CollapseCard({
+  title, meta, children, defaultOpen,
+}: {
+  title: ReactNode; meta?: string; children: ReactNode; defaultOpen?: boolean;
+}) {
+  const [open, setOpen] = useState(defaultOpen ?? false);
+  return (
+    <div className={`cf-card${open ? ' cf-card-open' : ''}`}>
+      <div className="cf-card-header" onClick={() => setOpen(o => !o)}>
+        <span className="cf-card-caret">{open ? '▾' : '▸'}</span>
+        <span className="cf-card-title">{title}</span>
+        {meta && <span className="cf-card-meta">{meta}</span>}
+      </div>
+      {open && <div className="cf-card-body">{children}</div>}
+    </div>
+  );
+}
+
+// Re-export HttpProfiles so consumers can import it from primitives if needed
+export type { HttpProfiles };
diff --git a/webui/src/components/configForm/types.ts b/webui/src/components/configForm/types.ts
new file mode 100644
index 00000000..b88a89c5
--- /dev/null
+++ b/webui/src/components/configForm/types.ts
@@ -0,0 +1,512 @@
+// ─── Domain interfaces for NGINX Declarative API ConfigForm ──────────────────
+
+export interface Origin {
+  server: string;
+  weight?: number;
+  max_fails?: number;
+  fail_timeout?: string;
+  max_conns?: number;
+  slow_start?: string;
+  backup?: boolean;
+}
+
+export interface Sticky {
+  cookie: string;
+  expires?: string;
+  domain?: string;
+  path?: string;
+}
+
+export interface SourceOfTruth {
+  content: string;
+  authentication?: Array<{ profile?: string }>;
+}
+
+export interface HTTPHeader {
+  name: string;
+  value: string;
+}
+
+export interface LocationHeaderToClient {
+  add?: HTTPHeader[];
+  delete?: string[];
+  replace?: HTTPHeader[];
+}
+
+export interface LocationHeaderToServer {
+  set?: HTTPHeader[];
+  delete?: string[];
+}
+
+export interface LocationHeaders {
+  to_server?: LocationHeaderToServer;
+  to_client?: LocationHeaderToClient;
+}
+
+export interface LogAccess {
+  destination: string;
+  format?: string;
+  condition?: string;
+}
+
+export interface LogError {
+  destination: string;
+  level?: string;
+}
+
+export interface Log {
+  access?: LogAccess;
+  error?: LogError;
+}
+
+export interface AppProtectLog {
+  enabled?: boolean;
+  profile_name?: string;
+  destination?: string;
+}
+
+export interface AppProtect {
+  enabled?: boolean;
+  policy: string;
+  log?: AppProtectLog;
+}
+
+export interface HealthCheck {
+  enabled?: boolean;
+  uri?: string;
+  interval?: number;
+  fails?: number;
+  passes?: number;
+}
+
+export interface CacheItem {
+  profile?: string;
+  key?: string;
+  validity?: Array<{ code?: string; ttl?: string }>;
+}
+
+export interface RateLimitRef {
+  profile?: string;
+  httpcode?: number;
+  burst?: number;
+  delay?: number;
+}
+
+export interface LocationAuthEntry {
+  profile?: string;
+}
+
+export interface LocationAuth {
+  client?: LocationAuthEntry[];
+  server?: LocationAuthEntry[];
+}
+
+export interface AuthzRef {
+  profile?: string;
+}
+
+export interface NjsHookDetails {
+  type: string;
+  js_body_filter?: { buffer_type?: string };
+  js_periodic?: { interval?: string; jitter?: number; worker_affinity?: string };
+  js_preload_object?: { file: string };
+  js_set?: { variable: string };
+}
+
+export interface NjsHookLocation {
+  hook: NjsHookDetails;
+  profile: string;
+  function: string;
+}
+
+export interface NjsHookServer {
+  hook: { type: string; js_preload_object?: { file: string }; js_set?: { variable: string } };
+  profile: string;
+  function: string;
+}
+
+export interface Location {
+  uri: string;
+  urimatch?: string;
+  upstream?: string;
+  apigateway?: APIGateway;
+  log?: Log;
+  caching?: string;
+  rate_limit?: RateLimitRef;
+  health_check?: HealthCheck;
+  app_protect?: AppProtect;
+  snippet?: SourceOfTruth;
+  authentication?: LocationAuth;
+  authorization?: AuthzRef;
+  headers?: LocationHeaders;
+  njs?: NjsHookLocation[];
+  cache?: CacheItem;
+}
+
+export interface AGWOpenAPISchema {
+  content?: string;
+}
+
+export interface AGWApiGateway {
+  enabled?: boolean;
+  strip_uri?: boolean;
+  server_url?: string;
+}
+
+export interface DevPortalRedocly {
+  uri?: string;
+}
+
+export interface DevPortalBackstage {
+  name?: string;
+  lifecycle?: string;
+  owner?: string;
+  system?: string;
+}
+
+export interface AGWDeveloperPortal {
+  enabled?: boolean;
+  type?: string;
+  redocly?: DevPortalRedocly;
+  backstage?: DevPortalBackstage;
+}
+
+export interface AGWVisibilityMoesif {
+  application_id?: string;
+  plugin_path?: string;
+}
+
+export interface AGWVisibility {
+  enabled?: boolean;
+  type?: string;
+  moesif?: AGWVisibilityMoesif;
+}
+
+export interface AGWRateLimit {
+  profile?: string;
+  httpcode?: number;
+  burst?: number;
+  delay?: number;
+  enforceOnPaths?: boolean;
+  paths?: string[];
+}
+
+export interface AGWAuthClient {
+  profile?: string;
+}
+
+export interface AGWAuthentication {
+  client?: AGWAuthClient[];
+  enforceOnPaths?: boolean;
+  paths?: string[];
+}
+
+export interface AGWAuthorization {
+  profile: string;
+  enforceOnPaths?: boolean;
+  paths?: string[];
+}
+
+export interface AGWCacheTTL {
+  code?: string;
+  ttl?: string;
+}
+
+export interface AGWCache {
+  profile: string;
+  key?: string;
+  validity?: AGWCacheTTL[];
+  enforceOnPaths?: boolean;
+  paths?: string[];
+}
+
+export interface APIGateway {
+  openapi_schema?: AGWOpenAPISchema;
+  api_gateway?: AGWApiGateway;
+  developer_portal?: AGWDeveloperPortal;
+  visibility?: AGWVisibility[];
+  rate_limit?: AGWRateLimit[];
+  authentication?: AGWAuthentication;
+  authorization?: AGWAuthorization[];
+  cache?: AGWCache[];
+}
+
+export interface TlsConfig {
+  certificate?: string;
+  key?: string;
+  acme_issuer?: string;
+  ciphers?: string;
+  protocols?: string[];
+}
+
+export interface Server {
+  name: string;
+  names?: string[];
+  resolver?: string;
+  listen?: { address?: string; http2?: boolean; tls?: TlsConfig };
+  log?: Log;
+  locations?: Location[];
+  app_protect?: AppProtect;
+  snippet?: SourceOfTruth;
+  headers?: LocationHeaders;
+  njs?: NjsHookServer[];
+  authentication?: LocationAuth;
+  authorization?: AuthzRef;
+  cache?: CacheItem;
+}
+
+export interface Upstream {
+  name: string;
+  origin: Origin[];
+  resolver?: string;
+  sticky?: Sticky;
+  snippet?: SourceOfTruth;
+}
+
+// ─── HTTP-level profile interfaces ────────────────────────────────────────────
+
+export interface HttpRateLimit {
+  name: string;
+  key: string;
+  size: string;
+  rate: string;
+}
+
+export interface HttpAuthJwt {
+  realm: string;
+  key: string;
+  cachetime?: number;
+  jwt_type?: string;
+  token_location?: string;
+}
+
+export interface HttpAuthMtls {
+  enabled?: string;
+  client_certificates: string;
+  trusted_ca_certificates?: string;
+}
+
+export interface HttpAuthOidc {
+  issuer: string;
+  client_id: string;
+  client_secret: string;
+  config_url?: string;
+  redirect_uri?: string;
+  scope?: string;
+  session_timeout?: string;
+}
+
+export interface HttpAuthClient {
+  name: string;
+  type: string;
+  jwt?: HttpAuthJwt;
+  mtls?: HttpAuthMtls;
+  oidc?: HttpAuthOidc;
+}
+
+export interface HttpAuthServerToken {
+  token: string;
+  type?: string;
+  location?: string;
+  username?: string;
+  password?: string;
+}
+
+export interface HttpAuthServerMtls {
+  certificate: string;
+  key: string;
+}
+
+export interface HttpAuthServer {
+  name: string;
+  type: string;
+  token?: HttpAuthServerToken;
+  mtls?: HttpAuthServerMtls;
+}
+
+export interface HttpAuthentication {
+  client: HttpAuthClient[];
+  server?: HttpAuthServer[];
+}
+
+export interface HttpAuthzJwtClaim {
+  name: string;
+  value: string[];
+  errorcode?: number;
+}
+
+export interface HttpAuthzJwt {
+  claims: HttpAuthzJwtClaim[];
+}
+
+export interface HttpAuthorization {
+  name: string;
+  type: string;
+  jwt?: HttpAuthzJwt;
+}
+
+export interface HttpCache {
+  name: string;
+  basepath: string;
+  size: string;
+  ttl: string;
+  max_size?: string;
+  min_free?: string;
+}
+
+export interface MapEntry {
+  key: string;
+  keymatch: string;
+  value: string;
+}
+
+export interface HttpMap {
+  match: string;
+  variable: string;
+  entries?: MapEntry[];
+}
+
+export interface HttpLogFormat {
+  name: string;
+  escape: string;
+  format: string;
+}
+
+export interface HttpResolver {
+  name: string;
+  address: string;
+  valid?: string;
+  ipv4?: boolean;
+  ipv6?: boolean;
+  timeout?: string;
+}
+
+export interface NginxPlusApi {
+  write?: boolean;
+  listen?: string;
+  allow_acl?: string;
+}
+
+export interface NjsFile {
+  name: string;
+  file: SourceOfTruth;
+}
+
+export interface AcmeIssuer {
+  name: string;
+  uri: string;
+  account_key?: string;
+  contact?: string;
+  ssl_trusted_certificate?: string;
+  ssl_verify?: boolean;
+  state_path?: string;
+  accept_terms_of_service?: boolean;
+}
+
+export interface AppProtectLogProfile {
+  name: string;
+  format?: string;
+  format_string?: string;
+  type?: string;
+  max_request_size?: string;
+  max_message_size?: string;
+}
+
+export interface LogProfile {
+  type: string;
+  app_protect?: AppProtectLogProfile;
+}
+
+export interface NMSCertificate {
+  type: 'certificate' | 'key';
+  name: string;
+  contents?: SourceOfTruth;
+}
+
+export interface LicenseConfig {
+  endpoint?: string;
+  token?: string;
+  ssl_verify?: boolean;
+  grace_period?: boolean;
+  proxy?: string;
+  proxy_username?: string;
+  proxy_password?: string;
+}
+
+export interface NMSPolicyContents {
+  content: string;
+}
+
+export interface NMSPolicyVersion {
+  tag: string;
+  displayName: string;
+  description: string;
+  contents: NMSPolicyContents;
+}
+
+export interface NMSPolicy {
+  type: string;
+  name: string;
+  active_tag: string;
+  versions: NMSPolicyVersion[];
+}
+
+export interface OutputNMS {
+  url: string;
+  username: string;
+  password: string;
+  instancegroup: string;
+  synctime?: number;
+  modules?: string[];
+}
+
+export interface OutputNGINXOne {
+  url: string;
+  namespace: string;
+  token: string;
+  configsyncgroup: string;
+  synctime?: number;
+  modules?: string[];
+}
+
+export interface ConfigData {
+  output: {
+    type: 'nim' | 'n1c';
+    synchronous?: boolean;
+    license?: LicenseConfig;
+    nms?: OutputNMS;
+    nginxone?: OutputNGINXOne;
+  };
+  declaration: {
+    certificates?: NMSCertificate[];
+    http?: {
+      servers?: Server[];
+      upstreams?: Upstream[];
+      rate_limit?: HttpRateLimit[];
+      authentication?: HttpAuthentication;
+      authorization?: HttpAuthorization[];
+      cache?: HttpCache[];
+      maps?: HttpMap[];
+      logformats?: HttpLogFormat[];
+      njs?: NjsHookServer[];
+      njs_profiles?: NjsFile[];
+      acme_issuers?: AcmeIssuer[];
+      nginx_plus_api?: NginxPlusApi;
+      policies?: NMSPolicy[];
+      log_profiles?: LogProfile[];
+    };
+    layer4?: {
+      servers?: Array<{ name: string; resolver?: string; listen?: { address?: string }; upstream?: string; snippet?: SourceOfTruth }>;
+      upstreams?: Array<{ name: string; resolver?: string; origin?: Array<{ server: string; weight?: number; max_fails?: number; fail_timeout?: string; backup?: boolean }>; snippet?: SourceOfTruth }>;
+    };
+    resolvers?: HttpResolver[];
+  };
+}
+
+export interface HttpProfiles {
+  rateLimitNames: string[];
+  authClientNames: string[];
+  authServerNames: string[];
+  authzNames: string[];
+  cacheNames: string[];
+}
diff --git a/webui/src/index.css b/webui/src/index.css
index 601935a4..6a29424d 100644
--- a/webui/src/index.css
+++ b/webui/src/index.css
@@ -7,6 +7,9 @@
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 
+  /* ── Sticky header height — update here if header padding/content changes ── */
+  --header-height: 5rem;
+
   /* ── Accent (same in both modes) ───────────────────────────── */
   --accent:       #009639;
   --accent-light: #00bf47;
diff --git a/webui/src/pages/CreateConfigPage.tsx b/webui/src/pages/CreateConfigPage.tsx
index b8981f66..765f1abc 100644
--- a/webui/src/pages/CreateConfigPage.tsx
+++ b/webui/src/pages/CreateConfigPage.tsx
@@ -10,7 +10,7 @@ import './CreateConfigPage.css';
 
 const nimTemplate: ConfigDeclaration = {
   output: {
-    type: 'nms',
+    type: 'nim',
     nms: {
       url: 'https://nginx-instance-manager.example.com',
       username: 'admin',
@@ -52,7 +52,7 @@ const nimTemplate: ConfigDeclaration = {
 
 const nginxOneTemplate: ConfigDeclaration = {
   output: {
-    type: 'nginxone',
+    type: 'n1c',
     nginxone: {
       url: 'https://nginx-one.example.com',
       namespace: 'default',
@@ -98,7 +98,7 @@ const nginxOneTemplate: ConfigDeclaration = {
 
 const apiGatewayTemplate: ConfigDeclaration = {
   output: {
-    type: 'nms',
+    type: 'nim',
     nms: {
       url: 'https://nginx-instance-manager.example.com',
       username: 'admin',
@@ -195,16 +195,36 @@ export const CreateConfigPage = () => {
     }
     try {
       JSON.parse(jsonValue); // validate JSON before copying
-      await navigator.clipboard.writeText(jsonValue);
-      setCopied(true);
-      toast.success('Configuration copied to clipboard');
-      setTimeout(() => setCopied(false), 2000);
     } catch (error) {
       if (error instanceof SyntaxError) {
         toast.error('Invalid JSON: ' + error.message);
-      } else {
-        toast.error('Failed to copy to clipboard');
       }
+      return;
+    }
+    // Try Clipboard API first, fall back to execCommand for HTTP contexts
+    const doCopy = async (): Promise<void> => {
+      if (navigator.clipboard && window.isSecureContext) {
+        await navigator.clipboard.writeText(jsonValue);
+        return;
+      }
+      // Fallback: use a temporary textarea + execCommand
+      const el = document.createElement('textarea');
+      el.value = jsonValue;
+      el.style.cssText = 'position:fixed;top:0;left:0;opacity:0;pointer-events:none';
+      document.body.appendChild(el);
+      el.focus();
+      el.select();
+      const ok = document.execCommand('copy');
+      document.body.removeChild(el);
+      if (!ok) throw new Error('execCommand copy failed');
+    };
+    try {
+      await doCopy();
+      setCopied(true);
+      toast.success('Configuration copied to clipboard');
+      setTimeout(() => setCopied(false), 2000);
+    } catch {
+      toast.error('Failed to copy to clipboard');
     }
   };
 
@@ -286,7 +306,7 @@ export const CreateConfigPage = () => {
           <div className="templates-grid">
             <div className="template-card" onClick={() => loadTemplate(nimTemplate)}>
               <h4>NGINX Instance Manager</h4>
-              <p>HTTP configuration for a NIM instance group</p>
+              <p>HTTP configuration for an NGINX Instance Manager instance group</p>
             </div>
             <div className="template-card" onClick={() => loadTemplate(nginxOneTemplate)}>
               <h4>NGINX One Console</h4>
diff --git a/webui/src/test/ConfigForm.agw.profiles.test.tsx b/webui/src/test/ConfigForm.agw.profiles.test.tsx
new file mode 100644
index 00000000..d4920535
--- /dev/null
+++ b/webui/src/test/ConfigForm.agw.profiles.test.tsx
@@ -0,0 +1,133 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, fireEvent } from '@testing-library/react';
+import { ConfigForm } from '@/components/ConfigForm';
+
+describe('ConfigForm — API Gateway: profile dropdown population', () => {
+  let mockOnChange: (json: string) => void;
+  beforeEach(() => { mockOnChange = vi.fn(); });
+
+  const makeJsonWithProfiles = () => JSON.stringify({
+    output: { type: 'nim' },
+    declaration: {
+      http: {
+        rate_limit: [{ name: 'petstore_ratelimit', key: '$binary_remote_addr', size: '10m', rate: '10r/s' }],
+        authentication: {
+          client: [{ name: 'jwt-client-auth', type: 'jwt', jwt: { realm: 'api', key: 'secret', jwt_type: 'signed', cachetime: 0, token_location: '' } }],
+          server: [],
+        },
+        authorization: [{ name: 'jwt-authz', type: 'jwt', jwt: { claims: [] } }],
+        cache: [{ name: 'my-cache', basepath: '/tmp/cache', size: '10m', ttl: '10m' }],
+        servers: [{
+          name: 'test',
+          locations: [{
+            uri: '/',
+            urimatch: 'prefix',
+            apigateway: {
+              rate_limit: [{ profile: '', httpcode: 429, burst: 0, delay: 0 }],
+              authentication: { client: [{ profile: '' }], enforceOnPaths: true, paths: [] },
+              authorization: [{ profile: '', enforceOnPaths: true, paths: [] }],
+              cache: [{ profile: '', key: '$scheme$proxy_host$request_uri', paths: [], enforceOnPaths: true }],
+            }
+          }]
+        }]
+      }
+    }
+  });
+
+  it('populates rate limit dropdown with HTTP-level rate_limit profile names', () => {
+    const { container } = render(<ConfigForm initialJson={makeJsonWithProfiles()} onChange={mockOnChange} />);
+    const selects = container.querySelectorAll('select');
+    const rateLimitSelect = Array.from(selects).find(s =>
+      Array.from(s.options).some(o => o.value === 'petstore_ratelimit')
+    );
+    expect(rateLimitSelect).toBeDefined();
+  });
+
+  it('populates auth client dropdown with HTTP-level authentication.client profile names', () => {
+    const { container } = render(<ConfigForm initialJson={makeJsonWithProfiles()} onChange={mockOnChange} />);
+    const selects = container.querySelectorAll('select');
+    const authSelect = Array.from(selects).find(s =>
+      Array.from(s.options).some(o => o.value === 'jwt-client-auth')
+    );
+    expect(authSelect).toBeDefined();
+  });
+
+  it('populates authorization dropdown with HTTP-level authorization profile names', () => {
+    const { container } = render(<ConfigForm initialJson={makeJsonWithProfiles()} onChange={mockOnChange} />);
+    const selects = container.querySelectorAll('select');
+    const authzSelect = Array.from(selects).find(s =>
+      Array.from(s.options).some(o => o.value === 'jwt-authz')
+    );
+    expect(authzSelect).toBeDefined();
+  });
+
+  it('populates cache dropdown with HTTP-level cache profile names', () => {
+    const { container } = render(<ConfigForm initialJson={makeJsonWithProfiles()} onChange={mockOnChange} />);
+    const selects = container.querySelectorAll('select');
+    const cacheSelect = Array.from(selects).find(s =>
+      Array.from(s.options).some(o => o.value === 'my-cache')
+    );
+    expect(cacheSelect).toBeDefined();
+  });
+});
+
+describe('ConfigForm — API Gateway: live profile typing', () => {
+  let mockOnChange: (json: string) => void;
+  beforeEach(() => { mockOnChange = vi.fn(); });
+
+  it('populates the rate limit dropdown after the user types a name in ProfilesSection', async () => {
+    // Start with an AGW location and one rate limit rule, but NO http.rate_limit profiles yet
+    const initialJson = JSON.stringify({
+      output: { type: 'nim' },
+      declaration: {
+        http: {
+          servers: [{
+            name: 'test',
+            locations: [{
+              uri: '/', urimatch: 'prefix',
+              apigateway: {
+                rate_limit: [{ profile: '', httpcode: 429, burst: 0, delay: 0 }]
+              }
+            }]
+          }]
+        }
+      }
+    });
+
+    const { container } = render(<ConfigForm initialJson={initialJson} onChange={mockOnChange} />);
+
+    // Initially: no rate limit profiles defined — AGW dropdown should be disabled
+    const initialSelects = container.querySelectorAll('select');
+    const initialRateLimitSelect = Array.from(initialSelects).find(s =>
+      Array.from(s.options).some(o => o.text.includes('no profiles defined'))
+    );
+    expect(initialRateLimitSelect).toBeDefined();
+
+    // Find the "Rate Limiting" subsection header specifically inside ProfilesSection.
+    // ProfilesSection is the FIRST section in HttpSection, so its "Rate Limiting" header
+    // comes before the location-level "Rate Limiting" header (which has a Toggle, not AddBtn).
+    const subsectionHeaders = container.querySelectorAll('.cf-subsection-header');
+    const rateLimitHeader = Array.from(subsectionHeaders).find(h =>
+      h.querySelector('.cf-subsection-title')?.textContent === 'Rate Limiting' &&
+      h.querySelector('.cf-btn-add') != null
+    );
+    expect(rateLimitHeader).toBeDefined();
+
+    const addProfileBtn = rateLimitHeader!.querySelector('.cf-btn-add') as HTMLElement;
+    fireEvent.click(addProfileBtn);
+
+    // A name input should now appear for the new rate limit profile
+    const nameInputs = Array.from(container.querySelectorAll('input[placeholder="petstore_ratelimit"]'));
+    expect(nameInputs.length).toBeGreaterThan(0);
+
+    // Type a name
+    fireEvent.change(nameInputs[0], { target: { value: 'my-rate-limit' } });
+
+    // Now the AGW rate limit dropdown should be populated
+    const updatedSelects = container.querySelectorAll('select');
+    const populatedSelect = Array.from(updatedSelects).find(s =>
+      Array.from(s.options).some(o => o.value === 'my-rate-limit')
+    );
+    expect(populatedSelect).toBeDefined();
+  });
+});
diff --git a/webui/src/test/ConfigForm.agw.test.tsx b/webui/src/test/ConfigForm.agw.test.tsx
new file mode 100644
index 00000000..e8b9d05b
--- /dev/null
+++ b/webui/src/test/ConfigForm.agw.test.tsx
@@ -0,0 +1,292 @@
+import { describe, it, expect, vi, beforeEach, afterEach, type MockedFunction } from 'vitest';
+import { render, screen, fireEvent, act } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { ConfigForm } from '@/components/ConfigForm';
+
+// ── Helpers ───────────────────────────────────────────────────────────────────
+
+/** Build a minimal initialJson with one server / one location, apigateway.openapi_schema enabled. */
+const makeJson = (schemaContent = '') =>
+  JSON.stringify({
+    output: { type: 'nim' },
+    declaration: {
+      http: {
+        servers: [
+          {
+            name: 'test-server',
+            locations: [
+              {
+                uri: '/test',
+                urimatch: 'prefix',
+                apigateway: {
+                  openapi_schema: { content: schemaContent },
+                },
+              },
+            ],
+          },
+        ],
+      },
+    },
+  });
+
+/** Build a minimal initialJson with one server / one location and NO apigateway block. */
+const makeJsonNoAgw = () =>
+  JSON.stringify({
+    output: { type: 'nim' },
+    declaration: {
+      http: {
+        servers: [
+          {
+            name: 'test-server',
+            locations: [{ uri: '/test', urimatch: 'prefix' }],
+          },
+        ],
+      },
+    },
+  });
+
+/** Extract openapi_schema.content from onChange's last JSON argument. */
+const lastSchemaContent = (mockFn: ReturnType<typeof vi.fn>): string => {
+  const calls = mockFn.mock.calls;
+  const lastJson = JSON.parse((calls[calls.length - 1] as [string])[0]);
+  return lastJson.declaration.http.servers[0].locations[0].apigateway.openapi_schema.content;
+};
+
+// ── Tests ─────────────────────────────────────────────────────────────────────
+
+describe('ConfigForm — API Gateway: section toggle', () => {
+  let mockOnChange: MockedFunction<(json: string) => void>;
+
+  beforeEach(() => {
+    mockOnChange = vi.fn();
+  });
+
+  /** Find the checkbox inside the API Gateway subsection. */
+  const getAgwToggle = (container: HTMLElement) =>
+    container
+      .querySelector('.cf-subsection-agw .cf-subsection-header input[type="checkbox"]') as HTMLInputElement;
+
+  it('shows a disabled toggle when apigateway is absent from the location', () => {
+    const { container } = render(<ConfigForm initialJson={makeJsonNoAgw()} onChange={mockOnChange} />);
+    expect(getAgwToggle(container).checked).toBe(false);
+  });
+
+  it('shows an enabled toggle when apigateway is present', () => {
+    const { container } = render(<ConfigForm initialJson={makeJson()} onChange={mockOnChange} />);
+    expect(getAgwToggle(container).checked).toBe(true);
+  });
+
+  it('enabling the toggle adds the apigateway key to the JSON output', () => {
+    const { container } = render(<ConfigForm initialJson={makeJsonNoAgw()} onChange={mockOnChange} />);
+    fireEvent.click(getAgwToggle(container));
+
+    expect(mockOnChange).toHaveBeenCalled();
+    const lastJson = JSON.parse(mockOnChange.mock.calls[mockOnChange.mock.calls.length - 1][0]);
+    expect(lastJson.declaration.http.servers[0].locations[0]).toHaveProperty('apigateway');
+  });
+
+  it('disabling the toggle removes the apigateway key from the JSON output', () => {
+    const { container } = render(<ConfigForm initialJson={makeJson()} onChange={mockOnChange} />);
+    fireEvent.click(getAgwToggle(container));
+
+    expect(mockOnChange).toHaveBeenCalled();
+    const lastJson = JSON.parse(mockOnChange.mock.calls[mockOnChange.mock.calls.length - 1][0]);
+    expect(lastJson.declaration.http.servers[0].locations[0]).not.toHaveProperty('apigateway');
+  });
+
+  it('hides all API Gateway sub-sections when the toggle is disabled', () => {
+    render(<ConfigForm initialJson={makeJsonNoAgw()} onChange={mockOnChange} />);
+    expect(screen.queryByText('OpenAPI Schema')).not.toBeInTheDocument();
+    expect(screen.queryByText('API Gateway Settings')).not.toBeInTheDocument();
+  });
+
+  it('shows all API Gateway sub-sections when the toggle is enabled', () => {
+    render(<ConfigForm initialJson={makeJson()} onChange={mockOnChange} />);
+    expect(screen.getByText('OpenAPI Schema')).toBeInTheDocument();
+    expect(screen.getByText('API Gateway Settings')).toBeInTheDocument();
+  });
+});
+
+describe('ConfigForm — API Gateway: OpenAPI Schema', () => {
+  let mockOnChange: MockedFunction<(json: string) => void>;
+
+  beforeEach(() => {
+    mockOnChange = vi.fn();
+  });
+
+  // ── Mode switcher visibility ───────────────────────────────────────────────
+
+  describe('mode switcher', () => {
+    it('shows URL and Local file mode buttons when openapi_schema is configured', () => {
+      render(<ConfigForm initialJson={makeJson()} onChange={mockOnChange} />);
+      expect(screen.getByRole('button', { name: 'URL' })).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: 'Local file' })).toBeInTheDocument();
+    });
+
+    it('does not show mode buttons when openapi_schema is absent', () => {
+      const json = JSON.stringify({
+        output: { type: 'nim' },
+        declaration: {
+          http: {
+            servers: [
+              {
+                name: 'test-server',
+                locations: [{ uri: '/test', urimatch: 'prefix', apigateway: {} }],
+              },
+            ],
+          },
+        },
+      });
+      render(<ConfigForm initialJson={json} onChange={mockOnChange} />);
+      expect(screen.queryByRole('button', { name: 'URL' })).not.toBeInTheDocument();
+      expect(screen.queryByRole('button', { name: 'Local file' })).not.toBeInTheDocument();
+    });
+  });
+
+  // ── URL mode (default) ─────────────────────────────────────────────────────
+
+  describe('URL mode (default)', () => {
+    it('shows a URL text input with the expected placeholder', () => {
+      const { container } = render(
+        <ConfigForm initialJson={makeJson()} onChange={mockOnChange} />
+      );
+      expect(
+        container.querySelector('input[placeholder="https://example.com/openapi.yaml"]')
+      ).toBeInTheDocument();
+    });
+
+    it('does not show a file input in URL mode', () => {
+      const { container } = render(
+        <ConfigForm initialJson={makeJson()} onChange={mockOnChange} />
+      );
+      expect(container.querySelector('input[type="file"]')).not.toBeInTheDocument();
+    });
+
+    it('calls onChange with the typed URL in schema.content', async () => {
+      const { container } = render(
+        <ConfigForm initialJson={makeJson()} onChange={mockOnChange} />
+      );
+      const urlInput = container.querySelector(
+        'input[placeholder="https://example.com/openapi.yaml"]'
+      ) as HTMLInputElement;
+      fireEvent.change(urlInput, { target: { value: 'https://example.com/spec.json' } });
+      expect(lastSchemaContent(mockOnChange)).toBe('https://example.com/spec.json');
+    });
+  });
+
+  // ── File mode ─────────────────────────────────────────────────────────────
+
+  describe('Local file mode', () => {
+    it('shows a file input after switching to Local file mode', async () => {
+      const { container } = render(
+        <ConfigForm initialJson={makeJson()} onChange={mockOnChange} />
+      );
+      await userEvent.click(screen.getByRole('button', { name: 'Local file' }));
+      expect(container.querySelector('input[type="file"]')).toBeInTheDocument();
+    });
+
+    it('hides the URL text input after switching to Local file mode', async () => {
+      const { container } = render(
+        <ConfigForm initialJson={makeJson()} onChange={mockOnChange} />
+      );
+      await userEvent.click(screen.getByRole('button', { name: 'Local file' }));
+      expect(
+        container.querySelector('input[placeholder="https://example.com/openapi.yaml"]')
+      ).not.toBeInTheDocument();
+    });
+
+    it('restores the URL text input when switching back to URL mode', async () => {
+      const { container } = render(
+        <ConfigForm initialJson={makeJson()} onChange={mockOnChange} />
+      );
+      await userEvent.click(screen.getByRole('button', { name: 'Local file' }));
+      await userEvent.click(screen.getByRole('button', { name: 'URL' }));
+      expect(
+        container.querySelector('input[placeholder="https://example.com/openapi.yaml"]')
+      ).toBeInTheDocument();
+      expect(container.querySelector('input[type="file"]')).not.toBeInTheDocument();
+    });
+
+    it('accepts .json, .yaml, .yml files only', async () => {
+      const { container } = render(
+        <ConfigForm initialJson={makeJson()} onChange={mockOnChange} />
+      );
+      await userEvent.click(screen.getByRole('button', { name: 'Local file' }));
+      const fileInput = container.querySelector('input[type="file"]') as HTMLInputElement;
+      expect(fileInput.accept).toBe('.json,.yaml,.yml');
+    });
+
+    // ── File reading + base64 encoding ───────────────────────────────────────
+
+    describe('file reading', () => {
+      // Capture the FileReader instance created by the component so we can
+      // simulate readAsArrayBuffer completing inside the test.
+      let capturedReader: { result: ArrayBuffer | null; onload: (() => void) | null };
+
+      beforeEach(() => {
+        capturedReader = { result: null, onload: null };
+
+        class MockFileReader {
+          result: ArrayBuffer | null = null;
+          onload: (() => void) | null = null;
+
+          readAsArrayBuffer(_file: Blob) {
+            // Store a reference to `this` so the test can set result + fire onload
+            capturedReader = this as unknown as typeof capturedReader;
+          }
+        }
+        vi.stubGlobal('FileReader', MockFileReader);
+      });
+
+      afterEach(() => {
+        vi.unstubAllGlobals();
+      });
+
+      it('base64-encodes the file content and passes it to onChange', async () => {
+        const { container } = render(
+          <ConfigForm initialJson={makeJson()} onChange={mockOnChange} />
+        );
+        await userEvent.click(screen.getByRole('button', { name: 'Local file' }));
+
+        const fileInput = container.querySelector('input[type="file"]') as HTMLInputElement;
+        const fileContent = 'openapi: 3.0.0\ninfo:\n  title: Test';
+        const file = new File([fileContent], 'api.yaml', { type: 'application/yaml' });
+        Object.defineProperty(fileInput, 'files', { value: [file], configurable: true });
+        fireEvent.change(fileInput);
+
+        // Simulate FileReader finishing
+        const arrayBuffer = new TextEncoder().encode(fileContent).buffer;
+        act(() => {
+          capturedReader.result = arrayBuffer;
+          capturedReader.onload?.();
+        });
+
+        expect(mockOnChange).toHaveBeenCalled();
+        expect(lastSchemaContent(mockOnChange)).toBe(btoa(fileContent));
+      });
+
+      it('shows an "Encoded (N bytes)" label after a file is read', async () => {
+        const { container } = render(
+          <ConfigForm initialJson={makeJson()} onChange={mockOnChange} />
+        );
+        await userEvent.click(screen.getByRole('button', { name: 'Local file' }));
+
+        const fileInput = container.querySelector('input[type="file"]') as HTMLInputElement;
+        const fileContent = '{"openapi":"3.0.0"}';
+        const file = new File([fileContent], 'api.json', { type: 'application/json' });
+        Object.defineProperty(fileInput, 'files', { value: [file], configurable: true });
+        fireEvent.change(fileInput);
+
+        const arrayBuffer = new TextEncoder().encode(fileContent).buffer;
+        act(() => {
+          capturedReader.result = arrayBuffer;
+          capturedReader.onload?.();
+        });
+
+        // After the file reader fires, ConfigForm re-renders with the encoded content,
+        // which makes schema.content truthy and the label visible.
+        expect(screen.getByText(/^Encoded \(\d+ bytes\)$/)).toBeInTheDocument();
+      });
+    });
+  });
+});
diff --git a/webui/src/test/ConfigForm.agw.validation.test.tsx b/webui/src/test/ConfigForm.agw.validation.test.tsx
new file mode 100644
index 00000000..a87d56f7
--- /dev/null
+++ b/webui/src/test/ConfigForm.agw.validation.test.tsx
@@ -0,0 +1,175 @@
+import { describe, it, expect, vi, beforeEach, type MockedFunction } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { ConfigForm } from '@/components/ConfigForm';
+
+/** Build a minimal initialJson that has an apigateway with the given extra keys. */
+const makeAgwJson = (agwExtra: Record<string, unknown> = {}) =>
+  JSON.stringify({
+    output: { type: 'nim' },
+    declaration: {
+      http: {
+        servers: [
+          {
+            name: 'test-server',
+            locations: [
+              {
+                uri: '/test',
+                urimatch: 'prefix',
+                apigateway: { ...agwExtra },
+              },
+            ],
+          },
+        ],
+      },
+    },
+  });
+
+describe('ConfigForm — API Gateway: validation', () => {
+  let mockOnChange: MockedFunction<(json: string) => void>;
+  beforeEach(() => { mockOnChange = vi.fn(); });
+
+  // ── OpenAPI Schema URL ────────────────────────────────────────────────────
+
+  describe('OpenAPI Schema URL field', () => {
+    it('shows a Required error when schema content is empty', () => {
+      render(<ConfigForm initialJson={makeAgwJson({ openapi_schema: { content: '' } })} onChange={mockOnChange} />);
+      expect(screen.getByText('Required')).toBeInTheDocument();
+    });
+
+    it('does not show a Required error when schema content is set', () => {
+      render(<ConfigForm initialJson={makeAgwJson({ openapi_schema: { content: 'https://example.com/spec.json' } })} onChange={mockOnChange} />);
+      expect(screen.queryByText('Required')).not.toBeInTheDocument();
+    });
+  });
+
+  // ── API Gateway Settings ──────────────────────────────────────────────────
+
+  describe('API Gateway Settings: Server URL', () => {
+    it('shows a Required error when server_url is empty', () => {
+      render(<ConfigForm initialJson={makeAgwJson({ api_gateway: { enabled: true, strip_uri: false, server_url: '' } })} onChange={mockOnChange} />);
+      expect(screen.getByText('Required')).toBeInTheDocument();
+    });
+
+    it('does not show a Required error when server_url is filled', () => {
+      render(<ConfigForm initialJson={makeAgwJson({ api_gateway: { enabled: true, strip_uri: false, server_url: 'http://backend' } })} onChange={mockOnChange} />);
+      expect(screen.queryByText('Required')).not.toBeInTheDocument();
+    });
+  });
+
+  // ── Developer Portal ──────────────────────────────────────────────────────
+
+  describe('Developer Portal: Type', () => {
+    it('shows a Required error when type is empty', () => {
+      render(<ConfigForm initialJson={makeAgwJson({ developer_portal: { enabled: true, type: '' } })} onChange={mockOnChange} />);
+      expect(screen.getByText('Required')).toBeInTheDocument();
+    });
+
+    it('does not show a Required error when type is selected', () => {
+      render(<ConfigForm initialJson={makeAgwJson({ developer_portal: { enabled: true, type: 'redocly', redocly: { uri: '/devportal.html' } } })} onChange={mockOnChange} />);
+      expect(screen.queryByText('Required')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Developer Portal: Redocly URI', () => {
+    it('shows a Required error when redocly URI is empty', () => {
+      render(<ConfigForm initialJson={makeAgwJson({ developer_portal: { enabled: true, type: 'redocly', redocly: { uri: '' } } })} onChange={mockOnChange} />);
+      expect(screen.getByText('Required')).toBeInTheDocument();
+    });
+  });
+
+  describe('Developer Portal: Backstage fields', () => {
+    it('shows Required errors for empty name, lifecycle, and owner', () => {
+      render(<ConfigForm initialJson={makeAgwJson({ developer_portal: { enabled: true, type: 'backstage', backstage: { name: '', lifecycle: '', owner: '', system: '' } } })} onChange={mockOnChange} />);
+      const errors = screen.getAllByText('Required');
+      expect(errors.length).toBeGreaterThanOrEqual(3);
+    });
+
+    it('does not show Required error for fields that are filled', () => {
+      render(<ConfigForm initialJson={makeAgwJson({ developer_portal: { enabled: true, type: 'backstage', backstage: { name: 'my-api', lifecycle: 'production', owner: 'team', system: '' } } })} onChange={mockOnChange} />);
+      // name, lifecycle, owner are filled — only system is empty but it's not required
+      expect(screen.queryByText('Required')).not.toBeInTheDocument();
+    });
+  });
+
+  // ── Rate Limiting ─────────────────────────────────────────────────────────
+
+  describe('Rate Limiting: Profile', () => {
+    it('shows a Required error when profile is empty', () => {
+      render(<ConfigForm initialJson={makeAgwJson({ rate_limit: [{ profile: '', httpcode: 429, burst: 0, delay: 0 }] })} onChange={mockOnChange} />);
+      expect(screen.getByText('Required')).toBeInTheDocument();
+    });
+
+    it('does not show a Required error when profile is filled', () => {
+      render(<ConfigForm initialJson={makeAgwJson({ rate_limit: [{ profile: 'my-limit', httpcode: 429, burst: 0, delay: 0 }] })} onChange={mockOnChange} />);
+      expect(screen.queryByText('Required')).not.toBeInTheDocument();
+    });
+  });
+
+  // ── Authentication ────────────────────────────────────────────────────────
+
+  describe('Authentication: Client profiles', () => {
+    it('shows an error when all client profiles are empty', () => {
+      render(<ConfigForm initialJson={makeAgwJson({ authentication: { client: [{ profile: '' }], enforceOnPaths: true, paths: [] } })} onChange={mockOnChange} />);
+      expect(screen.getByText('Required')).toBeInTheDocument();
+    });
+
+    it('does not show an error when a client profile is filled', () => {
+      render(<ConfigForm initialJson={makeAgwJson({ authentication: { client: [{ profile: 'jwt-auth' }], enforceOnPaths: true, paths: [] } })} onChange={mockOnChange} />);
+      expect(screen.queryByText('Required')).not.toBeInTheDocument();
+    });
+  });
+
+  // ── Authorization ─────────────────────────────────────────────────────────
+
+  describe('Authorization: Profile', () => {
+    it('shows a Required error when profile is empty', () => {
+      render(<ConfigForm initialJson={makeAgwJson({ authorization: [{ profile: '', enforceOnPaths: true, paths: [] }] })} onChange={mockOnChange} />);
+      expect(screen.getByText('Required')).toBeInTheDocument();
+    });
+
+    it('does not show a Required error when profile is filled', () => {
+      render(<ConfigForm initialJson={makeAgwJson({ authorization: [{ profile: 'my-authz', enforceOnPaths: true, paths: [] }] })} onChange={mockOnChange} />);
+      expect(screen.queryByText('Required')).not.toBeInTheDocument();
+    });
+  });
+
+  // ── Cache ─────────────────────────────────────────────────────────────────
+
+  describe('Cache: Profile', () => {
+    it('shows a Required error when profile is empty', () => {
+      render(<ConfigForm initialJson={makeAgwJson({ cache: [{ profile: '' }] })} onChange={mockOnChange} />);
+      expect(screen.getByText('Required')).toBeInTheDocument();
+    });
+
+    it('does not show a Required error when profile is filled', () => {
+      render(<ConfigForm initialJson={makeAgwJson({ cache: [{ profile: 'my-cache' }] })} onChange={mockOnChange} />);
+      expect(screen.queryByText('Required')).not.toBeInTheDocument();
+    });
+  });
+
+  // ── Visibility ────────────────────────────────────────────────────────────
+
+  describe('Visibility: Type', () => {
+    it('shows a Required error when type is empty', () => {
+      render(<ConfigForm initialJson={makeAgwJson({ visibility: [{ enabled: true, type: '' }] })} onChange={mockOnChange} />);
+      expect(screen.getByText('Required')).toBeInTheDocument();
+    });
+
+    it('does not show a Required error when type is selected', () => {
+      render(<ConfigForm initialJson={makeAgwJson({ visibility: [{ enabled: true, type: 'moesif', moesif: { application_id: 'abc123', plugin_path: '/path' } }] })} onChange={mockOnChange} />);
+      expect(screen.queryByText('Required')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Visibility: Moesif Application ID', () => {
+    it('shows a Required error when application_id is empty', () => {
+      render(<ConfigForm initialJson={makeAgwJson({ visibility: [{ enabled: true, type: 'moesif', moesif: { application_id: '', plugin_path: '/path' } }] })} onChange={mockOnChange} />);
+      expect(screen.getByText('Required')).toBeInTheDocument();
+    });
+
+    it('does not show a Required error when application_id is filled', () => {
+      render(<ConfigForm initialJson={makeAgwJson({ visibility: [{ enabled: true, type: 'moesif', moesif: { application_id: 'my-app-id', plugin_path: '/path' } }] })} onChange={mockOnChange} />);
+      expect(screen.queryByText('Required')).not.toBeInTheDocument();
+    });
+  });
+});
diff --git a/webui/src/test/ConfigForm.output.test.tsx b/webui/src/test/ConfigForm.output.test.tsx
new file mode 100644
index 00000000..dd2f8559
--- /dev/null
+++ b/webui/src/test/ConfigForm.output.test.tsx
@@ -0,0 +1,341 @@
+/**
+ * Tests for OutputSection and related output-section functionality.
+ *
+ * Coverage:
+ *  - Output type card labels (NGINX Instance Manager / NGINX One Console)
+ *  - Output type switching and field visibility
+ *  - License section toggle, field rendering, and grace_period as boolean
+ *  - JWT token file-upload behaviour
+ *  - Resolver ProfileSelect dropdown (populated vs. empty)
+ *  - Copy-to-clipboard execCommand fallback (non-secure context)
+ */
+
+import React from 'react';
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { ConfigForm } from '@/components/ConfigForm';
+import { CreateConfigPage } from '@/pages/CreateConfigPage';
+import toast from 'react-hot-toast';
+
+// ── Module-level mocks needed for CreateConfigPage ────────────────────────────
+
+vi.mock('@monaco-editor/react', () => ({
+  default: ({ value, onChange }: { value: string; onChange?: (v: string) => void }) => (
+    <textarea
+      data-testid="monaco-editor"
+      value={value}
+      onChange={(e) => onChange?.(e.target.value)}
+    />
+  ),
+}));
+
+vi.mock('@/components/Layout', () => ({
+  Layout: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
+}));
+
+vi.mock('react-hot-toast', () => ({
+  default: { success: vi.fn(), error: vi.fn() },
+  Toaster: () => null,
+}));
+
+// ── JSON helpers ──────────────────────────────────────────────────────────────
+
+/** Minimal NMS-type config with no license. */
+const nmsJson = () => JSON.stringify({ output: { type: 'nim' } });
+
+/** Minimal NGINX One config. */
+const nginxoneJson = () => JSON.stringify({ output: { type: 'n1c' } });
+
+/**
+ * NMS config with the license block present.
+ * @param gracePeriod  initial value of grace_period (undefined → field absent → Toggle defaults to false)
+ */
+const licensedJson = (gracePeriod?: boolean) =>
+  JSON.stringify({
+    output: {
+      type: 'nim',
+      license: {
+        endpoint: 'product.connect.nginx.com',
+        token: '',
+        ssl_verify: true,
+        ...(gracePeriod !== undefined ? { grace_period: gracePeriod } : {}),
+      },
+    },
+  });
+
+/**
+ * NMS config with one resolver profile and one HTTP server.
+ * Used to test the resolver ProfileSelect.
+ */
+const resolverJson = () =>
+  JSON.stringify({
+    output: { type: 'nim' },
+    declaration: {
+      resolvers: [
+        { name: 'local-resolver', address: '192.168.2.13', ipv4: true, ipv6: false, timeout: '30s' },
+      ],
+      http: {
+        servers: [{ name: 'web', listen: { address: '0.0.0.0:80' }, locations: [] }],
+      },
+    },
+  });
+
+// ── Helper: parse the last JSON string emitted via onChange ───────────────────
+
+const lastOutput = (mockFn: ReturnType<typeof vi.fn>) => {
+  const calls = mockFn.mock.calls;
+  return JSON.parse(calls[calls.length - 1][0]);
+};
+
+// ─────────────────────────────────────────────────────────────────────────────
+//  Output type card labels
+// ─────────────────────────────────────────────────────────────────────────────
+
+describe('OutputSection — type card labels', () => {
+  it('renders "NGINX Instance Manager" card', () => {
+    render(<ConfigForm initialJson={nmsJson()} onChange={vi.fn()} />);
+    expect(screen.getByText('NGINX Instance Manager')).toBeInTheDocument();
+  });
+
+  it('renders "NGINX One Console" card', () => {
+    render(<ConfigForm initialJson={nmsJson()} onChange={vi.fn()} />);
+    expect(screen.getByText('NGINX One Console')).toBeInTheDocument();
+  });
+
+  it('renders subtitle "Push to an instance group" for NIM card', () => {
+    render(<ConfigForm initialJson={nmsJson()} onChange={vi.fn()} />);
+    expect(screen.getByText('Push to an instance group')).toBeInTheDocument();
+  });
+
+  it('renders subtitle "Push to a config sync group" for NGINX One card', () => {
+    render(<ConfigForm initialJson={nmsJson()} onChange={vi.fn()} />);
+    expect(screen.getByText('Push to a config sync group')).toBeInTheDocument();
+  });
+});
+
+// ─────────────────────────────────────────────────────────────────────────────
+//  Output type switching
+// ─────────────────────────────────────────────────────────────────────────────
+
+describe('OutputSection — output type switching', () => {
+  it('shows NIM-specific URL field by default (type = nms)', () => {
+    render(<ConfigForm initialJson={nmsJson()} onChange={vi.fn()} />);
+    expect(screen.getByPlaceholderText('https://nms.example.com')).toBeInTheDocument();
+  });
+
+  it('shows NGINX One fields when "NGINX One Console" card is clicked', async () => {
+    render(<ConfigForm initialJson={nmsJson()} onChange={vi.fn()} />);
+    await userEvent.click(screen.getByText('NGINX One Console'));
+    expect(screen.getByPlaceholderText('https://nginx-one.example.com')).toBeInTheDocument();
+  });
+
+  it('emits type = "nginxone" in onChange when NGINX One Console is selected', async () => {
+    const onChange = vi.fn();
+    render(<ConfigForm initialJson={nmsJson()} onChange={onChange} />);
+    await userEvent.click(screen.getByText('NGINX One Console'));
+    expect(lastOutput(onChange).output.type).toBe('n1c');
+  });
+
+  it('switches back to NIM fields when "NGINX Instance Manager" is clicked', async () => {
+    render(<ConfigForm initialJson={nginxoneJson()} onChange={vi.fn()} />);
+    await userEvent.click(screen.getByText('NGINX Instance Manager'));
+    expect(screen.getByPlaceholderText('https://nms.example.com')).toBeInTheDocument();
+  });
+
+  it('emits type = "nms" when NGINX Instance Manager is selected from nginxone', async () => {
+    const onChange = vi.fn();
+    render(<ConfigForm initialJson={nginxoneJson()} onChange={onChange} />);
+    await userEvent.click(screen.getByText('NGINX Instance Manager'));
+    expect(lastOutput(onChange).output.type).toBe('nim');
+  });
+});
+
+// ─────────────────────────────────────────────────────────────────────────────
+//  License section
+// ─────────────────────────────────────────────────────────────────────────────
+
+describe('OutputSection — license section', () => {
+  it('shows "Not configured" when no license is present', () => {
+    render(<ConfigForm initialJson={nmsJson()} onChange={vi.fn()} />);
+    expect(screen.getByText('Not configured')).toBeInTheDocument();
+  });
+
+  it('reveals license fields when the license toggle is enabled', async () => {
+    render(<ConfigForm initialJson={nmsJson()} onChange={vi.fn()} />);
+    await userEvent.click(screen.getByText('Not configured'));
+    expect(screen.getByText('Enforce initial report')).toBeInTheDocument();
+  });
+
+  it('shows "Configured" after the license toggle is enabled', async () => {
+    render(<ConfigForm initialJson={nmsJson()} onChange={vi.fn()} />);
+    await userEvent.click(screen.getByText('Not configured'));
+    expect(screen.getByText('Configured')).toBeInTheDocument();
+  });
+
+  it('hides license fields after the license toggle is disabled', async () => {
+    render(<ConfigForm initialJson={licensedJson()} onChange={vi.fn()} />);
+    await userEvent.click(screen.getByText('Configured'));
+    expect(screen.queryByText('Enforce initial report')).not.toBeInTheDocument();
+  });
+
+  it('renders "Enforce initial report" as a checkbox, not a text input', () => {
+    render(<ConfigForm initialJson={licensedJson()} onChange={vi.fn()} />);
+    const field = screen.getByText('Enforce initial report').closest('.cf-field');
+    expect(field?.querySelector('input[type="checkbox"]')).toBeTruthy();
+    expect(field?.querySelector('input[type="text"]')).toBeNull();
+  });
+
+  it('defaults grace_period checkbox to unchecked when not set', () => {
+    render(<ConfigForm initialJson={licensedJson()} onChange={vi.fn()} />);
+    const field = screen.getByText('Enforce initial report').closest('.cf-field');
+    const checkbox = field?.querySelector('input[type="checkbox"]') as HTMLInputElement;
+    expect(checkbox.checked).toBe(false);
+  });
+
+  it('emits grace_period: true when "Enforce initial report" is toggled on', async () => {
+    const onChange = vi.fn();
+    render(<ConfigForm initialJson={licensedJson(false)} onChange={onChange} />);
+    const field = screen.getByText('Enforce initial report').closest('.cf-field');
+    const checkbox = field?.querySelector('input[type="checkbox"]') as HTMLInputElement;
+    await userEvent.click(checkbox);
+    expect(lastOutput(onChange).output.license.grace_period).toBe(true);
+  });
+
+  it('emits grace_period: false when "Enforce initial report" is toggled off', async () => {
+    const onChange = vi.fn();
+    render(<ConfigForm initialJson={licensedJson(true)} onChange={onChange} />);
+    const field = screen.getByText('Enforce initial report').closest('.cf-field');
+    const checkbox = field?.querySelector('input[type="checkbox"]') as HTMLInputElement;
+    await userEvent.click(checkbox);
+    expect(lastOutput(onChange).output.license.grace_period).toBe(false);
+  });
+
+  it('renders a file input that accepts .jwt and .txt for JWT upload', () => {
+    render(<ConfigForm initialJson={licensedJson()} onChange={vi.fn()} />);
+    const fileInput = document.querySelector('input[type="file"]');
+    expect(fileInput).toBeInTheDocument();
+    expect(fileInput).toHaveAttribute('accept', '.jwt,.txt,text/plain');
+  });
+
+  it('reads and trims the JWT token from an uploaded file', async () => {
+    const onChange = vi.fn();
+    render(<ConfigForm initialJson={licensedJson()} onChange={onChange} />);
+    const fileInput = document.querySelector('input[type="file"]') as HTMLInputElement;
+    const tokenContent = '  eyJhbGciOiJSUzI1NiJ9.test.signature  ';
+    const file = new File([tokenContent], 'license.jwt', { type: 'text/plain' });
+    await userEvent.upload(fileInput, file);
+    await waitFor(() => {
+      const out = lastOutput(onChange);
+      expect(out.output.license.token).toBe(tokenContent.trim());
+    });
+  });
+});
+
+// ─────────────────────────────────────────────────────────────────────────────
+//  Resolver ProfileSelect dropdown
+// ─────────────────────────────────────────────────────────────────────────────
+
+describe('OutputSection — resolver ProfileSelect', () => {
+  it('shows "— no profiles defined —" when no resolver profiles exist', () => {
+    const json = JSON.stringify({
+      output: { type: 'nim' },
+      declaration: {
+        http: { servers: [{ name: 'web', listen: { address: '0.0.0.0:80' }, locations: [] }] },
+      },
+    });
+    render(<ConfigForm initialJson={json} onChange={vi.fn()} />);
+    expect(screen.getAllByText('— no profiles defined —').length).toBeGreaterThan(0);
+  });
+
+  it('lists the resolver name as an option when a resolver profile is defined', () => {
+    render(<ConfigForm initialJson={resolverJson()} onChange={vi.fn()} />);
+    const options = screen.getAllByRole('option', { name: 'local-resolver' });
+    expect(options.length).toBeGreaterThan(0);
+  });
+
+  it('emits the selected resolver name in server.resolver when the dropdown changes', () => {
+    const onChange = vi.fn();
+    render(<ConfigForm initialJson={resolverJson()} onChange={onChange} />);
+    // Find the combobox (select) that contains 'local-resolver' as an option
+    const resolverSelect = screen
+      .getAllByRole('combobox')
+      .find((s) =>
+        Array.from((s as HTMLSelectElement).options).some((o) => o.value === 'local-resolver'),
+      ) as HTMLSelectElement;
+    fireEvent.change(resolverSelect, { target: { value: 'local-resolver' } });
+    const out = lastOutput(onChange);
+    expect(out.declaration.http.servers[0].resolver).toBe('local-resolver');
+  });
+});
+
+// ─────────────────────────────────────────────────────────────────────────────
+//  Sidebar navigation
+// ─────────────────────────────────────────────────────────────────────────────
+
+describe('ConfigForm — sidebar navigation', () => {
+  it('renders sidebar nav buttons for top-level sections', () => {
+    render(<ConfigForm initialJson={nmsJson()} onChange={vi.fn()} />);
+    const nav = document.querySelector('nav.cf-sidenav');
+    expect(nav).toBeInTheDocument();
+    expect(nav?.textContent).toContain('Output');
+    expect(nav?.textContent).toContain('HTTP');
+    expect(nav?.textContent).toContain('Layer 4');
+  });
+
+  it('renders indented sub-section links in the sidebar', () => {
+    render(<ConfigForm initialJson={nmsJson()} onChange={vi.fn()} />);
+    const indentedItems = document.querySelectorAll('.cf-sidenav-item.indent');
+    const labels = Array.from(indentedItems).map((el) => el.textContent);
+    expect(labels).toContain('License');
+    expect(labels).toContain('Policies');
+    expect(labels).toContain('Profiles');
+    expect(labels).toContain('Servers');
+    expect(labels).toContain('Upstreams');
+  });
+});
+
+// ─────────────────────────────────────────────────────────────────────────────
+//  Copy-to-clipboard execCommand fallback
+// ─────────────────────────────────────────────────────────────────────────────
+
+describe('CreateConfigPage — clipboard execCommand fallback', () => {
+  let originalClipboard: PropertyDescriptor | undefined;
+  let execCommandMock: ReturnType<typeof vi.fn>;
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    // Remove navigator.clipboard so the condition `navigator.clipboard && isSecureContext` is false
+    originalClipboard = Object.getOwnPropertyDescriptor(navigator, 'clipboard');
+    Object.defineProperty(navigator, 'clipboard', {
+      value: undefined,
+      configurable: true,
+      writable: true,
+    });
+    // Define execCommand on document (absent in jsdom) and track calls
+    execCommandMock = vi.fn().mockReturnValue(true);
+    Object.defineProperty(document, 'execCommand', {
+      value: execCommandMock,
+      configurable: true,
+      writable: true,
+    });
+  });
+
+  afterEach(() => {
+    if (originalClipboard) {
+      Object.defineProperty(navigator, 'clipboard', originalClipboard);
+    }
+  });
+
+  it('falls back to execCommand copy when navigator.clipboard is unavailable', async () => {
+    render(<CreateConfigPage />);
+    // Switch to NGINX One Console — this calls ConfigForm's onChange which populates
+    // jsonValue in the page, making the copy button functional.
+    // getAllByText handles the case where the label appears in both the type card and the
+    // CreateConfigPage template list; index [0] is the card span rendered first in the DOM.
+    await userEvent.click(screen.getAllByText('NGINX One Console')[0]);
+    await userEvent.click(screen.getByRole('button', { name: /copy to clipboard/i }));
+    await waitFor(() => expect(execCommandMock).toHaveBeenCalledWith('copy'));
+    expect(toast.success).toHaveBeenCalledWith('Configuration copied to clipboard');
+  });
+});
diff --git a/webui/src/test/CreateConfigPage.test.tsx b/webui/src/test/CreateConfigPage.test.tsx
index 92fd55de..a1aa4a90 100644
--- a/webui/src/test/CreateConfigPage.test.tsx
+++ b/webui/src/test/CreateConfigPage.test.tsx
@@ -130,7 +130,7 @@ describe('CreateConfigPage', () => {
       await userEvent.click(screen.getByText('NGINX Instance Manager'));
       const editor = screen.getByTestId('monaco-editor') as HTMLTextAreaElement;
       const parsed = JSON.parse(editor.value);
-      expect(parsed.output.type).toBe('nms');
+      expect(parsed.output.type).toBe('nim');
       expect(parsed.output.nms.instancegroup).toBe('production');
     });
 
@@ -140,7 +140,7 @@ describe('CreateConfigPage', () => {
       await userEvent.click(screen.getByText('NGINX One Console'));
       const editor = screen.getByTestId('monaco-editor') as HTMLTextAreaElement;
       const parsed = JSON.parse(editor.value);
-      expect(parsed.output.type).toBe('nginxone');
+      expect(parsed.output.type).toBe('n1c');
     });
 
     it('loads the API Gateway template', async () => {
@@ -201,7 +201,7 @@ describe('CreateConfigPage', () => {
       await userEvent.click(screen.getByRole('button', { name: /json/i }));
       const editor = screen.getByTestId('monaco-editor') as HTMLTextAreaElement;
       const parsed = JSON.parse(editor.value);
-      expect(parsed.output.type).toBe('nms');
+      expect(parsed.output.type).toBe('nim');
     });
 
     it('resets dirty flag after loading a template via confirm', async () => {
diff --git a/webui/src/test/setup.ts b/webui/src/test/setup.ts
index 4a0412ee..0415a41b 100644
--- a/webui/src/test/setup.ts
+++ b/webui/src/test/setup.ts
@@ -1,7 +1,32 @@
-import { afterEach } from 'vitest';
+import { afterEach, vi } from 'vitest';
 import { cleanup } from '@testing-library/react';
 import '@testing-library/jest-dom/vitest';
 
+// Polyfill IntersectionObserver — not implemented in jsdom but used by ConfigForm's
+// sidebar active-section tracking. Must be a class so `new IntersectionObserver(...)` works.
+class IntersectionObserverMock {
+  observe = vi.fn();
+  unobserve = vi.fn();
+  disconnect = vi.fn();
+  root: Element | null = null;
+  rootMargin = '';
+  thresholds: number[] = [];
+  takeRecords = vi.fn(() => [] as IntersectionObserverEntry[]);
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  constructor(_callback: IntersectionObserverCallback, _options?: IntersectionObserverInit) {}
+}
+globalThis.IntersectionObserver = IntersectionObserverMock as unknown as typeof IntersectionObserver;
+
+// jsdom's default origin (about:blank) is NOT a secure context, so window.isSecureContext is
+// false. The clipboard API guard (`navigator.clipboard && isSecureContext`) would always take
+// the execCommand fallback. Treat the test environment as secure so tests that mock
+// navigator.clipboard exercise the real clipboard path.
+Object.defineProperty(window, 'isSecureContext', {
+  value: true,
+  writable: false,
+  configurable: true,
+});
+
 // Cleanup after each test
 afterEach(() => {
   cleanup();
diff --git a/webui/src/types/index.ts b/webui/src/types/index.ts
index c406644e..0c331e67 100644
--- a/webui/src/types/index.ts
+++ b/webui/src/types/index.ts
@@ -1,7 +1,7 @@
 // API types based on OpenAPI spec
 export interface ConfigDeclaration {
   output?: {
-    type?: 'nms' | 'nginxone';
+    type?: 'nim' | 'n1c';
     license?: LicenseConfig;
     nms?: NMSConfig;
     nginxone?: NginxOneConfig;