@salesforce/webapp-template-app-react-sample-b2e-experimental 1.61.3 → 1.62.0

package/dist/.a4drules/{graphql/tools/knowledge/lds-generate-graphql-readquery.md → skills/feature-graphql-graphql-data-access/docs/generate-read-query.md}

@@ -1,30 +1,32 @@
 # GraphQL Read Query Generation
 
 **Triggering conditions**
-1. Only if the `LDS_Guide_GraphQL` rule completed successfully
+
+1. Only if the schema exploration phase completed successfully
 2. Only if the query to generate is a read query
 
 ## Your Role
 
 You are a GraphQL expert and your role is to help generate Salesforce compatible GraphQL read queries once the exploration phase has completed.
 
-You will leverage the context provided by the requesting user as well as the validation phase provided by the `LDS_Guide_GraphQL` rule.
+You will leverage the context provided by the requesting user as well as the validation phase provided by the schema exploration. This tool will also provide you with a method to dynamically query the target org instance that you will use to test the generated query.
 
-If the `LDS_Guide_GraphQL` rule has not been executed yet, you **MUST** run it first, and then get back to read query generation. This tool will also provide you with a method to dynamically query the target org instance that you will use to test the generated query.
+If the schema exploration has not been executed yet, you **MUST** run it first, and then get back to read query generation.
 
 ## Read Query Generation Workflow
 
 Strictly follow the rules below when generating the GraphQL read query:
+
 1. **No Proliferation** - Only generate for the explicitly requested fields, nothing else
 2. **Unique Query** - Leverage child relationships to query entities in one single query
 3. **Navigate Entities** - Always use `relationshipName` to access reference fields and child entities
