Update src/streamlit_app.py

src/streamlit_app.py

@@ -1,40 +1,213 @@
-import altair as alt
-import numpy as np
-import pandas as pd
 import streamlit as st
+import time
 
-"""
-# Welcome to Streamlit!
-
-Edit `/streamlit_app.py` to customize this app to your heart's desire :heart:.
-If you have any questions, checkout our [documentation](https://docs.streamlit.io) and [community
-forums](https://discuss.streamlit.io).
-
-In the meantime, below is an example of what you can do with just a few lines of code:
-"""
-
-num_points = st.slider("Number of points in spiral", 1, 10000, 1100)
-num_turns = st.slider("Number of turns in spiral", 1, 300, 31)
-
-indices = np.linspace(0, 1, num_points)
-theta = 2 * np.pi * num_turns * indices
-radius = indices
-
-x = radius * np.cos(theta)
-y = radius * np.sin(theta)
-
-df = pd.DataFrame({
-    "x": x,
-    "y": y,
-    "idx": indices,
-    "rand": np.random.randn(num_points),
-})
-
-st.altair_chart(alt.Chart(df, height=700, width=700)
-    .mark_point(filled=True)
-    .encode(
-        x=alt.X("x", axis=None),
-        y=alt.Y("y", axis=None),
-        color=alt.Color("idx", legend=None, scale=alt.Scale()),
-        size=alt.Size("rand", legend=None, scale=alt.Scale(range=[1, 150])),
-    ))
+# --- CONFIGURATION & CONTENT ---
+st.set_page_config(page_title="Elf-OS Agent Simulator", page_icon="🤖")
+
+# Content Dictionary for Multi-Language Support
+CONTENT = {
+    "Deutsch": {
+        "title": "🤖 Elf-OS: Agenten Simulation",
+        "intro": "Ein **KI-Agent** ist wie ein kluger Elf: Er rät nicht einfach, sondern benutzt **Werkzeuge** (Tools), um Aufgaben zu lösen. Deine Aufgabe ist es, dem Agenten zu sagen, in welcher REIHENFOLGE er die Werkzeuge nutzen soll.",
+        "sidebar_title": "Wähle eine Mission",
+        "tools_header": "🧰 Verfügbare Werkzeuge",
+        "chain_header": "🔗 Deine Gedanken-Kette",
+        "empty_chain": "*Noch keine Werkzeuge gewählt...*",
+        "btn_add": "➕",
+        "btn_clear": "🗑️ Kette löschen",
+        "btn_run": "🚀 Agent starten",
+        "spinner": "Der Agent denkt nach...",
+        "feedback_spotify": "❌ <strong>Fehler:</strong> Warum Musik hören? Das löst das Problem nicht! (Agenten sollten keine unnötigen Tools nutzen).",
+        "feedback_order": "⚠️ <strong>Reihenfolge falsch!</strong> Du hast die richtigen Tools, aber in der falschen Reihenfolge. (Man kann nichts buchen, bevor man weiß wo!)",
+        "feedback_fail": "❌ <strong>Das reicht nicht.</strong> Der Agent wusste nicht weiter oder hat falsche Informationen. Überdenke die Logik.",
+        "feedback_success": "✅ <strong>Erfolg!</strong> Der Agent hat das Problem gelöst.",
+        "missions": {
+            "L1": {
+                "name": "Level 1: Das vergessene Geschenk",
+                "briefing": "Santa hat vergessen, was die kleine Mia sich gewünscht hat! Er steht auf ihrem Dach. Finde heraus, was sie will, und ob es im Sack ist.",
+                "solution_ids": ["db", "inv"],
+                "explanation": "Der Agent muss erst WISSEN, was gesucht ist (Datenbank), bevor er PRÜFEN kann, ob er es hat (Inventar)."
+            },
+            "L2": {
+                "name": "Level 2: Die Routen-Planung",
+                "briefing": "Wir müssen nach Berlin fliegen. Aber wir dürfen nur starten, wenn das Wetter gut ist UND wir genug Rentiermoos für den Rückweg haben.",
+                "solution_ids": ["weather", "fuel", "nav"],
+                "explanation": "Ein Agent muss erst die 'Blocker' prüfen (Wetter & Tank), bevor er die Aktion (Navigation/Flug) startet."
+            },
+            "L3": {
+                "name": "Level 3: Der Notfall (Advanced)",
+                "briefing": "Rudolph hat Schnupfen! Der Agent muss einen Tierarzt in der Nähe finden, der JETZT offen hat, und dort einen Termin buchen.",
+                "solution_ids": ["gps", "maps", "cal", "book"],
+                "explanation": "Eine klassische 'Agent Chain': Wo bin ich? -> Wer ist hier? -> Haben die Zeit? -> Buche es."
+            }
+        },
+        "tools": {
+            "weather": "Wetter_Radar",
+            "db": "Wunschzettel_Datenbank",
+            "inv": "Geschenksack_Inventar",
+            "nav": "Navigations_System",
+            "fuel": "Tankanzeige_Rentiere",
+            "gps": "GPS_Ortung",
+            "maps": "Google_Maps_Suche",
+            "cal": "Kalender_Bot",
+            "book": "Buchungs_Tool",
+            "spotify": "Spotify_Weihnachtsplaylist"
+        }
+    },
+    "English": {
+        "title": "🤖 Elf-OS: Agent Simulator",
+        "intro": "An **AI Agent** is like a smart Elf: It doesn't just guess; it uses **Tools** to solve tasks. Your job is to tell the Agent in which ORDER to use the tools.",
+        "sidebar_title": "Choose a Mission",
+        "tools_header": "🧰 Available Tools",
+        "chain_header": "🔗 Your Thought Chain",
+        "empty_chain": "*No tools selected yet...*",
+        "btn_add": "➕",
+        "btn_clear": "🗑️ Clear Chain",
+        "btn_run": "🚀 Run Agent",
+        "spinner": "The Agent is thinking...",
+        "feedback_spotify": "❌ <strong>Error:</strong> Why listen to music? That doesn't solve the problem! (Agents shouldn't use unnecessary tools).",
+        "feedback_order": "⚠️ <strong>Wrong Order!</strong> You have the right tools, but in the wrong sequence. (You can't book something before you know where!)",
+        "feedback_fail": "❌ <strong>Not enough.</strong> The Agent got stuck or lacks information. Rethink the logic.",
+        "feedback_success": "✅ <strong>Success!</strong> The Agent solved the problem.",
+        "missions": {
+            "L1": {
+                "name": "Level 1: The Forgotten Gift",
+                "briefing": "Santa forgot what little Mia wanted! He is on her roof. Find out what she wants, and check if it's in the sack.",
+                "solution_ids": ["db", "inv"],
+                "explanation": "The Agent must KNOW what is needed (Database) before it can CHECK if it has it (Inventory)."
+            },
+            "L2": {
+                "name": "Level 2: Route Planning",
+                "briefing": "We need to fly to Berlin. But we can only take off if the weather is good AND we have enough reindeer moss for the return trip.",
+                "solution_ids": ["weather", "fuel", "nav"],
+                "explanation": "An Agent must check 'Blockers' (Weather & Fuel) before executing the Action (Navigation/Flight)."
+            },
+            "L3": {
+                "name": "Level 3: The Emergency (Advanced)",
+                "briefing": "Rudolph has a cold! The Agent needs to find a vet nearby who is open NOW, and book an appointment.",
+                "solution_ids": ["gps", "maps", "cal", "book"],
+                "explanation": "A classic 'Agent Chain': Where am I? -> Who is here? -> Are they free? -> Book it."
+            }
+        },
+        "tools": {
+            "weather": "Weather_Radar",
+            "db": "Wishlist_Database",
+            "inv": "Giftbag_Inventory",
+            "nav": "Navigation_System",
+            "fuel": "Fuel_Gauge_Reindeer",
+            "gps": "GPS_Location",
+            "maps": "Google_Maps_Search",
+            "cal": "Calendar_Bot",
+            "book": "Booking_Tool",
+            "spotify": "Spotify_ChristmasPlaylist"
+        }
+    }
+}
+
+# --- CUSTOM CSS ---
+st.markdown("""
+    <style>
+    .stButton>button {
+        width: 100%;
+        border-radius: 10px;
+        height: 50px;
+        font-weight: 500;
+    }
+    .success-box {
+        padding: 20px;
+        background-color: #d4edda;
+        color: #155724;
+        border-radius: 10px;
+        margin-bottom: 10px;
+        border: 1px solid #c3e6cb;
+    }
+    .fail-box {
+        padding: 20px;
+        background-color: #f8d7da;
+        color: #721c24;
+        border-radius: 10px;
+        margin-bottom: 10px;
+        border: 1px solid #f5c6cb;
+    }
+    div[data-testid="stExpander"] {
+        background-color: #f0f2f6;
+        border-radius: 10px;
+    }
+    </style>
+""", unsafe_allow_html=True)
+
+# --- APP LOGIC ---
+
+# 1. Language Selection
+lang_key = st.sidebar.radio("Language / Sprache", ["Deutsch", "English"])
+text = CONTENT[lang_key]
+
+st.title(text["title"])
+st.markdown(text["intro"])
+
+# 2. Mission Selection
+# We use keys (L1, L2, L3) to track missions, but display names
+mission_options = {m_data["name"]: m_key for m_key, m_data in text["missions"].items()}
+selected_mission_name = st.sidebar.selectbox(text["sidebar_title"], list(mission_options.keys()))
+selected_mission_key = mission_options[selected_mission_name]
+mission_data = text["missions"][selected_mission_key]
+
+# 3. Session State Management
+if 'chain' not in st.session_state:
+    st.session_state.chain = [] # Stores Tool IDs (e.g., 'db', 'inv')
+
+# Reset chain if mission changes
+if 'current_mission' not in st.session_state or st.session_state.current_mission != selected_mission_key:
+    st.session_state.chain = []
+    st.session_state.current_mission = selected_mission_key
+
+# 4. Display Mission
+st.info(f"📋 **MISSION:** {mission_data['briefing']}")
+
+col1, col2 = st.columns([1, 1])
+
+with col1:
+    st.subheader(text["tools_header"])
+    # Tool Buttons
+    for tool_id, tool_name in text["tools"].items():
+        if st.button(f"{text['btn_add']} {tool_name}", key=f"btn_{tool_id}"):
+            st.session_state.chain.append(tool_id)
+
+with col2:
+    st.subheader(text["chain_header"])
+    if len(st.session_state.chain) == 0:
+        st.markdown(text["empty_chain"])
+    else:
+        for i, tool_id in enumerate(st.session_state.chain):
+            tool_name = text["tools"][tool_id]
+            st.markdown(f"**{i+1}.** `{tool_name}`")
+        
+        if st.button(text["btn_clear"], type="secondary"):
+            st.session_state.chain = []
+
+st.write("---")
+
+# 5. Execution Logic
+if st.button(text["btn_run"], type="primary"):
+    with st.spinner(text["spinner"]):
+        time.sleep(1.0) # Simulation delay
+        
+        user_chain_ids = st.session_state.chain
+        correct_ids = mission_data['solution_ids']
+        
+        # Check 1: Spotify (Hallucination/Distraction)
+        if "spotify" in user_chain_ids:
+            st.markdown(f'<div class="fail-box">{text["feedback_spotify"]}</div>', unsafe_allow_html=True)
+        
+        # Check 2: Exact Match
+        elif user_chain_ids == correct_ids:
+            st.balloons()
+            st.markdown(f'<div class="success-box">{text["feedback_success"]}<br><br><em>💡 {mission_data["explanation"]}</em></div>', unsafe_allow_html=True)
+            
+        # Check 3: Right Tools, Wrong Order (Set comparison)
+        elif set(user_chain_ids) == set(correct_ids) and len(user_chain_ids) == len(correct_ids):
+             st.markdown(f'<div class="fail-box">{text["feedback_order"]}</div>', unsafe_allow_html=True)
+        
+        # Check 4: Wrong
+        else:
+             st.markdown(f'<div class="fail-box">{text["feedback_fail"]}</div>', unsafe_allow_html=True)