# Apply UI Optimizations – Step-by-Step Script

Use this when the **Pencil MCP server** is connected and `ai_agent_dashboard.pen` is open.

---

## Step 1: Get Current Node IDs

Run:
```
get_editor_state
```
(with `include_schema: false` if supported)

Or run:
```
batch_get
```
with `filePath: "designs/ai_agent_dashboard.pen"` and no `nodeIds`/`patterns` to list top-level children.

**From the response, note the IDs for:**
- Root frame (e.g. `bi8Au`)
- Hero card
- Stats grid + statPlays, statLikes, statShares
- Trend card
- Video section
- List items (if any)

---

## Step 2: batch_design – All Optimizations

Replace `ROOT_ID`, `HERO_ID`, `STATS_ID`, `STAT_PLAYS_ID`, `STAT_LIKES_ID`, `STAT_SHARES_ID`, `TREND_ID`, `VIDEO_ID` with the actual IDs from Step 1.

**batch_design operations** (copy-paste and replace IDs):

```
U("ROOT_ID", {backgroundColor: "#0F172A"})
U("HERO_ID", {y: 164, background: "rgba(30, 41, 59, 0.7)", backdropFilter: "blur(20px)", border: "1px solid rgba(100, 116, 139, 0.4)", boxShadow: "inset 0 1px 0 0 rgba(255,255,255,0.05)"})
U("STATS_ID", {y: 334})
U("STAT_PLAYS_ID", {background: "rgba(30, 41, 59, 0.7)", backdropFilter: "blur(20px)", border: "1px solid rgba(100, 116, 139, 0.4)"})
U("STAT_LIKES_ID", {background: "rgba(30, 41, 59, 0.7)", backdropFilter: "blur(20px)", border: "1px solid rgba(100, 116, 139, 0.4)"})
U("STAT_SHARES_ID", {background: "rgba(30, 41, 59, 0.7)", backdropFilter: "blur(20px)", border: "1px solid rgba(100, 116, 139, 0.4)"})
U("TREND_ID", {y: 434, x: 20, width: 353, background: "rgba(30, 41, 59, 0.7)", backdropFilter: "blur(20px)", border: "1px solid rgba(100, 116, 139, 0.4)"})
U("VIDEO_ID", {y: 574, x: 20, width: 353})
genReportBtn=I("ROOT_ID", {type: "frame", x: 20, y: 110, width: 353, height: 48, layout: "row", justifyContent: "center", alignItems: "center", fill: "linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%)", borderRadius: 16, name: "Generate Report"})
genReportLabel=I("genReportBtn", {type: "text", content: "Generate Report", fontSize: 16, fontWeight: 600, color: "#FFFFFF"})
```

---

## Step 3: If Root ID is `bi8Au`

Pre-filled operations for root `bi8Au` (adjust other IDs as needed):

```
U("bi8Au", {backgroundColor: "#0F172A"})
U("HERO_ID", {y: 164, background: "rgba(30, 41, 59, 0.7)", backdropFilter: "blur(20px)", border: "1px solid rgba(100, 116, 139, 0.4)", boxShadow: "inset 0 1px 0 0 rgba(255,255,255,0.05)"})
U("STATS_ID", {y: 334})
U("STAT_PLAYS_ID", {background: "rgba(30, 41, 59, 0.7)", backdropFilter: "blur(20px)", border: "1px solid rgba(100, 116, 139, 0.4)"})
U("STAT_LIKES_ID", {background: "rgba(30, 41, 59, 0.7)", backdropFilter: "blur(20px)", border: "1px solid rgba(100, 116, 139, 0.4)"})
U("STAT_SHARES_ID", {background: "rgba(30, 41, 59, 0.7)", backdropFilter: "blur(20px)", border: "1px solid rgba(100, 116, 139, 0.4)"})
U("TREND_ID", {y: 434, x: 20, width: 353, background: "rgba(30, 41, 59, 0.7)", backdropFilter: "blur(20px)", border: "1px solid rgba(100, 116, 139, 0.4)"})
U("VIDEO_ID", {y: 574, x: 20, width: 353})
genReportBtn=I("bi8Au", {type: "frame", x: 20, y: 110, width: 353, height: 48, layout: "row", justifyContent: "center", alignItems: "center", fill: "linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%)", borderRadius: 16, name: "Generate Report"})
genReportLabel=I("genReportBtn", {type: "text", content: "Generate Report", fontSize: 16, fontWeight: 600, color: "#FFFFFF"})
```

---

## Summary of Changes

| Element | Update |
|---------|--------|
| Root frame | Fill `#0F172A` (Deep Slate) |
| Glass cards (Hero, Stats, Trend) | Fill `rgba(30, 41, 59, 0.7)`, stroke `rgba(100, 116, 139, 0.4)` |
| New CTA | "Generate Report" button at y: 110 below header |
| Layout | Hero, Stats, Trend, Video shifted down to make room |