From 4ccadb0b38d85a546cd01592d875cc5154d7a2ee Mon Sep 17 00:00:00 2001
From: rcourtman <courtmanr@gmail.com>
Date: Fri, 12 Jun 2026 16:03:34 +0100
Subject: [PATCH] Register shared form textarea governance

---
 .../v6/internal/subsystems/agent-lifecycle.md |   5 +
 .../v6/internal/subsystems/alerts.md          |   7 ++
 .../v6/internal/subsystems/cloud-paid.md      |   5 +
 .../subsystems/frontend-primitives.md         |   8 ++
 .../scripts/shared-template-registry.json     |  85 +++++++++++++++
 .../Alerts/EmailProviderSelect.test.tsx       |   9 ++
 .../components/Alerts/EmailProviderSelect.tsx |  43 ++++----
 .../Alerts/IncidentTimelinePanel.tsx          |   8 +-
 ...holdsTableDockerIgnoredPrefixesSection.tsx |   8 +-
 .../components/Alerts/WebhookConfigForm.tsx   |  43 ++++----
 .../Infrastructure/ReportMergeModal.tsx       |  23 ++--
 .../Settings/AgentProfilesPanel.tsx           |  27 ++---
 .../SelfHostedCommercialRecoverySection.tsx   |  38 +++----
 .../Settings/SuggestProfileModal.tsx          |  11 +-
 .../__tests__/ProLicensePanel.test.tsx        |   2 +
 .../components/shared/FormTextarea.test.tsx   |  81 ++++++++++++++
 .../src/components/shared/FormTextarea.tsx    |  82 ++++++++++++++
 .../SharedPrimitives.guardrails.test.ts       | 100 ++++++++++++++++++
 .../AlertAppriseDestinationsSection.tsx       |  32 +++---
 19 files changed, 504 insertions(+), 113 deletions(-)
 create mode 100644 frontend-modern/src/components/shared/FormTextarea.test.tsx
 create mode 100644 frontend-modern/src/components/shared/FormTextarea.tsx

diff --git a/docs/release-control/v6/internal/subsystems/agent-lifecycle.md b/docs/release-control/v6/internal/subsystems/agent-lifecycle.md
index c2ab3936d0..70b6adae3f 100644
--- a/docs/release-control/v6/internal/subsystems/agent-lifecycle.md
+++ b/docs/release-control/v6/internal/subsystems/agent-lifecycle.md
@@ -482,6 +482,11 @@ Agent profile management tables follow that same presentation boundary:
 profile and assignment columns, but embedded table framing must route through
 `PulseDataGrid`'s shared frame variants instead of lifecycle-local
 `overflow-x-auto` or side-border wrappers.
+Agent profile prompt and description textareas follow the same shared primitive
+boundary. `AgentProfilesPanel.tsx` and `SuggestProfileModal.tsx` may own agent
+profile lifecycle behavior and API mutations, but multi-line form controls in
+those surfaces must compose `FormTextarea` instead of local raw `<textarea>`
+wrappers.
 
 ## Extension Points
 
diff --git a/docs/release-control/v6/internal/subsystems/alerts.md b/docs/release-control/v6/internal/subsystems/alerts.md
index 76b7dc8e49..3c4031ed4e 100644
--- a/docs/release-control/v6/internal/subsystems/alerts.md
+++ b/docs/release-control/v6/internal/subsystems/alerts.md
@@ -205,6 +205,13 @@ alignment classes.
 Alert filter option semantics stay alert-owned, but FilterBar chip
 presentation is frontend-primitives-owned: severity filter leading dots must
 use `filterChipStatusDot` rather than alert-local span factories.
+Alert notification and timeline form textareas are also shared-primitive
+consumers. Email recipient lists, Apprise target lists, webhook payload
+templates, threshold ignored-prefix input, and incident timeline notes must
+compose `FormTextarea` for label/id/help wiring and textarea chrome instead of
+recreating raw labelled `<textarea>` shells locally. Alert resource row/mobile
+note editors are the only bounded residual until their row-editor behavior is
+migrated through the same primitive.
 Guest metric canonical state remains resource-backed and therefore node-scoped
 for Proxmox guests, so node moves must not strand active alert state on the
 previous resource ID. When a guest metric alert survives a node move, alerts
diff --git a/docs/release-control/v6/internal/subsystems/cloud-paid.md b/docs/release-control/v6/internal/subsystems/cloud-paid.md
index ebe4f0ca46..9b5f6ff23e 100644
--- a/docs/release-control/v6/internal/subsystems/cloud-paid.md
+++ b/docs/release-control/v6/internal/subsystems/cloud-paid.md
@@ -1286,6 +1286,11 @@ including the existing-key field label/help text and legacy-key exchange
 notice, while `selfHostedBillingPresentation.ts` owns the first-class plan and
 license-state copy that belongs on the primary billing surface. That split
 prevents manual key redemption from drifting back into the main purchase path.
+The recovery key input is also a frontend-primitives consumer:
+`SelfHostedCommercialRecoverySection.tsx` must compose `FormTextarea` for the
+manual license-key field so label/id/help wiring and textarea chrome remain
+shared while cloud-paid continues to own the commercial copy and recovery
+actions.
 That same recovery boundary also owns the linked legal surface:
 `SelfHostedCommercialRecoverySection.tsx` must route its Terms-of-Service link
 through the shipped `TERMS.md` docs asset instead of sending operators to
diff --git a/docs/release-control/v6/internal/subsystems/frontend-primitives.md b/docs/release-control/v6/internal/subsystems/frontend-primitives.md
index 1dcf0ceb68..1020be362c 100644
--- a/docs/release-control/v6/internal/subsystems/frontend-primitives.md
+++ b/docs/release-control/v6/internal/subsystems/frontend-primitives.md
@@ -2442,6 +2442,14 @@ history range controls must compose `FormSelect` rather than recreating a
 screen-reader label plus raw `<select>` shell locally, and future native-select
 migrations should extend that primitive instead of forking labelled select
 wrappers.
+Native textarea controls follow the same contract. `FormTextarea` owns
+label/id wiring, helper-text description merging, value synchronization, default
+textarea chrome, and compact styling hooks for multi-line text fields. Alert
+destination fields, incident notes, infrastructure merge reports, commercial
+recovery input, and agent-profile prompt/description fields must compose
+`FormTextarea`; bounded residual raw textareas are limited to editor-specific
+surfaces called out in the shared-template registry until their dedicated
+migration slices retire them.
 Search controls are registry-backed too. `SearchField` owns simple search
 input chrome, clear affordance, keyboard forwarding, focus handling, aria
 labels, and trailing-control padding, while `SearchInput` owns resource-list
