# AI Agent Dashboard – Design Spec for Pencil (.pen)

This document describes the design structure for `ai_agent_dashboard.pen`. Use these `batch_design` operations when the Pencil MCP server is connected.

## Canvas Specs
- **Size**: 393 × 852 (iPhone)
- **Background**: `#0F172A` (deep slate – evaluation/analytics look)
- **Font**: San Francisco / system-ui

## batch_design Operations

Run these operations via `batch_design` after opening `ai_agent_dashboard.pen`:

```
root=I("", {width: 393, height: 852, backgroundColor: "#0F172A"})
blob1=I("root", {type: "ellipse", width: 280, height: 280, x: -60, y: -80, fill: "linear-gradient(135deg, #7F00FF 0%, #00C6FF 100%)", opacity: 0.5, filter: "blur(80px)"})
blob2=I("root", {type: "ellipse", width: 200, height: 200, x: -50, y: 552, fill: "linear-gradient(225deg, #00C6FF 0%, #7F00FF 100%)", opacity: 0.5, filter: "blur(80px)"})
blob3=I("root", {type: "ellipse", width: 150, height: 150, x: 333, y: 400, fill: "linear-gradient(180deg, #7F00FF 0%, #00C6FF 50%)", opacity: 0.5, filter: "blur(80px)"})
dynamicIsland=I("root", {type: "rect", width: 126, height: 37, x: 133.5, y: 12, fill: "#000000", borderRadius: 20})
header=I("root", {type: "frame", layout: "row", y: 60, padding: 20})
title=I("header", {type: "text", content: "AI Insight", fontSize: 24, fontWeight: 600, color: "#FFFFFF"})
avatar=I("header", {type: "ellipse", width: 40, height: 40, fill: "linear-gradient(135deg, #7F00FF 0%, #00C6FF 100%)", border: "2px solid rgba(255,255,255,0.3)"})
heroCard=I("root", {type: "frame", y: 164, x: 20, width: 353, padding: 24, background: "rgba(30,41,59,0.7)", backdropFilter: "blur(20px)", border: "1px solid rgba(100,116,139,0.4)", borderRadius: 24})
heroLabel=I("heroCard", {type: "text", content: "Total Followers", fontSize: 14, color: "rgba(226,232,240,0.85)"})
heroValue=I("heroCard", {type: "text", content: "128.5K", fontSize: 36, fontWeight: 700, color: "#f8fafc"})
heroBadge=I("heroCard", {type: "frame", content: "+1.2K", background: "rgba(34,197,94,0.3)", color: "#22c55e", padding: "6px 12px", borderRadius: 12})
statsGrid=I("root", {type: "frame", layout: "row", y: 334, x: 20, gap: 12})
statPlays=I("statsGrid", {type: "frame", flex: 1, padding: 16, background: "rgba(30,41,59,0.7)", backdropFilter: "blur(20px)", border: "1px solid rgba(100,116,139,0.4)", borderRadius: 24})
statLikes=I("statsGrid", {type: "frame", flex: 1, padding: 16, background: "rgba(30,41,59,0.7)", backdropFilter: "blur(20px)", border: "1px solid rgba(100,116,139,0.4)", borderRadius: 24})
statShares=I("statsGrid", {type: "frame", flex: 1, padding: 16, background: "rgba(30,41,59,0.7)", backdropFilter: "blur(20px)", border: "1px solid rgba(100,116,139,0.4)", borderRadius: 24})
trendCard=I("root", {type: "frame", y: 434, x: 20, width: 353, padding: 20, background: "rgba(30,41,59,0.7)", backdropFilter: "blur(20px)", border: "1px solid rgba(100,116,139,0.4)", borderRadius: 24})
trendTitle=I("trendCard", {type: "text", content: "Fan Trend (7d)", fontSize: 16, fontWeight: 600, color: "#f8fafc"})
chartBars=I("trendCard", {type: "frame", layout: "row", gap: 8, height: 80})
genReportBtn=I("root", {type: "frame", y: 100, x: 20, 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"})
videoSection=I("root", {type: "frame", y: 574, x: 20, width: 353})
videoTitle=I("videoSection", {type: "text", content: "Recent Videos", fontSize: 18, fontWeight: 600, marginBottom: 12, color: "#f8fafc"})
tabBar=I("root", {type: "frame", position: "fixed", bottom: 0, width: 393, height: 83, layout: "row", background: "rgba(15,23,42,0.9)", backdropFilter: "blur(20px)", borderTop: "1px solid rgba(100,116,139,0.3)"})
```

## Style Reference
- **Glassmorphism**: `background: rgba(30,41,59,0.7)`, `backdrop-filter: blur(20px)`, `border: 1px solid rgba(100,116,139,0.4)`
- **Corners**: `borderRadius: 24` (equivalent to rounded-3xl)
- **Text**: Primary `#f8fafc`, secondary `rgba(226,232,240,0.85)` for accessible contrast on slate

## HTML Prototype
An HTML prototype is available at `designs/ai_agent_dashboard.html` – open it in a browser to preview the design.