-    1. **Exception** - if the `relationshipName` field is null, you can't navigate the related entity, and will have to return the `Id` itself
+   1. **Exception** - if the `relationshipName` field is null, you can't navigate the related entity, and will have to return the `Id` itself
 4. **Leverage Fragments** - Generate one fragment per possible type on polymorphic fields (field with `dataType="REFERENCE"` and more than one entry in `referenceToInfos` introspection attribute)
 5. **Type Consistency** - Make sure variables used as query arguments and their related fields share the same GraphQL type
 6. **Type Enforcement** - Make sure to leverage field type information from introspection and GraphQL schema to generate field access
 7. **Semi and anti joins** - Use the semi-join or anti-join templates to filter an entity with conditions on child entities
 8. **Query Generation** - Use the [template](#read-query-template) to generate the query
-9. **Output Format** - Use the [standalone](#read-standalone-default-output-format---clean-code-only) 
+9. **Output Format** - Use the [standalone](#read-standalone-default-output-format---clean-code-only)
 10. **Test the Query** - Use the [Generated Read Query Testing](#generated-read-query-testing) workflow to test the generated query
     1. **Report First** - Always report first, using the proper output format, before testing
 
@@ -86,6 +88,7 @@ fragment TypeBInfo on TypeB {
 
 Semi-joins (resp. anti-joins) condition leverage parent-child relationships and allow filtering the parent entity using a condition on child entities.
 This is a standard `where` condition, on the parent entity's `Id`, expressed using the `inq` (resp. `ninq`, i.e. not `inq`) operator. This operator accepts two attributes:
+
 - The child entity camelcase name to apply the condition on, with a value expressing the condition
 - The field name on the child entity containing the parent entity `Id`, which is the `fieldName` from the `childRelationships` information for the child entity
 - If the only condition is related child entity existence, you can use an `Id: { ne: null }` condition
@@ -96,7 +99,7 @@ This is a standard `where` condition, on the parent entity's `Id`, expressed usi
 query testSemiJoin {
   uiapi {
     query {
-      ParentEntity (
+      ParentEntity(
         where: {
           Id: {
             inq: {
@@ -104,7 +107,7 @@ query testSemiJoin {
                 # standard conditions here
                 Name: { like: "test%" }
                 Type: { eq: "some value" }
-              },
+              }
               ApiName: "parentIdFieldInChild"
             }
           }
@@ -113,7 +116,9 @@ query testSemiJoin {
         edges {
           node {
             Id
-            Name { value }
+            Name {
+              value
+            }
           }
         }
       }
@@ -141,45 +146,50 @@ const QUERY_VARIABLES = {
 ```
 
 **❌ DO NOT INCLUDE:**
+
 - Explanatory comments about the query
 - Field descriptions
 - Additional text about what the query does
 - Workflow step descriptions
 
 **✅ ONLY INCLUDE:**
+
 - Raw query string
 - Variables object
 - Nothing else
 
 ## Generated Read Query Testing
 
-**Triggering conditions** - **ALL CONDITIONS MUST VALIDATE***
+**Triggering conditions** - **ALL CONDITIONS MUST VALIDATE\***
+
 1. Only if the [Read Query Generation Workflow](#read-query-generation-workflow) step global status is `SUCCESS` and you have a generated query
 2. Only if the query to generate is a read query
-3. Only if non manual method was used during `LDS_Guide_GraphQL` rule execution to retrieve introspection data
+3. Only if non manual method was used during schema exploration to retrieve introspection data
 
 **Workflow**
+
 1. **Report Step** - Explain that you are able to test the query using the same method used during introspection
-    1. You **MUST** report the method you will use, based on the one you used during `LDS_Guide_GraphQL` rule execution
+   1. You **MUST** report the method you will use, based on the one you used during schema exploration
 2. **Interactive Step** - Ask the user whether they want you to test the query using the proposed method
-    1. **WAIT** for the user's answer.
+   1. **WAIT** for the user's answer.
 3. **Test Query** - If the user are OK with you testing the query:
-    1. Use the selected method to test the query
-    2. Report the result of the test as `SUCCESS` if the query executed without error, or `FAILED` if you got errors
-    3. If the query executed without any errors, but you received no data, then the query is valid, and the result of the test is `SUCCESS`
+   1. Use the selected method to test the query
+   2. Report the result of the test as `SUCCESS` if the query executed without error, or `FAILED` if you got errors
+   3. If the query executed without any errors, but you received no data, then the query is valid, and the result of the test is `SUCCESS`
 4. **Remediation Step** - If status is `FAILED`, use the [`FAILED` status handling workflows](#failed-status-handling-workflow)
 
 ### `FAILED` Status Handling Workflow
 
 The query is invalid:
+
 1. **Error Analysis** - Parse and categorize the specific error messages
 2. **Root Cause Identification** - Use error message to identify the root cause:
-    - **Syntax** - Error contains `invalid syntax`
-    - **Validation** - Error contains `validation error`
-    - **Type** - Error contains `VariableTypeMismatch` or `UnknownType`
+   - **Syntax** - Error contains `invalid syntax`
+   - **Validation** - Error contains `validation error`
+   - **Type** - Error contains `VariableTypeMismatch` or `UnknownType`
 3. **Targeted Resolution** - Depending on the root cause categorization
-    - **Syntax** - Update the query using the error message information to fix the syntax errors
-    - **Validation** - This field's name is most probably invalid, ask user for clarification and **WAIT** for the user's answer
-    - **Type** - Use the error details and GraphQL schema to correct argument's type, and adjust variables accordingly
+   - **Syntax** - Update the query using the error message information to fix the syntax errors
+   - **Validation** - This field's name is most probably invalid, ask user for clarification and **WAIT** for the user's answer
+   - **Type** - Use the error details and GraphQL schema to correct argument's type, and adjust variables accordingly
 4. **Test Again** - Resume the [query testing workflow](#generated-read-query-testing) with the updated query (increment and track attempt counter)
-5. **Escalation Path** - If targeted resolution fails after 2 attempts, ask for additional details and restart the entire GraphQL workflow, going again through the introspection phase
+5. **Escalation Path** - If targeted resolution fails after 2 attempts, ask for additional details and restart the entire GraphQL workflow, going again through the introspection phase

package/dist/.a4drules/{graphql/tools/schemas/shared.graphqls → skills/feature-graphql-graphql-data-access/docs/shared-schema.graphqls}

@@ -1147,4 +1147,4 @@ directive @ignoreRule(rules: [IgnoreRule!]!) on OBJECT
   | INPUT_FIELD_DEFINITION
   | ARGUMENT_DEFINITION
   | ENUM_VALUE
-directive @optional on FIELD
+directive @optional on FIELD

package/dist/.a4drules/skills/feature-micro-frontend-micro-frontend/SKILL.md

@@ -0,0 +1,137 @@
+---
+name: micro-frontends
+description: Generate a Micro Frontend LWC component for a Web Application.
+license: Proprietary. LICENSE.txt has complete terms
+metadata:
+  author: salesforce-experience-platform-emu/lwc-admins
+---
+
+# Micro Frontend generation (workflow)
+
+When the user wants a Micro Frontend for a Web Application, follow this workflow.
+
+## 1. Install the dependency
+
+Micro Frontends are generated using the `generate-micro-frontend` CLI command from the `@salesforce/micro-frontends-experimental` package.
+
+```bash
+npm install @salesforce/micro-frontends-experimental
+```
+
+The dependency should be added to the project's `package.json` dependencies.
+
+## 2. Identify the Web Application
+
+- Verify the Web Application exists in `force-app/main/default/webapplications/<web-app-name>/`.
+- Confirm the Web Application has a `lightningOut` target in its `webapplication-meta.xml` file.
+- If no Web Application exists, the user must create one first using the Web Apps template system.
+
+## 3. Generate the Micro Frontend component
+
+Run the `generate-micro-frontend` command with the Web Application name from the root of an SFDX project:
+
+```bash
+npx generate-micro-frontend <web-app-name>
+```
+
+This creates:
+
+- A custom wrapper LWC component in `force-app/main/default/lwc/<webAppName>/`. This is the "Micro Frontend component".
+- The static `microFrontendShell` component that handles iframe communication.
+
+Notes:
+
+- The command may be added to the project's `package.json` scripts for convenience.
+- The Micro Frontend component uses the Web Application name (e.g. `my-web-app/`) in camelCase for its folder and file names (e.g. `myWebApp/myWebApp.js`, `myWebApp/myWebApp.html`).
+
+## 4. Customize the Micro Frontend component metadata
+
+Edit the `<webAppName>.js-meta.xml` file to:
+
+- Set appropriate `targets` (e.g. `lightning__HomePage`, `lightning__AppPage`, `lightning__RecordPage`, `lightningCommunity__Page`)
+- Add `targetConfigs` for page-specific properties
+- Optionally update the `masterLabel` and `description`
+
+Example:
+
+```xml
+<targetConfigs>
+    <targetConfig targets="lightning__HomePage">
+        <property name="height" type="Integer" min="0" max="600" default="300" />
+    </targetConfig>
+</targetConfigs>
+```
+
+## 5. Pass properties to the Micro Frontend component
+
+Edit the `<webAppName>.js` file to customize the `properties` getter:
+
+```javascript
+@api height;
+
+@api get properties() {
+    return {
+        height: this.height,
+        // Add any other data your Web Application needs
+    };
+}
+```
+
+All properties are passed to the embedded Web Application via `postMessage` and can be accessed in the app's code.
+
+## 6. Deploy and test
+
+Deploy the Micro Frontend component using standard SF CLI commands:
+
+```bash
+sf project deploy start --source-dir force-app/main/default
+```
+
+Add the component to a page using Lightning App Builder or Experience Builder and verify it loads correctly.
+
+# Micro Frontend component customization examples
+
+## Record page example
+
+Command to generate a Micro Frontend component for the `my-site` Web Application:
+
+```bash
+npx generate-micro-frontend my-site
+```
+
+`mySite.js-meta.xml` file with a `lightning__RecordPage` target:
+
+```xml
+<?xml version="1.0" encoding="UTF-8"?>
+<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
+    <apiVersion>66.0</apiVersion>
+    <isExposed>true</isExposed>
+    <masterLabel>Micro Frontend for "My Site"</masterLabel>
+    <targets>
+        <target>lightning__RecordPage</target>
+    </targets>
+        <targetConfigs>
+        <targetConfig targets="lightning__RecordPage">
+            <property name="mode" type="String" default="dark" />
+        </targetConfig>
+    </targetConfigs>
+</LightningComponentBundle>
+```
+
+`mySite.js` file with public properties and `properties` getter:
+
+```js
+// Micro Frontend component
+export default class mySite extends LightningElement {
+  @api recordId;
+  @api mode;
+
+  @api get properties() {
+    // This data is passed to the Micro Frontend
+    return {
+      recordId: this.recordId, // automatically populated for lightning__RecordPage target
+      mode: this.mode, // matches the mode targetConfig
+    };
+  }
+}
+```

package/dist/.a4drules/skills/feature-react-agentforce-conversation-client-embedded-agent/SKILL.md

@@ -0,0 +1,108 @@
+---
+name: embedded-agent
+description: Embed an Agentforce conversation client (chat UI) into a React web application. Use when the user wants to add an employee agent, a chat client, chatbot, chat widget, chat component, conversation client, or conversational interface to their React app. Also applies when the user asks to embed or integrate any Salesforce agent — including employee agent, travel agent, HR agent, service agent, or any custom-named agent — or mentions Agentforce, Agentforce widget, Agentforce chat, or agent chat.
+---
+
+# Embedded Agentforce chat (workflow)
+
+When the user wants an embedded Agentforce chat client in a React app, follow this workflow.
+
+## 1. Install the package
+
+```bash
+npm install @salesforce/webapp-template-feature-react-agentforce-conversation-client-experimental
+```
+
+This single install also brings in `@salesforce/agentforce-conversation-client` (the underlying SDK) automatically.
+
+## 2. Use the shared wrapper
+
+Use the `AgentforceConversationClient` React component. It resolves auth automatically:
+
+- **Dev (localhost)**: fetches `frontdoorUrl` from `/__lo/frontdoor`
+- **Prod (hosted in org)**: uses `salesforceOrigin` from `window.location.origin`
+
+## 3. Embed in the layout
+
+Render `<AgentforceConversationClient />` in the app layout so the chat client loads globally. Keep it alongside the existing layout (do not replace the page shell).
+
+```tsx
+import { Outlet } from "react-router";
+import { AgentforceConversationClient } from "@salesforce/webapp-template-feature-react-agentforce-conversation-client-experimental";
+
+export default function AppLayout() {
+  return (
+    <>
+      <Outlet />
+      <AgentforceConversationClient />
+    </>
+  );
+}
+```
+
+## 4. Configure the agent
+
+Pass options via the `agentforceClientConfig` prop:
+
+| Option                             | Purpose                                           |
+| ---------------------------------- | ------------------------------------------------- |
+| `renderingConfig.mode`             | `"floating"` (default) or `"inline"`              |
+| `renderingConfig.width` / `height` | Inline dimensions (number for px, string for CSS) |
+| `agentId`                          | Select a specific agent from the org              |
+| `styleTokens`                      | Theme colors and style overrides                  |
+
+See [embed-examples.md](docs/embed-examples.md) for complete examples of each mode.
+
+## 5. Validate prerequisites
+
+- The org must allow `localhost:<PORT>` in **Trusted Domains for Inline Frames** (session settings).
+
+## Quick reference: rendering modes
+
+### Floating (default)
+
+A persistent chat widget overlay pinned to the bottom-right corner. No extra config needed — floating is the default.
+
+```tsx
+<AgentforceConversationClient />
+```
+
+### Inline
+
+The chat renders within the page layout at a specific size.
+
+```tsx
+<AgentforceConversationClient
+  agentforceClientConfig={{
+    renderingConfig: { mode: "inline", width: 420, height: 600 },
+  }}
+/>
+```
+
+### Theming
+
+Use `styleTokens` to customize the chat appearance.
+
+```tsx
+<AgentforceConversationClient
+  agentforceClientConfig={{
+    styleTokens: {
+      headerBlockBackground: "#0176d3",
+      headerBlockTextColor: "#ffffff",
+      messageBlockInboundColor: "#0176d3",
+    },
+  }}
+/>
+```
+
+### Agent selection
+
+Pass `agentId` to load a specific agent (e.g. travel agent, HR agent).
+
+```tsx
+<AgentforceConversationClient
+  agentforceClientConfig={{
+    agentId: "0Xx000000000000",
+  }}
+/>
+```

package/dist/.a4drules/skills/feature-react-agentforce-conversation-client-embedded-agent/docs/embed-examples.md

@@ -0,0 +1,182 @@
+# Embed examples
+
+Detailed examples for configuring the Agentforce Conversation Client. All examples use the `AgentforceConversationClient` React component; the underlying `embedAgentforceClient` API accepts the same `agentforceClientConfig` shape.
+
+---
+
+## Floating mode (default)
+
+A floating chat widget appears in the bottom-right corner. It starts minimized and expands when the user clicks it. This is the default — no `renderingConfig` is required.
+
+### Minimal (no config)
+
+```tsx
+<AgentforceConversationClient />
+```
+
+### Explicit floating
+
+```tsx
+<AgentforceConversationClient
+  agentforceClientConfig={{
+    renderingConfig: { mode: "floating" },
+  }}
+/>
+```
+
+### Floating with a specific agent and theme
+
+```tsx
+<AgentforceConversationClient
+  agentforceClientConfig={{
+    renderingConfig: { mode: "floating" },
+    agentId: "0Xx000000000000",
+    styleTokens: {
+      headerBlockBackground: "#032D60",
+      headerBlockTextColor: "#ffffff",
+    },
+  }}
+/>
+```
+
+---
+
+## Inline mode
+
+The chat renders inside the parent container at a specific size. Use this when the chat should be part of the page layout rather than an overlay.
+
+### Fixed pixel dimensions
+
+```tsx
+<AgentforceConversationClient
+  agentforceClientConfig={{
+    renderingConfig: { mode: "inline", width: 420, height: 600 },
+  }}
+/>
+```
+
+### CSS string dimensions
+
+```tsx
+<AgentforceConversationClient
+  agentforceClientConfig={{
+    renderingConfig: { mode: "inline", width: "100%", height: "80vh" },
+  }}
+/>
+```
+
+### Inline filling a sidebar
+
+```tsx
+<div style={{ display: "flex", height: "100vh" }}>
+  <main style={{ flex: 1 }}>{/* App content */}</main>
+  <aside style={{ width: 400 }}>
+    <AgentforceConversationClient
+      agentforceClientConfig={{
+        renderingConfig: { mode: "inline", width: "100%", height: "100%" },
+      }}
+    />
+  </aside>
+</div>
+```
+
+---
+
+## Theming
+
+Use `styleTokens` to customize colors. Tokens are passed directly to the Agentforce client.
+
+### Brand-colored header
+
+```tsx
+<AgentforceConversationClient
+  agentforceClientConfig={{
+    styleTokens: {
+      headerBlockBackground: "#0176d3",
+      headerBlockTextColor: "#ffffff",
+    },
+  }}
+/>
+```
+
+### Full theme example
+
+```tsx
+<AgentforceConversationClient
+  agentforceClientConfig={{
+    styleTokens: {
+      headerBlockBackground: "#0176d3",
+      headerBlockTextColor: "#ffffff",
+      messageBlockInboundColor: "#0176d3",
+    },
+  }}
+/>
+```
+
+### Dark theme example
+
+```tsx
+<AgentforceConversationClient
+  agentforceClientConfig={{
+    styleTokens: {
+      headerBlockBackground: "#1a1a2e",
+      headerBlockTextColor: "#e0e0e0",
+      messageBlockInboundColor: "#16213e",
+    },
+  }}
+/>
+```
+
+---
+
+## Agent selection
+
+Use `agentId` to load a specific agent from the org. If omitted, the org's default employee agent is used.
+
+### Specific agent by ID
+
+```tsx
+<AgentforceConversationClient
+  agentforceClientConfig={{
+    agentId: "0Xx000000000000",
+  }}
+/>
+```
+
+### Agent with inline mode and theming
+
+```tsx
+<AgentforceConversationClient
+  agentforceClientConfig={{
+    agentId: "0Xx000000000000",
+    renderingConfig: { mode: "inline", width: 400, height: 700 },
+    styleTokens: {
+      headerBlockBackground: "#0176d3",
+      headerBlockTextColor: "#ffffff",
+    },
+  }}
+/>
+```
+
+---
+
+## Using the low-level `embedAgentforceClient` API
+
+The React component wraps `embedAgentforceClient`. If you need the raw API (e.g. in a non-React context), the config shape is the same:
+
+```ts
+import { embedAgentforceClient } from "@salesforce/agentforce-conversation-client";
+
+const { loApp, chatClientComponent } = embedAgentforceClient({
+  container: "#agentforce-container",
+  salesforceOrigin: "https://myorg.my.salesforce.com",
+  agentforceClientConfig: {
+    agentId: "0Xx000000000000",
+    renderingConfig: { mode: "floating" },
+    styleTokens: {
+      headerBlockBackground: "#0176d3",
+      headerBlockTextColor: "#ffffff",
+    },
+  },
+});
+```

package/dist/.a4drules/skills/feature-react-chart-analytics-charts/SKILL.md

@@ -0,0 +1,41 @@
+---
+name: analytics-charts
+description: Add or change charts from raw data. Use when the user asks for a chart, graph, or analytics visualization from JSON/data.
+---
+
+# Analytics charts (workflow)
+
+When the user wants a chart or visualization from data, follow this workflow. Charts use **Recharts** via the **AnalyticsChart** component.
+
+## Dependencies
+
+Ensure the following package is installed in the project:
+
+```bash
+npm install recharts
+```
+
+## 1. Interpret data type
+
+- **Time-series**: data over time or ordered (dates, timestamps). Use a line chart. Raw shape often has date-like keys and a numeric value.
+- **Categorical**: data by category (labels, segments). Use a bar chart. Raw shape often has a category name and a numeric value.
+
+If the user says "over time", "trend", or uses date-like keys → time-series. If they say "by category", "by X", or use label-like keys → categorical.
+
+## 2. Map data to chart shape
+
+- **Time-series**: produce `[{ x: string, y: number }, ...]` (e.g. map `date`→`x`, `value`→`y`).
+- **Categorical**: produce `[{ name: string, value: number }, ...]` (e.g. map `category`→`name`, `total`→`value`).
+
+See [schema-mapping.md](docs/schema-mapping.md) for examples.
+
+## 3. Choose theme
+
+- **red**: declining, loss, negative trend.
+- **green**: growth, gain, positive trend.
+- **neutral**: default or mixed.
+
+## 4. Generate and place the chart
+
+- Use **AnalyticsChart** with `chartType` (`"time-series"` or `"categorical"`), `data` (mapped array), `theme`, and optional `title`. Wrap in **ChartContainer** if the app uses it for chart blocks.
+- Insert the chart inside the existing app (e.g. main content or a route), not as the entire page.

package/dist/.a4drules/skills/feature-react-chart-analytics-charts/docs/schema-mapping.md

@@ -0,0 +1,4 @@
+# Schema mapping (Recharts)
+
+- **Time-series**: `{ x: string, y: number }` — e.g. map `date`→`x`, `value`→`y`.
+- **Categorical**: `{ name: string, value: number }` — e.g. map `category`→`name`, `total`→`value`.