@salesforce/webapp-template-feature-react-chart-experimental 1.107.2 → 1.107.4

package/dist/.a4drules/skills/managing-agentforce-conversation-client/references/examples.md

@@ -0,0 +1,132 @@
+# Additional Examples
+
+Essential examples for common patterns and combinations. All use flat props API.
+
+---
+
+## Layout Patterns
+
+### Sidebar Chat
+
+```tsx
+export default function DashboardWithChat() {
+  return (
+    <div style={{ display: "flex", height: "100vh" }}>
+      <main style={{ flex: 1 }}>{/* Main content */}</main>
+      <aside style={{ width: 400 }}>
+        <AgentforceConversationClient agentId="0Xx..." inline width="100%" height="100%" />
+      </aside>
+    </div>
+  );
+}
+```
+
+### Full Page Chat
+
+```tsx
+export default function SupportPage() {
+  return (
+    <div>
+      <h1>Customer Support</h1>
+      <AgentforceConversationClient agentId="0Xx..." inline width="100%" height="600px" />
+    </div>
+  );
+}
+```
+
+---
+
+## Size Variations
+
+### Responsive sizing
+
+```tsx
+<AgentforceConversationClient agentId="0Xx..." inline width="100%" height="80vh" />
+```
+
+### Calculated dimensions
+
+```tsx
+<AgentforceConversationClient agentId="0Xx..." inline width="500px" height="calc(100vh - 100px)" />
+```
+
+---
+
+## Theming Combinations
+
+### Brand theme with custom sizing
+
+```tsx
+<AgentforceConversationClient
+  agentId="0Xx..."
+  inline
+  width="500px"
+  height="700px"
+  styleTokens={{
+    headerBlockBackground: "#0176d3",
+    headerBlockTextColor: "#ffffff",
+    messageBlockInboundBackgroundColor: "#0176d3",
+    messageBlockInboundTextColor: "#ffffff",
+    messageInputFooterSendButton: "#0176d3",
+  }}
+/>
+```
+
+### Dark theme
+
+```tsx
+<AgentforceConversationClient
+  agentId="0Xx..."
+  styleTokens={{
+    headerBlockBackground: "#1a1a1a",
+    headerBlockTextColor: "#ffffff",
+    messageBlockInboundBackgroundColor: "#2d2d2d",
+    messageBlockInboundTextColor: "#ffffff",
+    messageBlockOutboundBackgroundColor: "#3a3a3a",
+    messageBlockOutboundTextColor: "#f0f0f0",
+  }}
+/>
+```
+
+### Inline without header
+
+```tsx
+<AgentforceConversationClient
+  agentId="0Xx..."
+  inline
+  width="100%"
+  height="600px"
+  headerEnabled={false}
+  styleTokens={{
+    messageBlockBorderRadius: "12px",
+  }}
+/>
+```
+
+---
+
+## Complete Host Component Example
+
+```tsx
+import { Outlet } from "react-router";
+import { AgentforceConversationClient } from "@salesforce/webapp-template-feature-react-agentforce-conversation-client-experimental";
+
+export default function AgentChatHost() {
+  return (
+    <>
+      <Outlet />
+      <AgentforceConversationClient
+        agentId="0Xx..."
+        styleTokens={{
+          headerBlockBackground: "#0176d3",
+          headerBlockTextColor: "#ffffff",
+        }}
+      />
+    </>
+  );
+}
+```
+
+---
+
+For complete style token reference, see `references/style-tokens.md` or `node_modules/@salesforce/agentforce-conversation-client/README.md`.

package/dist/.a4drules/skills/managing-agentforce-conversation-client/references/style-tokens.md

