Update src/streamlit_app.py

src/streamlit_app.py

@@ -50,13 +50,20 @@ st.markdown("""
         padding-top: 0rem;
     }
     
-    /* Brand Header */
+    /* Responsive container */
+    .block-container {
+        padding-top: 1rem;
+        padding-bottom: 1rem;
+        max-width: 100%;
+    }
+    
+    /* Brand Header - Responsive */
     .brand-header {
         background: linear-gradient(135deg, #0f0f0f 0%, #1a1a2e 50%, #16213e 100%);
-        padding: 2rem 2rem 1.5rem 2rem;
-        border-radius: 0 0 24px 24px;
-        margin: -1rem -1rem 2rem -1rem;
-        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+        padding: 1.5rem 1rem;
+        border-radius: 0 0 16px 16px;
+        margin: -1rem -1rem 1.5rem -1rem;
+        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
         position: relative;
         overflow: hidden;
     }
@@ -66,8 +73,8 @@ st.markdown("""
         position: absolute;
         top: -50%;
         right: -10%;
-        width: 300px;
-        height: 300px;
+        width: 200px;
+        height: 200px;
         background: radial-gradient(circle, rgba(64, 224, 208, 0.15) 0%, transparent 70%);
         border-radius: 50%;
     }
@@ -75,22 +82,23 @@ st.markdown("""
     .brand-container {
         display: flex;
         align-items: center;
-        gap: 1.5rem;
+        gap: 1rem;
         position: relative;
         z-index: 1;
     }
     
     .brand-logo {
-        width: 70px;
-        height: 70px;
+        width: 50px;
+        height: 50px;
+        min-width: 50px;
         display: flex;
         align-items: center;
         justify-content: center;
         background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 25%, #20B2AA 60%, #40E0D0 100%);
-        border-radius: 16px;
+        border-radius: 12px;
         box-shadow: 
-            0 0 30px rgba(64, 224, 208, 0.6),
-            0 4px 20px rgba(0, 0, 0, 0.8),
+            0 0 20px rgba(64, 224, 208, 0.6),
+            0 4px 16px rgba(0, 0, 0, 0.8),
             inset 0 1px 0 rgba(255, 255, 255, 0.1);
         flex-shrink: 0;
         border: 2px solid rgba(64, 224, 208, 0.3);
@@ -98,112 +106,95 @@ st.markdown("""
     }
     
     @keyframes glow {
-        0%, 100% { box-shadow: 0 0 30px rgba(64, 224, 208, 0.6), 0 4px 20px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.1); }
-        50% { box-shadow: 0 0 50px rgba(64, 224, 208, 0.9), 0 4px 20px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.1); }
+        0%, 100% { box-shadow: 0 0 20px rgba(64, 224, 208, 0.6), 0 4px 16px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.1); }
+        50% { box-shadow: 0 0 30px rgba(64, 224, 208, 0.9), 0 4px 16px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.1); }
     }
     
     .brand-logo svg {
-        width: 45px;
-        height: 45px;
-        filter: drop-shadow(0 2px 8px rgba(255, 255, 255, 0.3));
+        width: 30px;
+        height: 30px;
+        filter: drop-shadow(0 2px 4px rgba(255, 255, 255, 0.3));
     }
     
     .brand-info {
         flex: 1;
+        min-width: 0;
     }
     
     .brand-title {
-        font-size: 2.5rem;
+        font-size: clamp(1.2rem, 4vw, 2rem);
         font-weight: 900;
         background: linear-gradient(135deg, #ffffff 0%, #40E0D0 50%, #20B2AA 100%);
         -webkit-background-clip: text;
         -webkit-text-fill-color: transparent;
         background-clip: text;
-        margin: 0 0 0.3rem 0;
-        letter-spacing: -1px;
+        margin: 0 0 0.2rem 0;
+        letter-spacing: -0.5px;
         line-height: 1.2;
+        word-break: break-word;
     }
     
     .brand-subtitle {
         color: rgba(255, 255, 255, 0.7);
-        font-size: 0.95rem;
+        font-size: clamp(0.7rem, 2vw, 0.9rem);
         font-weight: 500;
         margin: 0;
-        letter-spacing: 0.5px;
+        letter-spacing: 0.3px;
     }
     
-    /* Metric Cards */
-    .metric-card {
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-        padding: 1.8rem;
-        border-radius: 16px;
+    /* Metric Cards - Responsive */
+    .metric-card, .savings-card, .cost-card {
+        padding: 1.2rem;
+        border-radius: 12px;
         color: white;
         text-align: center;
         margin-bottom: 1rem;
-        box-shadow: 0 8px 24px rgba(102, 126, 234, 0.3);
+        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
         transition: transform 0.3s ease, box-shadow 0.3s ease;
         border: 1px solid rgba(255, 255, 255, 0.1);
     }
     
-    .metric-card:hover {
-        transform: translateY(-4px);
-        box-shadow: 0 12px 32px rgba(102, 126, 234, 0.4);
-    }
-    
-    .metric-value {
-        font-size: 2.2rem;
-        font-weight: 900;
-        margin-bottom: 0.3rem;
-        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
-    }
-    
-    .metric-label {
-        font-size: 0.9rem;
-        font-weight: 600;
-        opacity: 0.95;
-        letter-spacing: 0.5px;
+    .metric-card {
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     }
     
     .savings-card {
         background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
-        padding: 1.8rem;
-        border-radius: 16px;
-        color: white;
-        text-align: center;
-        box-shadow: 0 8px 24px rgba(56, 239, 125, 0.3);
-        transition: transform 0.3s ease, box-shadow 0.3s ease;
-        border: 1px solid rgba(255, 255, 255, 0.1);
-    }
-    
-    .savings-card:hover {
-        transform: translateY(-4px);
-        box-shadow: 0 12px 32px rgba(56, 239, 125, 0.4);
     }
     
     .cost-card {
         background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
-        padding: 1.8rem;
-        border-radius: 16px;
-        color: white;
-        text-align: center;
-        box-shadow: 0 8px 24px rgba(245, 87, 108, 0.3);
-        transition: transform 0.3s ease, box-shadow 0.3s ease;
-        border: 1px solid rgba(255, 255, 255, 0.1);
     }
     
-    .cost-card:hover {
-        transform: translateY(-4px);
-        box-shadow: 0 12px 32px rgba(245, 87, 108, 0.4);
+    .metric-card:hover, .savings-card:hover, .cost-card:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
+    }
+    
+    .metric-value {
+        font-size: clamp(1.5rem, 5vw, 2rem);
+        font-weight: 900;
+        margin-bottom: 0.3rem;
+        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+    }
+    
+    .metric-label {
+        font-size: clamp(0.75rem, 2vw, 0.9rem);
+        font-weight: 600;
+        opacity: 0.95;
+        letter-spacing: 0.3px;
     }
     
-    /* Chat Messages */
+    /* Chat Messages - Responsive */
     .chat-message {
-        padding: 1.2rem;
-        border-radius: 12px;
-        margin-bottom: 1rem;
-        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+        padding: 0.8rem 1rem;
+        border-radius: 10px;
+        margin-bottom: 0.8rem;
+        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
         transition: transform 0.2s ease;
         animation: slideIn 0.3s ease;
+        word-wrap: break-word;
+        overflow-wrap: break-word;
     }
     
     @keyframes slideIn {
@@ -218,127 +209,226 @@ st.markdown("""
     }
     
     .chat-message:hover {
-        transform: translateX(4px);
+        transform: translateX(2px);
     }
     
     .user-message {
         background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
-        border-left: 4px solid #2196f3;
+        border-left: 3px solid #2196f3;
     }
     
     .assistant-message {
         background: linear-gradient(135deg, #f5f5f5 0%, #e0e0e0 100%);
-        border-left: 4px solid #4caf50;
+        border-left: 3px solid #4caf50;
+    }
+    
+    /* Info Cards - Responsive */
+    .info-card, .warning-card, .success-card {
+        padding: 1rem;
+        border-radius: 10px;
+        margin-bottom: 1rem;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+        font-size: clamp(0.85rem, 2vw, 1rem);
     }
     
-    /* Info Cards */
     .info-card {
         background: linear-gradient(135deg, #f0f4f8 0%, #d9e2ec 100%);
-        padding: 1.5rem;
-        border-radius: 12px;
-        border-left: 4px solid #3b82f6;
-        margin-bottom: 1.5rem;
-        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+        border-left: 3px solid #3b82f6;
     }
     
     .warning-card {
         background: linear-gradient(135deg, #fff4e6 0%, #ffe0b2 100%);
-        padding: 1.5rem;
-        border-radius: 12px;
-        border-left: 4px solid #ff9800;
-        margin-bottom: 1.5rem;
-        box-shadow: 0 4px 12px rgba(255, 152, 0, 0.1);
+        border-left: 3px solid #ff9800;
     }
     
     .success-card {
         background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
-        padding: 1.5rem;
-        border-radius: 12px;
-        border-left: 4px solid #4caf50;
-        margin-bottom: 1.5rem;
-        box-shadow: 0 4px 12px rgba(76, 175, 80, 0.1);
+        border-left: 3px solid #4caf50;
     }
     
-    /* Tabs */
+    /* Tabs - Responsive */
     .stTabs [data-baseweb="tab-list"] {
-        gap: 8px;
+        gap: 4px;
         background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
-        padding: 0.5rem;
-        border-radius: 12px;
+        padding: 0.4rem;
+        border-radius: 10px;
+        overflow-x: auto;
+        white-space: nowrap;
     }
     
     .stTabs [data-baseweb="tab"] {
         border-radius: 8px;
-        padding: 0.75rem 1.5rem;
+        padding: 0.6rem 1rem;
         font-weight: 600;
         transition: all 0.3s ease;
+        font-size: clamp(0.8rem, 2vw, 0.95rem);
     }
     
     .stTabs [aria-selected="true"] {
         background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
         color: white !important;
-        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
+        box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
     }
     
-    /* Buttons */
+    /* Buttons - Responsive */
     .stButton > button {
-        border-radius: 10px;
+        border-radius: 8px;
         font-weight: 600;
         transition: all 0.3s ease;
         border: none;
-        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+        font-size: clamp(0.85rem, 2vw, 1rem);
+        padding: 0.5rem 1rem;
+        width: 100%;
     }
     
     .stButton > button:hover {
-        transform: translateY(-2px);
-        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
+        transform: translateY(-1px);
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
     }
     
-    /* Code blocks */
-    .stCodeBlock {
-        border-radius: 12px;
-        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    /* Forms - Responsive */
+    .stTextInput input, .stTextArea textarea {
+        font-size: clamp(0.9rem, 2vw, 1rem);
+        border-radius: 8px;
     }
     
-    /* Expanders */
-    .streamlit-expanderHeader {
-        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
+    /* Code blocks - Responsive */
+    .stCodeBlock {
         border-radius: 10px;
-        font-weight: 600;
-        padding: 1rem;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+        font-size: clamp(0.75rem, 1.5vw, 0.9rem);
     }
     
-    /* Sidebar */
-    .css-1d391kg {
+    /* Expanders - Responsive */
+    .streamlit-expanderHeader {
         background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
+        border-radius: 8px;
+        font-weight: 600;
+        padding: 0.8rem;
+        font-size: clamp(0.9rem, 2vw, 1rem);
     }
     
-    /* Status badges */
+    /* Status badges - Responsive */
     .status-badge {
         display: inline-block;
-        padding: 0.4rem 1rem;
-        border-radius: 20px;
-        font-size: 0.85rem;
+        padding: 0.3rem 0.8rem;
+        border-radius: 16px;
+        font-size: clamp(0.75rem, 1.5vw, 0.85rem);
         font-weight: 600;
-        margin: 0.25rem;
+        margin: 0.2rem;
+        white-space: nowrap;
     }
     
     .status-success {
         background: linear-gradient(135deg, #4caf50 0%, #66bb6a 100%);
         color: white;
-        box-shadow: 0 2px 8px rgba(76, 175, 80, 0.3);
+        box-shadow: 0 2px 6px rgba(76, 175, 80, 0.3);
     }
     
     .status-info {
         background: linear-gradient(135deg, #2196f3 0%, #42a5f5 100%);
         color: white;
-        box-shadow: 0 2px 8px rgba(33, 150, 243, 0.3);
+        box-shadow: 0 2px 6px rgba(33, 150, 243, 0.3);
     }
     
     .status-warning {
         background: linear-gradient(135deg, #ff9800 0%, #ffa726 100%);
         color: white;
-        box-shadow: 0 2px 8px rgba(255, 152, 0, 0.3);
+        box-shadow: 0 2px 6px rgba(255, 152, 0, 0.3);
+    }
+    
+    /* Mobile-specific adjustments */
+    @media only screen and (max-width: 768px) {
+        .main {
+            padding: 0.5rem;
+        }
+        
+        .block-container {
+            padding: 0.5rem;
+        }
+        
+        .brand-header {
+            padding: 1rem 0.8rem;
+            margin: -0.5rem -0.5rem 1rem -0.5rem;
+        }
+        
+        .brand-container {
+            gap: 0.8rem;
+        }
+        
+        .brand-logo {
+            width: 40px;
+            height: 40px;
+            min-width: 40px;
+        }
+        
+        .brand-logo svg {
+            width: 24px;
+            height: 24px;
+        }
+        
+        .metric-card, .savings-card, .cost-card {
+            padding: 1rem;
+            margin-bottom: 0.8rem;
+        }
+        
+        .chat-message {
+            padding: 0.7rem 0.8rem;
+            font-size: 0.9rem;
+        }
+        
+        .stTabs [data-baseweb="tab"] {
+            padding: 0.5rem 0.8rem;
+            font-size: 0.85rem;
+        }
+        
+        /* Stack columns on mobile */
+        .row-widget.stHorizontal {
+            flex-direction: column;
+        }
+        
+        /* Full width buttons on mobile */
+        .stButton > button {
+            width: 100%;
+            margin-bottom: 0.5rem;
+        }
+    }
+    
+    /* Tablet adjustments */
+    @media only screen and (min-width: 769px) and (max-width: 1024px) {
+        .brand-title {
+            font-size: 1.8rem;
+        }
+        
+        .metric-value {
+            font-size: 1.8rem;
+        }
+    }
+    
+    /* Large desktop */
+    @media only screen and (min-width: 1920px) {
+        .block-container {
+            max-width: 1600px;
+            margin: 0 auto;
+        }
+    }
+    
+    /* Improve scrolling on mobile */
+    @media only screen and (max-width: 768px) {
+        .stTabs [data-baseweb="tab-list"] {
+            -webkit-overflow-scrolling: touch;
+            scrollbar-width: thin;
+        }
+        
+        .stTabs [data-baseweb="tab-list"]::-webkit-scrollbar {
+            height: 4px;
+        }
+        
+        .stTabs [data-baseweb="tab-list"]::-webkit-scrollbar-thumb {
+            background: #667eea;
+            border-radius: 4px;
+        }
     }
 </style>
 """, unsafe_allow_html=True)
@@ -362,9 +452,6 @@ if "indexed" not in st.session_state:
 if "auto_indexed" not in st.session_state:
     st.session_state.auto_indexed = False
 
-if "saved_api_keys" not in st.session_state:
-    st.session_state.saved_api_keys = []  # List of {name, openai_key, pinecone_key}
-
 # ============================================================================
 # Sidebar
 # ============================================================================
@@ -406,83 +493,23 @@ with st.sidebar:
     
     st.markdown("---")
     
-    # API Keys Section with Dropdown
+    # API Keys Section
     st.markdown("### 🔑 API Configuration")
     
-    # Dropdown for saved API keys
-    if st.session_state.saved_api_keys:
-        key_options = ["Add New Configuration..."] + [key["name"] for key in st.session_state.saved_api_keys]
-        selected_key = st.selectbox(
-            "Select API Configuration",
-            key_options,
-            key="api_key_selector"
-        )
-        
-        if selected_key and selected_key != "Add New Configuration...":
-            # Load selected keys
-            selected_config = next((k for k in st.session_state.saved_api_keys if k["name"] == selected_key), None)
-            if selected_config:
-                default_openai = selected_config["openai_key"]
-                default_pinecone = selected_config["pinecone_key"]
-            else:
-                default_openai = st.session_state.get("openai_key", "")
-                default_pinecone = st.session_state.get("pinecone_key", "")
-        else:
-            default_openai = st.session_state.get("openai_key", "")
-            default_pinecone = st.session_state.get("pinecone_key", "")
-    else:
-        selected_key = None
-        default_openai = st.session_state.get("openai_key", "")
-        default_pinecone = st.session_state.get("pinecone_key", "")
-    
     openai_key = st.text_input(
         "OpenAI API Key",
         type="password",
-        value=default_openai,
-        help="Your OpenAI API key for LLM and embeddings",
-        key="openai_key_input"
+        value=st.session_state.get("openai_key", ""),
+        help="Your OpenAI API key for LLM and embeddings"
     )
     
     pinecone_key = st.text_input(
         "Pinecone API Key",
         type="password",
-        value=default_pinecone,
-        help="Your Pinecone API key for vector storage",
-        key="pinecone_key_input"
+        value=st.session_state.get("pinecone_key", ""),
+        help="Your Pinecone API key for vector storage"
     )
     
-    # Save/Delete configuration
-    if openai_key and pinecone_key:
-        with st.form("save_api_keys_form"):
-            col1, col2 = st.columns(2)
-            with col1:
-                key_name = st.text_input("Save as (optional)", placeholder="e.g., Production, Dev", key="save_key_name")
-            with col2:
-                save_submitted = st.form_submit_button("💾 Save", use_container_width=True)
-            
-            if save_submitted and key_name:
-                # Check if name already exists
-                existing = next((k for k in st.session_state.saved_api_keys if k["name"] == key_name), None)
-                if existing:
-                    existing["openai_key"] = openai_key
-                    existing["pinecone_key"] = pinecone_key
-                    st.success(f"✅ Updated '{key_name}'")
-                else:
-                    st.session_state.saved_api_keys.append({
-                        "name": key_name,
-                        "openai_key": openai_key,
-                        "pinecone_key": pinecone_key
-                    })
-                    st.success(f"✅ Saved as '{key_name}'")
-                st.rerun()
-        
-        # Delete button for selected configuration
-        if selected_key and selected_key != "Add New Configuration...":
-            if st.button("🗑️ Delete Selected", use_container_width=True):
-                st.session_state.saved_api_keys = [k for k in st.session_state.saved_api_keys if k["name"] != selected_key]
-                st.success(f"✅ Deleted '{selected_key}'")
-                st.rerun()
-    
     if openai_key and pinecone_key:
         st.session_state.openai_key = openai_key
         st.session_state.pinecone_key = pinecone_key
@@ -514,6 +541,37 @@ with st.sidebar:
     
     st.markdown("---")
     
+    # Codebase Status
+    st.markdown("### 📂 Codebase Status")
+    
+    try:
+        stats = st.session_state.agent.indexer.get_stats()
+        total_chunks = stats.get('total_chunks', 0)
+        if total_chunks > 0:
+            st.markdown(f"""
+            <div class="success-card">
+                <strong>✅ Codebase Indexed</strong><br>
+                <span style="font-size: 1.5rem; font-weight: 700;">{total_chunks:,}</span> chunks ready
+            </div>
+            """, unsafe_allow_html=True)
+            st.session_state.indexed = True
+        else:
+            st.markdown("""
+            <div class="info-card">
+                <strong>ℹ️ Ready to Index</strong><br>
+                Set API keys to auto-index
+            </div>
+            """, unsafe_allow_html=True)
+    except:
+        st.markdown("""
+        <div class="info-card">
+            <strong>ℹ️ Awaiting Configuration</strong><br>
+            Configure API keys above
+        </div>
+        """, unsafe_allow_html=True)
+    
+    st.markdown("---")
+    
     # Quick Actions
     st.markdown("### ⚡ Quick Actions")
     
@@ -629,20 +687,53 @@ with tab1:
 with tab2:
     st.markdown("### 🎫 JIRA Ticket to Implementation")
     
-    st.markdown("#### Ticket Details")
-    ticket_id = st.text_input("📋 Ticket ID", placeholder="PROJ-123")
-    ticket_title = st.text_input("📝 Title", placeholder="Add user preferences feature")
-    ticket_desc = st.text_area(
-        "📄 Description",
-        height=150,
-        placeholder="Detailed description of the feature..."
-    )
-    acceptance = st.text_area(
-        "✅ Acceptance Criteria",
-        height=100,
-        placeholder="List the acceptance criteria..."
-    )
-    labels = st.text_input("🏷️ Labels", placeholder="backend, frontend (comma-separated)")
+    col1, col2 = st.columns([2, 1])
+    
+    with col1:
+        st.markdown("#### Ticket Details")
+        ticket_id = st.text_input("📋 Ticket ID", placeholder="PROJ-123")
+        ticket_title = st.text_input("📝 Title", placeholder="Add user preferences feature")
+        ticket_desc = st.text_area(
+            "📄 Description",
+            height=150,
+            placeholder="Detailed description of the feature..."
+        )
+        acceptance = st.text_area(
+            "✅ Acceptance Criteria",
+            height=100,
+            placeholder="List the acceptance criteria..."
+        )
+        labels = st.text_input("🏷️ Labels", placeholder="backend, frontend (comma-separated)")
+    
+    with col2:
+        st.markdown("#### Quick Actions")
+        
+        if st.button("📝 Load Example", use_container_width=True):
+            st.session_state.example = {
+                "id": "PROJ-456",
+                "title": "Add notification preferences",
+                "desc": "As a user, I want to customize my notification settings.\n\nFeatures:\n- Email notification toggle\n- Push notification toggle\n- Notification frequency settings\n- Save preferences to database",
+                "accept": "- User can toggle email notifications\n- User can toggle push notifications\n- Settings persist across sessions\n- Changes take effect immediately",
+                "labels": "backend, frontend, notifications"
+            }
+            st.rerun()
+        
+        if "example" in st.session_state:
+            ticket_id = st.session_state.example["id"]
+            ticket_title = st.session_state.example["title"]
+            ticket_desc = st.session_state.example["desc"]
+            acceptance = st.session_state.example["accept"]
+            labels = st.session_state.example["labels"]
+            del st.session_state.example
+        
+        st.markdown("---")
+        
+        st.markdown("""
+        <div class="info-card">
+            <strong>💡 Tip</strong><br>
+            Provide detailed descriptions for better code generation
+        </div>
+        """, unsafe_allow_html=True)
     
     st.markdown("---")
     
@@ -666,6 +757,7 @@ with tab2:
                     st.session_state.current_plan = plan
                     st.session_state.last_ticket = ticket
                     st.success("✅ Plan generated! Check the 'Implementation Plan' tab")
+                    st.balloons()
                 except Exception as e:
                     st.error(f"❌ Error: {str(e)}")