Added more doc

- Added auto reload for doc engine
- Added helloworld example

docs/plugins/docs/2. Architecture/1. Plugin Architecture.md

@@ -1,5 +1,9 @@
 # Plugin Architecture
 
+Last Update: 25/05/2025
+
+---
+
 The Zoraxy Plugin uses a 3 steps approach to get information from plugin, setup the plugin and forward request to plugin. The name of the steps are partially referred from dbus designs as followings.
 
 1. Introspect
@@ -10,3 +14,4 @@ The overall flow looks like this.
 
 ![](img/1. Plugin Architecture/plugin_workflow.png)
 
+This design make sure that the Zoraxy plugins do not depends on platform dependent implementations that uses, for example, unix socket. This also avoided protocol that require complex conversion to and from HTTP request (data structure) like gRPC, while making sure the plugin can be cross compile into different CPU architecture or OS environment with little to no effect on its performance. 

docs/plugins/docs/2. Architecture/2. Introspect.md

@@ -1,5 +1,9 @@
 # Introspect
 
+Last Update: 25/05/2025
+
+---
+
 Introspect, similar to the one in dbus design, is used to get the information from plugin when Zoraxy starts (or manually triggered in development mode or force reload plugin list). 
 
 **This is a pre-defined structure where the plugin must provide to Zoraxy** when the plugin is being started with the `-introspect` flag. 
@@ -55,6 +59,12 @@ type IntroSpect struct {
 }
 ```
 
+
+
+The introspect provide Zoraxy the required information to start the plugin and how to interact with it.  For more details on what those capture settings are for, see "Capture Mode" section.
+
+---
+
 ## Introspect Manual Triggering
 
 To manually test if the introspect return is correct, you can try using the `-introspect` flag on any Zoraxy plugin. You should be able to see an output like so.

docs/plugins/docs/2. Architecture/5. Plugin UI.md

@@ -0,0 +1,23 @@
+# Plugin UI
+
+Last Update: 25/05/2025
+
+---
+
+A plugin can optionally expose a Web UI interface for user configuration. 
+
+**It is generally recommended that a plugin have such UI exposed for easy configurations.** As plugin installed via plugin store provides limited ways for a user to configure the plugin, the plugin web UI will be the best way for user to setup your plugin. 
+
+## Plugin Web UI Access
+
+If a plugin provide a Web UI endpoint for Zoraxy during the introspect process, a new item will be shown in the Plugins section on Zoraxy side menu. Below is an example of the Web UI of UPnP Port Forwarder plugin.
+
+![image-20250527201750613](img/5. Plugin UI/image-20250527201750613.png)
+
+
+
+## Front-end Developer Notes
+
+The Web UI is implemented as a reverse proxy and embed in an iframe. So you do not need to handle CORS issues with the web UI (as it will be proxy internally by Zoraxy as exposed as something like a virtual directory mounted website). 
+
+However, the plugin web UI is exposed via the path `/plugin.ui/{{plugin_uuid}}/`, for example, `/plugin.ui/org.aroz.zoraxy.plugins.upnp/`. **When developing the plugin web UI, do not use absolute path for any resources used in the HTML file**, unless you are trying to re-use Zoraxy components like css or image elements stored in Zoraxy embedded web file system (e.g. `/img/logo.svg`).