diff --git a/frontend-modern/scripts/shared-template-registry.json b/frontend-modern/scripts/shared-template-registry.json
index 9eee6594bd..bde84f6b82 100644
--- a/frontend-modern/scripts/shared-template-registry.json
+++ b/frontend-modern/scripts/shared-template-registry.json
@@ -222,6 +222,31 @@
         "scripts/shared-template-audit.mjs"
       ]
     },
+    {
+      "id": "form-textarea-shell",
+      "category": "form-control",
+      "summary": "Native textarea controls must compose FormTextarea for shared label/id/help wiring, value synchronization, and textarea chrome instead of recreating labelled textarea wrappers locally.",
+      "canonical": {
+        "path": "src/components/shared/FormTextarea.tsx",
+        "export": "FormTextarea"
+      },
+      "requiredConsumers": [
+        { "path": "src/components/Alerts/EmailProviderSelect.tsx" },
+        { "path": "src/components/Alerts/IncidentTimelinePanel.tsx" },
+        { "path": "src/components/Alerts/ThresholdsTableDockerIgnoredPrefixesSection.tsx" },
+        { "path": "src/components/Alerts/WebhookConfigForm.tsx" },
+        { "path": "src/components/Infrastructure/ReportMergeModal.tsx" },
+        { "path": "src/components/Settings/AgentProfilesPanel.tsx" },
+        { "path": "src/components/Settings/SelfHostedCommercialRecoverySection.tsx" },
+        { "path": "src/components/Settings/SuggestProfileModal.tsx" },
+        { "path": "src/features/alerts/AlertAppriseDestinationsSection.tsx" }
+      ],
+      "proof": [
+        "src/components/shared/SharedPrimitives.guardrails.test.ts",
+        "src/components/shared/FormTextarea.test.tsx",
+        "scripts/shared-template-audit.mjs"
+      ]
+    },
     {
       "id": "platform-table-loading-state",
       "category": "platform-table-loading-state",
@@ -766,6 +791,66 @@
         "scripts/shared-template-audit.mjs"
       ]
     },
