@designcrowd/library.brand-page 6.0.5 → 6.0.6-ast-bugs

package/src/brand-page-maker/components/ai-website-builder/AiWebsiteBuilder.vue

@@ -14,6 +14,7 @@
       class="tw-flex-1 tw-overflow-hidden tw-px-5"
       @send="onSendMessage"
       @stop-generation="onStopGeneration"
+      @action-click="onActionClick"
     />
   </div>
 </template>
@@ -24,12 +25,22 @@ import { storeToRefs } from 'pinia';
 import SideBarSettingsHeader from '../../../shared/common/SideBarSettingsHeader.vue';
 import AiChatbox from '../ai-text-edit/AiChatbox.vue';
 import { useUiSideBarStore } from '../../../shared/side-bar/store';
-import { useSnapshotStore, useAiWebsiteBuilderThreadStore } from '../../stores';
+import {
+  useSnapshotStore,
+  useAiWebsiteBuilderThreadStore,
+  useBrandPageContainerStore,
+} from '../../stores';
 import { SIDE_BAR_TAB_NAMES } from '../../constants';
 import { useAiWebsiteBuilderChat } from '../../composables/ai-chat/useAiWebsiteBuilderChat';
+import {
+  UI_ACTIONS,
+  type AgentActionType,
+} from '../../composables/ai-chat/ui-actions';
+import { AI_CTA_LOCATIONS } from '../../composables/useEventTracker';
 
 const sideBarStore = useUiSideBarStore();
 const snapshotStore = useSnapshotStore();
+const brandPageContainerStore = useBrandPageContainerStore();
 const aiWebsiteBuilderThreadStore = useAiWebsiteBuilderThreadStore();
 const { promptText } = storeToRefs(aiWebsiteBuilderThreadStore);
 
@@ -59,6 +70,15 @@ const onStopGeneration = async () => {
   await stopGenerationAsync();
 };
 
+const onActionClick = async (type: AgentActionType) => {
+  if (type === UI_ACTIONS.UPGRADE) {
+    await brandPageContainerStore.showUpgradeModalAndSaveAsync(
+      undefined,
+      AI_CTA_LOCATIONS.AI_BUILDER_CHAT_UPSELL,
+    );
+  }
+};
+
 defineExpose({
   stopGenerationAsync,
 });

package/src/brand-page-maker/components/brand-page-maker/BrandPageMaker.mixin.ts

@@ -47,7 +47,6 @@ import AssetLibraryClient from '../../../clients/asset-library-clients';
 import { useShopConfigStore } from '@shared/ecommerce-settings/store/shop-settings-store';
 import type { ShopConfigData } from '@brand-page/models/shop.model';
 import { useProductConfigStore } from '@brand-page-maker/stores/product-config/product-config-store';
-import type { UpdateItemValuePayload } from '@shared/content-settings/models';
 import { UPGRADE_CTA_LOCATIONS } from '../../composables/useEventTracker';
 import { commonTr } from '@src/composables/useTranslate';
 import { useSnapshot } from '../../../composables/useSnapshot';
