# M2 — Dynamic Workspace + Agent Training

**Priority:** P1  
**Target date:** ~April 10, 2026  
**Duration:** ~9 days post-M1  
**Source:** [MOM 20260326](../phase-2/conversations/20260326-mom.md#act-iii--m1--m2--m3-milestones-locked-visualization-framework-priorities-0032--0057)

---

## Objective

Deliver a **rudimentary experience center** demonstrating the AI layer dynamically driving the UI with rich visualization patterns. Enable data source agents to train themselves on the fly without developer intervention. Prove the concept of AI-controlled layout changes, even without real-time data refresh.

---

## What Ships

### Functional Deliverables

- **AI-driven UI dynamics:** UI layout changes based on context, not hardcoded routes
- **Self-describing visualization patterns:** Three.js and D3.js widgets with metadata
- **Agent training on the fly:** Data source agents train themselves without code deployment
- **Simulation mode:** Static snapshots demonstrate UI layout changes (no real-time refresh required)

### Key Innovation

**The critical insight for M2:**  
Real-time data refresh is **not required** to demonstrate AI-driven UI. By linking and unlinking pre-prepared static snapshots, we can show the AI layer changing layouts, selecting visualizations, and adapting the interface — the core value proposition of the dynamic workspace.

> _"Even without real-time data refresh, this can be simulated by linking and unlinking pre-prepared static snapshots — the point is to show the AI driving layout changes, not the freshness of data."_  
> — From MOM 20260326

This decouples M2 delivery from data pipeline completeness, allowing focus on the AI ↔ UI intelligence layer.

---

## Technical Components

### 1. Self-Describing UI Widget Framework

**Before M2:**

- [ ] Analyze Nihar's design patterns (Three.js, D3.js implementations)
- [ ] Establish metadata schema for widget self-description
- [ ] Create widget registry with capability descriptors

**Widget metadata structure (example):**

```json
{
  "widget_id": "trend-line-chart",
  "library": "d3js",
  "capabilities": ["time-series", "continuous-data", "drill-down"],
  "required_fields": ["timestamp", "value"],
  "optional_fields": ["category", "threshold"],
  "interaction_modes": ["hover", "zoom", "filter"]
}
```

**UI agent selection logic:**

1. Agent receives data + context
2. Analyzes data structure and user intent
3. Queries widget registry for compatible patterns
4. Selects best match based on data shape + context
5. Renders selected widget with data binding

**Critical requirement:**  
Widgets describe themselves via metadata; UI agent selects pattern based on context. Widgets don't need domain knowledge — they're domain-agnostic presentation layers.

---

### 2. Agent Training on the Fly

**Current state (M1):**

- Data source agents can be trained manually at developer level
- Training requires code deployment

**M2 target:**

- User (or system) can trigger agent training through UI
- Training updates agent knowledge without code changes
- Training persists across sessions
- Training can be scoped to specific data domains

**Deferred to M3:**

- Complex trainer-role features (arbback)
- Multi-user training orchestration
- Training conflict resolution

**Implementation approach:**

- Training instructions stored in orange box (PostgreSQL) — **requires orange box to be built post-M1**
- Agent reads updated instructions at runtime
- Training UI exposes: add examples, correct mistakes, define new entity types
- Feedback loop: user corrects → agent learns → validation → confirmation

---

### 3. Simulation Mode with Static Snapshots

**Purpose:**  
Demonstrate AI-driven UI layout changes without dependency on real-time data refresh pipeline.

**How it works:**

1. Pre-prepare 5-10 static data snapshots representing different business scenarios:
   - Normal operations
   - Bottleneck detected
   - Threshold exceeded
   - Multi-source synthesis
   - Time-series trending
2. UI agent receives context (e.g., "show production status")
3. Agent selects appropriate snapshot
4. Agent decides layout: widgets, positions, emphasis
5. UI renders dynamically based on agent decisions
6. User changes context → agent picks different snapshot + different layout

**Key demonstration:**

- Same data can be rendered differently based on context
- Different data triggers different visualization patterns
- AI controls what to show, how to show it, and where to place it
- User does NOT manually select widgets or layouts

---

## Pre-M2 Dependencies

### Access & Coordination

- [ ] Grant Yeshwanth access to UI pattern code repository (Nihar's team)
- [ ] Share UI generation prompts from Nihar's team with Yeshwanth
- [ ] Establish communication channel between UI team and backend team

### Technical Infrastructure

- [ ] Build orange box (PostgreSQL for prompts/instructions) — **M1 technical debt**
- [ ] Extend RT core agent to support training mode
- [ ] Create widget registry and metadata system
- [ ] Prepare static snapshot data sets

---

## Parallel Workstreams

### Workstream 1: Visualization Framework

**Owner:** Yeshwanth + UI team  
**Tasks:**

- [ ] Catalog all existing patterns from Nihar's team (Three.js, D3.js)
- [ ] Define metadata schema for each pattern
- [ ] Build widget registry and lookup API
- [ ] Implement UI agent selection logic
- [ ] Test pattern switching based on context changes

---

### Workstream 2: Agent Training Capability

**Owner:** Yeshwanth + backend team  
**Tasks:**

- [ ] Build orange box (PostgreSQL) for instruction storage
- [ ] Implement training UI components
- [ ] Create feedback loop: correction → learning → validation
- [ ] Test agent knowledge persistence across sessions
- [ ] Validate training without code deployment

---

### Workstream 3: Simulation & Demo

**Owner:** Cross-functional (Yeshwanth + product)  
**Tasks:**

- [ ] Prepare 5-10 static snapshot scenarios
- [ ] Document context → snapshot mapping logic
- [ ] Implement snapshot linking/unlinking mechanism
- [ ] Create demo script showing AI-driven layout changes
- [ ] Validate simulation feels realistic (not obviously static)

---

## Definition of Done

✅ **Functional:**

- [ ] UI layout changes dynamically based on context (not hardcoded routes)
- [ ] UI agent selects appropriate visualization pattern for data type
- [ ] Multiple patterns work: charts, tables, heat maps, trend lines
- [ ] Data source agent can be trained through UI without code deployment
- [ ] Static snapshots drive realistic AI-controlled layout demonstrations

✅ **Technical:**

- [ ] Widget registry operational with metadata for all patterns
- [ ] UI agent queries registry and selects patterns programmatically
- [ ] Orange box stores agent instructions and training updates
- [ ] Training persists across sessions
- [ ] Simulation mode switches snapshots and layouts seamlessly

✅ **Documentation:**

- [ ] Widget metadata schema documented
- [ ] UI agent selection logic documented
- [ ] Training workflow guide created
- [ ] Simulation mode architecture documented

---

## Success Criteria

**Demo scenario 1: AI-Driven Visualization Selection**

1. System receives query: _"Show me production trends for last quarter"_
2. UI agent:
   - Identifies time-series continuous data
   - Queries widget registry
   - Selects trend-line chart (d3js)
   - Renders with drill-down capability
3. User asks follow-up: _"Which day had the highest production?"_
4. UI agent:
   - Context changes to single-value highlight
   - Switches to bar chart with highlight
   - Repositions related widgets

**Demo scenario 2: Agent Training on the Fly**

1. User asks: _"What is the utilization rate for blast furnace 3?"_
2. Agent responds incorrectly or doesn't understand
3. User enters training mode:
   - Provides correct definition of "utilization rate"
   - Gives 2-3 examples with expected outputs
4. Agent confirms learning
5. User asks same question → correct response
6. User logs out and back in → agent remembers training

**Quality bar:**

- Visualization pattern selection feels intelligent (not random)
- Layout changes are smooth and purposeful
- Training updates persist without code deployment
- Simulation mode is indistinguishable from live data to casual observer

---

## Risks & Mitigations

| Risk                                 | Likelihood | Impact   | Mitigation                                               |
| ------------------------------------ | ---------- | -------- | -------------------------------------------------------- |
| Widget framework too complex         | Medium     | High     | Start with 3-5 patterns, prove concept, expand later     |
| Orange box not built in time         | Medium     | Critical | Prioritize immediately post-M1; M2 blocks on this        |
| UI agent selection logic flawed      | Medium     | Medium   | Manual override capability as fallback                   |
| Static snapshots feel obviously fake | Low        | Medium   | High-quality realistic scenarios; user narrative framing |
| Training UI/UX unclear               | Medium     | Medium   | User testing with internal team before demo              |

---

## Deferred to M3

- **Complex trainer-role features (arbback):** Multi-user training orchestration, conflict resolution
- **Real-time data refresh:** M2 uses static snapshots; M3 adds live data pipeline
- **Multi-source orchestration:** M2 focuses on single-source + UI intelligence

---

## Post-M2 Cleanup

Once M2 ships, prepare for M3:

1. Replace static snapshots with real-time data refresh pipeline
2. Extend UI agent to handle multi-source synthesis
3. Expand widget registry with advanced patterns
4. Implement trainer-role arbback features
5. Optimize UI agent selection algorithm based on M2 learnings

---

## Related Work

**Todos from MOM:**

- [ ] Analyze Nihar's design patterns and establish UI widget framework — Yeshwanth, before M2
- [ ] Deliver agent training on the fly capability — Yeshwanth, M2 sprint

**Related milestones:**

- [M1 — Reactive Copilot](M1-reactive-copilot.md) — Foundation for M2
- [M3 — Full Experience Center](M3-full-experience-center.md) — Completes with multi-source + real-time data

**Related docs:**

- [User Interaction Modes](user-interaction-modes.md) — Dynamic workspace as delivery surface
- [New Agent Guide](../phase-2/new-agent-guide.md) — Agent architecture context

---

**Last updated:** March 27, 2026