Planned Analytics Dashboard UI
Relevant source files
The following files were used as context for generating this wiki page:
The Planned Analytics Dashboard UI is a real-time visualization layer designed to surface insights from synthetic user testing and automated website optimization. It serves as the primary interface for businesses to input their Ideal Customer Profile (ICP), monitor live agent navigation, and review AI-generated suggestions to improve conversion rates. The dashboard integrates data from the interpretation, testing, and analysis phases of the SynthCrowd pipeline to provide a clear overview of website performance across diverse persona segments.
Sources: README.md:12-23, plan.md:14-23
Dashboard Architecture and Data Flow
The dashboard relies on a real-time data flow powered by Convex, which acts as the serverless backend for streaming agent events and test results. The frontend subscribes to Convex queries to update the UI as agents navigate the target site.
This diagram illustrates how the dashboard components interact with the Convex database to display real-time and historical test data.
Sources: README.md:154-162, plan.md:18-20, plan.md:46-48
Core UI Components
1. Conversational Input and Setup
The initial entry point for users is a chat-based interface. Users provide a website URL, a natural language description of their target customer, and a specific Call to Action (CTA) goal.
- Input Fields: Website URL, ICP Description, CTA Goal (e.g., "Complete a purchase").
- Logic: This data is sent to the
Interpreterto generate the center-pointPersonaConfig.
Sources: README.md:144-146, src/engine/interpreter.ts:5-46
2. Persona Profile Cards
Before running tests, the dashboard visualizes the generated synthetic population.
- Visuals: Individual cards for the center persona and sample variants.
- Controls: Sliders to adjust individual trait parameters and a variance toggle to control population diversity.
| Feature | Description |
|---|---|
| Trait Visualization | Displays 19 traits (age, tech literacy, etc.) per persona. |
| Population Spread | Shows the statistical distribution of the N personas. |
| Variance Control | User-adjustable slider to increase or decrease Gaussian distribution spread. |
Sources: README.md:147-149, src/test-validation.ts:101-115
3. Live Agent Analytics
Once a test run begins, the dashboard transitions into a monitoring mode.
- Real-time Navigation: Shows which pages agents are currently visiting.
- Event Log: Surfaces
confusion,frustration, andhesitationevents as they occur. - Conversion Counter: A live ticker showing the percentage of agents that have successfully reached the CTA goal.
Sources: README.md:150-153, src/test-demo-site.ts:107-111
4. Results and Friction Analysis
Upon completion, the dashboard aggregates step-by-step events into high-level metrics.
The report generator synthesizes raw event data into human-readable friction points.
Sources: README.md:154-159, src/engine/reportGenerator.ts:11-46
5. Suggestion and Optimization Cards
The most critical feature is the "Fix" loop, which provides actionable code modification suggestions.
- Suggestion Cards: Present specific changes (e.g., "Add copy detailing silver quality") with "Accept" or "Decline" actions.
- Optimization Trajectory: A visual graph or text summary showing conversion improvements across iterations (e.g., "40% → 58% → 78%").
Sources: README.md:160-162, plan.md:85-92, src/engine/optimizationLoop.ts:258-262
Data Structures for UI Rendering
The dashboard consumes specific data models defined in the backend to populate its views.
Run Results (Aggregated View)
Used to populate the main results screen and friction point lists.
| Field | Type | Description |
|---|---|---|
conversion_rate | number | Percentage of population that reached the goal. |
friction_points | array | List of description, page_url, and severity. |
recommendations | array | Specific, actionable UX improvement suggestions. |
Sources: src/engine/reportGenerator.ts:103-118
Per-Persona Narratives
Used to provide the "story" behind why individual users succeeded or failed.
| Field | Type | Description |
|---|---|---|
persona_index | number | Identifier for the specific persona in the run. |
outcome | string | "converted" or "abandoned". |
narrative | string | 2-3 sentence summary in the persona's voice. |
abandonment_point | string | The last URL visited before the user gave up. |
Sources: src/engine/reportGenerator.ts:22-31, src/test-full-pipeline.ts:41-48
Summary of Significant Implementation Files
src/engine/reportGenerator.ts: Core logic for synthesizing events into the JSON format required by the dashboard.src/engine/optimizationLoop.ts: Manages the iteration history and trajectory data displayed in the UI.plan.md: Outlines the planned Phase 2 (Live Dashboard) and Phase 4 (User Approval Gate) UI logic.src/test-demo-site.ts: Demonstrates how report data (friction points, recommendations, narratives) is handled in a real-world scenario.
Sources: src/engine/reportGenerator.ts:1, src/engine/optimizationLoop.ts:1, plan.md:1, src/test-demo-site.ts:1