[Feature] Dynamic additional information rendering in frontend (#282)

This implements a version of #274, relying on Pydantics built in JSON schema and JSON rendering.
Requires additional UI tagging in the ai model repo but will remove HTML tags.

Example scenario with filled information: 5882df9c-dae1-4d80-a40e-db4724271456/scenario/3a4d395a-6a6d-4154-8ce3-ced667fceec0

Reviewed-on: enviPath/enviPy#282
Co-authored-by: Tobias O <tobias.olenyi@envipath.com>
Co-committed-by: Tobias O <tobias.olenyi@envipath.com>

templates/components/widgets/interval_widget.html

@@ -0,0 +1,76 @@
+{# Interval widget for range inputs - pure HTML template #}
+<div class="form-control">
+  <div class="flex flex-col gap-2 sm:flex-row sm:items-baseline">
+    <!-- Label -->
+    <label class="label sm:w-48 sm:shrink-0">
+      <span
+        class="label-text"
+        :class="{
+              'text-error': hasError,
+              'text-sm text-base-content/60': isViewMode
+            }"
+        x-text="label"
+      ></span>
+    </label>
+
+    <!-- Input column -->
+    <div class="flex-1">
+      <!-- Help text -->
+      <template x-if="helpText">
+        <div class="label">
+          <span
+            class="label-text-alt text-base-content/60"
+            x-text="helpText"
+          ></span>
+        </div>
+      </template>
+
+      <!-- View mode: formatted range with unit -->
+      <template x-if="isViewMode">
+        <div class="mt-1">
+          <span class="text-base" x-text="start"></span>
+          <span class="text-base-content/60 text-xs" x-show="!isSameValue"
+            >to</span
+          >
+          <span class="text-base" x-text="end" x-show="!isSameValue"></span>
+          <template x-if="start && end && unit">
+            <span class="text-xs" x-text="unit"></span>
+          </template>
+        </div>
+      </template>
+
+      <!-- Edit mode: two inputs with shared unit badge -->
+      <template x-if="isEditMode">
+        <div class="flex gap-2 items-center">
+          <input
+            type="number"
+            class="input input-bordered flex-1"
+            :class="{ 'input-error': hasError }"
+            placeholder="Min"
+            x-model="start"
+          />
+          <span class="text-base-content/60">to</span>
+          <input
+            type="number"
+            class="input input-bordered flex-1"
+            :class="{ 'input-error': hasError }"
+            placeholder="Max"
+            x-model="end"
+          />
+          <template x-if="unit">
+            <span class="badge badge-ghost badge-lg" x-text="unit"></span>
+          </template>
+        </div>
+      </template>
+
+      <!-- Errors -->
+      <template x-if="hasError">
+        <div class="label">
+          <template x-for="errMsg in errors" :key="errMsg">
+            <span class="label-text-alt text-error" x-text="errMsg"></span>
+          </template>
+        </div>
+      </template>
+    </div>
+  </div>
+</div>