@salesforce/templates 66.7.13 → 66.9.0

package/lib/templates/project/reactinternalapp/_p_/_m_/_w_/_a_/package.json

@@ -18,8 +18,9 @@
     "graphql:schema": "node scripts/get-graphql-schema.mjs"
   },
   "dependencies": {
-    "@salesforce/sdk-data": "^1.135.0",
-    "@salesforce/ui-bundle": "^1.135.0",
+    "@salesforce/agentforce-conversation-client": "file:../../../../../../../../../agentforceConversationClient",
+    "@salesforce/platform-sdk": "file:../../../../../../../../../sdk/platform-sdk",
+    "@salesforce/ui-bundle": "file:../../../../../../../../../ui-bundle",
     "@tailwindcss/vite": "^4.1.17",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
@@ -34,8 +35,7 @@
     "sonner": "^1.7.0",
     "tailwind-merge": "^3.5.0",
     "tailwindcss": "^4.1.17",
-    "tw-animate-css": "^1.4.0",
-    "@salesforce/agentforce-conversation-client": "^1.116.9"
+    "tw-animate-css": "^1.4.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.39.1",
@@ -45,7 +45,7 @@
     "@graphql-eslint/eslint-plugin": "^4.1.0",
     "@graphql-tools/utils": "^11.0.0",
     "@playwright/test": "^1.49.0",
-    "@salesforce/vite-plugin-ui-bundle": "^1.135.0",
+    "@salesforce/vite-plugin-ui-bundle": "file:../../../../../../../../../vite-plugin-ui-bundle",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.1.0",
     "@testing-library/user-event": "^14.5.2",

package/lib/templates/project/reactinternalapp/_p_/_m_/_w_/_a_/reactinternalapp.uibundle-meta.xml

@@ -4,4 +4,5 @@
     <description>A Salesforce UI Bundle.</description>
     <isActive>true</isActive>
     <version>1</version>
+    <target>CustomApplication</target>
 </UIBundle>

package/lib/templates/project/reactinternalapp/_p_/_m_/_w_/_a_/src/_f_/_os_/_ex_/pages/AccountObjectDetailPage.tsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { useParams, useNavigate } from "react-router";
-import { createDataSDK } from "@salesforce/sdk-data";
+import { createDataSDK } from "@salesforce/platform-sdk";
 import { AlertCircle, ChevronDown, ChevronRight, FileQuestion } from "lucide-react";
 import GET_ACCOUNT_DETAIL from "../api/query/getAccountDetail.graphql?raw";
 import type {
@@ -18,7 +18,7 @@ import {
 } from "../../../../components/ui/collapsible";
 import { Separator } from "../../../../components/ui/separator";
 import { Skeleton } from "../../../../components/ui/skeleton";
-import { useCachedAsyncData } from "../../hooks/useCachedAsyncData";
+import { useAsyncData } from "../../hooks/useAsyncData";
 import { ObjectBreadcrumb } from "../../components/ObjectBreadcrumb";
 
 type AccountNode = NonNullable<
@@ -29,16 +29,16 @@ type AccountNode = NonNullable<
 
 async function fetchAccountDetail(recordId: string): Promise<AccountNode | null | undefined> {
 	const data = await createDataSDK();
-	const response = await data.graphql?.<GetAccountDetailQuery, GetAccountDetailQueryVariables>({
+	const result = await data.graphql!.query<GetAccountDetailQuery, GetAccountDetailQueryVariables>({
 		query: GET_ACCOUNT_DETAIL,
 		variables: { id: recordId },
 	});
 
-	if (response?.errors?.length) {
-		throw new Error(response.errors.map((e) => e.message).join("; "));
+	if (result.errors?.length) {
+		throw new Error(result.errors.map((e) => e.message).join("; "));
 	}
 
-	return response?.data?.uiapi?.query?.Account?.edges?.[0]?.node;
+	return result.data?.uiapi?.query?.Account?.edges?.[0]?.node;
 }
 
 export default function AccountObjectDetail() {
@@ -49,9 +49,7 @@ export default function AccountObjectDetail() {
 		data: account,
 		loading,
 		error,
-	} = useCachedAsyncData(() => fetchAccountDetail(recordId!), [recordId], {
-		key: `account:${recordId}`,
-	});
+	} = useAsyncData(() => fetchAccountDetail(recordId!), [recordId]);
 
 	return (
 		<div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-6">

package/lib/templates/project/reactinternalapp/_p_/_m_/_w_/_a_/src/_f_/_os_/_ex_/pages/AccountSearch.tsx

@@ -6,7 +6,7 @@ import {
 	fetchDistinctIndustries,
 	fetchDistinctTypes,
 } from "../api/accountSearchService";
-import { useCachedAsyncData } from "../../hooks/useCachedAsyncData";
+import { useAsyncData } from "../../hooks/useAsyncData";
 import { fieldValue } from "../../utils/fieldUtils";
 import { useObjectSearchParams } from "../../hooks/useObjectSearchParams";
 import { Alert, AlertTitle, AlertDescription } from "../../../../components/ui/alert";
@@ -42,8 +42,8 @@ import PaginationControls from "../../components/PaginationControls";
 import type { PaginationConfig } from "../../hooks/useObjectSearchParams";
 
 const PAGINATION_CONFIG: PaginationConfig = {
-	defaultPageSize: 6,
-	validPageSizes: [6, 12, 24, 48],
+	defaultPageSize: 7,
+	validPageSizes: [7, 14, 28, 42],
 };
 
 type AccountNode = NonNullable<
@@ -77,22 +77,15 @@ const ACCOUNT_SORT_CONFIGS: SortFieldConfig<keyof Account_OrderBy>[] = [
 
 export default function AccountSearch() {
 	const [filtersOpen, setFiltersOpen] = useState(true);
-	const { data: industryOptions } = useCachedAsyncData(fetchDistinctIndustries, [], {
-		key: "distinctIndustries",
-		ttl: 300_000,
-	});
-	const { data: typeOptions } = useCachedAsyncData(fetchDistinctTypes, [], {
-		key: "distinctTypes",
-		ttl: 300_000,
-	});
+	const { data: industryOptions } = useAsyncData(fetchDistinctIndustries, []);
+	const { data: typeOptions } = useAsyncData(fetchDistinctTypes, []);
 
 	const { filters, sort, query, pagination, resetAll } = useObjectSearchParams<
 		Account_Filter,
 		Account_OrderBy
 	>(FILTER_CONFIGS, ACCOUNT_SORT_CONFIGS, PAGINATION_CONFIG);
 
-	const searchKey = `accounts:${JSON.stringify({ where: query.where, orderBy: query.orderBy, first: pagination.pageSize, after: pagination.afterCursor })}`;
-	const { data, loading, error } = useCachedAsyncData(
+	const { data, loading, error } = useAsyncData(
 		() =>
 			searchAccounts({
 				where: query.where,
@@ -101,7 +94,6 @@ export default function AccountSearch() {
 				after: pagination.afterCursor,
 			}),
 		[query.where, query.orderBy, pagination.pageSize, pagination.afterCursor],
-		{ key: searchKey },
 	);
 
 	const pageInfo = data?.pageInfo;
@@ -196,7 +188,7 @@ export default function AccountSearch() {
 						<ActiveFilters filters={filters.active} onRemove={filters.remove} />
 					</div>
 
-					<div className="min-h-112">
+					<div className="min-h-132">
 						{/* Loading state */}
 						{loading && (
 							<>

package/lib/templates/project/reactinternalapp/_p_/_m_/_w_/_a_/src/_f_/_os_/api/objectSearchService.ts

@@ -1,4 +1,4 @@
-import { createDataSDK } from "@salesforce/sdk-data";
+import { createDataSDK } from "@salesforce/platform-sdk";
 
 export interface ObjectSearchOptions<TWhere, TOrderBy> {
 	where?: TWhere;
@@ -21,24 +21,20 @@ export async function searchObjects<TResult, TQuery, TVariables>(
 	const { where, orderBy, first = 20, after } = options;
 
 	const data = await createDataSDK();
-	const response = await data.graphql?.<TQuery, TVariables>({
-		query,
-		variables: {
-			first,
-			after,
-			where,
-			orderBy,
-		} as TVariables,
+	const variables = { first, after, where, orderBy } as TVariables;
+	const result = await data.graphql!.query<TQuery, TVariables>({
+		query: query,
+		variables: variables,
 	});
 
-	if (response?.errors?.length) {
-		throw new Error(response.errors.map((e) => e.message).join("; "));
+	if (result.errors?.length) {
+		throw new Error(result.errors.map((e) => e.message).join("; "));
 	}
 
-	const result = (response?.data as Record<string, unknown> | undefined)?.uiapi as
+	const uiapi = (result.data as Record<string, unknown> | undefined)?.uiapi as
 		| Record<string, unknown>
 		| undefined;
-	const queryResult = (result?.query as Record<string, unknown> | undefined)?.[objectName] as
+	const queryResult = (uiapi?.query as Record<string, unknown> | undefined)?.[objectName] as
 		| TResult
 		| undefined;
 
@@ -59,17 +55,16 @@ export async function fetchDistinctValues<TQuery>(
 	fieldName: string,
 ): Promise<PicklistOption[]> {
 	const data = await createDataSDK();
-	const response = await data.graphql?.<TQuery>({ query });
-	const errors = response?.errors;
+	const result = await data.graphql!.query<TQuery>({ query: query });
 
-	if (errors?.length) {
-		throw new Error(errors.map((e) => e.message).join("; "));
+	if (result.errors?.length) {
+		throw new Error(result.errors.map((e) => e.message).join("; "));
 	}
 
-	const result = (response?.data as Record<string, unknown> | undefined)?.uiapi as
+	const uiapi = (result.data as Record<string, unknown> | undefined)?.uiapi as
 		| Record<string, unknown>
 		| undefined;
-	const aggregate = (result?.aggregate as Record<string, unknown> | undefined)?.[objectName] as
+	const aggregate = (uiapi?.aggregate as Record<string, unknown> | undefined)?.[objectName] as
 		| { edges?: Array<{ node?: { aggregate?: Record<string, unknown> } }> }
 		| undefined;
 

package/lib/templates/project/reactinternalapp/_p_/_m_/_w_/_a_/src/_f_/_os_/components/filters/NumericRangeFilter.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { Input } from "../../../../components/ui/input";
 
 import { useFilterField } from "../FilterContext";
@@ -67,12 +67,16 @@ export function NumericRangeFilterInputs({
 
 	const externalMin = value?.min ?? "";
 	const externalMax = value?.max ?? "";
-	useEffect(() => {
+	const [prevExternalMin, setPrevExternalMin] = useState(externalMin);
+	const [prevExternalMax, setPrevExternalMax] = useState(externalMax);
+	if (prevExternalMin !== externalMin) {
+		setPrevExternalMin(externalMin);
 		setLocalMin(externalMin);
-	}, [externalMin]);
-	useEffect(() => {
+	}
+	if (prevExternalMax !== externalMax) {
+		setPrevExternalMax(externalMax);
 		setLocalMax(externalMax);
-	}, [externalMax]);
+	}
 
 	const isOutOfBounds = (v: string) => {
 		if (v === "") return false;

package/lib/templates/project/reactinternalapp/_p_/_m_/_w_/_a_/src/_f_/_os_/components/filters/SearchFilter.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useState } from "react";
 
 import { SearchBar } from "../SearchBar";
 import { useFilterField } from "../FilterContext";
@@ -22,9 +22,11 @@ export function SearchFilter({
 	const [localValue, setLocalValue] = useState(value?.value ?? "");
 
 	const externalValue = value?.value ?? "";
-	useEffect(() => {
+	const [prevExternalValue, setPrevExternalValue] = useState(externalValue);
+	if (prevExternalValue !== externalValue) {
+		setPrevExternalValue(externalValue);
 		setLocalValue(externalValue);
-	}, [externalValue]);
+	}
 
 	const debouncedOnChange = useDebouncedCallback((v: string) => {
 		if (v) {

package/lib/templates/project/reactinternalapp/_p_/_m_/_w_/_a_/src/_f_/_os_/components/filters/TextFilter.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { Input } from "../../../../components/ui/input";
 import { cn } from "../../../../lib/utils";
 import { useFilterField } from "../FilterContext";
@@ -62,9 +62,11 @@ export function TextFilterInput({
 	const [localValue, setLocalValue] = useState(value?.value ?? "");
 
 	const externalValue = value?.value ?? "";
-	useEffect(() => {
+	const [prevExternalValue, setPrevExternalValue] = useState(externalValue);
+	if (prevExternalValue !== externalValue) {
+		setPrevExternalValue(externalValue);
 		setLocalValue(externalValue);
-	}, [externalValue]);
+	}
 
 	const debouncedOnChange = useDebouncedCallback((v: string) => {
 		if (v) {

package/lib/templates/project/reactinternalapp/_p_/_m_/_w_/_a_/src/_f_/_os_/hooks/useAsyncData.ts

@@ -22,16 +22,24 @@ export function useAsyncData<T>(
 	const [data, setData] = useState<T | null>(null);
 	const [loading, setLoading] = useState(true);
 	const [error, setError] = useState<string | null>(null);
+	const [generation, setGeneration] = useState(0);
 
 	const fetcherRef = useRef(fetcher);
 	useEffect(() => {
 		fetcherRef.current = fetcher;
 	});
 
+	// Detect dep changes during render to reset loading state and bump generation
+	const [prevDeps, setPrevDeps] = useState(deps);
+	if (deps.length !== prevDeps.length || deps.some((d, i) => d !== prevDeps[i])) {
+		setPrevDeps(deps);
+		setGeneration((g) => g + 1);
+		if (!loading) setLoading(true);
+		if (error !== null) setError(null);
+	}
+
 	useEffect(() => {
 		let cancelled = false;
-		setLoading(true);
-		setError(null);
 
 		fetcherRef
 			.current()
@@ -49,8 +57,7 @@ export function useAsyncData<T>(
 		return () => {
 			cancelled = true;
 		};
-		// eslint-disable-next-line react-hooks/exhaustive-deps --- deps are explicitly managed by the caller
-	}, deps);
+	}, [generation]);
 
 	return { data, loading, error };
 }

package/lib/templates/project/reactinternalapp/_p_/_m_/_w_/_a_/src/api/graphqlClient.ts

@@ -1,28 +1,28 @@
 /**
- * Thin GraphQL client: createDataSDK + data.graphql with centralized error handling.
- * Use with gql-tagged queries and generated operation types for type-safe calls.
+ * Thin GraphQL client: createDataSDK + sdk.graphql.query with centralized
+ * error handling. Use with gql-tagged queries and generated operation types
+ * for type-safe calls.
  */
-import { createDataSDK } from '@salesforce/sdk-data';
+import { createDataSDK } from '@salesforce/platform-sdk';
 
 export async function executeGraphQL<TData, TVariables>(
   query: string,
   variables?: TVariables
 ): Promise<TData> {
   const data = await createDataSDK();
-  // SDK types graphql() first param as string; at runtime it may accept gql DocumentNode too
-  const response = await data.graphql?.<TData, TVariables>({
-    query,
-    variables,
+  const result = await data.graphql!.query<TData, TVariables>({
+    query: query,
+    variables: variables,
   });
 
-  if (!response) {
-    throw new Error('GraphQL response is undefined');
+  if (result.errors?.length) {
+    const msg = result.errors.map(e => e.message).join('; ');
+    throw new Error(`GraphQL Error: ${msg}`);
   }
 
-  if (response?.errors?.length) {
-    const msg = response.errors.map(e => e.message).join('; ');
-    throw new Error(`GraphQL Error: ${msg}`);
+  if (result.data == null) {
+    throw new Error('GraphQL response data is null');
   }
 
-  return response.data;
+  return result.data;
 }

package/lib/templates/project/reactinternalapp/_p_/_m_/_w_/_a_/src/components/AgentforceConversationClient.tsx

@@ -13,38 +13,6 @@ import type {
 } from "../types/conversation";
 
 const GLOBAL_HOST_ID = "agentforce-conversation-client-global-host";
-
-const DEFAULT_STYLE_TOKENS: NonNullable<AgentforceClientConfig["styleTokens"]> = {
-	containerBackground: "#fafafa",
-
-	headerBlockBackground: "#372949",
-	headerBlockTextColor: "#ffffff",
-	headerBlockIconColor: "#ffffff",
-	headerBlockBorderBottomColor: "#3b0764",
-	headerBlockFocusBorder: "#c4b5fd",
-
-	messageBlockInboundBackgroundColor: "#ffffff",
-	messageBlockInboundTextColor: "#1f2937",
-	messageBlockInboundBorder: "1px solid #e5e7eb",
-
-	messageBlockOutboundBackgroundColor: "#ede9fe",
-	messageBlockOutboundTextColor: "#1f2937",
-	messageBlockOutboundBorder: "1px solid #d8b4fe",
-
-	messageInputTextColor: "#1f2937",
-	messageInputTextBackgroundColor: "#ffffff",
-	messageInputFooterBorderColor: "#d1d5db",
-	messageInputFooterBorderFocusColor: "#9ca3af",
-	messageInputFocusShadow: "0 0 0 3px rgba(156, 163, 175, 0.25)",
-	messageInputFooterPlaceholderText: "#6b7280",
-
-	messageInputFooterSendButton: "#7e22ce",
-	messageInputFooterSendButtonHoverColor: "#6b21a8",
-	messageInputSendButtonIconColor: "#ffffff",
-	messageInputSendButtonDisabledColor: "#e5e7eb",
-	messageInputActionButtonFocusBorder: "#a855f7",
-	errorBlockBackground: "#fafafa",
-};
 const SINGLETON_KEY = "__agentforceConversationClientSingleton";
 
 interface AgentforceConversationClientSingleton {
@@ -56,6 +24,12 @@ interface WindowWithAgentforceSingleton extends Window {
 	[SINGLETON_KEY]?: AgentforceConversationClientSingleton;
 }
 
+type GlobalWithSfdcEnv = typeof globalThis & {
+	SFDC_ENV?: {
+		orgUrl?: string;
+	};
+};
+
 function getSingleton(): AgentforceConversationClientSingleton {
 	const win = window as WindowWithAgentforceSingleton;
 	if (!win[SINGLETON_KEY]) {
@@ -77,7 +51,8 @@ function getOrCreateGlobalHost(): HTMLDivElement {
 }
 
 function getDefaultEmbedOptions(): ResolvedEmbedOptions {
-	return { salesforceOrigin: window.location.origin };
+	const sfdcEnv = (globalThis as GlobalWithSfdcEnv).SFDC_ENV;
+	return { salesforceOrigin: sfdcEnv?.orgUrl };
 }
 
 /**
@@ -96,6 +71,8 @@ export function AgentforceConversationClient({
 	styleTokens,
 	salesforceOrigin,
 	frontdoorUrl,
+	onReady,
+	onError,
 }: AgentforceConversationClientProps) {
 	const containerRef = useRef<HTMLDivElement>(null);
 	const normalizedAgentforceClientConfig = useMemo<AgentforceClientConfig>(() => {
@@ -111,8 +88,9 @@ export function AgentforceConversationClient({
 		return {
 			...(agentId !== undefined && { agentId }),
 			...(agentLabel !== undefined && { agentLabel }),
-			styleTokens: { ...DEFAULT_STYLE_TOKENS, ...styleTokens },
+			...(styleTokens !== undefined && { styleTokens }),
 			renderingConfig,
+			channel: "Vibes",
 		};
 	}, [agentId, agentLabel, inlineProp, headerEnabled, showHeaderIcon, width, height, styleTokens]);
 
@@ -146,13 +124,31 @@ export function AgentforceConversationClient({
 			}
 			const host = inline ? containerRef.current! : getOrCreateGlobalHost();
 
-			embedAgentforceClient({
-				container: host,
-				salesforceOrigin: salesforceOrigin ?? options.salesforceOrigin,
-				frontdoorUrl: frontdoorUrl ?? options.frontdoorUrl,
-				agentforceClientConfig: normalizedAgentforceClientConfig,
-			});
-			singleton.initialized = true;
+			try {
+				embedAgentforceClient({
+					container: host,
+					salesforceOrigin: salesforceOrigin ?? options.salesforceOrigin,
+					frontdoorUrl: frontdoorUrl ?? options.frontdoorUrl,
+					agentforceClientConfig: normalizedAgentforceClientConfig,
+					onReady,
+					onError,
+				});
+				singleton.initialized = true;
+			} catch (err) {
+				// Strip a partially-created LO element so the next mount can retry.
+				const partialEmbed = document.querySelector('lightning-out-application[data-lo="acc"]');
+				partialEmbed?.remove();
+				console.error("AgentforceConversationClient: initialization failed", err);
+			}
+		};
+
+		const safeInitialize = (options: ResolvedEmbedOptions) => {
+			try {
+				initialize(options);
+			} catch (initErr) {
+				console.error("AgentforceConversationClient: initialization failed", initErr);
+				singleton.initialized = false;
+			}
 		};
 
 		const shouldFetchFrontdoor = window.location.hostname === "localhost";
@@ -165,7 +161,7 @@ export function AgentforceConversationClient({
 						return;
 					}
 					const { frontdoorUrl: resolvedFrontdoorUrl } = await res.json();
-					initialize({ frontdoorUrl: resolvedFrontdoorUrl });
+					safeInitialize({ frontdoorUrl: resolvedFrontdoorUrl });
 				})
 				.catch((err) => {
 					console.error("AgentforceConversationClient: failed to fetch frontdoor URL", err);
@@ -176,7 +172,7 @@ export function AgentforceConversationClient({
 		} else {
 			singleton.initPromise = Promise.resolve()
 				.then(() => {
-					initialize(getDefaultEmbedOptions());
+					safeInitialize(getDefaultEmbedOptions());
 				})
 				.catch((err) => {
 					console.error("AgentforceConversationClient: failed to embed Agentforce client", err);
@@ -190,7 +186,7 @@ export function AgentforceConversationClient({
 			// Intentionally no cleanup:
 			// This component guarantees a single LO initialization per window.
 		};
-	}, [salesforceOrigin, frontdoorUrl, normalizedAgentforceClientConfig, inline]);
+	}, [salesforceOrigin, frontdoorUrl, normalizedAgentforceClientConfig, inline, onReady, onError]);
 
 	if (!inline) {
 		return null;

package/lib/templates/project/reactinternalapp/_p_/_m_/_w_/_a_/src/components/alerts/status-alert.tsx

@@ -1,5 +1,5 @@
 import { cva, type VariantProps } from 'class-variance-authority';
-import { AlertCircleIcon, CheckCircle2Icon } from 'lucide-react';
+import { AlertCircleIcon, CheckCircle2Icon, InfoIcon } from 'lucide-react';
 import { Alert, AlertDescription } from '../../components/ui/alert';
 import { useId } from 'react';
 
@@ -8,6 +8,7 @@ const statusAlertVariants = cva('', {
     variant: {
       error: '',
       success: '',
+      info: 'text-blue-600 *:[svg]:text-current *:data-[slot=alert-description]:text-blue-600/90',
     },
   },
   defaultVariants: {
@@ -18,11 +19,11 @@ const statusAlertVariants = cva('', {
 interface StatusAlertProps extends VariantProps<typeof statusAlertVariants> {
   children?: React.ReactNode;
   /** Alert variant type. @default "error" */
-  variant?: 'error' | 'success';
+  variant?: 'error' | 'success' | 'info';
 }
 
 /**
- * Status alert component for displaying error or success messages.
+ * Status alert component for displaying error, success, or info messages.
  * Returns null if no children are provided.
  */
 export function StatusAlert({ children, variant = 'error' }: StatusAlertProps) {
@@ -31,6 +32,12 @@ export function StatusAlert({ children, variant = 'error' }: StatusAlertProps) {
 
   const isError = variant === 'error';
 
+  const icon = {
+    error: <AlertCircleIcon aria-hidden="true" />,
+    success: <CheckCircle2Icon aria-hidden="true" />,
+    info: <InfoIcon aria-hidden="true" />,
+  }[variant];
+
   return (
     <Alert
       variant={isError ? 'destructive' : 'default'}
@@ -38,11 +45,7 @@ export function StatusAlert({ children, variant = 'error' }: StatusAlertProps) {
       aria-describedby={descriptionId}
       role={isError ? 'alert' : 'status'}
     >
-      {isError ? (
-        <AlertCircleIcon aria-hidden="true" />
-      ) : (
-        <CheckCircle2Icon aria-hidden="true" />
-      )}
+      {icon}
       <AlertDescription id={descriptionId}>{children}</AlertDescription>
     </Alert>
   );

package/lib/templates/project/reactinternalapp/_p_/_m_/_w_/_a_/src/components/ui/input.tsx

@@ -8,7 +8,7 @@ function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
       type={type}
       data-slot="input"
       className={cn(
-        'dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 rounded-lg border bg-transparent px-2.5 py-1 text-base transition-colors file:h-6 file:text-sm file:font-medium focus-visible:ring-3 aria-invalid:ring-3 md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',
+        'dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 rounded-lg border bg-transparent px-2.5 py-1 text-base transition-colors file:h-6 file:text-sm file:font-medium focus-visible:ring-3 aria-invalid:ring-3 md:text-sm file:text-foreground placeholder:text-muted-foreground/70 placeholder:italic w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',
         className
       )}
       {...props}

package/lib/templates/project/reactinternalapp/_p_/_m_/_w_/_a_/src/hooks/useAsyncData.ts

@@ -0,0 +1,67 @@
+import { useEffect, useRef, useState } from 'react';
+
+interface UseAsyncDataResult<T> {
+  data: T | null;
+  loading: boolean;
+  error: string | null;
+}
+
+/**
+ * Runs an async fetcher on mount and whenever `deps` change.
+ * Returns the loading/error/data state. Does not cache — every call
+ * to the fetcher hits the source directly.
+ *
+ * A cleanup flag prevents state updates if the component unmounts
+ * or deps change before the fetch completes (avoids React warnings
+ * and stale updates from out-of-order responses).
+ */
+export function useAsyncData<T>(
+  fetcher: () => Promise<T>,
+  deps: React.DependencyList
+): UseAsyncDataResult<T> {
+  const [data, setData] = useState<T | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [generation, setGeneration] = useState(0);
+
+  const fetcherRef = useRef(fetcher);
+  useEffect(() => {
+    fetcherRef.current = fetcher;
+  });
+
+  // Detect dep changes during render to reset loading state and bump generation
+  const [prevDeps, setPrevDeps] = useState(deps);
+  if (
+    deps.length !== prevDeps.length ||
+    deps.some((d, i) => d !== prevDeps[i])
+  ) {
+    setPrevDeps(deps);
+    setGeneration(g => g + 1);
+    if (!loading) setLoading(true);
+    if (error !== null) setError(null);
+  }
+
+  useEffect(() => {
+    let cancelled = false;
+
+    fetcherRef
+      .current()
+      .then(result => {
+        if (!cancelled) setData(result);
+      })
+      .catch(err => {
+        console.error(err);
+        if (!cancelled)
+          setError(err instanceof Error ? err.message : 'An error occurred');
+      })
+      .finally(() => {
+        if (!cancelled) setLoading(false);
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [generation]);
+
+  return { data, loading, error };
+}