@schandlergarcia/sf-web-components 2.1.0 → 2.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -15,12 +15,12 @@ These rules apply to all dashboard files.
15
15
  After creating a dashboard, you MUST update all 3 files or the dashboard will never appear:
16
16
 
17
17
  1. **`CommandCenter.tsx`** — import and render your dashboard (change only the import line)
18
- 2. **`Home.tsx`** — REWRITE to render `CommandCenter` (it ships as Account Search by default):
18
+ 2. **`Home.tsx`** — rewrite to render `CommandCenter` (it ships as Account Search by default):
19
19
  ```tsx
20
20
  import CommandCenter from "@/components/workspace/CommandCenter";
21
21
  export default function HomePage() { return <CommandCenter />; }
22
22
  ```
23
- 3. **`routes.tsx`** — set `Home` as index route with label "Dashboard", move Search to `/search`
23
+ 3. **`routes.tsx`** — set `Home` as index route with label "Dashboard"
24
24
 
25
25
  **If you skip this, the user sees the Account Search page instead of your dashboard.**
26
26
 
@@ -29,9 +29,9 @@ Read `.a4drules/skills/command-center-builder/SKILL.md` before building. It has
29
29
  // ... render <MyDashboard /> inside the existing providers
30
30
  ```
31
31
 
32
- - [ ] **`Home.tsx`** — REPLACE the entire file (it ships as Account Search by default):
32
+ - [ ] **`Home.tsx`** — rewrite the entire file (it ships as Account Search by default):
33
33
  ```tsx
34
- // src/pages/Home.tsx — REPLACE EVERYTHING
34
+ // src/pages/Home.tsx
35
35
  import CommandCenter from "@/components/workspace/CommandCenter";
