Added UI design.md. Modified landing page

app.py

@@ -1,140 +1,163 @@
 import gradio as gr
 import os
-
-print("APP STARTED", flush=True)
+import spaces
 
 from app.db.repo import init_db
-from app.ui.dashboard import build_dashboard, get_dashboard_data
 from app.controller.campaign_controller import on_campaign_select
 from app.controller.session_loader import load_google_ads_data
 from app.ads1.ads_analyst import run_ads_analyst_card
 from app.ads1.budget_optimizer import run_budget_optimizer_card
-import spaces
-
-print("🔥 STEP 1: imports done", flush=True)
 
 
-@spaces.GPU(duration=120)
-def run_ads_card(state):
-    print("\n🔥 [run_ads_card] ENTERED", flush=True)
+# -----------------------------
+# INIT
+# -----------------------------
+def startup():
     try:
-        if not state:
-            print("❌ [run_ads_card] state is EMPTY", flush=True)
-            return "⚠️ Select a campaign first"
+        init_db()
+        print("✅ DB initialized successfully", flush=True)
+    except Exception as e:
+        print("⚠️ DB failed:", e, flush=True)
 
-        print("📦 [run_ads_card] state received", type(state), flush=True)
-        dfs = state.get("full_dfs")
-        campaign_name = state.get("campaign_name")
-        print("📊 [run_ads_card] extracted dfs:", type(dfs), flush=True)
 
-        if not dfs:
-            return "⚠️ No campaign data — select a campaign on the Dashboard tab first."
+# -----------------------------
+# DATA LOAD
+# -----------------------------
+def initial_data_load():
+    print("🔄 Loading app data...")
 
-        result = run_ads_analyst_card(dfs, campaign_name=campaign_name)
-        print("✅ [run_ads_card] returning result", flush=True)
-        return result
-    except Exception as e:
-        print("❌ [run_ads_card] ERROR:", repr(e), flush=True)
-        return f"⚠️ Analysis failed: {e}"
+    dfs = load_google_ads_data()
+
+    from app.ui.dashboard import get_dashboard_data
+    spend, leads, cpl, count, formatted_df = get_dashboard_data()
+
+    return dfs, formatted_df, spend, leads, cpl, count
+
+
+# -----------------------------
+# CAMPAIGN SELECT
+# -----------------------------
+def campaign_row_selected(df, full_state, evt: gr.SelectData):
+    row_index = evt.index[0]
+    campaign_name = df.iloc[row_index]["Campaign"]
+
+    campaign_state = on_campaign_select(full_state, campaign_name)
+
+    return campaign_state, f"📊 {campaign_name}"
 
 
+# -----------------------------
+# ADS ANALYST CARD WRAPPER
+# -----------------------------
 @spaces.GPU(duration=120)
-def run_budget_card(state):
-    print("\n🔥 [run_budget_card] ENTERED", flush=True)
+def run_ads_card(state):
+    print("\n🔥 [run_ads_card] ENTERED", flush=True)
+
     try:
         if not state:
-            print("❌ [run_budget_card] state is EMPTY", flush=True)
             return "⚠️ Select a campaign first"
 
         dfs = state.get("full_dfs")
         campaign_name = state.get("campaign_name")
-        if not dfs:
-            return "⚠️ No campaign data — select a campaign on the Dashboard tab first."
 
-        result = run_budget_optimizer_card(dfs, campaign_name=campaign_name)
-        print("✅ [run_budget_card] returning result", flush=True)
-        return result
-    except Exception as e:
-        print("❌ [run_budget_card] ERROR:", repr(e), flush=True)
-        return f"⚠️ Budget optimization failed: {e}"
+        if dfs is None:
+            return "⚠️ No campaign data available"
 
+        return run_ads_analyst_card(dfs, campaign_name=campaign_name)
 
-def startup():
-    try:
-        init_db()
-        print("✅ DB initialized successfully", flush=True)
     except Exception as e:
-        print("⚠️ DB failed:", e, flush=True)
+        print("❌ ERROR:", repr(e), flush=True)
+        return f"⚠️ Analysis failed: {e}"
 
 
-print("🔥 STEP 2: DB init done", flush=True)
+# -----------------------------
+# UI
+# -----------------------------
+with gr.Blocks() as demo:
 
-# UI Optimization: Fetch data AFTER UI elements are drawn
-def initial_data_load():
-    print("🔄 App loaded. Population of background states initiated...")
-    dfs = load_google_ads_data()
-    # Unpack dashboard metrics to fill the UI immediately
-    spend, leads, cpl, count, formatted_df = get_dashboard_data()
-    return dfs, formatted_df, spend, leads, cpl, count
+    # STATE
+    full_state = gr.State()
+    campaign_state = gr.State()
 
