From 285cd0f44d0d3d397194aa90816cea36a2f4429b Mon Sep 17 00:00:00 2001
From: Akhilesh Shastri <akhilesh@writer.com>
Date: Fri, 2 Jan 2026 15:48:00 +0000
Subject: [PATCH] feat(SharedBlueprints): add character limit counter - AB-900

---
 .../BuilderSettingsDeploySharedBlueprint.vue  | 33 +++++++++++++++++--
 1 file changed, 31 insertions(+), 2 deletions(-)

diff --git a/src/ui/src/builder/settings/BuilderSettingsDeploySharedBlueprint.vue b/src/ui/src/builder/settings/BuilderSettingsDeploySharedBlueprint.vue
index 74e177034..0bfd99b3e 100644
--- a/src/ui/src/builder/settings/BuilderSettingsDeploySharedBlueprint.vue
+++ b/src/ui/src/builder/settings/BuilderSettingsDeploySharedBlueprint.vue
@@ -23,9 +23,18 @@
 					class="DeploySharedBlueprint__textarea"
 					:class="{
 						'DeploySharedBlueprint__textarea--error':
-							errors.description,
+							errors.description || isDescriptionOverLimit,
 					}"
 				/>
+				<div
+					class="DeploySharedBlueprint__charCounter"
+					:class="{
+						'DeploySharedBlueprint__charCounter--error':
+							isDescriptionOverLimit,
+					}"
+				>
+					{{ descriptionLength }}/{{ DESCRIPTION_MAX_LENGTH }}
+				</div>
 			</WdsFieldWrapper>
 
 			<div
@@ -67,6 +76,8 @@ const props = defineProps<{
 	blueprintId: string;
 }>();
 
+const DESCRIPTION_MAX_LENGTH = 8192;
+
 const isOpen = defineModel({ type: Boolean });
 
 const wf = inject(injectionKeys.core);
@@ -105,6 +116,11 @@ const errors = shallowRef<Record<string, string>>({});
 const isDeploying = ref(false);
 const prUrl = ref<string | null>(null);
 
+const descriptionLength = computed(() => form.value.description.length);
+const isDescriptionOverLimit = computed(
+	() => descriptionLength.value > DESCRIPTION_MAX_LENGTH,
+);
+
 function validateForm(): boolean {
 	const newErrors: Record<string, string> = {};
 
@@ -113,6 +129,8 @@ function validateForm(): boolean {
 	}
 	if (!form.value.description.trim()) {
 		newErrors.description = "Description is required";
+	} else if (isDescriptionOverLimit.value) {
+		newErrors.description = `Description must be ${DESCRIPTION_MAX_LENGTH} characters or less`;
 	}
 
 	errors.value = newErrors;
@@ -257,7 +275,7 @@ const modalActions = computed<ModalAction[]>(() => {
 		{
 			desc: isDeploying.value ? publishingText : publishText,
 			fn: handleDeploy,
-			disabled: isDeploying.value,
+			disabled: isDeploying.value || isDescriptionOverLimit.value,
 		},
 	];
 });
@@ -298,6 +316,17 @@ watch(isOpen, (newValue) => {
 	border-color: var(--builderErrorColor);
 }
 
+.DeploySharedBlueprint__charCounter {
+	font-size: 12px;
+	color: var(--builderSecondaryTextColor);
+	text-align: right;
+	margin-top: 4px;
+}
+
+.DeploySharedBlueprint__charCounter--error {
+	color: var(--builderErrorColor);
+}
+
 .DeploySharedBlueprint__globalOption {
 	display: flex;
 	flex-direction: column;