mulmoclaude 0.3.0 → 0.5.0

package/src/plugins/presentForm/View.vue

@@ -0,0 +1,675 @@
+<template>
+  <div class="w-full h-full overflow-y-auto p-8">
+    <div v-if="formData" class="max-w-3xl w-full mx-auto">
+      <!-- Form Title -->
+      <h2 v-if="formData.title" class="text-gray-900 text-3xl font-bold mb-4 text-center">
+        {{ formData.title }}
+      </h2>
+
+      <!-- Form Description -->
+      <p v-if="formData.description" class="text-gray-600 text-center mb-8 text-lg">
+        {{ formData.description }}
+      </p>
+
+      <!-- Error Summary -->
+      <div v-if="showErrorSummary && fieldErrors.size > 0" class="bg-red-50 border-2 border-red-500 rounded-lg p-4 mb-6" role="alert">
+        <h3 class="text-red-800 font-semibold mb-2 flex items-center gap-2">
+          <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
+            <path
+              fill-rule="evenodd"
+              d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
+              clip-rule="evenodd"
+            />
+          </svg>
+          {{ t("pluginPresentForm.errorSummary") }}
+        </h3>
+        <ul class="text-red-700 space-y-1">
+          <li v-for="[fieldId, error] in fieldErrors" :key="fieldId">
+            <a :href="`#${fieldId}`" @click.prevent="focusField(fieldId)" class="hover:underline cursor-pointer">
+              {{ error.message }}
+            </a>
+          </li>
+        </ul>
+      </div>
+
+      <!-- Form Fields -->
+      <form @submit.prevent="handleSubmit" class="space-y-6">
+        <div
+          v-for="field in formData.fields"
+          :key="field.id"
+          :id="field.id"
+          class="form-field"
+          :class="{ 'has-error': hasError(field.id) && touched.has(field.id) }"
+        >
+          <!-- Field Label -->
+          <label
+            :for="`input-${field.id}`"
+            class="block text-gray-800 font-semibold mb-2"
+            :class="{
+              'text-red-600': hasError(field.id) && touched.has(field.id),
+            }"
+          >
+            {{ field.label }}
+            <span v-if="field.required" class="text-red-500 ml-1" aria-label="required">{{ t("pluginPresentForm.requiredMarker") }}</span>
+          </label>
+
+          <!-- Field Description -->
+          <p v-if="field.description" class="text-gray-600 text-sm mb-2">
+            {{ field.description }}
+          </p>
+
+          <!-- Text Field -->
+          <input
+            v-if="field.type === 'text'"
+            :id="`input-${field.id}`"
+            v-model="formValues[field.id]"
+            type="text"
+            :placeholder="field.placeholder"
+            :aria-invalid="hasError(field.id) && touched.has(field.id)"
+            :aria-describedby="hasError(field.id) && touched.has(field.id) ? `${field.id}-error` : undefined"
+            @blur="handleBlur(field.id)"
+            @input="handleInput(field.id)"
+            class="w-full px-4 py-2 border-2 border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors"
+            :class="{
+              'border-red-500 focus:ring-red-500': hasError(field.id) && touched.has(field.id),
+              'border-gray-300': !hasError(field.id) || !touched.has(field.id),
+            }"
+          />
+
+          <!-- Textarea Field -->
+          <textarea
+            v-else-if="field.type === 'textarea'"
+            :id="`input-${field.id}`"
+            v-model="formValues[field.id]"
+            :placeholder="field.placeholder"
+            :rows="field.rows || 4"
+            :aria-invalid="hasError(field.id) && touched.has(field.id)"
+            :aria-describedby="hasError(field.id) && touched.has(field.id) ? `${field.id}-error` : undefined"
+            @blur="handleBlur(field.id)"
+            @input="handleInput(field.id)"
+            class="w-full px-4 py-2 border-2 border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors resize-y"
+            :class="{
+              'border-red-500 focus:ring-red-500': hasError(field.id) && touched.has(field.id),
+              'border-gray-300': !hasError(field.id) || !touched.has(field.id),
+            }"
+          />
+
+          <!-- Number Field -->
+          <input
+            v-else-if="field.type === 'number'"
+            :id="`input-${field.id}`"
+            v-model.number="formValues[field.id]"
+            type="number"
+            :min="field.min"
+            :max="field.max"
+            :step="field.step"
+            :aria-invalid="hasError(field.id) && touched.has(field.id)"
+            :aria-describedby="hasError(field.id) && touched.has(field.id) ? `${field.id}-error` : undefined"
+            @blur="handleBlur(field.id)"
+            @input="handleInput(field.id)"
+            class="w-full px-4 py-2 border-2 border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors"
+            :class="{
+              'border-red-500 focus:ring-red-500': hasError(field.id) && touched.has(field.id),
+              'border-gray-300': !hasError(field.id) || !touched.has(field.id),
+            }"
+          />
+
+          <!-- Date Field -->
+          <input
+            v-else-if="field.type === 'date'"
+            :id="`input-${field.id}`"
+            v-model="formValues[field.id]"
+            type="date"
+            :min="field.minDate"
+            :max="field.maxDate"
+            :aria-invalid="hasError(field.id) && touched.has(field.id)"
+            :aria-describedby="hasError(field.id) && touched.has(field.id) ? `${field.id}-error` : undefined"
+            @blur="handleBlur(field.id)"
+            @change="handleInput(field.id)"
+            class="w-full px-4 py-2 border-2 border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors"
+            :class="{
+              'border-red-500 focus:ring-red-500': hasError(field.id) && touched.has(field.id),
+              'border-gray-300': !hasError(field.id) || !touched.has(field.id),
+            }"
+          />
+
+          <!-- Time Field -->
+          <input
+            v-else-if="field.type === 'time'"
+            :id="`input-${field.id}`"
+            v-model="formValues[field.id]"
+            type="time"
+            :aria-invalid="hasError(field.id) && touched.has(field.id)"
+            :aria-describedby="hasError(field.id) && touched.has(field.id) ? `${field.id}-error` : undefined"
+            @blur="handleBlur(field.id)"
+            @change="handleInput(field.id)"
+            class="w-full px-4 py-2 border-2 border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors"
+            :class="{
+              'border-red-500 focus:ring-red-500': hasError(field.id) && touched.has(field.id),
+              'border-gray-300': !hasError(field.id) || !touched.has(field.id),
+            }"
+          />
+
+          <!-- Radio Field -->
+          <div
+            v-else-if="field.type === 'radio'"
+            class="space-y-2"
+            role="radiogroup"
+            :aria-invalid="hasError(field.id) && touched.has(field.id)"
+            :aria-describedby="hasError(field.id) && touched.has(field.id) ? `${field.id}-error` : undefined"
+          >
+            <label
+              v-for="(choice, index) in field.choices"
+              :key="index"
+              class="flex items-center p-3 border-2 border-gray-300 rounded-lg cursor-pointer transition-all hover:bg-gray-50"
+              :class="{
+                'border-blue-500 bg-blue-50': formValues[field.id] === index,
+                'border-gray-300': formValues[field.id] !== index,
+              }"
+            >
+              <input
+                type="radio"
+                :name="field.id"
+                :value="index"
+                v-model="formValues[field.id]"
+                @change="handleInput(field.id)"
+                @blur="handleBlur(field.id)"
+                class="mr-3 h-4 w-4 flex-shrink-0"
+              />
+              <span class="text-gray-800">{{ choice }}</span>
+            </label>
+          </div>
+
+          <!-- Dropdown Field -->
+          <select
+            v-else-if="field.type === 'dropdown'"
+            :id="`input-${field.id}`"
+            v-model="formValues[field.id]"
+            :aria-invalid="hasError(field.id) && touched.has(field.id)"
+            :aria-describedby="hasError(field.id) && touched.has(field.id) ? `${field.id}-error` : undefined"
+            @blur="handleBlur(field.id)"
+            @change="handleInput(field.id)"
+            class="w-full px-4 py-2 border-2 border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors bg-white"
+            :class="{
+              'border-red-500 focus:ring-red-500': hasError(field.id) && touched.has(field.id),
+              'border-gray-300': !hasError(field.id) || !touched.has(field.id),
+            }"
+          >
+            <option :value="null" disabled>{{ t("pluginPresentForm.selectOption") }}</option>
+            <option v-for="(choice, index) in field.choices" :key="index" :value="index">
+              {{ choice }}
+            </option>
+          </select>
+
+          <!-- Checkbox Field -->
+          <div
+            v-else-if="field.type === 'checkbox'"
+            class="space-y-2"
+            role="group"
+            :aria-invalid="hasError(field.id) && touched.has(field.id)"
+            :aria-describedby="hasError(field.id) && touched.has(field.id) ? `${field.id}-error` : undefined"
+          >
+            <label
+              v-for="(choice, index) in field.choices"
+              :key="index"
+              class="flex items-center p-3 border-2 border-gray-300 rounded-lg cursor-pointer transition-all hover:bg-gray-50"
+              :class="{
+                'border-blue-500 bg-blue-50': (formValues[field.id] || []).includes(index),
+                'border-gray-300': !(formValues[field.id] || []).includes(index),
+              }"
+            >
+              <input
+                type="checkbox"
+                :value="index"
+                v-model="formValues[field.id]"
+                @change="handleInput(field.id)"
+                @blur="handleBlur(field.id)"
+                class="mr-3 h-4 w-4 flex-shrink-0"
+              />
+              <span class="text-gray-800">{{ choice }}</span>
+            </label>
+          </div>
+
+          <!-- Error Message -->
+          <div
+            v-if="hasError(field.id) && touched.has(field.id)"
+            :id="`${field.id}-error`"
+            class="flex items-center gap-2 mt-2 text-red-600 text-sm"
+            role="alert"
+          >
+            <svg class="w-4 h-4 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
+              <path
+                fill-rule="evenodd"
+                d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
+                clip-rule="evenodd"
+              />
+            </svg>
+            {{ fieldErrors.get(field.id)?.message }}
+          </div>
+
+          <!-- Character Count (for text/textarea with maxLength) -->
+          <div
+            v-if="showCharCount(field)"
+            class="text-sm mt-2"
+            :class="{
+              'text-amber-600 font-semibold': isNearLimit(field),
+              'text-gray-500': !isNearLimit(field),
+            }"
+          >
+            <template v-if="field.maxLength">
+              {{ t("pluginPresentForm.charactersCount", { current: (formValues[field.id] || "").length, max: field.maxLength }) }}
+            </template>
+            <template v-else>
+              {{ t("pluginPresentForm.charactersCountNoMax", { current: (formValues[field.id] || "").length }) }}
+            </template>
+          </div>
+        </div>
+
+        <!-- Submit Button -->
+        <div class="mt-8 flex justify-center">
+          <button
+            type="submit"
+            :disabled="submitted"
+            :class="submitted ? 'bg-green-600 cursor-default' : 'bg-blue-600 hover:bg-blue-700'"
+            class="px-8 py-3 rounded-lg text-white font-semibold text-lg transition-colors"
+          >
+            {{ submitted ? t("pluginPresentForm.submitted") : t("pluginPresentForm.submit") }}
+          </button>
+        </div>
+
+        <!-- Progress Indicator -->
+        <div class="mt-4 text-center text-gray-600 text-sm">
+          {{ t("pluginPresentForm.progress", { filled: filledRequiredCount, total: requiredFieldsCount }) }}
+        </div>
+      </form>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, computed } from "vue";
+import { useI18n } from "vue-i18n";
+import type { ToolResult } from "gui-chat-protocol";
+import type { FormData, FormField, TextField, TextareaField, NumberField, DateField, CheckboxField } from "./types";
+
+const { t } = useI18n();
+
+interface FieldError {
+  fieldId: string;
+  message: string;
+  type: "required" | "format" | "range" | "pattern" | "custom";
+}
+
+interface FormViewState {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  userResponses: Record<string, any>;
+  touched: string[];
+  submitted?: boolean;
+}
+
+const props = defineProps<{
+  selectedResult: ToolResult | null;
+  sendTextMessage: (text?: string) => void;
+}>();
+
+const emit = defineEmits<{
+  updateResult: [result: ToolResult];
+}>();
+
+const formData = ref<FormData | null>(null);
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const formValues = ref<Record<string, any>>({});
+const touched = ref<Set<string>>(new Set());
+const fieldErrors = ref<Map<string, FieldError>>(new Map());
+const submitted = ref<boolean>(false);
+const showErrorSummary = ref<boolean>(false);
+const isRestoring = ref<boolean>(false);
+
+function isFreshResult(newResult: ToolResult, oldResult: ToolResult | null | undefined): boolean {
+  return !oldResult || !oldResult.jsonData || oldResult.uuid !== newResult.uuid || oldResult.jsonData !== newResult.jsonData;
+}
+
+function restoreViewState(state: FormViewState): void {
+  if (state.userResponses) Object.assign(formValues.value, state.userResponses);
+  if (state.touched) {
+    touched.value = new Set(state.touched);
+    state.touched.forEach((fieldId) => validateField(fieldId));
+  }
+  if (state.submitted !== undefined) submitted.value = state.submitted;
+}
+
+function applyNewResult(newResult: ToolResult): void {
+  isRestoring.value = true;
+  formData.value = newResult.jsonData as FormData;
+  formValues.value = {};
+  formData.value.fields.forEach((field) => {
+    formValues.value[field.id] = getDefaultValue(field);
+  });
+  if (newResult.viewState) restoreViewState(newResult.viewState as unknown as FormViewState);
+  isRestoring.value = false;
+}
+
+// Initialize form data and restore state
+watch(
+  () => props.selectedResult,
+  (newResult, oldResult) => {
+    if (!newResult || newResult.toolName !== "presentForm" || !newResult.jsonData) return;
+    if (!isFreshResult(newResult, oldResult)) return;
+    applyNewResult(newResult);
+  },
+  { immediate: true },
+);
+
+// Save state to viewState - watch all state changes together
+watch(
+  [formValues, touched, submitted],
+  () => {
+    if (isRestoring.value || !props.selectedResult) return;
+
+    const updatedResult: ToolResult = {
+      ...props.selectedResult,
+      viewState: {
+        userResponses: { ...formValues.value },
+        touched: Array.from(touched.value),
+        submitted: submitted.value,
+      },
+    };
+    emit("updateResult", updatedResult);
+  },
+  { deep: true },
+);
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function convertProvidedDefault(field: FormField, provided: any): any {
+  if (field.type === "radio" || field.type === "dropdown") {
+    const choiceIndex = field.choices.indexOf(provided as string);
+    return choiceIndex !== -1 ? choiceIndex : null;
+  }
+  if (field.type === "checkbox") {
+    if (!Array.isArray(provided)) return [];
+    return provided.map((val: string) => field.choices.indexOf(val)).filter((idx: number) => idx !== -1);
+  }
+  return provided;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function emptyValueForField(field: FormField): any {
+  if (field.type === "text" || field.type === "textarea" || field.type === "date" || field.type === "time") return "";
+  if (field.type === "number") return (field as NumberField).min !== undefined ? (field as NumberField).min : 0;
+  if (field.type === "checkbox") return [];
+  return null;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function getDefaultValue(field: FormField): any {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const provided = (field as FormField & { defaultValue?: any }).defaultValue;
+  if (provided !== undefined) return convertProvidedDefault(field, provided);
+  return emptyValueForField(field);
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function isEmpty(value: any): boolean {
+  if (value === null || value === undefined) return true;
+  if (typeof value === "string") return value.trim() === "";
+  if (Array.isArray(value)) return value.length === 0;
+  return false;
+}
+
+// 254 = RFC 5321 maximum address length. indexOf-based check avoids
+// the chained `[^\s@]+` regex pattern that sonarjs flags as
+// vulnerable to super-linear backtracking.
+const EMAIL_MAX_LENGTH = 254;
+function isValidEmail(email: string): boolean {
+  if (!email || email.length > EMAIL_MAX_LENGTH) return false;
+  const atIndex = email.indexOf("@");
+  if (atIndex <= 0 || atIndex !== email.lastIndexOf("@")) return false;
+  const local = email.slice(0, atIndex);
+  const domain = email.slice(atIndex + 1);
+  if (/\s/.test(local) || /\s/.test(domain)) return false;
+  const dot = domain.lastIndexOf(".");
+  return dot > 0 && dot < domain.length - 1;
+}
+
+function isValidUrl(url: string): boolean {
+  try {
+    new URL(url);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+function isValidPhone(phone: string): boolean {
+  const phoneRegex = /^[\d\s\-+()]+$/;
+  return phoneRegex.test(phone) && phone.replace(/\D/g, "").length >= 10;
+}
+
+function validateText(field: TextField, value: string): string | null {
+  if (field.validation === "email" && !isValidEmail(value)) return "Please enter a valid email address";
+  if (field.validation === "url" && !isValidUrl(value)) return "Please enter a valid URL";
+  if (field.validation === "phone" && !isValidPhone(value)) return "Please enter a valid phone number";
+  if (typeof field.validation === "string" && !["email", "url", "phone"].includes(field.validation)) {
+    try {
+      if (!new RegExp(field.validation).test(value)) return `${field.label} format is invalid`;
+    } catch {
+      console.warn(`Invalid regex pattern: ${field.validation}`);
+    }
+  }
+  return null;
+}
+
+function validateTextarea(field: TextareaField, value: string): string | null {
+  if (field.minLength && value.length < field.minLength) {
+    return `Must be at least ${field.minLength} characters (currently ${value.length})`;
+  }
+  if (field.maxLength && value.length > field.maxLength) {
+    return `Must be no more than ${field.maxLength} characters (currently ${value.length})`;
+  }
+  return null;
+}
+
+function validateNumber(field: NumberField, value: number): string | null {
+  if (field.min !== undefined && value < field.min) return `Must be at least ${field.min}`;
+  if (field.max !== undefined && value > field.max) return `Must be no more than ${field.max}`;
+  return null;
+}
+
+function validateDate(field: DateField, value: string): string | null {
+  if (field.minDate && value < field.minDate) return `Date must be on or after ${field.minDate}`;
+  if (field.maxDate && value > field.maxDate) return `Date must be on or before ${field.maxDate}`;
+  return null;
+}
+
+function validateCheckbox(field: CheckboxField, value: number[]): string | null {
+  const selectedCount = value?.length || 0;
+  if (field.minSelections && selectedCount < field.minSelections) {
+    return `Please select at least ${field.minSelections} option${field.minSelections > 1 ? "s" : ""}`;
+  }
+  if (field.maxSelections && selectedCount > field.maxSelections) {
+    return `Please select no more than ${field.maxSelections} option${field.maxSelections > 1 ? "s" : ""}`;
+  }
+  return null;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function getErrorMessage(field: FormField, value: any): string | null {
+  if (field.required && isEmpty(value)) return `${field.label} is required`;
+  if (isEmpty(value)) return null;
+  if (field.type === "text") return validateText(field as TextField, value);
+  if (field.type === "textarea") return validateTextarea(field as TextareaField, value);
+  if (field.type === "number") return validateNumber(field as NumberField, value);
+  if (field.type === "date") return validateDate(field as DateField, value);
+  if (field.type === "checkbox") return validateCheckbox(field as CheckboxField, value);
+  return null;
+}
+
+function validateField(fieldId: string): boolean {
+  const field = formData.value?.fields.find((candidate) => candidate.id === fieldId);
+  if (!field) return true;
+
+  const value = formValues.value[fieldId];
+  const errorMessage = getErrorMessage(field, value);
+
+  if (errorMessage) {
+    fieldErrors.value.set(fieldId, {
+      fieldId,
+      message: errorMessage,
+      type: "custom",
+    });
+    return false;
+  } else {
+    fieldErrors.value.delete(fieldId);
+    return true;
+  }
+}
+
+function handleBlur(fieldId: string): void {
+  touched.value.add(fieldId);
+  validateField(fieldId);
+}
+
+function handleInput(fieldId: string): void {
+  // Real-time validation for fields that are already touched
+  if (touched.value.has(fieldId)) {
+    validateField(fieldId);
+  }
+}
+
+function hasError(fieldId: string): boolean {
+  return fieldErrors.value.has(fieldId);
+}
+
+function focusField(fieldId: string): void {
+  const element = document.getElementById(`input-${fieldId}`);
+  if (element) {
+    element.focus();
+    element.scrollIntoView({ behavior: "smooth", block: "center" });
+  }
+}
+
+function showCharCount(field: FormField): boolean {
+  return (field.type === "text" || field.type === "textarea") && (field as TextField | TextareaField).maxLength !== undefined;
+}
+
+function isNearLimit(field: FormField): boolean {
+  if (field.type !== "text" && field.type !== "textarea") return false;
+  const maxLength = (field as TextField | TextareaField).maxLength;
+  if (!maxLength) return false;
+  const currentLength = (formValues.value[field.id] || "").length;
+  return currentLength / maxLength > 0.9;
+}
+
+const requiredFieldsCount = computed(() => {
+  return formData.value?.fields.filter((field) => field.required).length || 0;
+});
+
+const filledRequiredCount = computed(() => {
+  if (!formData.value) return 0;
+  return formData.value.fields.filter((field) => field.required && !isEmpty(formValues.value[field.id])).length;
+});
+
+function handleSubmit(): void {
+  if (submitted.value) return;
+
+  // Mark all fields as touched
+  formData.value?.fields.forEach((field) => {
+    touched.value.add(field.id);
+    validateField(field.id);
+  });
+
+  // Check for errors
+  if (fieldErrors.value.size > 0) {
+    showErrorSummary.value = true;
+    // Focus first error field
+    const firstErrorFieldId = Array.from(fieldErrors.value.keys())[0];
+    focusField(firstErrorFieldId);
+    return;
+  }
+
+  // Build a markdown bullet list of `- {label}: {value}` lines so the
+  // chat history reads naturally for a human while still being trivial
+  // for the LLM to parse. Empty values become "(none)". Titles, labels,
+  // and choice strings are passed through singleLine() to strip any
+  // newlines they might contain — without that, a label like
+  // "Address (street\nand number)" would shatter the bullet structure.
+  const lines: string[] = [];
+  if (formData.value?.title) lines.push(`**${singleLine(formData.value.title)}**`, "");
+  formData.value?.fields.forEach((field) => {
+    lines.push(`- ${singleLine(field.label)}: ${renderValue(field, formValues.value[field.id])}`);
+  });
+
+  submitted.value = true;
+  props.sendTextMessage(lines.join("\n"));
+}
+
+// Indent every line except the first by 2 spaces — under markdown
+// rules, indented continuations stay attached to the preceding bullet
+// instead of starting a new top-level item. Without this, a textarea
+// value containing newlines would inject phantom bullets into the
+// chat-side payload that the LLM could mis-parse.
+function indentContinuation(text: string): string {
+  return text.replace(/\n/g, "\n  ");
+}
+
+// Collapse any newline (and surrounding whitespace) into a single
+// space. Used on titles, labels, and choice strings (LLM-authored
+// fields) so they can't smuggle a newline into the markdown bullet
+// structure and reshape the payload. Free-form user input
+// (text/textarea values) uses indentContinuation instead — it
+// preserves multi-line values. Implemented via split-trim-join (not a
+// global regex) to avoid sonarjs's slow-regex flag on `\s*\n\s*`.
+function singleLine(text: string): string {
+  return text
+    .split(/\r?\n/)
+    .map((segment) => segment.trim())
+    .filter((segment) => segment.length > 0)
+    .join(" ");
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function renderValue(field: FormField, value: any): string {
+  const empty = "(none)";
+  if (field.type === "radio" || field.type === "dropdown") {
+    return value !== null && value !== undefined ? singleLine(field.choices[value]) : empty;
+  }
+  // Checkbox values render as a nested bullet sublist rather than a
+  // comma-joined string. Comma-joining is ambiguous when a choice label
+  // itself contains a comma; the sublist is unambiguous and survives
+  // round-trip parsing.
+  if (field.type === "checkbox") {
+    const items: string[] = (value || []).map((idx: number) => singleLine(field.choices[idx]));
+    if (items.length === 0) return empty;
+    return "\n  - " + items.join("\n  - ");
+  }
+  if (typeof value === "string") {
+    const trimmed = value.trim();
+    return trimmed === "" ? empty : indentContinuation(trimmed);
+  }
+  if (value === null || value === undefined) return empty;
+  return String(value);
+}
+</script>
+
+<style scoped>
+.form-field {
+  transition: all 0.2s ease;
+}
+
+.form-field.has-error {
+  animation: shake 0.3s ease;
+}
+
+@keyframes shake {
+  0%,
+  100% {
+    transform: translateX(0);
+  }
+  25% {
+    transform: translateX(-5px);
+  }
+  75% {
+    transform: translateX(5px);
+  }
+}
+</style>