+    {
+      "id": "form-textarea-local-alert-fields",
+      "category": "form-control",
+      "summary": "Alert destination and incident timeline textareas must compose FormTextarea; only the resource note editors remain as bounded residuals until their editor-specific migration.",
+      "canonical": {
+        "path": "src/components/shared/FormTextarea.tsx",
+        "export": "FormTextarea"
+      },
+      "scopes": ["src/components/Alerts", "src/features/alerts"],
+      "extensions": [".tsx"],
+      "allPatterns": ["<textarea"],
+      "legacyReason": "Bounded residual. Alert resource note editors still own row/mobile-specific editing behavior; new alert textareas must use FormTextarea.",
+      "allowedPaths": [
+        "src/components/Alerts/AlertResourceTableMobile.tsx",
+        "src/components/Alerts/AlertResourceTableRow.tsx"
+      ],
+      "ignoredPaths": ["src/components/shared/SharedPrimitives.guardrails.test.ts"],
+      "proof": [
+        "src/components/shared/SharedPrimitives.guardrails.test.ts",
+        "scripts/shared-template-audit.mjs"
+      ]
+    },
+    {
+      "id": "form-textarea-local-settings-fields",
+      "category": "form-control",
+      "summary": "Settings textareas must compose FormTextarea; the SSO provider editor remains as bounded residual until its multi-field provider metadata editor is migrated.",
+      "canonical": {
+        "path": "src/components/shared/FormTextarea.tsx",
+        "export": "FormTextarea"
+      },
+      "scopes": ["src/components/Settings"],
+      "extensions": [".tsx"],
+      "allPatterns": ["<textarea"],
+      "legacyReason": "Bounded residual. SSO provider metadata textareas still require a dedicated editor migration; new settings textareas must use FormTextarea.",
+      "allowedPaths": ["src/components/Settings/SSOProvidersPanel.tsx"],
+      "ignoredPaths": ["src/components/shared/SharedPrimitives.guardrails.test.ts"],
+      "proof": [
+        "src/components/shared/SharedPrimitives.guardrails.test.ts",
+        "scripts/shared-template-audit.mjs"
+      ]
+    },
+    {
+      "id": "form-textarea-local-infrastructure-fields",
+      "category": "form-control",
+      "summary": "Infrastructure modal textareas must compose FormTextarea instead of recreating labelled native textarea wrappers locally.",
+      "canonical": {
+        "path": "src/components/shared/FormTextarea.tsx",
+        "export": "FormTextarea"
+      },
+      "scopes": ["src/components/Infrastructure"],
+      "extensions": [".tsx"],
+      "allPatterns": ["<textarea"],
+      "legacyReason": "Retired migration debt. Infrastructure form textareas must use FormTextarea for label/id/help wiring.",
+      "allowedPaths": [],
+      "ignoredPaths": ["src/components/shared/SharedPrimitives.guardrails.test.ts"],
+      "proof": [
+        "src/components/shared/SharedPrimitives.guardrails.test.ts",
+        "scripts/shared-template-audit.mjs"
+      ]
+    },
     {
       "id": "filter-chip-status-dot-local-factory",
       "category": "filter-bar",
diff --git a/frontend-modern/src/components/Alerts/EmailProviderSelect.test.tsx b/frontend-modern/src/components/Alerts/EmailProviderSelect.test.tsx
index a653527324..9fe2fd1d64 100644
--- a/frontend-modern/src/components/Alerts/EmailProviderSelect.test.tsx
+++ b/frontend-modern/src/components/Alerts/EmailProviderSelect.test.tsx
@@ -2,6 +2,7 @@ import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
 import { createSignal } from 'solid-js';
 import { cleanup, fireEvent, render, screen, waitFor } from '@solidjs/testing-library';
 import type { UIEmailConfig } from '@/features/alerts/types';
+import emailProviderSelectSource from './EmailProviderSelect.tsx?raw';
 
 // --- Mock setup (must be before component import) ---
 const getEmailProvidersMock = vi.fn();
@@ -113,6 +114,14 @@ describe('EmailProviderSelect', () => {
     expect(screen.getByText('Username')).toBeInTheDocument();
     expect(screen.getByText('Password / API key')).toBeInTheDocument();
     expect(screen.getByText('Recipients (one per line)')).toBeInTheDocument();
+    expect(screen.getByRole('textbox', { name: 'Recipients (one per line)' }).tagName).toBe(
+      'TEXTAREA',
+    );
+  });
+
+  it('routes multi-line recipient input through FormTextarea', () => {
+    expect(emailProviderSelectSource).toContain('FormTextarea');
+    expect(emailProviderSelectSource).not.toContain('<textarea');
   });
 
   it('exposes canonical labels for provider and security selects', () => {
diff --git a/frontend-modern/src/components/Alerts/EmailProviderSelect.tsx b/frontend-modern/src/components/Alerts/EmailProviderSelect.tsx
index 53f0575ecc..286118de95 100644
--- a/frontend-modern/src/components/Alerts/EmailProviderSelect.tsx
+++ b/frontend-modern/src/components/Alerts/EmailProviderSelect.tsx
@@ -37,6 +37,7 @@ import {
   type EmailProviderSelectStateProps,
 } from './useEmailProviderSelectState';
 import { FormSelect } from '@/components/shared/FormSelect';
+import { FormTextarea } from '@/components/shared/FormTextarea';
 
 interface EmailProviderSelectProps extends EmailProviderSelectStateProps {
   config: UIEmailConfig;
@@ -214,30 +215,24 @@ export function EmailProviderSelect(props: EmailProviderSelectProps) {
         </div>
       </div>
 
-      <div class={formField}>
-        <label for={fieldIds.recipients} class={labelClass()}>
-          {ALERT_EMAIL_RECIPIENTS_LABEL}
-        </label>
-        <textarea
-          id={fieldIds.recipients}
-          value={props.config.to.join('\n')}
-          onInput={(e) => {
-            // Keep raw lines while editing — trimming/filtering on every
-            // keystroke ate empty trailing lines and stripped typed
-            // whitespace, so users couldn't type past line 1. Empty
-            // entries are filtered in buildEmailConfigPayload at save.
-            props.onChange({ ...props.config, to: e.currentTarget.value.split('\n') });
-          }}
-          onKeyDown={(e) => {
-            if (e.key === 'Enter') {
-              e.stopPropagation();
-            }
-          }}
-          rows={3}
-          class={controlClass('px-2 py-1.5 font-mono leading-snug')}
-          placeholder={getAlertEmailRecipientsPlaceholder(props.config.from)}
-        />
-      </div>
+      <FormTextarea
+        id={fieldIds.recipients}
+        label={ALERT_EMAIL_RECIPIENTS_LABEL}
+        value={props.config.to.join('\n')}
+        onInput={(e) => {
+          // Keep raw lines while editing; trimming/filtering on every keystroke
+          // eats empty trailing lines and typed whitespace.
+          props.onChange({ ...props.config, to: e.currentTarget.value.split('\n') });
+        }}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter') {
+            e.stopPropagation();
+          }
+        }}
+        rows={3}
+        textareaBaseClass={controlClass('px-2 py-1.5 font-mono leading-snug')}
+        placeholder={getAlertEmailRecipientsPlaceholder(props.config.from)}
+      />
 
       <div class="border-t border-border pt-3">
         <button
diff --git a/frontend-modern/src/components/Alerts/IncidentTimelinePanel.tsx b/frontend-modern/src/components/Alerts/IncidentTimelinePanel.tsx
index 7bb98a28e4..87afecc49c 100644
--- a/frontend-modern/src/components/Alerts/IncidentTimelinePanel.tsx
+++ b/frontend-modern/src/components/Alerts/IncidentTimelinePanel.tsx
@@ -4,6 +4,7 @@ import { filterIncidentEvents } from '@/features/alerts/types';
 import { IncidentEventFilters } from '@/components/Alerts/IncidentEventFilters';
 import { IncidentAssistantHandoffButton } from '@/components/Alerts/IncidentAssistantHandoffButton';
 import { IncidentTimelineEventCard } from '@/components/Alerts/IncidentTimelineEventCard';
+import { FormTextarea } from '@/components/shared/FormTextarea';
 import {
   getAlertTimelineEmptyState,
   getAlertTimelineFailureState,
@@ -92,8 +93,11 @@ export function IncidentTimelinePanel(props: IncidentTimelinePanelProps) {
               <p class="text-xs text-muted">{getAlertTimelineEmptyState().text}</p>
             </Show>
             <div class="flex flex-col gap-2">
-              <textarea
-                class={getAlertIncidentNoteTextareaClass()}
+              <FormTextarea
+                label="Incident note"
+                labelClass="sr-only"
+                fieldBaseClass="contents"
+                textareaBaseClass={getAlertIncidentNoteTextareaClass()}
                 rows={2}
                 placeholder={getAlertResourceIncidentNotePlaceholder()}
                 value={props.noteDraft}
diff --git a/frontend-modern/src/components/Alerts/ThresholdsTableDockerIgnoredPrefixesSection.tsx b/frontend-modern/src/components/Alerts/ThresholdsTableDockerIgnoredPrefixesSection.tsx
index d9e1ada027..1c69a6ea26 100644
--- a/frontend-modern/src/components/Alerts/ThresholdsTableDockerIgnoredPrefixesSection.tsx
+++ b/frontend-modern/src/components/Alerts/ThresholdsTableDockerIgnoredPrefixesSection.tsx
@@ -1,6 +1,7 @@
 import { Show } from 'solid-js';
 
 import { Card } from '@/components/shared/Card';
+import { FormTextarea } from '@/components/shared/FormTextarea';
 import type { ThresholdsTableSectionProps } from '@/features/alerts/thresholds/thresholdsTableSectionProps';
 
 export function ThresholdsTableDockerIgnoredPrefixesSection(props: ThresholdsTableSectionProps) {
@@ -27,7 +28,10 @@ export function ThresholdsTableDockerIgnoredPrefixesSection(props: ThresholdsTab
           </button>
         </Show>
       </div>
-      <textarea
+      <FormTextarea
+        label={state.dockerIgnoredPrefixesPresentation.title}
+        labelClass="sr-only"
+        fieldBaseClass="contents"
         value={state.dockerIgnoredInput()}
         onInput={(event) => state.handleDockerIgnoredChange(event.currentTarget.value)}
         onKeyDown={(event) => {
@@ -37,7 +41,7 @@ export function ThresholdsTableDockerIgnoredPrefixesSection(props: ThresholdsTab
         }}
         placeholder={state.dockerIgnoredPrefixesPresentation.placeholder}
         rows={4}
-        class="mt-4 w-full rounded-md border border-border bg-surface p-3 text-sm text-base-content focus:border-sky-500 focus:outline-none focus:ring-2 focus:ring-sky-200 dark:focus:border-sky-400 dark:focus:ring-sky-600"
+        textareaBaseClass="mt-4 w-full rounded-md border border-border bg-surface p-3 text-sm text-base-content focus:border-sky-500 focus:outline-none focus:ring-2 focus:ring-sky-200 dark:focus:border-sky-400 dark:focus:ring-sky-600"
       />
     </Card>
   );
diff --git a/frontend-modern/src/components/Alerts/WebhookConfigForm.tsx b/frontend-modern/src/components/Alerts/WebhookConfigForm.tsx
index 602abdd8d7..2825305de4 100644
--- a/frontend-modern/src/components/Alerts/WebhookConfigForm.tsx
+++ b/frontend-modern/src/components/Alerts/WebhookConfigForm.tsx
@@ -44,6 +44,7 @@ import {
   labelClass,
 } from '@/components/shared/Form';
 import { FormSelect } from '@/components/shared/FormSelect';
+import { FormTextarea } from '@/components/shared/FormTextarea';
 
 import type { CustomFieldInput, HeaderInput, WebhookConfigFormData } from './useWebhookConfigState';
 
@@ -203,27 +204,27 @@ export function WebhookConfigForm(props: WebhookConfigFormProps) {
       </Show>
 
       <Show when={props.formData().service === 'generic'}>
-        <div class={formField}>
-          <label class={labelClass('flex items-center gap-2')}>
-            Custom payload template (JSON)
-            <span class="text-xs text-muted">{ALERT_WEBHOOK_PAYLOAD_HELP_LABEL}</span>
-          </label>
-          <textarea
-            value={props.formData().payloadTemplate || ''}
-            onInput={(e) =>
-              props.setFormData((prev) => ({
-                ...prev,
-                payloadTemplate: e.currentTarget.value,
-              }))
-            }
-            placeholder={ALERT_WEBHOOK_PAYLOAD_TEMPLATE_PLACEHOLDER}
-            rows={8}
-            class={controlClass('px-2 py-1.5 text-xs font-mono min-h-[160px]')}
-          />
-          <p class={formHelpText + ' mt-1'}>
-            Available variables: {ALERT_WEBHOOK_PAYLOAD_VARIABLES}
-          </p>
-        </div>
+        <FormTextarea
+          label={
+            <>
+              Custom payload template (JSON)
+              <span class="text-xs text-muted">{ALERT_WEBHOOK_PAYLOAD_HELP_LABEL}</span>
+            </>
+          }
+          labelClass="flex items-center gap-2"
+          value={props.formData().payloadTemplate || ''}
+          onInput={(e) =>
+            props.setFormData((prev) => ({
+              ...prev,
+              payloadTemplate: e.currentTarget.value,
+            }))
+          }
+          placeholder={ALERT_WEBHOOK_PAYLOAD_TEMPLATE_PLACEHOLDER}
+          rows={8}
+          textareaBaseClass={controlClass('px-2 py-1.5 text-xs font-mono min-h-[160px]')}
+          help={<>Available variables: {ALERT_WEBHOOK_PAYLOAD_VARIABLES}</>}
+          helpClass="mt-1"
+        />
       </Show>
 
       <Show when={props.customFieldInputs().length > 0 || props.formData().service === 'pushover'}>
diff --git a/frontend-modern/src/components/Infrastructure/ReportMergeModal.tsx b/frontend-modern/src/components/Infrastructure/ReportMergeModal.tsx
index 2374575227..64b459d01a 100644
--- a/frontend-modern/src/components/Infrastructure/ReportMergeModal.tsx
+++ b/frontend-modern/src/components/Infrastructure/ReportMergeModal.tsx
@@ -1,6 +1,7 @@
 import { Component, Show, For, createMemo, createSignal } from 'solid-js';
 import { apiFetch } from '@/utils/apiClient';
 import { Dialog } from '@/components/shared/Dialog';
+import { FormTextarea } from '@/components/shared/FormTextarea';
 import { getSourcePlatformBadge } from '@/components/shared/sourcePlatformBadges';
 import { getSourcePlatformLabel } from '@/utils/sourcePlatforms';
 import { showError, showSuccess } from '@/utils/toast';
@@ -117,18 +118,16 @@ export const ReportMergeModal: Component<ReportMergeModalProps> = (props) => {
           </div>
         </div>
 
-        <div>
-          <label class="text-xs font-medium uppercase tracking-wide text-muted">
-            Notes (optional)
-          </label>
-          <textarea
-            value={notes()}
-            onInput={(event) => setNotes(event.currentTarget.value)}
-            rows={3}
-            class="mt-2 w-full rounded-md border border-border bg-surface px-3 py-2 text-sm shadow-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
-            placeholder="Example: Agent running on a different host with same hostname."
-          />
-        </div>
+        <FormTextarea
+          label="Notes (optional)"
+          labelClass="text-xs font-medium uppercase tracking-wide text-muted"
+          fieldBaseClass="space-y-2"
+          value={notes()}
+          onInput={(event) => setNotes(event.currentTarget.value)}
+          rows={3}
+          textareaBaseClass="w-full rounded-md border border-border bg-surface px-3 py-2 text-sm shadow-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
+          placeholder="Example: Agent running on a different host with same hostname."
+        />
 
         <Show when={error()}>
           <div
diff --git a/frontend-modern/src/components/Settings/AgentProfilesPanel.tsx b/frontend-modern/src/components/Settings/AgentProfilesPanel.tsx
index c62b5b6482..f955050b56 100644
--- a/frontend-modern/src/components/Settings/AgentProfilesPanel.tsx
+++ b/frontend-modern/src/components/Settings/AgentProfilesPanel.tsx
@@ -3,6 +3,7 @@ import { Card } from '@/components/shared/Card';
 import SettingsPanel from '@/components/shared/SettingsPanel';
 import { Dialog } from '@/components/shared/Dialog';
 import { FormSelect } from '@/components/shared/FormSelect';
+import { FormTextarea } from '@/components/shared/FormTextarea';
 import { UpgradeLink } from '@/components/shared/UpgradeLink';
 import { SuggestProfileModal } from './SuggestProfileModal';
 import { KNOWN_SETTINGS, type SelectSetting, type StringSetting } from './agentProfileSettings';
@@ -359,18 +360,20 @@ export const AgentProfilesPanel: Component = () => {
                   </div>
 
                   {/* Profile Description */}
-                  <div class="space-y-1">
-                    <label class="block text-sm font-medium text-base-content">
-                      Description <span class="text-slate-400 font-normal">(optional)</span>
-                    </label>
-                    <textarea
-                      value={formDescription()}
-                      onInput={(e) => setFormDescription(e.currentTarget.value)}
-                      placeholder="What is this profile for?"
-                      rows={2}
-                      class="w-full rounded-md border border-border bg-surface px-3 py-2 text-sm text-base-content shadow-sm focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-200 dark:focus:border-blue-400 dark:focus:ring-blue-800 resize-none"
-                    />
-                  </div>
+                  <FormTextarea
+                    label={
+                      <>
+                        Description <span class="text-slate-400 font-normal">(optional)</span>
+                      </>
+                    }
+                    labelClass="block text-sm font-medium text-base-content"
+                    fieldBaseClass="space-y-1"
+                    value={formDescription()}
+                    onInput={(e) => setFormDescription(e.currentTarget.value)}
+                    placeholder="What is this profile for?"
+                    rows={2}
+                    textareaBaseClass="w-full rounded-md border border-border bg-surface px-3 py-2 text-sm text-base-content shadow-sm focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-200 dark:focus:border-blue-400 dark:focus:ring-blue-800 resize-none"
+                  />
 
                   {/* Settings */}
                   <div class="space-y-3">
diff --git a/frontend-modern/src/components/Settings/SelfHostedCommercialRecoverySection.tsx b/frontend-modern/src/components/Settings/SelfHostedCommercialRecoverySection.tsx
index f0e2aa2321..c84ba95e45 100644
--- a/frontend-modern/src/components/Settings/SelfHostedCommercialRecoverySection.tsx
+++ b/frontend-modern/src/components/Settings/SelfHostedCommercialRecoverySection.tsx
@@ -1,5 +1,6 @@
 import { Component, Show } from 'solid-js';
-import { formField, formHelpText, labelClass, controlClass } from '@/components/shared/Form';
+import { formField, controlClass } from '@/components/shared/Form';
+import { FormTextarea } from '@/components/shared/FormTextarea';
 import { SELF_HOSTED_RECOVERY_PRESENTATION } from '@/utils/licensePresentation';
 import { TERMS_DOC_URL } from '@/utils/docsLinks';
 import { CommercialSection } from './CommercialBillingSections';
@@ -45,28 +46,29 @@ export const SelfHostedCommercialRecoverySection: Component<
 
       <div class="mt-4 space-y-4">
         <div class={formField}>
-          <label class={labelClass()} for="pulse-pro-license-key">
-            {SELF_HOSTED_RECOVERY_PRESENTATION.fieldLabel}
-          </label>
-          <textarea
+          <FormTextarea
             id="pulse-pro-license-key"
-            class={controlClass('min-h-[120px] font-mono')}
+            label={SELF_HOSTED_RECOVERY_PRESENTATION.fieldLabel}
+            fieldBaseClass="contents"
+            textareaBaseClass={controlClass('min-h-[120px] font-mono')}
             placeholder={SELF_HOSTED_RECOVERY_PRESENTATION.fieldPlaceholder}
             value={props.licenseKey}
             onInput={(event) => props.onLicenseKeyInput(event.currentTarget.value)}
+            help={
+              <>
+                {SELF_HOSTED_RECOVERY_PRESENTATION.helpTextBeforeTerms}{' '}
+                <a
+                  href={TERMS_DOC_URL}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  class="inline-flex min-h-10 sm:min-h-9 items-center rounded px-1 text-blue-600 hover:underline"
+                >
+                  {SELF_HOSTED_RECOVERY_PRESENTATION.termsLabel}
+                </a>
+                {SELF_HOSTED_RECOVERY_PRESENTATION.helpTextAfterTerms}
+              </>
+            }
           />
-          <p class={formHelpText}>
-            {SELF_HOSTED_RECOVERY_PRESENTATION.helpTextBeforeTerms}{' '}
-            <a
-              href={TERMS_DOC_URL}
-              target="_blank"
-              rel="noopener noreferrer"
-              class="inline-flex min-h-10 sm:min-h-9 items-center rounded px-1 text-blue-600 hover:underline"
-            >
-              {SELF_HOSTED_RECOVERY_PRESENTATION.termsLabel}
-            </a>
-            {SELF_HOSTED_RECOVERY_PRESENTATION.helpTextAfterTerms}
-          </p>
           <div class="mt-3 rounded-md border border-amber-200 dark:border-amber-800 bg-amber-50 dark:bg-amber-900 p-3 text-sm text-amber-800 dark:text-amber-200">
             <p class="font-medium">
               {SELF_HOSTED_RECOVERY_PRESENTATION.privateRuntimeNotice.title}
diff --git a/frontend-modern/src/components/Settings/SuggestProfileModal.tsx b/frontend-modern/src/components/Settings/SuggestProfileModal.tsx
index a4564bec94..ad1f11c333 100644
--- a/frontend-modern/src/components/Settings/SuggestProfileModal.tsx
+++ b/frontend-modern/src/components/Settings/SuggestProfileModal.tsx
@@ -15,6 +15,7 @@ import {
   type ConfigValidationResult,
 } from '@/api/agentProfiles';
 import { Dialog } from '@/components/shared/Dialog';
+import { FormTextarea } from '@/components/shared/FormTextarea';
 import { notificationStore } from '@/stores/notifications';
 import { logger } from '@/utils/logger';
 import { formatRelativeTime } from '@/utils/format';
@@ -257,15 +258,15 @@ export const SuggestProfileModal: Component<SuggestProfileModalProps> = (props)
         <div class="px-6 py-4 space-y-4 overflow-y-auto flex-1">
           {/* Prompt Input */}
           <div class="space-y-2">
-            <label class="block text-sm font-medium text-base-content">
-              What kind of profile do you need?
-            </label>
-            <textarea
+            <FormTextarea
+              label="What kind of profile do you need?"
+              labelClass="block text-sm font-medium text-base-content"
+              fieldBaseClass="contents"
               value={prompt()}
               onInput={(e) => setPrompt(e.currentTarget.value)}
               placeholder="Describe the agents and use case for this profile..."
               rows={3}
-              class="w-full rounded-md border border-border bg-surface px-3 py-2 text-sm text-base-content shadow-sm focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-200 dark:focus:border-blue-400 dark:focus:ring-blue-800 resize-none"
+              textareaBaseClass="w-full rounded-md border border-border bg-surface px-3 py-2 text-sm text-base-content shadow-sm focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-200 dark:focus:border-blue-400 dark:focus:ring-blue-800 resize-none"
               disabled={loading()}
             />
             <Show when={suggestion()}>
diff --git a/frontend-modern/src/components/Settings/__tests__/ProLicensePanel.test.tsx b/frontend-modern/src/components/Settings/__tests__/ProLicensePanel.test.tsx
index e4e4813357..319838968a 100644
--- a/frontend-modern/src/components/Settings/__tests__/ProLicensePanel.test.tsx
+++ b/frontend-modern/src/components/Settings/__tests__/ProLicensePanel.test.tsx
@@ -1136,6 +1136,8 @@ describe('ProLicensePanel', () => {
     expect(proLicensePanelSource).toContain('ProLicensePanelContent');
     expect(proLicensePanelSource).toContain('./ProLicensePlanSection');
     expect(proLicensePanelSource).toContain('SelfHostedCommercialRecoverySection');
+    expect(selfHostedCommercialRecoverySectionSource).toContain('FormTextarea');
+    expect(selfHostedCommercialRecoverySectionSource).not.toContain('<textarea');
     expect(proLicensePanelSource).toContain('SELF_HOSTED_PRO_BILLING_PRESENTATION');
     expect(proLicensePanelSource).toContain('value={state.activeSection()}');
     expect(proLicensePanelSource).toContain('<Subtabs');
diff --git a/frontend-modern/src/components/shared/FormTextarea.test.tsx b/frontend-modern/src/components/shared/FormTextarea.test.tsx
new file mode 100644
index 0000000000..d7ba09f894
--- /dev/null
+++ b/frontend-modern/src/components/shared/FormTextarea.test.tsx
@@ -0,0 +1,81 @@
+import { cleanup, fireEvent, render, screen } from '@solidjs/testing-library';
+import { createSignal } from 'solid-js';
+import { afterEach, describe, expect, it } from 'vitest';
+import { FormTextarea } from './FormTextarea';
+
+describe('FormTextarea', () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  it('owns the label relationship for native textareas', () => {
+    render(() => (
+      <FormTextarea label="Notes" value="Initial notes" data-testid="notes-field" />
+    ));
+
+    const textarea = screen.getByLabelText('Notes');
+    expect(textarea).toBe(screen.getByTestId('notes-field'));
+    expect(textarea).toHaveValue('Initial notes');
+  });
+
+  it('preserves explicit ids and compact styling hooks', () => {
+    render(() => (
+      <FormTextarea
+        id="incident-note"
+        label="Incident note"
+        value=""
+        fieldBaseClass="flex"
+        fieldClass="flex-row"
+        labelClass="text-xs"
+        textareaClass="min-h-16"
+      />
+    ));
+
+    const textarea = screen.getByLabelText('Incident note');
+    expect(textarea).toHaveAttribute('id', 'incident-note');
+    expect(textarea).toHaveClass('min-h-16');
+  });
+
+  it('connects helper text without dropping an existing description', () => {
+    render(() => (
+      <>
+        <p id="external-help">External help</p>
+        <FormTextarea
+          id="payload"
+          label="Payload"
+          value=""
+          aria-describedby="external-help"
+          help="Use JSON template variables."
+        />
+      </>
+    ));
+
+    const textarea = screen.getByLabelText('Payload');
+    expect(textarea).toHaveAccessibleDescription('External help Use JSON template variables.');
+    expect(textarea).toHaveAttribute('aria-describedby', 'external-help payload-help');
+  });
+
+  it('keeps the DOM value synchronized when controlled state changes', () => {
+    const [value, setValue] = createSignal('first');
+
+    render(() => (
+      <>
+        <button type="button" onClick={() => setValue('second')}>
+          Update
+        </button>
+        <FormTextarea
+          label="Controlled note"
+          value={value()}
+          onInput={(event) => setValue(event.currentTarget.value)}
+        />
+      </>
+    ));
+
+    const textarea = screen.getByLabelText('Controlled note');
+    expect(textarea).toHaveValue('first');
+    fireEvent.input(textarea, { target: { value: 'typed' } });
+    expect(textarea).toHaveValue('typed');
+    fireEvent.click(screen.getByRole('button', { name: 'Update' }));
+    expect(textarea).toHaveValue('second');
+  });
+});
diff --git a/frontend-modern/src/components/shared/FormTextarea.tsx b/frontend-modern/src/components/shared/FormTextarea.tsx
new file mode 100644
index 0000000000..015daf70ed
--- /dev/null
+++ b/frontend-modern/src/components/shared/FormTextarea.tsx
@@ -0,0 +1,82 @@
+import { Show, createEffect, createUniqueId, splitProps } from 'solid-js';
+import type { Component, JSX } from 'solid-js';
+import { formField, formHelpText, formLabel, formTextarea } from '@/components/shared/Form';
+
+interface FormTextareaProps extends JSX.TextareaHTMLAttributes<HTMLTextAreaElement> {
+  label: JSX.Element;
+  fieldBaseClass?: string;
+  fieldClass?: string;
+  labelClass?: string;
+  textareaBaseClass?: string;
+  textareaClass?: string;
+  help?: JSX.Element;
+  helpClass?: string;
+}
+
+const joinClass = (...parts: Array<string | undefined>) => parts.filter(Boolean).join(' ');
+
+export const FormTextarea: Component<FormTextareaProps> = (props) => {
+  const [local, textareaProps] = splitProps(props, [
+    'fieldBaseClass',
+    'fieldClass',
+    'help',
+    'helpClass',
+    'id',
+    'label',
+    'labelClass',
+    'aria-describedby',
+    'class',
+    'textareaBaseClass',
+    'textareaClass',
+    'value',
+  ]);
+  let textareaElement: HTMLTextAreaElement | undefined;
+  const generatedId = `form-textarea-${createUniqueId()}`;
+  const textareaId = () => (typeof local.id === 'string' && local.id ? local.id : generatedId);
+  const helpId = () => `${textareaId()}-help`;
+  const describedBy = () => {
+    const existing = local['aria-describedby'];
+    const ids = [
+      typeof existing === 'string' ? existing : undefined,
+      local.help ? helpId() : undefined,
+    ]
+      .filter(Boolean)
+      .join(' ');
+
+    return ids || undefined;
+  };
+
+  createEffect(() => {
+    const value = local.value;
+    if (!textareaElement || value === undefined || value === null) return;
+
+    const nextValue = String(value);
+    if (textareaElement.value !== nextValue) {
+      textareaElement.value = nextValue;
+    }
+  });
+
+  return (
+    <div class={joinClass(local.fieldBaseClass ?? formField, local.fieldClass)}>
+      <label for={textareaId()} class={joinClass(formLabel, local.labelClass)}>
+        {local.label}
+      </label>
+      <textarea
+        ref={(element) => {
+          textareaElement = element;
+        }}
+        {...textareaProps}
+        id={textareaId()}
+        aria-describedby={describedBy()}
+        class={joinClass(local.textareaBaseClass ?? formTextarea, local.class, local.textareaClass)}
+      />
+      <Show when={local.help}>
+        {(help) => (
+          <p id={helpId()} class={joinClass(formHelpText, local.helpClass)}>
+            {help()}
+          </p>
+        )}
+      </Show>
+    </div>
+  );
+};
diff --git a/frontend-modern/src/components/shared/SharedPrimitives.guardrails.test.ts b/frontend-modern/src/components/shared/SharedPrimitives.guardrails.test.ts
index c224335038..5efbbc0757 100644
--- a/frontend-modern/src/components/shared/SharedPrimitives.guardrails.test.ts
+++ b/frontend-modern/src/components/shared/SharedPrimitives.guardrails.test.ts
@@ -20,6 +20,7 @@ import filterButtonGroupModelSource from '@/components/shared/filterButtonGroupM
 import filterToolbarSource from '@/components/shared/FilterToolbar.tsx?raw';
 import filterOptionPresentationSource from '@/components/shared/filterOptionPresentation.ts?raw';
 import formSelectSource from '@/components/shared/FormSelect.tsx?raw';
+import formTextareaSource from '@/components/shared/FormTextarea.tsx?raw';
 import helpIconSource from '@/components/shared/HelpIcon.tsx?raw';
 import helpIconModelSource from '@/components/shared/helpIconModel.ts?raw';
 import historyChartHeaderSource from '@/components/shared/HistoryChartHeader.tsx?raw';
@@ -96,6 +97,14 @@ import webInterfaceUrlFieldStateSource from '@/components/shared/useWebInterface
 import webInterfaceNameLinkSource from '@/components/shared/WebInterfaceNameLink.tsx?raw';
 import inlineDetailTableRowSource from '@/components/shared/InlineDetailTableRow.tsx?raw';
 import sharedTemplateRegistrySource from '../../../scripts/shared-template-registry.json?raw';
+import emailProviderSelectSource from '@/components/Alerts/EmailProviderSelect.tsx?raw';
+import incidentTimelinePanelSource from '@/components/Alerts/IncidentTimelinePanel.tsx?raw';
+import thresholdsTableDockerIgnoredPrefixesSectionSource from '@/components/Alerts/ThresholdsTableDockerIgnoredPrefixesSection.tsx?raw';
+import webhookConfigFormSource from '@/components/Alerts/WebhookConfigForm.tsx?raw';
+import reportMergeModalSource from '@/components/Infrastructure/ReportMergeModal.tsx?raw';
+import selfHostedCommercialRecoverySectionSource from '@/components/Settings/SelfHostedCommercialRecoverySection.tsx?raw';
+import suggestProfileModalSource from '@/components/Settings/SuggestProfileModal.tsx?raw';
+import alertAppriseDestinationsSectionSource from '@/features/alerts/AlertAppriseDestinationsSection.tsx?raw';
 import dockerPageSurfaceSource from '@/features/docker/DockerPageSurface.tsx?raw';
 import kubernetesPageSurfaceSource from '@/features/kubernetes/KubernetesPageSurface.tsx?raw';
 import proxmoxPageSurfaceSource from '@/features/proxmox/ProxmoxPageSurface.tsx?raw';
@@ -377,6 +386,97 @@ describe('shared primitive guardrails', () => {
     expect(guestDrawerHistorySource).not.toContain('<select');
   });
 
+  it('keeps native form textareas on the shared labelled primitive', () => {
+    const registry = JSON.parse(sharedTemplateRegistrySource) as {
+      rules?: Array<{
+        id: string;
+        canonical?: { path?: string; export?: string };
+        requiredConsumers?: Array<{ path?: string }>;
+      }>;
+      patternGuards?: Array<{
+        id: string;
+        canonical?: { path?: string; export?: string };
+        allPatterns?: string[];
+        scopes?: string[];
+        allowedPaths?: string[];
+        ignoredPaths?: string[];
+      }>;
+    };
+    const registeredRule = registry.rules?.find((rule) => rule.id === 'form-textarea-shell');
+    const alertGuard = registry.patternGuards?.find(
+      (guard) => guard.id === 'form-textarea-local-alert-fields',
+    );
+    const settingsGuard = registry.patternGuards?.find(
+      (guard) => guard.id === 'form-textarea-local-settings-fields',
+    );
+    const infrastructureGuard = registry.patternGuards?.find(
+      (guard) => guard.id === 'form-textarea-local-infrastructure-fields',
+    );
+
+    expect(registeredRule?.canonical?.path).toBe('src/components/shared/FormTextarea.tsx');
+    expect(registeredRule?.canonical?.export).toBe('FormTextarea');
+    expect(registeredRule?.requiredConsumers?.map((consumer) => consumer.path)).toEqual([
+      'src/components/Alerts/EmailProviderSelect.tsx',
+      'src/components/Alerts/IncidentTimelinePanel.tsx',
+      'src/components/Alerts/ThresholdsTableDockerIgnoredPrefixesSection.tsx',
+      'src/components/Alerts/WebhookConfigForm.tsx',
+      'src/components/Infrastructure/ReportMergeModal.tsx',
+      'src/components/Settings/AgentProfilesPanel.tsx',
+      'src/components/Settings/SelfHostedCommercialRecoverySection.tsx',
+      'src/components/Settings/SuggestProfileModal.tsx',
+      'src/features/alerts/AlertAppriseDestinationsSection.tsx',
+    ]);
+    expect(alertGuard?.canonical?.path).toBe('src/components/shared/FormTextarea.tsx');
+    expect(alertGuard?.canonical?.export).toBe('FormTextarea');
+    expect(alertGuard?.allPatterns).toEqual(['<textarea']);
+    expect(alertGuard?.scopes).toEqual(['src/components/Alerts', 'src/features/alerts']);
+    expect(alertGuard?.allowedPaths).toEqual([
+      'src/components/Alerts/AlertResourceTableMobile.tsx',
+      'src/components/Alerts/AlertResourceTableRow.tsx',
+    ]);
+    expect(settingsGuard?.canonical?.path).toBe('src/components/shared/FormTextarea.tsx');
+    expect(settingsGuard?.canonical?.export).toBe('FormTextarea');
+    expect(settingsGuard?.allPatterns).toEqual(['<textarea']);
+    expect(settingsGuard?.scopes).toEqual(['src/components/Settings']);
+    expect(settingsGuard?.allowedPaths).toEqual(['src/components/Settings/SSOProvidersPanel.tsx']);
+    expect(infrastructureGuard?.canonical?.path).toBe('src/components/shared/FormTextarea.tsx');
+    expect(infrastructureGuard?.canonical?.export).toBe('FormTextarea');
+    expect(infrastructureGuard?.allPatterns).toEqual(['<textarea']);
+    expect(infrastructureGuard?.scopes).toEqual(['src/components/Infrastructure']);
+    expect(infrastructureGuard?.allowedPaths ?? []).toHaveLength(0);
+
+    expect(formTextareaSource).toContain("from '@/components/shared/Form'");
+    expect(formTextareaSource).toContain('createUniqueId');
+    expect(formTextareaSource).toContain('splitProps');
+    expect(formTextareaSource).toContain('interface FormTextareaProps');
+    expect(formTextareaSource).toContain('label: JSX.Element');
+    expect(formTextareaSource).toContain('<label for={textareaId()}');
+    expect(formTextareaSource).toContain('<textarea');
+    expect(formTextareaSource).toContain('id={textareaId()}');
+    expect(formTextareaSource).toContain('aria-describedby={describedBy()}');
+    expect(formTextareaSource).toContain('createEffect');
+    expect(formTextareaSource).toContain("'value'");
+    expect(formTextareaSource).toContain('textareaElement.value = nextValue');
+    expect(formTextareaSource).toContain('local.textareaBaseClass ?? formTextarea');
+    expect(formTextareaSource).toContain('local.fieldBaseClass ?? formField');
+
+    const migratedConsumers = [
+      emailProviderSelectSource,
+      incidentTimelinePanelSource,
+      thresholdsTableDockerIgnoredPrefixesSectionSource,
+      webhookConfigFormSource,
+      reportMergeModalSource,
+      agentProfilesPanelSource,
+      selfHostedCommercialRecoverySectionSource,
+      suggestProfileModalSource,
+      alertAppriseDestinationsSectionSource,
+    ];
+    for (const source of migratedConsumers) {
+      expect(source).toContain('FormTextarea');
+      expect(source).not.toContain('<textarea');
+    }
+  });
+
   it('routes selectable settings cards through SelectionCardGroup', () => {
     const registry = JSON.parse(sharedTemplateRegistrySource) as {
       rules?: Array<{
diff --git a/frontend-modern/src/features/alerts/AlertAppriseDestinationsSection.tsx b/frontend-modern/src/features/alerts/AlertAppriseDestinationsSection.tsx
index 1e65b37552..b6152085a5 100644
--- a/frontend-modern/src/features/alerts/AlertAppriseDestinationsSection.tsx
+++ b/frontend-modern/src/features/alerts/AlertAppriseDestinationsSection.tsx
@@ -5,6 +5,7 @@ import { TlsVerificationWarningBanner } from '@/components/shared/TlsVerificatio
 import { Toggle } from '@/components/shared/Toggle';
 import { formControl, formField, formHelpText, labelClass } from '@/components/shared/Form';
 import { FormSelect } from '@/components/shared/FormSelect';
+import { FormTextarea } from '@/components/shared/FormTextarea';
 import type { UIAppriseConfig } from './types';
 import {
   ALERT_DESTINATIONS_APPRISE_API_KEY_HEADER_HELP,
@@ -111,23 +112,20 @@ export function AlertAppriseDestinationsSection(props: AlertAppriseDestinationsS
           <option value="http">{ALERT_DESTINATIONS_APPRISE_MODE_HTTP_LABEL}</option>
         </FormSelect>
 
-        <div class={formField}>
-          <label for={fieldIds.targets} class={labelClass('text-xs uppercase tracking-[0.08em]')}>
-            {ALERT_DESTINATIONS_APPRISE_TARGETS_LABEL}
-          </label>
-          <textarea
-            id={fieldIds.targets}
-            rows={4}
-            class={`${formControl} min-h-[120px] font-mono`}
-            value={props.config.targetsText}
-            placeholder={ALERT_DESTINATIONS_APPRISE_TARGETS_PLACEHOLDER}
-            onInput={(event) => {
-              props.updateApprise({ targetsText: event.currentTarget.value });
-              props.setHasUnsavedChanges(true);
-            }}
-          />
-          <p class={formHelpText}>{getAlertDestinationsAppriseTargetsHelp(props.config.mode)}</p>
-        </div>
+        <FormTextarea
+          id={fieldIds.targets}
+          label={ALERT_DESTINATIONS_APPRISE_TARGETS_LABEL}
+          labelClass="text-xs uppercase tracking-[0.08em]"
+          rows={4}
+          textareaBaseClass={`${formControl} min-h-[120px] font-mono`}
+          value={props.config.targetsText}
+          placeholder={ALERT_DESTINATIONS_APPRISE_TARGETS_PLACEHOLDER}
+          onInput={(event) => {
+            props.updateApprise({ targetsText: event.currentTarget.value });
+            props.setHasUnsavedChanges(true);
+          }}
+          help={getAlertDestinationsAppriseTargetsHelp(props.config.mode)}
+        />
 
         <Show when={props.config.mode === 'cli'}>
           <div class={formField}>