docs/superpowers/plans/UI.md

Final UI Architecture (clean version) 🟦 LEFT PANEL (Navigation)

Campaign list:

📁 Campaigns

• Preschool Search
• Brand Campaign
• Local Ads

Click → updates state

🟨 RIGHT PANEL (Workspace) 🧱 A. Global Header (fixed) 🎯 Ads Dashboard Total Spend | Total Leads | Avg CPL | Active Campaigns 🧱 B. Campaign Context Banner (ONLY when selected) 📊 Campaign Snapshot Spend | Leads | CTR | CPL | Trend

If no campaign selected → hidden or replaced with placeholder

🧱 C. 6 AI INSIGHT CARDS (core system)

Layout:

Row 1: [Ads Analyst] [Budget Optimizer] [Keyword Intelligence]

Row 2: [Risk Detector] [Growth Finder] [Experiment Ideas] 🟩 BEFORE CAMPAIGN SELECTION

Right panel shows:

👉 Select a campaign to begin analysis

AND:

6 cards are visible BUT greyed out disabled state no click behavior 🟦 AFTER CAMPAIGN SELECTION banner appears cards activate clicking triggers expansion 🧠 CARD BEHAVIOR (important consistency rule)

Each card:

Idle Title only + 1-line hint Clicked Expands in place → loading → MiniCPM explanation → action buttons

No page change ever.

🎯 3. Final Simple Design Doc (you can implement directly) 🧩 Layout Structure

1. App Layout Left: Campaign Navigator (fixed width 25%) Right: Analysis Workspace (75%) 🧱 2. Right Panel Structure A. Global Metrics Header (always visible) Total Spend Total Leads Average CPL Active Campaigns B. Campaign Context Banner

Visible only when campaign selected:

Campaign name Spend CTR CPL Trend indicators

If no selection:

show placeholder message C. AI Insight Grid (2x3 layout)

Cards:

Ads Performance Analyst Budget Optimizer Keyword Intelligence Risk Detector Growth Opportunities Experiment Ideas 🎨 3. Visual States STATE 1: No campaign selected

Right panel:

message: “Select a campaign to begin analysis” 6 cards greyed out STATE 2: Campaign selected Context banner appears Cards activate (clickable) STATE 3: Card clicked

Inside same card:

loading spinner MiniCPM explanation recommendation

⚡ 4. Key UX Principles Context ≠ Action (banner vs cards) No navigation changes (single workspace) Progressive disclosure (click → expand) Grey-out inactive capability (not hide it)

┌──────────────────────────────────────────────────────────────┐ │ HEADER: Global KPIs (always visible) │ ├───────────────┬──────────────────────────────────────────────┤ │ LEFT PANEL │ RIGHT PANEL │ │ Campaign List │ Workspace │ │ │ │ │ │ [Campaign Context Banner] │ │ │ │ │ │ [6 AI Cards Grid (2x3)] │ └───────────────┴──────────────────────────────────────────────┘