@schandlergarcia/sf-web-components 1.9.86 → 1.9.87

package/.a4drules/skills/command-center-builder/SKILL.md

@@ -398,19 +398,27 @@ Define schemas outside component body. Always `required: true` on mandatory fiel
 
 ## AI Chat & Agent
 
-Two components for agent integration:
+Two pieces for agent integration — a **ChatBar** component and the **`useEvaAgent` hook** (Agent REST API):
 
 - **`ChatBar`** — command-palette strip for suggested prompts. Place between the hero map and data panels (full-width, `px-4 pt-4`), NOT in the header. Always provide 3–5 `suggestions`.
-- **`AgentforceConversationClient`** — the real Salesforce agent. Import from `@/components/AgentforceConversationClient` and pass the agent ID. Renders as a floating widget.
+- **`useEvaAgent`** — pre-installed hook at `src/hooks/useEvaAgent.ts`. Handles OAuth → session → messages → cleanup via the Agentforce Agent REST API. Config is in `src/config/agentApi.ts`. Vite proxy rules in `vite.config.ts` forward requests.
+
+> **Do NOT use `AgentforceConversationClient`** (the iframe widget). We use the Agent REST API via `useEvaAgent`.
+> **Do NOT create wrapper hooks** (useEvaChatAdapter, useDisruptionAlerts, etc.). Use `useEvaAgent` directly.
+> **Do NOT create `.env` or `.env.local` files** — config is hardcoded in `src/config/agentApi.ts`.
 
 ```tsx
-import { AgentforceConversationClient } from "@/components/AgentforceConversationClient";
+import useEvaAgent from "@/hooks/useEvaAgent";
+
+const { messages, isReady, isSending, connect, sendMessage } = useEvaAgent();
+useEffect(() => { connect(); }, [connect]);
 
-<AgentforceConversationClient agentId="0Xxa5000000relhCAA" agentLabel="Eva" />
+const handleChat = (text: string) => {
+  sendMessage(text);
+  return { text: `Looking into: "${text}"…` };
+};
 ```
 
-- Return `components` for structured data — never markdown tables in text
-- Always set height on `ChatPanel`
 - Extract `onSend` handlers to module scope when shared
 
 ## Tables

package/.a4drules/skills/component-library/SKILL.md

@@ -672,7 +672,7 @@ Dropdown select. Value `"all"` skips filtering.
 ## Data Utilities
 
 ### DataModeToggle
-**When:** Place in the app header to let users switch between sample and live data.
+> ⚠️ **Do NOT use in the Engine Command Center dashboard.** The Engine dashboard controls data mode via `ENABLE_SAMPLE_DATA_CACHE` in `src/lib/dataStrategy.ts` — there is no UI toggle. Only use `DataModeToggle` in non-Engine dashboards that explicitly need a manual toggle.
 
 ```jsx
 <DataModeToggle className="ml-4" />

package/.a4drules/skills/component-library/chat-data.md

@@ -54,7 +54,7 @@ Wraps app. Provides `useDataMode()` → `{ mode, isSample, isLive, toggle, setMo
 ## Data Utilities
 
 ### DataModeToggle
-**When:** Place in the app header to let users switch between sample and live data.
+> ⚠️ **Do NOT use in the Engine Command Center dashboard.** The Engine dashboard controls data mode via `ENABLE_SAMPLE_DATA_CACHE` in `src/lib/dataStrategy.ts` — there is no UI toggle. Only use `DataModeToggle` in non-Engine dashboards that explicitly need a manual toggle.
 
 ```jsx
 <DataModeToggle className="ml-4" />

package/CHANGELOG.md

@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.9.87] - 2026-04-07
+
+### Changed
+- **SKILL.md AI Chat section** — replaced `AgentforceConversationClient` instructions with `useEvaAgent` hook usage and explicit prohibitions against iframe widget, wrapper hooks, and .env files.
+- **Component library DataModeToggle docs** — added warning that DataModeToggle must NOT be used in the Engine Command Center dashboard (both SKILL.md and chat-data.md).
+
 ## [1.9.86] - 2026-04-07
 
 ### Changed

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@schandlergarcia/sf-web-components",
-  "version": "1.9.86",
+  "version": "1.9.87",
   "description": "Reusable Salesforce web components library with Tailwind CSS v4 and shadcn/ui",
   "type": "module",
   "main": "./dist/index.js",