+    gr.Markdown("# 🎯 Ads Intelligence Workspace")
 
-def campaign_row_selected(df, full_state, evt: gr.SelectData):
-    row_index = evt.index[0]
-    campaign_name = df.iloc[row_index]["Campaign"]
-    campaign_state = on_campaign_select(full_state, campaign_name)
-    return campaign_state, f"## 📊 Selected Campaign: {campaign_name}"
+    # =========================
+    # MAIN LAYOUT
+    # =========================
+    with gr.Row():
 
+        # LEFT PANEL
+        with gr.Column(scale=1):
+            gr.Markdown("## 📁 Campaigns")
 
-print("🔥 STEP 3: building UI", flush=True)
+            campaign_table = gr.Dataframe(
+                label="Campaigns",
+                interactive=True
+            )
 
-with gr.Blocks() as demo:
-    # Initialize components empty; populated safely via demo.load
-    full_state = gr.State()
-    campaign_state = gr.State()
-    # df_state = gr.State()
+        # RIGHT PANEL
+        with gr.Column(scale=3):
 
-    gr.Markdown("# 🎯 Ads Dashboard")
+            # GLOBAL KPIs
+            with gr.Row():
+                total_spend = gr.Number(label="Spend")
+                total_leads = gr.Number(label="Leads")
+                average_cpl = gr.Number(label="CPL")
+                active_campaigns = gr.Number(label="Campaigns")
 
-    with gr.Tab("Dashboard"):
-        # We modify build_dashboard to expose metric components for automated hydration
-        gr.Markdown("## 📊 Campaign Dashboard")
-        with gr.Row():
-            total_spend = gr.Number(label="Total Spend")
-            total_leads = gr.Number(label="Total Leads")
-            average_cpl = gr.Number(label="Average CPL")
-            active_campaigns = gr.Number(label="Active Campaigns")
+            # CAMPAIGN BANNER
+            campaign_banner = gr.Markdown(
+                "👉 Select a campaign to begin analysis"
+            )
 
-        campaign_table = gr.Dataframe(label="Campaign Performance", interactive=True)
-        refresh_btn = gr.Button("🔄 Force Refresh Data")
+            # =========================
+            # AI CARDS (CURSOR STYLE)
+            # =========================
 
-    with gr.Tab("Analysis"):
-        selected = gr.Markdown("👈 Select a campaign from the Dashboard tab")
-        output = gr.Markdown()
+            with gr.Row():
+                ads_card = gr.Button("📊 Ads Analyst")
+                gr.Markdown("💰 Budget Optimizer (inactive)")
+                gr.Markdown("🎯 Keyword Intelligence (inactive)")
 
-        with gr.Row():
-            gr.Button("🚀 Run Ads Analysis").click(run_ads_card, campaign_state, output)
-            gr.Button("💰 Run Budget Optimization").click(run_budget_card, campaign_state, output)
+            with gr.Row():
+                gr.Markdown("⚠️ Risk Detector (inactive)")
+                gr.Markdown("📈 Growth Finder (inactive)")
+                gr.Markdown("🧪 Experiment Ideas (inactive)")
+
+            # OUTPUT AREA (ONLY FOR ADS CARD NOW)
+            ads_output = gr.Markdown(
+                value="Click 'Ads Analyst' to analyze selected campaign"
+            )
+
+    # =========================
+    # EVENTS
+    # =========================
 
     campaign_table.select(
         fn=campaign_row_selected,
         inputs=[campaign_table, full_state],
-        outputs=[campaign_state, selected],
+        outputs=[campaign_state, campaign_banner],
     )
 
-    # Button manual refresh
-    refresh_btn.click(
-        fn=initial_data_load,
-        outputs=[full_state, campaign_table, total_spend, total_leads, average_cpl, active_campaigns],
+    ads_card.click(
+        fn=run_ads_card,
+        inputs=campaign_state,
+        outputs=ads_output
     )
 
-    # ⚡ MAGIC FIX: App automatically loads data into UI components instantly on launch
+    # =========================
+    # DATA LOAD
+    # =========================
+
     demo.load(
         fn=initial_data_load,
         outputs=[full_state, campaign_table, total_spend, total_leads, average_cpl, active_campaigns],
     )
+
     demo.load(fn=startup)
 
+
 demo.queue()
 
 if __name__ == "__main__":
-    demo.launch()
+    demo.launch()

docs/superpowers/plans/UI.md

@@ -0,0 +1,128 @@
+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)]                    │
+└───────────────┴──────────────────────────────────────────────┘