36
36
  export default function HomePage() {
37
37
  return <CommandCenter />;
@@ -12,23 +12,23 @@ description: >-
12
12
 
13
13
  These rules apply when building dashboards rendered by `CommandCenter.tsx`. For full component API details, read the **component-library** skill.
14
14
 
15
- > **BUILD GUIDE:** The dashboard is built in 3 phases. Read [`getting-started.md`](getting-started.md) for what to build (and what to skip) in each phase. Do NOT build ahead — only build what the current phase asks for.
15
+ > **BUILD GUIDE:** Read [`getting-started.md`](getting-started.md) for the full step-by-step process.
16
16
 
17
- ## WIRING — DO THIS FIRST (before building the dashboard)
17
+ ## WIRING — Making Your Dashboard Visible
18
18
 
19
- **Building a dashboard requires updating 4 files. If you only create the dashboard file, the user will never see it — they'll see the old Account Search page instead.**
19
+ **Building a dashboard requires updating 4 files. If you only create the dashboard file, the user will never see it — they'll see the default Account Search page instead.**
20
20
 
21
21
  Read the existing `Home.tsx`, `CommandCenter.tsx`, and `routes.tsx` BEFORE you start building. Plan all 4 file changes up front:
22
22
 
23
23
  1. `src/pages/YourDashboard.tsx` — the dashboard component
24
24
  2. `src/components/workspace/CommandCenter.tsx` — import and render your dashboard
25
- 3. `src/pages/Home.tsx` — **MUST be rewritten** to render CommandCenter (it ships as Account Search)
25
+ 3. `src/pages/Home.tsx` — rewrite to render CommandCenter (it ships as Account Search)
26
26
  4. `src/routes.tsx` — set Home as index route with label "Dashboard"
27
27
 
28
28
  **Home.tsx ships as an Account Search page by default.** You MUST replace its entire contents:
29
29
 
30
30
  ```tsx
31
- // src/pages/Home.tsx — REPLACE the entire file
31
+ // src/pages/Home.tsx
32
32
  import CommandCenter from "@/components/workspace/CommandCenter";
33
33
 
34
34
  export default function HomePage() {
@@ -60,7 +60,7 @@ export default function CommandCenter() {
60
60
  }
61
61
  ```
62
62
 
63
- **routes.tsx** — make Home the index route, move Search to `/search`:
63
+ **routes.tsx** — make Home the index route with label "Dashboard":
64
64
 
65
65
  ```tsx
66
66
  {
@@ -1,80 +1,63 @@
1
1
  # Command Center Dashboard — Build Guide
2
2
 
3
- The dashboard is built in **3 phases**, one per user prompt. Each phase adds a layer. Do NOT build ahead — only build what the current phase asks for.
3
+ This guide teaches you how to build a dashboard using the Command Center component library.
4
4
 
5
5
  ---
6
6
 
7
- ## RULES THAT APPLY TO EVERY PHASE
7
+ ## General Rules
8
8
 
9
- > **Read these first. Violations of these rules are the #1 cause of failed builds.**
9
+ > **Read these first. They prevent the most common mistakes.**
10
10
 
11
- 1. **Phase 1 writes new files. Phases 2 and 3 make surgical edits.** Never rewrite the dashboard file from scratch in Phase 2 or 3. Rewriting a 400+ line file takes 60s, risks losing prior work, and introduces regressions. Surgical edits take seconds.
11
+ 1. **Do NOT read library component source files.** Do NOT read `GeoMap.jsx`, `BaseCard.jsx`, `Avatar.jsx`, `ChatBar.jsx`, `ChartCard.jsx`, `D3Chart.jsx`, `useDataSource.jsx`, `DataModeProvider.jsx`, `DataModeToggle.jsx`, or any file inside `src/components/library/`. All props and patterns are documented in this build guide and the SKILL.md. Reading source files wastes time and produces no new information.
12
12
 
13
- 2. **Do NOT read library component source files.** Do NOT read `GeoMap.jsx`, `BaseCard.jsx`, `Avatar.jsx`, `ChatBar.jsx`, `ChartCard.jsx`, `D3Chart.jsx`, `useDataSource.jsx`, `DataModeProvider.jsx`, `DataModeToggle.jsx`, or any file inside `src/components/library/`. All props and patterns are documented in this build guide and the SKILL.md. Reading source files wastes time and produces no new information.
13
+ 2. **Do NOT load unnecessary skills.** You only need `command-center-builder`. Do NOT load `outer-app`, `component-library`, `command-center-project`, `agentforce-test`, or `agentforce-observability` they add latency and aren't needed.
14
14
 
15
- 3. **Do NOT load unnecessary skills.** Phase 1 needs only `command-center-builder`. Do NOT load `outer-app`, `component-library`, `command-center-project`, `agentforce-test`, or `agentforce-observability` they add latency and aren't needed.
15
+ 3. **Do NOT run `npm run build` or `npm run dev` during the build.** Vite handles JSX/TSX regardless of TypeScript errors. Pre-existing TS7016 errors (from untyped .jsx library files) are normal and expected.
16
16
 
17
- 4. **Do NOT run `npm run build` or `npm run dev` during the build.** Vite handles JSX/TSX regardless of TypeScript errors. Pre-existing TS7016 errors (from untyped .jsx library files) are normal and expected.
17
+ 4. **STOP and ASK before creating Salesforce metadata.** Custom fields, platform events, and Apex classes should be suggested to the user first. Never create them proactively.
18
18
 
19
- 5. **STOP and ASK before creating Salesforce metadata.** Custom fields, platform events, and Apex classes should be suggested to the user first. Never create them proactively.
20
-
21
- 6. **Do NOT create extra files not listed in the build guide.** Each phase lists exactly which files to create or edit. Do NOT create wrapper hooks, adapter files, .env files, or any file not explicitly listed.
19
+ 5. **Do NOT create extra files not listed in this guide.** No wrapper hooks, adapter files, .env files, or any file not explicitly listed.
22
20
 
23
21
  ---
24
22
 
25
- ## Phase 1 — Build the Dashboard (sample data only)
26
-
27
- ### FORBIDDEN in Phase 1
28
- - ❌ ChatBar or any Agentforce/AI integration (that's Phase 3)
29
- - ❌ Live data hooks or live data wiring (that's Phase 2)
30
- - ❌ Salesforce metadata — custom fields, platform events, Apex
31
- - ❌ Reading library component source files
32
- - ❌ Loading skills other than `command-center-builder`
23
+ ## Step 1 — Create the Dashboard
33
24
 
34
- ### Files to read
25
+ ### Files to read first
35
26
  1. Your PRD or requirements document — the full spec
36
27
  2. Your sample data file — to understand available data shapes
37
28
 
38
29
  ### Files to create/edit (in order)
39
30
  ```
40
- 1. WRITE src/pages/YourDashboard.tsx ← full dashboard, one pass
31
+ 1. WRITE src/pages/YourDashboard.tsx ← full dashboard, one pass
41
32
  2. EDIT src/components/workspace/CommandCenter.tsx ← import YourDashboard
42
- 3. WRITE src/pages/Home.tsx REPLACE with CommandCenter wrapper (3 lines)
43
- 4. EDIT src/routes.tsx ← change index route label to "Dashboard"
33
+ 3. WRITE src/pages/Home.tsx rewrite to render CommandCenter
34
+ 4. EDIT src/routes.tsx ← change index route label to "Dashboard"
44
35
  ```
45
36
 
46
37
  ### What to build
47
38
  - Choose your layout pattern (visualization-hero with full-width map, or grid-first)
48
39
  - Pick components from the library for each section (MetricCard, ChartCard, ListCard, TableCard, etc.)
49
- - Wire all data via `useDataSource({ sample: SAMPLE_DATA, live: [] })` — leave `live:` empty for now
40
+ - Wire all data via `useDataSource({ sample: SAMPLE_DATA, live: [] })` — leave `live:` empty initially
50
41
  - Add dark mode support to any custom markup
51
42
 
52
43
  ### Wiring
53
44
  - `CommandCenter.tsx` → import your dashboard instead of BlankDashboard
54
- - `Home.tsx` → **REPLACE** the Account Search page with a 3-line wrapper that renders `<CommandCenter />`
55
- - `routes.tsx` → change the index route handle to `{ showInNavigation: false, showNavBar: false, label: "Dashboard" }`
45
+ - `Home.tsx` → rewrite to render `<CommandCenter />` (it ships as an Account Search page by default)
46
+ - `routes.tsx` → change the index route label to "Dashboard"
56
47
 
57
48
  ### Write the dashboard in one pass
58
49
  Plan the entire file before writing. Do NOT write a partial dashboard and iterate — write the complete component with all imports, data, and JSX in a single Write call.
59
50
 
60
51
  ---
61
52
 
62
- ## Phase 2 — Connect to Live Data
53
+ ## Step 2 — Connect to Live Data (when ready)
63
54
 
64
- ### FORBIDDEN in Phase 2
65
- - ❌ Rewriting the dashboard file from scratch — make targeted surgical edits only
66
- - ❌ Reading library source files (`useDataSource.jsx`, `DataModeProvider.jsx`, etc.)
67
- - ❌ ChatBar or AI/agent integration (that's Phase 3)
68
- - ❌ Creating extra files not listed below
69
- - ❌ Running `npm run build` between edits
55
+ When you're ready to wire live Salesforce data, make **targeted surgical edits** to the existing dashboard file. Do NOT rewrite the whole file.
70
56
 
71
- ### The point of Phase 2
72
- The dashboard switches from sample data to live data from your Salesforce org. The `useDataSource` hook handles the toggle — you just need to fill in the `live:` props and flip the backend switch.
73
-
74
- ### How the switch works
57
+ ### How the data switch works
75
58
  `ENABLE_SAMPLE_DATA_CACHE` in `src/lib/dataStrategy.ts` controls the mode. `CommandCenter.tsx` reads this flag and passes `initialMode` to `DataModeProvider`. When `true` (default) → sample mode. When `false` → live mode, every `useDataSource` returns its `live` prop.
76
59
 
77
- ### Edits to make (in order)
60
+ ### Edits to make
78
61
 
79
62
  **Edit 1 — Add live data import** at the top of your dashboard file:
80
63
  ```tsx
@@ -88,9 +71,9 @@ const live = useLiveData();
88
71
 
89
72
  **Edit 3 — Update every `useDataSource` call** to pass live data:
90
73
  ```tsx
91
- // Before (Phase 1):
74
+ // Before:
92
75
  const items = useDataSource({ sample: SAMPLE_ITEMS, live: [] });
93
- // After (Phase 2 — just fill in the live: prop):
76
+ // After:
94
77
  const items = useDataSource({ sample: SAMPLE_ITEMS, live: live.items });
95
78
  ```
96
79
  Do this for ALL `useDataSource` calls in the dashboard.
@@ -102,30 +85,15 @@ Do this for ALL `useDataSource` calls in the dashboard.
102
85
  export const ENABLE_SAMPLE_DATA_CACHE = false;
103
86
  ```
104
87
 
105
- > ⚠️ **Do NOT skip Edit 5.** This is the most critical step. Without it, the data never switches. The dashboard will still show sample data no matter what you wired in Edits 1-4.
106
-
107
- That's targeted surgical edits, not a full rewrite.
88
+ > Do NOT skip Edit 5. Without it, the data never switches.
108
89
 
109
90
  ---
110
91
 
111
- ## Phase 3 — Add AI Assistant
92
+ ## Step 3 — Add an AI Assistant (when ready)
112
93
 
113
- ### FORBIDDEN in Phase 3
114
- - ❌ `AgentforceConversationClient` — do NOT use the iframe widget. Use the Agent REST API via a dedicated hook.
115
- - ❌ Wrapper hooks or adapter files — use the agent hook directly.
116
- - ❌ `.env` or `.env.local` files — config is hardcoded in `src/config/agentApi.ts`
117
- - ❌ Rewriting the dashboard file from scratch
118
- - ❌ Reading library component source files (including `ChatBar.jsx`)
94
+ When you're ready to add a chat assistant, make **targeted surgical edits** to the existing dashboard file.
119
95
 
120
- ### Pre-installed files (already in the project — do NOT recreate)
121
- If the agent hook and config files are already installed by the package, they already exist:
122
- - `src/hooks/useAgentChat.ts` — the Agent API hook
123
- - `src/config/agentApi.ts` — endpoint config
124
- - `vite.config.ts` — already has proxy rules for agent API
125
-
126
- **Do NOT create, rewrite, or modify these files.** Just import and use them.
127
-
128
- ### Edits to make (in order)
96
+ ### Edits to make
129
97
 
130
98
  **Edit 1 — Add imports** at the top of the dashboard file:
131
99
  ```tsx
@@ -153,7 +121,7 @@ const handleChat = (text: string) => {
153
121
  };
154
122
  ```
155
123
 
156
- **Edit 4 — Insert ChatBar JSX** between the visualization area and data panels:
124
+ **Edit 4 — Insert ChatBar JSX** in a suitable location:
157
125
  ```tsx
158
126
  <div className="px-4 pt-4">
159
127
  <ChatBar
@@ -165,27 +133,14 @@ const handleChat = (text: string) => {
165
133
  </div>
166
134
  ```
167
135
 
168
- That's 4 targeted edits. Nothing else.
169
-
170
136
  ### After adding AI — suggest Salesforce metadata
171
137
 
172
138
  If your use case benefits from platform events or Apex services, suggest them to the user and wait for confirmation before creating.
173
139
 
174
140
  ---
175
141
 
176
- ## Phase Summary
177
-
178
- | | Phase 1 | Phase 2 | Phase 3 |
179
- |---|---------|---------|---------|
180
- | Dashboard layout & panels | Write new file | — | — |
181
- | Sample data | Wire (`live: []`) | — | — |
182
- | Live data wiring | Skip | Surgical edits | — |
183
- | Flip `dataStrategy.ts` to `false` | Skip | **Don't skip** | — |
184
- | ChatBar / AI assistant | Skip | Skip | Surgical edits |
185
- | Agent hook | Skip | Skip | Import (pre-installed) |
186
- | Wrapper hooks / adapters | **NO — never** | **NO — never** | **NO — never** |
187
- | Salesforce metadata | Skip | Suggest → wait | Suggest → wait |
142
+ ## Data mode control
188
143
 
189
- **Data mode control:** `ENABLE_SAMPLE_DATA_CACHE` in `src/lib/dataStrategy.ts` is the backend switch. Phase 1 leaves it `true`. Phase 2 flips it to `false`.
144
+ `ENABLE_SAMPLE_DATA_CACHE` in `src/lib/dataStrategy.ts` is the backend switch. Default is `true` (sample mode). Set to `false` to switch to live data.
190
145
 
191
- **Agent communication:** The agent hook handles OAuth → session → messages → cleanup via the Agent REST API. Config is in `src/config/agentApi.ts`. Vite proxy rules forward requests. These files are pre-installed — do NOT recreate them.
146
+ **Agent communication:** If using an Agentforce hook, the hook handles OAuth → session → messages → cleanup via the Agent REST API. Config is in `src/config/agentApi.ts`. These files may already be pre-installed — check before creating them.
@@ -1,22 +1,14 @@
1
1
  # Efficient Build Process
2
2
 
3
- ## The #1 Rule: Phase 1 Writes, Phases 2-3 Edit
4
-
5
- - **Phase 1** creates your dashboard file from scratch (Write). Also writes CommandCenter.tsx, Home.tsx, edits routes.tsx.
6
- - **Phase 2** makes targeted surgical edits to wire live data. Never rewrites the file.
7
- - **Phase 3** makes targeted surgical edits to add AI chat. Never rewrites the file.
8
-
9
- Rewriting a 400+ line file from scratch takes 60 seconds, risks losing prior work, and can introduce regressions. Surgical edits take seconds each and preserve everything.
10
-
11
3
  ## Speed Rules
12
4
 
13
5
  1. **Load only `command-center-builder` skill before building.** Do NOT load component-library, command-center-project, outer-app, agentforce-test, or agentforce-observability — they add latency and aren't needed.
14
6
 
15
7
  2. **Do NOT read component source files.** This means ALL files inside `src/components/library/` are off-limits: GeoMap.jsx, BaseCard.jsx, Avatar.jsx, ChatBar.jsx, D3Chart.jsx, useDataSource.jsx, DataModeProvider.jsx, DataModeToggle.jsx, etc. Props/patterns are documented in the build guide.
16
8
 
17
- 3. **Phase 1: Write the dashboard in one pass.** Plan the full file before writing. Write the complete component with all imports, data, and JSX in a single Write call.
9
+ 3. **Write the dashboard in one pass.** Plan the full file before writing. Write the complete component with all imports, data, and JSX in a single Write call.
18
10
 
19
- 4. **Phases 2-3: Make the edits listed in the build guide.** Targeted surgical edits only. No full rewrites.
11
+ 4. **When editing an existing dashboard, make targeted surgical edits.** Never rewrite a 400+ line file from scratch. Rewriting takes 60s, risks losing prior work, and introduces regressions. Surgical edits take seconds.
20
12
 
21
13
  5. **Do NOT run `npm run build`, `npm run dev`, `tsc`, or `npm run validate:dashboard` during the build.** Vite handles it. TS7016 errors are pre-existing and expected.
22
14
 
@@ -24,51 +16,23 @@ Rewriting a 400+ line file from scratch takes 60 seconds, risks losing prior wor
24
16
 
25
17
  7. **Do NOT create extra files.** No wrapper hooks, no .env files, no adapter files. The build guide lists every file to create or edit.
26
18
 
27
- ## Phase 1 File Write Order
28
-
29
- ```
30
- 1. WRITE src/pages/YourDashboard.tsx ← full dashboard, one pass
31
- 2. EDIT src/components/workspace/CommandCenter.tsx ← swap BlankDashboard → YourDashboard
32
- 3. WRITE src/pages/Home.tsx ← 3-line CommandCenter wrapper
33
- 4. EDIT src/routes.tsx ← change index route label to "Dashboard"
34
- ```
35
-
36
- ## Phase 2 Edit Order
19
+ ## File Write Order
37
20
 
38
- ```
39
- 1. Add live data import to your dashboard file
40
- 2. Add live data hook call inside the component
41
- 3. Update each useDataSource({ sample, live: [] }) → live: live.xxx
42
- 4. Update any derived values to react to active data
43
- 5. Flip ENABLE_SAMPLE_DATA_CACHE to false in src/lib/dataStrategy.ts
44
- → STOP — suggest metadata if applicable, wait for confirmation
45
- ```
46
-
47
- ⚠️ **The final edit (flipping the flag) is the most critical.** Without it, the data never switches.
48
-
49
- ## Phase 3 Edit Order
21
+ When building a new dashboard:
50
22
 
51
23
  ```
52
- 1. Add ChatBar + agent hook imports to your dashboard file
53
- 2. Add chat suggestions constant at module scope
54
- 3. Add agent hook call + handleChat inside component
55
- 4. Insert <ChatBar /> JSX between visualization and data panels
56
- → STOP — suggest metadata if applicable, wait for confirmation
24
+ 1. WRITE src/pages/YourDashboard.tsx ← full dashboard, one pass
25
+ 2. EDIT src/components/workspace/CommandCenter.tsx ← swap BlankDashboard YourDashboard
26
+ 3. WRITE src/pages/Home.tsx ← rewrite to render CommandCenter
27
+ 4. EDIT src/routes.tsx ← change index route label to "Dashboard"
57
28
  ```
58
29
 
59
- **Agent hook and config files are pre-installed.** Do NOT recreate them. Just import and use.
60
-
61
- **NEVER use AgentforceConversationClient.** Use the Agent REST API via the dedicated hook.
62
-
63
- **NEVER create wrapper hooks.** Use the agent hook directly.
64
-
65
30
  ## Common Time Wasters
66
31
 
67
32
  | Waste | Fix |
68
33
  |-------|-----|
69
34
  | Loading 4-5 skills before starting | Load only command-center-builder |
70
35
  | Reading GeoMap.jsx, ChatBar.jsx, useDataSource.js source | Props are in the build guide — trust the docs |
71
- | Rewriting the dashboard in Phase 2/3 | Make targeted surgical edits |
36
+ | Rewriting the entire dashboard file to make a small change | Make targeted surgical edits |
72
37
  | Running `npm run build` between edits | Don't — Vite handles it |
73
38
  | Creating wrapper hooks or adapter files | **NEVER** — use hooks directly |
74
- | Creating .env or .env.local files | **NEVER** — config is hardcoded in src/config/agentApi.ts |
@@ -12,7 +12,7 @@ description: >-
12
12
 
13
13
  ## How to Build Efficiently
14
14
 
15
- **Read these two files, then start building. Do not load other skills or explore component source files.**
15
+ **Read these two things, then start building. Do not load other skills or explore component source files.**
16
16
 
17
17
  1. **`.a4drules/skills/command-center-builder/SKILL.md`** — has the wiring steps, conventions, component APIs, and everything you need
18
18
  2. **Your PRD / spec document** — the product spec (layout, data model, brand tokens)
@@ -22,14 +22,10 @@ That's it. The builder skill already contains the component API reference inline
22
22
  ## Build Order (write files in this exact order)
23
23
 
24
24
  1. **Read** the PRD and builder skill
25
- 2. **Write** `src/pages/MyDashboard.tsx` (or your dashboard name) — the full dashboard in one pass
26
- 3. **Write** `src/components/workspace/CommandCenter.tsx` — import your dashboard
27
- 4. **Write** `src/pages/Home.tsx` — REPLACE with CommandCenter (it ships as Account Search):
28
- ```tsx
29
- import CommandCenter from "@/components/workspace/CommandCenter";
30
- export default function HomePage() { return <CommandCenter />; }
31
- ```
32
- 5. **Edit** `src/routes.tsx` — set Home as index route with label "Dashboard"
25
+ 2. **Write** `src/pages/YourDashboard.tsx` — the full dashboard in one pass
26
+ 3. **Edit** `src/components/workspace/CommandCenter.tsx` — import your dashboard
27
+ 4. **Write** `src/pages/Home.tsx` — rewrite to render CommandCenter (it ships as Account Search)
28
+ 5. **Edit** `src/routes.tsx` — change index route label to "Dashboard"
33
29
  6. **Done** — do NOT run `npm run build`, `npm run dev`, or `tsc`
34
30
 
35
31
  ## Other Skills (load only when needed later)
@@ -138,7 +138,7 @@ Status icons: `"complete"` → green check, `"working"` → spinning (indigo), `
138
138
 
139
139
  ```jsx
140
140
  <SectionCard
141
- title="Eva · Agentforce Agent"
141
+ title="AI Assistant"
142
142
  description="Powered by Agentforce"
143
143
  label="LIVE" // small pill badge
144
144
  variant="default" // "default" | "primary" | "secondary" | "accent"
@@ -27,14 +27,13 @@ npm run validate:dashboard
27
27
  - After updating styles
28
28
  - After changing imports
29
29
  - Before committing code
30
- - Before reporting a phase/task as complete
30
+ - Before reporting a task as complete
31
31
 
32
32
  **Frequency:** If in doubt, run it. It takes <1 second.
33
33
 
34
34
  ## Zero Errors Required
35
35
 
36
36
  The validator MUST show zero errors before:
37
- - Proceeding to the next build phase
38
37
  - Reporting a task as complete
39
38
  - Committing code
40
39
  - Deploying
@@ -43,7 +42,6 @@ The validator MUST show zero errors before:
43
42
  - Dismiss errors as "justified" or "acceptable"
44
43
  - Skip validation "because you're sure it's correct"
45
44
  - Report work as complete with validator errors
46
- - Proceed to the next phase with errors
47
45
 
48
46
  **Every error has a fix.** The fix is usually switching to a library component.
49
47
 
@@ -174,12 +172,9 @@ Dashboard is ready
174
172
 
175
173
  Any other output means there are errors that MUST be fixed.
176
174
 
177
- ## Integration with Build Phases
175
+ ## When to Validate
178
176
 
179
- Run the validator at the end of each build phase before proceeding to the next:
180
-
181
- - **End of each phase:** Run validator, fix all errors → proceed to next phase
182
- - **Final phase:** Run validator, fix all errors → DONE
177
+ Run the validator after completing your dashboard changes. Fix all errors before reporting the task as done.
183
178
 
184
179
  ## Do Not Run These Instead
185
180
 
package/CHANGELOG.md CHANGED
@@ -5,6 +5,17 @@ All notable changes to this project will be documented in this file.
5
5
  The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
6
6
  and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
7
7
 
8
+ ## [2.2.0] - 2026-04-04
9
+
10
+ ### Added
11
+ - **Partner Hub PRD** — `brands/engine/PARTNER_HUB_PRD.md` with full product spec for hotel partner operations dashboard including data model, attrition penalty domain, Agentforce agent config, and a new Section 10 with complete dashboard layout specification (grid wireframe, 5 KPI definitions, 8 panel definitions with component mappings).
12
+ - **Partner Hub sample data** — `brands/engine/partner-hub-sample-data.js` with 12 hotel partners, 12 contracts, 17 invoices, 6 attrition penalties (including hero ATR-00001), 7 dispute cases, 8 activity items, pre-computed METRICS, and chart-ready arrays (tier breakdown, revenue by partner, invoice trend).
13
+ - **`npm run setup`** — manual re-run of postinstall for projects where the postinstall hook was skipped. Added to consuming projects automatically.
14
+
15
+ ### Changed
16
+ - **apply-brand.mjs** — now copies `partner-hub-sample-data.js` to `src/data/` and auto-discovers all PRD files (matching `*_PRD.md` or `*-prd.md`) in the brand directory.
17
+ - **.a4drules** — removed all phase-based workflow language (Phase 1/2/3) from getting-started.md, improved-build-process.md, SKILL.md, validation-requirements.md, command-center-guide, command-center-dashboard-rule.md, and pre-code-checklist.md. Build guide is now a simple step-by-step (Step 1: build, Step 2: wire live data, Step 3: add AI). Restored Home.tsx rewrite as part of the wiring steps. Replaced "Eva" example with generic "AI Assistant" in card-components.md.
18
+
8
19
  ## [2.1.0] - 2026-04-04
9
20
 
10
21
  ### Added