@@ -0,0 +1,101 @@
+# Style Tokens Reference
+
+This document explains how to use `styleTokens` for theming and styling the AgentforceConversationClient.
+
+## Overview
+
+The `styleTokens` prop is the **ONLY** way to customize the appearance of the Agentforce conversation client. It accepts an object with style token keys and CSS values.
+
+## Source of Truth
+
+For the complete and always up-to-date list of all 60+ style tokens, see:
+
+**[@salesforce/agentforce-conversation-client on npm](https://www.npmjs.com/package/@salesforce/agentforce-conversation-client)**
+
+The npm package README contains the definitive documentation with all available style tokens.
+
+## Token Categories
+
+Style tokens are organized by UI area:
+
+- **Header** (7 tokens): background, text color, hover, active, focus, border, font family
+- **Messages** (10 tokens): colors, padding, margins, border radius, fonts, body width
+- **Inbound messages** (5 tokens): background, text color, width, alignment, hover
+- **Outbound messages** (5 tokens): background, text color, width, alignment, margin
+- **Input** (33 tokens): colors, borders, fonts, padding, buttons, scrollbar, textarea, actions
+
+## Common Use Cases
+
+### Change header color
+
+```tsx
+<AgentforceConversationClient
+  agentId="0Xx..."
+  styleTokens={{
+    headerBlockBackground: "#0176d3",
+    headerBlockTextColor: "#ffffff",
+  }}
+/>
+```
+
+### Change message colors
+
+```tsx
+<AgentforceConversationClient
+  agentId="0Xx..."
+  styleTokens={{
+    messageBlockInboundBackgroundColor: "#4CAF50",
+    messageBlockInboundTextColor: "#ffffff",
+    messageBlockOutboundBackgroundColor: "#f5f5f5",
+    messageBlockOutboundTextColor: "#333333",
+  }}
+/>
+```
+
+### Apply brand colors
+
+```tsx
+<AgentforceConversationClient
+  agentId="0Xx..."
+  styleTokens={{
+    headerBlockBackground: "#1a73e8",
+    headerBlockTextColor: "#ffffff",
+    messageBlockInboundBackgroundColor: "#1a73e8",
+    messageBlockInboundTextColor: "#ffffff",
+    messageInputFooterSendButton: "#1a73e8",
+    messageInputFooterSendButtonHoverColor: "#1557b0",
+  }}
+/>
+```
+
+### Adjust spacing and fonts
+
+```tsx
+<AgentforceConversationClient
+  agentId="0Xx..."
+  styleTokens={{
+    messageInputFontSize: "16px",
+    messageBlockBorderRadius: "12px",
+    messageBlockPadding: "16px",
+    messageInputPadding: "12px",
+  }}
+/>
+```
+
+## How to Find Token Names
+
+1. Check the [@salesforce/agentforce-conversation-client npm package](https://www.npmjs.com/package/@salesforce/agentforce-conversation-client) for the complete list of all tokens
+
+2. Token names follow a pattern:
+   - `headerBlock*` - Header area
+   - `messageBlock*` - Message bubbles
+   - `messageBlockInbound*` - Messages from customer to agent
+   - `messageBlockOutbound*` - Messages from agent to customer
+   - `messageInput*` - Input field and send button
+
+## Important Notes
+
+- You do NOT need to provide all tokens - only override the ones you want to change
+- Token values are CSS strings (e.g., `"#FF0000"`, `"16px"`, `"bold"`)
+- Invalid token names are silently ignored
+- The component uses default values for any tokens you don't specify

package/dist/.a4drules/skills/{integrating-agentforce-conversation-client/docs → managing-agentforce-conversation-client/references}/troubleshooting.md

@@ -23,7 +23,7 @@ Common issues when using the Agentforce Conversation Client.
 **Solution:**
 
 1. Confirm the id is correct (18-char Salesforce id, starts with `0Xx`).
-2. Ensure the agent is Active in **Setup → Agents**.
+2. Ensure the agent is Active in **Setup → Agentforce Agents**.
 3. Verify the agent is deployed to the target channel.
 
 ---
@@ -36,25 +36,22 @@ Common issues when using the Agentforce Conversation Client.
 
 1. Go to **Setup → Session Settings → Trusted Domains for Inline Frames**.
 2. Add `localhost:<PORT>` (example: `localhost:3000`).
-3. Restart the dev server.
+
+**Important:**
+
+- This setting should be **temporary for local development only**.
+- **Remove `localhost:<PORT>` from trusted domains after development**.
+- **Recommended:** Test the Agentforce conversation client in a deployed app instead of relying on localhost trusted domains for extended periods.
 
 ---
 
 ### Blank iframe / auth session issues
 
-**Cause:** First-party Salesforce cookie restriction is enabled.
+**Possible cause:** First-party Salesforce cookie restriction may block embedded auth flow in some environments.
 
 **Solution:**
 
 1. Go to **Setup → Session Settings**.
 2. Find **Require first party use of Salesforce cookies**.
-3. Disable it.
+3. Disable it **only if needed and approved by your security/admin team**.
 4. Save and reload.
-
----
-
-### Multiple chat widgets appear
-
-**Cause:** Component rendered more than once.
-
-**Solution:** Render one instance in app layout only.

package/dist/.a4drules/skills/using-graphql/SKILL.md

@@ -59,7 +59,8 @@ The base React app (`base-react-app`) ships with all GraphQL dependencies and to
 Before using this skill, ensure:
 
 1. The `@salesforce/sdk-data` package is available (provides `createDataSDK`, `gql`, `NodeOfConnection`)
-2. A `schema.graphql` file exists at the project root. If missing, generate it:
+2. **Deployment order**: Metadata must be deployed before schema fetch; schema must be refetched after any metadata deployment. Invoke the `deploying-to-salesforce` skill when deploying or syncing with the org.
+3. A `schema.graphql` file exists at the project root. If missing, generate it:
    ```bash
    # Run from webapp dir (force-app/main/default/webapplications/<app-name>/)
    npm run graphql:schema

package/dist/.a4drules/webapp-code-quality.md

@@ -15,7 +15,6 @@ Enforces ESLint, TypeScript, and build validation for consistent, maintainable c
 ```bash
 npm run lint   # MUST result in 0 errors
 npm run build  # MUST succeed (includes TypeScript check)
-npm run graphql:codegen # MUST succeed (verifies graphql queries)
 ```
 
 **Must Pass:**
@@ -25,4 +24,8 @@ npm run graphql:codegen # MUST succeed (verifies graphql queries)
 
 **Can Be Warnings:**
 - ESLint warnings (fix when convenient)
-- Minor TypeScript warnings
+- Minor TypeScript warnings
+
+## When Failures Occur
+
+If `npm run lint` or `npm run build` fails, the agent **must** attempt to resolve the issues and retry. Do not leave the session with failing quality gates. Fix the reported errors (TypeScript, ESLint), then re-run the failing command. Repeat until all steps pass.

package/dist/.a4drules/webapp-data-access.md

@@ -0,0 +1,25 @@
+---
+description: Salesforce data access for web apps — when and how to use the accessing-data skill
+paths:
+  - "**/*"
+---
+
+# Web App Data Access
+
+For all Salesforce data access from web apps (GraphQL, REST, Chatter, Connect, Apex REST, UI API, Einstein LLM), invoke the **`accessing-data`** skill (`.a4drules/skills/accessing-data/`). It enforces Data SDK usage (`createDataSDK()` + `sdk.graphql` or `sdk.fetch`), GraphQL-first preference, optional chaining, and documents when to use `sdk.fetch` via the `fetching-rest-api` skill.
+
+## Sub-skills
+
+- **GraphQL** — For queries and mutations, invoke the **`using-graphql`** skill (`.a4drules/skills/using-graphql/`). Covers schema exploration, query patterns, codegen, and type generation.
+- **REST / UI API** — When GraphQL cannot cover the use case, use `sdk.fetch?.()`. See the **`fetching-rest-api`** skill (`.a4drules/skills/fetching-rest-api/`) for Chatter, Connect REST, Apex REST, UI API REST, and Einstein LLM.
+
+## Clarifying Vague Data Requests
+
+When a user asks about data and the request is vague, **clarify before implementing**. Ask which of the following they want:
+
+- **Application code** — Add or modify code in a specific web app so the app performs the data interaction at runtime (e.g., GraphQL query in the React app)
+- **Local SF CLI** — Run Salesforce CLI commands locally (e.g., `sf data query`, `sf data import tree`) to interact with the org from the terminal
+- **Local example data** — Update or add local fixture/example data files (e.g., JSON in `data/`) for development or testing
+- **Other** — Data export, report generation, setup script, etc.
+
+Do not assume. A request like "fetch accounts" could mean: (1) add a GraphQL query to the app, (2) run `sf data query` in the terminal, or (3) update sample data files. Confirm the intent before proceeding.

package/dist/.a4drules/webapp-deployment.md

@@ -0,0 +1,32 @@
+---
+description: Always invoke the deploying-to-salesforce skill for deployment, schema fetch, or org sync
+paths:
+  - "**/*"
+---
+
+# Web App Deployment
+
+**This rule always applies.** Before running any deployment, schema fetch, codegen, or org sync command, you MUST invoke the **deploying-to-salesforce** skill (`.a4drules/skills/deploying-to-salesforce/SKILL.md`).
+
+## When to Invoke
+
+Invoke the skill whenever the task involves:
+
+- Deploying metadata (`sf project deploy start`)
+- Assigning permission sets, permission set groups, or profiles
+- Fetching GraphQL schema (`npm run graphql:schema`)
+- Running GraphQL codegen (`npm run graphql:codegen`)
+- Data import or cleaning existing records
+- Any command that touches the Salesforce org
+
+## Required Behavior
+
+1. **Read the skill first** — Open and read the full deploying-to-salesforce skill before executing deployment-related steps.
+2. **Follow the canonical sequence** — Execute steps in the exact order defined in the skill.
+3. **Evaluate before each step** — Use the skill's "Run when" / "Omit when" criteria; do not run steps blindly.
+4. **Proactive post-deploy actions** — After a successful deploy, the agent MUST either run or explicitly offer:
+   - **Permission set assignment:** Discover permsets in `force-app/main/default/permissionsets/` and assign each to the org (or ask: "Do you want me to assign the permission sets?")
+   - **Data import:** If `data/data-plan.json` exists, ask: "Do you want me to import the sample data now?" — never import without explicit user confirmation.
+5. **Ask before data operations** — Never import data or clean existing records without explicit user confirmation.
+
+Do not bypass this skill. It enforces the correct deployment order and prevents schema/codegen failures.

package/dist/.a4drules/webapp-react-typescript.md

@@ -9,7 +9,7 @@ paths:
 ### Never Use `any`
 ```typescript
 // FORBIDDEN
-const data: any = await fetchData();
+const result: any = getSomething();
 ```
 
 ## React TypeScript Patterns
@@ -27,25 +27,17 @@ const handleSubmit = (event: React.FormEvent<HTMLFormElement>): void => {
 const [user, setUser] = useState<User | null>(null);
 ```
 
-### GraphQL via DataSDK
-
-See **webapp-react.md** for DataSDK usage patterns. Type your GraphQL responses:
-
-```typescript
-const response = await sdk.graphql?.<GetAccountsQuery>(QUERY, variables);
-```
-
 ### Type Assertions
 ```typescript
 // FORBIDDEN: Unsafe assertions
-const user = data as User;
+const user = obj as User;
 
 // REQUIRED: Type guards
 function isUser(obj: unknown): obj is User {
   return typeof obj === 'object' && obj !== null && typeof (obj as User).id === 'string';
 }
 
-if (isUser(data)) {
-  console.log(data.name); // Now safely typed
+if (isUser(obj)) {
+  console.log(obj.name); // Now safely typed
 }
 ```

package/dist/.a4drules/webapp-react.md

@@ -1,12 +1,16 @@
 ---
-description: React-specific patterns and Salesforce data access for SFDX web apps
+description: React-specific patterns for SFDX web apps
 paths:
   - "**/webapplications/**/*"
 ---
 
 # React Web App (SFDX)
 
-For layout, navigation, and generation rules, see **webapp.md**.
+For layout, navigation, and generation rules, see **creating-webapp** (`.a4drules/skills/creating-webapp/SKILL.md`).
+
+## Deployment
+
+For deployment, schema fetch, codegen, or org sync, invoke the **`deploying-to-salesforce`** skill (`.a4drules/skills/deploying-to-salesforce/`).
 
 ## Routing (React Router)
 
@@ -21,14 +25,4 @@ Use a **single** router package for the app. When using `createBrowserRouter` an
 
 React apps must NOT import Salesforce platform modules like `lightning/*` or `@wire` (LWC-only)
 
-## Data Access (CRITICAL)
-
-For all Salesforce data access (GraphQL, REST, Chatter, Connect, Apex REST, UI API, Einstein LLM), invoke the **`accessing-data`** skill (`.a4drules/skills/accessing-data/`). It enforces Data SDK usage, GraphQL-first preference, optional chaining, and documents when to use `sdk.fetch` via the `fetching-rest-api` skill.
-
-### GraphQL (Preferred)
-
-For queries and mutations, invoke the **`using-graphql`** skill (`.a4drules/skills/using-graphql/`). It covers schema exploration, query patterns, codegen, type generation, and guardrails.
-
-### UI API (Fallback)
-
-When GraphQL cannot cover the use case, use `sdk.fetch?.()` for UI API endpoints. See the **`fetching-rest-api`** skill (`.a4drules/skills/fetching-rest-api/`) for full REST API documentation.
+For Salesforce data access, see **webapp-data-access** (`.a4drules/webapp-data-access.md`).

package/dist/AGENT.md

@@ -61,11 +61,14 @@ This project includes **.a4drules/** at the project root. Follow them when gener
 - **Accessing Data** (`.a4drules/skills/accessing-data/`): Use for all Salesforce data fetches. Enforces Data SDK usage (`createDataSDK()` + `sdk.graphql` or `sdk.fetch`); GraphQL preferred, fetch when GraphQL is not sufficient.
 - **Fetching REST API** (`.a4drules/skills/fetching-rest-api/`): Use when implementing Chatter, Connect REST, Apex REST, UI API REST, or Einstein LLM calls via `sdk.fetch`.
 - **Using GraphQL** (`.a4drules/skills/using-graphql/`): Use when implementing Salesforce GraphQL queries or mutations. Sub-skills: `exploring-graphql-schema`, `generating-graphql-read-query`, `generating-graphql-mutation-query`.
+- **Deploying to Salesforce** (`.a4drules/skills/deploying-to-salesforce/`): Use when deploying metadata, fetching GraphQL schema, or generating deploy/setup commands. Enforces deploy → permset → schema → codegen order; schema refetch after metadata deployment.
 
 When rules refer to "web app directory" or `<sfdx-source>/webapplications/<appName>/`, resolve `<sfdx-source>` from `sfdx-project.json` and use the **actual app folder name** for this project.
 
 ## Deploying
 
+**Deployment order:** Metadata (objects, permission sets) must be deployed before GraphQL schema fetch. After any metadata deployment, re-run `npm run graphql:schema` and `npm run graphql:codegen` from the webapp dir. **One-command setup:** `node scripts/setup-cli.mjs --target-org <alias>` runs deploy → permset → schema → codegen in the correct order. Invoke the `deploying-to-salesforce` skill for full guidance.
+
 From **this project root** (resolve the actual SFDX source path from `sfdx-project.json`):
 
 ```bash

package/dist/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.107.4](https://github.com/salesforce-experience-platform-emu/webapps/compare/v1.107.3...v1.107.4) (2026-03-18)
+
+**Note:** Version bump only for package @salesforce/webapp-template-base-sfdx-project-experimental
+
+
+
+
+
+## [1.107.3](https://github.com/salesforce-experience-platform-emu/webapps/compare/v1.107.2...v1.107.3) (2026-03-18)
+
+
+### Bug Fixes
+
+* **lint-and-metadata:** Linting in template apps, metadata and query fixes, and skills for deployment orders ([#304](https://github.com/salesforce-experience-platform-emu/webapps/issues/304)) ([980b931](https://github.com/salesforce-experience-platform-emu/webapps/commit/980b9318cba0f7d5d93620e08bf4138df51b3700))
+
+
+
+
+
 ## [1.107.2](https://github.com/salesforce-experience-platform-emu/webapps/compare/v1.107.1...v1.107.2) (2026-03-18)
 
 **Note:** Version bump only for package @salesforce/webapp-template-base-sfdx-project-experimental

package/dist/eslint.config.js

@@ -0,0 +1,7 @@
+/**
+ * ESLint 9 flat config for LWC and Aura.
+ * @see https://github.com/salesforce/eslint-config-lwc
+ */
+const lwcConfig = require("@salesforce/eslint-config-lwc");
+
+module.exports = [...lwcConfig.configs.recommended];

package/dist/force-app/main/default/webapplications/feature-react-chart/eslint.config.js

@@ -68,6 +68,8 @@ const config = [
       globals: {
         ...globals.browser,
         JSX: 'readonly',
+        React: 'readonly',
+        process: 'readonly',
       },
     },
     plugins: {

package/dist/force-app/main/default/webapplications/feature-react-chart/package.json

@@ -15,14 +15,8 @@
     "graphql:schema": "node scripts/get-graphql-schema.mjs"
   },
   "dependencies": {
-    "@salesforce/agentforce-conversation-client": "file:../../../../../../../../../agentforceConversationClient",
-    "@salesforce/micro-frontends-experimental": "file:../../../../../../../../../micro-frontends",
-    "@salesforce/sdk-chat": "file:../../../../../../../../../sdk/sdk-chat",
-    "@salesforce/sdk-core": "file:../../../../../../../../../sdk/sdk-core",
-    "@salesforce/sdk-data": "file:../../../../../../../../../sdk/sdk-data",
-    "@salesforce/sdk-lightning": "file:../../../../../../../../../sdk/sdk-lightning",
-    "@salesforce/sdk-view": "file:../../../../../../../../../sdk/sdk-view",
-    "@salesforce/webapp-experimental": "file:../../../../../../../../../webapps",
+    "@salesforce/sdk-data": "^1.107.4",
+    "@salesforce/webapp-experimental": "^1.107.4",
     "@tailwindcss/vite": "^4.1.17",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
@@ -47,7 +41,7 @@
     "@graphql-eslint/eslint-plugin": "^4.1.0",
     "@graphql-tools/utils": "^11.0.0",
     "@playwright/test": "^1.49.0",
-    "@salesforce/vite-plugin-webapp-experimental": "file:../../../../../../../../../vite-plugin-webapps",
+    "@salesforce/vite-plugin-webapp-experimental": "^1.107.4",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.1.0",
     "@testing-library/user-event": "^14.5.2",

package/dist/force-app/main/default/webapplications/feature-react-chart/src/app.tsx

@@ -4,7 +4,10 @@ import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import './styles/global.css';
 
-const basename = (globalThis as any).SFDC_ENV?.basePath;
+// Normalize basename: strip trailing slash so it matches URLs like /lwr/application/ai/c-app
+const rawBasePath = (globalThis as any).SFDC_ENV?.basePath;
+const basename =
+  typeof rawBasePath === 'string' ? rawBasePath.replace(/\/+$/, '') : undefined;
 const router = createBrowserRouter(routes, { basename });
 
 createRoot(document.getElementById('root')!).render(

package/dist/force-app/main/default/webapplications/feature-react-chart/src/components/alerts/status-alert.tsx

@@ -26,10 +26,10 @@ interface StatusAlertProps extends VariantProps<typeof statusAlertVariants> {
  * Returns null if no children are provided.
  */
 export function StatusAlert({ children, variant = 'error' }: StatusAlertProps) {
+  const descriptionId = useId();
   if (!children) return null;
 
   const isError = variant === 'error';
-  const descriptionId = useId();
 
   return (
     <Alert

package/dist/force-app/main/default/webapplications/feature-react-chart/tsconfig.json

@@ -31,6 +31,12 @@
       "@assets/*": ["./src/assets/*"]
     }
   },
-  "include": ["src", "vite-env.d.ts", "vitest-env.d.ts"],
+  "include": [
+    "src",
+    "e2e",
+    "vite-env.d.ts",
+    "vitest-env.d.ts",
+    "vitest.setup.ts"
+  ],
   "references": [{ "path": "./tsconfig.node.json" }]
 }