# AI Agent Dashboard – Pencil Optimization Operations

Apply these operations 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` to get the active document and node structure. 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 node IDs for:
- `root` (document root)
- `heroCard`, `statsGrid`, `statPlays`, `statLikes`, `statShares`
- `trendCard`, `videoSection`, `tabBar`

## Step 2: batch_design – Apply Optimizations

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

```
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, background: "rgba(30, 41, 59, 0.7)", backdropFilter: "blur(20px)", border: "1px solid rgba(100, 116, 139, 0.4)", x: 20, width: 353})
U("VIDEO_ID", {y: 574, x: 20, width: 353})
genReportBtn=I("ROOT_ID", {type: "frame", x: 20, y: 100, 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: Add Generate Report Button (Alternative – Fixed Bottom Right)

If you prefer a floating CTA at bottom right:

```
genReportBtn=I("ROOT_ID", {type: "frame", position: "fixed", x: 293, y: 752, width: 80, height: 48, layout: "row", justifyContent: "center", alignItems: "center", fill: "linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%)", borderRadius: 24, shadow: "0 4px 12px rgba(99, 102, 241, 0.4)"})
genReportLabel=I("genReportBtn", {type: "text", content: "Generate Report", fontSize: 14, fontWeight: 600, color: "#FFFFFF"})
```

## Style Updates Summary

| Element      | Before                          | After                                              |
|-------------|----------------------------------|----------------------------------------------------|
| Background  | `#050510`                        | `#0F172A` (deep slate)                             |
| Glass cards | `rgba(255,255,255,0.1)`          | `rgba(30, 41, 59, 0.7)`                            |
| Card border | `rgba(255,255,255,0.2)`          | `rgba(100, 116, 139, 0.4)`                         |
| Primary CTA | —                                | Gradient button (indigo → violet)                  |