@@ -70,6 +69,8 @@ export interface BrandPageMakerViewModel {
   initialCategories: InitialCategories;
   personalisation?: UserPersonalisationContent[];
   isPersonalisationEnabled?: boolean;
+  userPromptContentKey?: string;
+  showAiTemplatesTab?: boolean;
   brandPageType?: BrandPageType;
   businessName?: string;
   industry?: string;
@@ -85,6 +86,7 @@ export default defineComponent({
       required: true,
     },
   },
+  emits: ['create-team-cards'],
   setup() {
     const brandPageMakerStore = useBrandPageMakerStore();
     const sideBarStore = useUiSideBarStore();
@@ -227,6 +229,8 @@ export default defineComponent({
       personalisationData: this.viewModel.personalisation,
       isPersonalisationEnabled:
         this.viewModel.isPersonalisationEnabled || false,
+      userPromptContentKey: this.viewModel.userPromptContentKey,
+      showAiTemplatesTab: this.viewModel.showAiTemplatesTab || false,
       brandPageType: this.viewModel.brandPageType,
       businessName: this.viewModel.businessName,
       industry: this.viewModel.industry,

package/src/brand-page-maker/components/brand-page-maker/BrandPageMaker.stories.ts

@@ -270,6 +270,7 @@ const InitialiseMakerStores = (options: {
     isContextualUpgradeModalVisible: false,
     gettyVideos: [],
     templateSearchTerm: undefined,
+    aiTemplateKeywords: undefined,
   });
 
   userStore.setUserState({

package/src/brand-page-maker/components/brand-page-maker/BrandPageMakerTemplateSettings.stories.ts

@@ -5,12 +5,9 @@ import type { Component } from 'vue';
 import MockAdapter from 'axios-mock-adapter';
 import { mockDesignTemplateTypeApi } from '@shared/template-settings/components/TemplatesSettings.test-helper';
 import BrandPageMakerTemplateSettings from './BrandPageMakerTemplateSettings.vue';
-import VueRouter, { createMemoryHistory, createRouter } from 'vue-router';
+import { createMemoryHistory, createRouter } from 'vue-router';
 import { hexToRGB } from '@utils/helpers';
-import {
-  BRAND_PAGE_TEMPLATE_BP_909,
-  LOGO_IMAGE_URL,
-} from '../../../__fixtures__';
+import { BRAND_PAGE_TEMPLATE_BP_909 } from '../../../__fixtures__';
 import { setupStoryPinia } from './__fixtures__/store-fixture';
 import { useUiLogoSettingsStore } from '@shared/logo-settings/store';
 import { useUiStore } from '@brand-page-maker/stores';

package/src/brand-page-maker/components/brand-page-maker/__fixtures__/brand-page-examples.ts

@@ -13,13 +13,8 @@ import type {
   TextContent,
   UserPersonalisation,
   ImageContent,
-  ImageGalleryContent,
   ProfileContent,
-  WebsiteContent,
-  ImagesSectionContent,
   UserPersonalisationContent,
-  EmailContent,
-  PhoneContent,
   ShapesSectionContent,
   BannerSectionContent,
 } from '@brand-page';

package/src/brand-page-maker/components/brand-page-maker/__fixtures__/brand-page-payment.ts

@@ -56,14 +56,6 @@ export const brandPagePaymentConfigsResponse: BrandPagePaymentConfig[] = [
   },
 ];
 
-const stripePaymentIntent: StripePaymentIntent = {
-  id: faker.datatype.uuid(),
-  object: 'payment_intent',
-  amount: 500,
-  client_secret: faker.internet.password(),
-  currency: 'USD',
-} as const;
-
 export const brandPageCreateCartResult: CreateCartResult<StripePaymentIntent> =
   {
     cartId: faker.datatype.uuid(),

package/src/brand-page-maker/components/brand-page-maker/__fixtures__/brand-site-template.examples.ts

@@ -1,5 +1,3 @@
-import type { PageModel } from '@brand-page';
-
 export const BRAND_SITE_TEMPLATE_SAMPLE: any[] = [
   {
     title: 'HOME',

package/src/brand-page-maker/components/brandpage-maker-page/BrandPageMakerPage.vue

@@ -1,3 +1,4 @@
+<!-- eslint-disable vue/no-v-html -->
 <template>
   <Page
     data-component="brand-page-maker-page"

package/src/brand-page-maker/components/brandpage-settings/ReplaceImageSettingsForBrandPageSettings.mixin.ts

@@ -130,7 +130,7 @@ export default defineComponent({
         mode: BRANDPAGE_SETTINGS_MODES.edit,
       });
     },
-    onDesignSelected(image: UserMediaItemWithDimensions) {
+    onDesignSelected() {
       this.brandPageMakerStore.setMode({ mode: BRANDPAGE_SETTINGS_MODES.edit });
     },
   },

package/src/brand-page-maker/components/color-palette/BpColorPalette.vue

@@ -68,7 +68,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, type PropType } from 'vue';
+import { ref } from 'vue';
 import type { ColorValue } from 'src/shared/color-picker/models';
 import ClickOutside from 'click-outside-vue3';
 import ColorPicker from './BpColorPicker.vue';
@@ -106,7 +106,6 @@ const emit = defineEmits<{
 const pickerIdRef = ref<HTMLElement>();
 
 const popupTop = ref(0);
-const popupLeft = ref(0);
 
 const vClickOutside = ClickOutside.directive;
 

package/src/brand-page-maker/components/color-picker/components/ColorModeSelect.mixin.ts

@@ -23,6 +23,7 @@ export default defineComponent({
       default: COLOR_PICKER_MODE.SOLID,
     },
   },
+  emits: ['update:modelValue'],
   data() {
     return {
       colorPickerModes: COLOR_PICKER_MODE_OPTIONS,

package/src/brand-page-maker/components/color-picker/components/GradientColorSlider.mixin.ts

@@ -27,6 +27,7 @@ export default defineComponent({
       default: 5,
     },
   },
+  emits: ['update:activeHandlerId'],
   data() {
     return {
       internalActiveHandlerId: 0,

package/src/brand-page-maker/components/color-picker/components/GradientColorSliderHandler.mixin.ts

@@ -18,6 +18,7 @@ export default defineComponent({
       default: false,
     },
   },
+  emits: ['on-selected', 'on-position-changed'],
   data() {
     return {
       startPosInPixel,

package/src/brand-page-maker/components/color-picker/components/GradientTypeSelector.mixin.ts

@@ -12,6 +12,7 @@ export default defineComponent({
       default: GRADIENT_COLOR_TYPE.LINEAR,
     },
   },
+  emits: ['update:modelValue'],
   data() {
     return {
       isLinear: true,

package/src/brand-page-maker/components/device/Device.mixin.ts

@@ -18,6 +18,7 @@ export default defineComponent({
       default: false,
     },
   },
+  emits: ['toggle-should-play'],
   data() {
     return {
       visible: false,

package/src/brand-page-maker/components/navigation/Navigation.mixin.ts

@@ -40,6 +40,7 @@ export default defineComponent({
       default: false,
     },
   },
+  emits: ['create-team-cards'],
   methods: {
     saveBrandPage() {
       this.$emit(EVENTS.Save);

package/src/brand-page-maker/components/rich-text-editor/RichTextEditor.vue

@@ -552,6 +552,7 @@ const availableTextFontFamilyOptions = computed(
   () => styleSettingsStore.availableTextFontFamilyOptions,
 );
 
+// eslint-disable-next-line vue/require-prop-types
 const model = defineModel();
 const emit = defineEmits([
   'focus',
@@ -709,7 +710,8 @@ watch(
   () =>
     contentSettingStore.getItem(props.rawId)?.settings?.content?.textItemsStyle
       ?.color,
-  (newColor) => {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  (_newColor) => {
     if (isAdmin.value) {
       if (props.textItemIndex !== undefined && selectedGlobalTextStyles) {
         toggleTextColor.value =

package/src/brand-page-maker/components/sensitive-content/SensitiveContent.vue

@@ -92,7 +92,7 @@
 </template>
 <script setup lang="ts">
 import { Button } from '@designcrowd/fe-shared-lib';
-import { computed, reactive, nextTick, useTemplateRef } from 'vue';
+import { computed, reactive, nextTick } from 'vue';
 import {
   SENSITIVE_CONTENT_TYPES,
   type SensitiveContent,
@@ -109,9 +109,6 @@ const brandPageMakerStore = useBrandPageMakerStore();
 
 const props = defineProps<Props>();
 
-const isBrandPage = computed(() => brandPageMakerStore.isBrandPage);
-const isBrandContact = computed(() => brandPageMakerStore.isBrandContact);
-
 const data = reactive({
   sensitiveSettings: [
     {

package/src/brand-page-maker/components/seo-settings/DeleteDomainModal.vue

@@ -59,7 +59,7 @@ interface Props {
   isCustomDomainRequestFailed?: boolean;
 }
 
-const props = defineProps<Props>();
+defineProps<Props>();
 const emit = defineEmits<{ (e: 'on-confirm'): void; (e: 'on-cancel'): void }>();
 
 const emitConfirm = () => emit('on-confirm');

package/src/brand-page-maker/components/seo-settings/SeoPageSettings.mixin.ts

@@ -41,6 +41,7 @@ export default defineComponent({
       default: undefined,
     },
   },
+  emits: ['update-settings'],
   setup() {
     const brandPageMakerStore = useBrandPageMakerStore();
     const localisedRouteStore = useLocalisedRouteStore();

package/src/brand-page-maker/components/seo-settings/SeoPageSettings.vue

@@ -106,7 +106,7 @@
 <script>
 import { Button, TextInput, Textarea } from '@designcrowd/fe-shared-lib';
 import SeoPageSettingsMixin from './SeoPageSettings.mixin.ts';
-import { tr, commonTr, seoSettingsTr } from '@src/composables/useTranslate';
+import { commonTr, seoSettingsTr } from '@src/composables/useTranslate';
 
 export default {
   components: {

package/src/brand-page-maker/components/seo-settings/UrlSettings.mixin.ts

@@ -9,7 +9,6 @@ import {
   useBrandPageContainerStore,
   useBrandPageMakerStore,
   useLocalisedRouteStore,
-  useBrandPageMakerUserStore,
 } from '@brand-page-maker/stores';
 import { defaultUSDCurrency } from '@brand-page-maker/constants/currency-constants';
 import { validateCustomDomainName } from '@brand-page-maker/utils';

package/src/brand-page-maker/components/seo-settings/UrlSettings.vue

@@ -393,7 +393,6 @@ import { Button, Loader, TextInput } from '@designcrowd/fe-shared-lib';
 import { SellDomainNameWidget } from '@designcrowd/fe-shared-lib';
 import UrlSettingsMixin from './UrlSettings.mixin.ts';
 import DeleteDomainModal from './DeleteDomainModal.vue';
-import ConfirmModal from '@shared/confirm-modal/ConfirmModal.vue';
 import UseExistingDomainModal from './UseExistingDomainModal.vue';
 import { commonTr, seoSettingsTr } from '@src/composables/useTranslate';
 

package/src/brand-page-maker/components/seo-settings/UseExistingDomainModal.vue

@@ -178,11 +178,7 @@ import {
   Loader,
 } from '@designcrowd/fe-shared-lib';
 import UseExistingDomainModalMixin from './UseExistingDomainModal.mixin.ts';
-import {
-  tr,
-  commonTr,
-  existingDomainModalTr,
-} from '@src/composables/useTranslate';
+import { commonTr, existingDomainModalTr } from '@src/composables/useTranslate';
 
 export default {
   components: {

package/src/brand-page-maker/components/shop/AddOrEditProductContainer.vue

@@ -172,7 +172,7 @@ const enableNotes = computed(() => productSettingStore.productEnableNotes);
 const hasVariants = computed(() => productSettingStore.productHasVariants);
 const currencySymbol = computed(() => shopConfigStore.currencySymbol);
 
-const emit = defineEmits(['update:modelValue']);
+defineEmits(['update:modelValue']);
 
 const onImageUpload = () => {
   productSettingStore.setImageUpload(true);

package/src/brand-page-maker/components/shop/ReplaceImageSettingsForShop.vue

@@ -25,7 +25,7 @@ import {
 import type { UserMediaItemWithDimensions } from 'src/shared/my-uploads/models';
 const productSettingStore = useProductConfigStore();
 
-const emit = defineEmits(['on-close', 'on-save']);
+defineEmits(['on-close', 'on-save']);
 
 const onBack = () => {
   productSettingStore.setImageUpload(false);

package/src/brand-page-maker/components/social-share/SocialShare.vue

@@ -55,7 +55,7 @@
   <!-- End Loader Overlay -->
 </template>
 <script>
-import { Button, Loader, TextInput } from '@designcrowd/fe-shared-lib';
+import { Loader, TextInput } from '@designcrowd/fe-shared-lib';
 import SocialShareMixin from './SocialShare.mixin';
 import ImageField from '@shared/content-settings/components/image-field/ImageField.vue';
 import { socialShareTr, commonTr } from '@src/composables/useTranslate';

package/src/brand-page-maker/components/template-preview/TemplatePreview.mixin.ts

@@ -15,10 +15,7 @@ import {
   getBrandPageViewModelFromBrandPageModel,
 } from '@brand-page/utils';
 import { STYLE_THEME_KEYS } from '@brand-page/constants';
-import {
-  TEMPLATE_TABS,
-  type TemplateSettingsTemplate,
-} from '@shared/template-settings/models';
+import type { TemplateSettingsTemplate } from '@shared/template-settings/models';
 import type { DebounceHandle } from 'lodash.debounce';
 import debounce from 'lodash.debounce';
 import { MOBILE_HEIGHT, MOBILE_WIDTH } from '@brand-page-maker/constants';
@@ -74,7 +71,6 @@ export default defineComponent({
       isBrandSite: computed(
         () => brandPageMakerStore.brandPageType === BRAND_PAGE_TYPES.brandSite,
       ),
-      selectedTab: computed(() => templateSettingsStore.selectedTab.key),
       renderAsImage: computed(() => templateSettingsStore.renderAsImage),
       brandPageMakerUserStore,
       brandPageContainerStore,
@@ -241,10 +237,28 @@ export default defineComponent({
         return '';
       }
 
-      if (this.selectedTab === TEMPLATE_TABS.AI && this.template.contentKey) {
-        if (this.userToken) {
-          previewImageUrl += `&contentKey=${this.template.contentKey}&userToken=${this.userToken}`;
+      const isAlreadyPersonalised =
+        previewImageUrl.includes('contentKey=') ||
+        previewImageUrl.includes('userPromptContentKey=');
+
+      if (
+        this.isPersonalisable &&
+        this.template.contentKey &&
+        !isAlreadyPersonalised
+      ) {
+        if (this.userToken && !this.template.usesUserPromptContentKey) {
+          previewImageUrl += `&contentKey=${this.template.contentKey}`;
+
+          // The backend already bakes userToken into brand-site preview URLs. Only add
+          // it when missing - two userToken params parse as an array and the preview
+          // renderer rejects it ("userToken must be a string type") (bp-5765).
+          if (!previewImageUrl.includes('userToken=')) {
+            previewImageUrl += `&userToken=${this.userToken}`;
+          }
         } else {
+          // userPromptContentKey resolves from the userPrompt S3 bucket (real AI images).
+          // Post-purchase designs with a userPrompt key route here too, NOT through the
+          // userToken/regular-bucket branch above which holds placeholders (bp-5454).
           previewImageUrl += `&userPromptContentKey=${this.template.contentKey}`;
         }
       }

package/src/brand-page-maker/components/template-preview/TemplatePreview.vue

@@ -2,7 +2,7 @@
   <div
     ref="container"
     data-component="template-preview"
-    class="template-preview-container hover:!tw-shadow-[0_0_0_3px] hover:!tw-shadow-info-500 tw-overflow-hidden"
+    class="template-preview-container hover:!tw-shadow-[0_0_0_3px] hover:!tw-shadow-info-500 tw-overflow-hidden tw-relative tw-isolate"
     :style="containerStyle"
     :class="{
       '!tw-shadow-[0_0_0_3px] !tw-shadow-info-500':
@@ -55,17 +55,10 @@
           />
         </div>
         <!-- End Preview Image -->
-        <!-- Start personalisation tag -->
-        <div
-          v-if="isPersonalisable"
-          class="tw-absolute tw-bottom-0 tw-right-0 tw-p-2 tw-z-50 tw-text-white"
-          style="background: lightgreen"
-        >
-          <span>Personalisable</span>
-        </div>
-        <!-- End personalisation tag -->
       </div>
     </div>
+    <!-- AI badge outside scaled container so it renders at natural size -->
+    <TemplatePreviewAiBadge v-if="isPersonalisable" />
   </div>
 </template>
 <script>
@@ -73,11 +66,13 @@ import { defineComponent } from 'vue';
 import TemplatePreviewMixin from './TemplatePreview.mixin.ts';
 import Page from '@brand-page/components/page/Page.vue';
 import { Loader } from '@designcrowd/fe-shared-lib';
+import TemplatePreviewAiBadge from './TemplatePreviewAiBadge.vue';
 
 export default defineComponent({
   components: {
     Page,
     Loader,
+    TemplatePreviewAiBadge,
   },
   mixins: [TemplatePreviewMixin],
   setup(props, context) {

package/src/brand-page-maker/components/template-preview/TemplatePreviewAiBadge.vue

@@ -0,0 +1,12 @@
+<template>
+  <div
+    data-test-ai-design
+    class="tw-flex tw-flex-row tw-absolute tw-top-2.5 tw-left-2.5 tw-rounded-full tw-py-1 tw-px-2 tw-text-white tw-text-xs tw-font-bold tw-z-[25] tw-bg-gradient-to-t tw-from-[#d946ef] tw-to-[#8b5cf6]"
+  >
+    <Icon name="ai" class="tw-text-white tw-pr-1" size="sm" />
+    <span>AI</span>
+  </div>
+</template>
+<script setup lang="ts">
+import { Icon } from '@designcrowd/fe-shared-lib';
+</script>

package/src/brand-page-maker/components/video-play/VideoPlayButton.vue

@@ -28,5 +28,5 @@ interface Props {
   iconColor?: string;
 }
 
-const props = defineProps<Props>();
+defineProps<Props>();
 </script>

package/src/brand-page-maker/composables/ai-chat/types.ts

@@ -1,5 +1,10 @@
 import type { ComputedRef, Ref } from 'vue';
 import { type PlanItem } from '../../../clients/websocket-gateway-client';
+import type { AgentAction } from './ui-actions';
+
+// Re-exported for the chat components that consume it; defined alongside the
+// UI-action registry in ./ui-actions.
+export type { AgentAction };
 
 export interface BaseThreadMessage {
   id: string;
@@ -16,6 +21,7 @@ export interface TextThreadMessage extends BaseThreadMessage {
   initialMessage?: string;
   planItems?: PlanItem[];
   completedItemIds?: string[];
+  actions?: AgentAction[];
 }
 
 export interface ImageThreadMessage extends BaseThreadMessage {

package/src/brand-page-maker/composables/ai-chat/ui-actions.test.ts

@@ -0,0 +1,80 @@
+import { describe, it, expect } from 'vitest';
+import {
+  partitionAiToolCalls,
+  UI_ACTIONS,
+  AI_CHAT_UI_ACTIONS,
+} from './ui-actions';
+import type { AiAssistantToolCall } from '../../../clients/ai-assistant-client';
+
+const tc = (fn: string, toolId = fn, args = '{}'): AiAssistantToolCall => ({
+  toolId,
+  function: fn,
+  arguments: args,
+});
+
+describe('partitionAiToolCalls', () => {
+  // The core invariant: a UI-action CTA must never land in mutationToolCalls,
+  // because those feed applyToolCallsAsync -> toolResults -> submitToolResults.
+  // A UI action has no tool result, so leaking one would leave an unresolved
+  // tool call in the thread and break the next LLM turn.
+  it('keeps an upgrade CTA out of the mutation set', () => {
+    const mutation = tc('build_banner_section', 'm1');
+    const upgrade = tc(UI_ACTIONS.UPGRADE, 'u1');
+
+    const { mutationToolCalls, actions } = partitionAiToolCalls([
+      mutation,
+      upgrade,
+    ]);
+
+    expect(mutationToolCalls).toEqual([mutation]);
+    expect(
+      mutationToolCalls.some((t) => t.function === UI_ACTIONS.UPGRADE),
+    ).toBe(false);
+    expect(actions).toEqual([
+      { type: UI_ACTIONS.UPGRADE, ...AI_CHAT_UI_ACTIONS[UI_ACTIONS.UPGRADE] },
+    ]);
+  });
+
+  it('routes a standalone upgrade to actions with zero mutations', () => {
+    const { mutationToolCalls, actions } = partitionAiToolCalls([
+      tc(UI_ACTIONS.UPGRADE),
+    ]);
+
+    expect(mutationToolCalls).toEqual([]);
+    expect(actions.map((a) => a.type)).toEqual([UI_ACTIONS.UPGRADE]);
+  });
+
+  it('treats unknown tool names as mutations (never swallows a real tool call)', () => {
+    const unknown = tc('some_future_tool');
+
+    const { mutationToolCalls, actions } = partitionAiToolCalls([unknown]);
+
+    expect(mutationToolCalls).toEqual([unknown]);
+    expect(actions).toEqual([]);
+  });
+
+  it('does not treat inherited Object keys (e.g. "constructor") as UI actions', () => {
+    const ctor = tc('constructor');
+
+    const { mutationToolCalls, actions } = partitionAiToolCalls([ctor]);
+
+    expect(mutationToolCalls).toEqual([ctor]);
+    expect(actions).toEqual([]);
+  });
+
+  it('resolves label/icon from the registry, not the wire arguments', () => {
+    const { actions } = partitionAiToolCalls([
+      tc(UI_ACTIONS.UPGRADE, 'u1', '{"label":"WRONG","icon":"WRONG"}'),
+    ]);
+
+    expect(actions[0].label).toBe('Upgrade');
+    expect(actions[0].icon).toBe('upgrade-alt');
+  });
+
+  it('returns empty partitions for no tool calls', () => {
+    expect(partitionAiToolCalls([])).toEqual({
+      mutationToolCalls: [],
+      actions: [],
+    });
+  });
+});

package/src/brand-page-maker/composables/ai-chat/ui-actions.ts

@@ -0,0 +1,58 @@
+// Single source of truth for the AI-chat actionable buttons (the Upgrade CTA, etc.).
+//
+// The AI pipeline decides WHICH action to surface and WHETHER the user is
+// eligible, then emits only the action identity as a tool call. How each action
+// looks — its button label and icon — is a frontend concern and lives here.
+// Click behaviour is wired in AiWebsiteBuilder, where the relevant stores live.
+import type { AiAssistantToolCall } from '../../../clients/ai-assistant-client';
+
+// Action identities — must match the tool names emitted by the AI pipeline.
+export const UI_ACTIONS = {
+  UPGRADE: 'upgrade',
+} as const;
+
+export const AI_CHAT_UI_ACTIONS = {
+  [UI_ACTIONS.UPGRADE]: { label: 'Upgrade', icon: 'upgrade-alt' },
+} as const;
+
+export type AgentActionType = keyof typeof AI_CHAT_UI_ACTIONS;
+
+// A resolved actionable button shown under an AI message. `type` identifies the
+// action; `label`/`icon` are resolved from AI_CHAT_UI_ACTIONS, never from the wire.
+export type AgentAction = {
+  type: AgentActionType;
+  label: string;
+  icon?: string;
+};
+
+// `hasOwnProperty` (not `in`) so inherited Object keys like "constructor" are never
+// mistaken for a UI action.
+const isUiActionFn = (fn: string | undefined): fn is AgentActionType =>
+  !!fn && Object.prototype.hasOwnProperty.call(AI_CHAT_UI_ACTIONS, fn);
+
+/**
+ * Split server tool calls into page mutations and UI-action CTAs.
+ *
+ * Mutations are executed by the metadata-builder and answered with tool results;
+ * UI actions (e.g. the Upgrade button) are rendered only. UI actions MUST stay out
+ * of `mutationToolCalls`: they are never executed and never get a tool result, so
+ * leaking one into the mutation set would leave an unresolved tool call and break
+ * the next LLM turn on the same thread.
+ */
+export function partitionAiToolCalls(toolCalls: AiAssistantToolCall[]): {
+  mutationToolCalls: AiAssistantToolCall[];
+  actions: AgentAction[];
+} {
+  const mutationToolCalls: AiAssistantToolCall[] = [];
+  const actions: AgentAction[] = [];
+
+  for (const tc of toolCalls) {
+    if (isUiActionFn(tc.function)) {
+      actions.push({ type: tc.function, ...AI_CHAT_UI_ACTIONS[tc.function] });
+    } else {
+      mutationToolCalls.push(tc);
+    }
+  }
+
+  return { mutationToolCalls, actions };
+}