feat: Implement Murder.Ai Detective Interface with noir theme

- Added noir.css for styling the game interface with a dark theme.
- Developed game_logic.js to manage game state, communication with the server, and UI rendering.
- Created game_interface.html as the main template for the detective interface, including loading screen, suspect files, evidence board, tools, and chat log.
- Integrated dynamic elements for suspects, evidence, and chat messages.
- Established API communication for game actions and updates.

.gitignore

@@ -2,4 +2,5 @@
 .env
 __pycache__/
 .vscode/
-game/__pycache__/
+game/__pycache__/
+ref/

app.py

@@ -1,278 +1,211 @@
 import gradio as gr
 import os
+import json
+import uvicorn
+from fastapi import FastAPI
+from fastapi.staticfiles import StaticFiles
 from game import game_engine
-from ui.components import format_tool_result_markdown, format_suspect_card
-
-# Load CSS
-with open("ui/styles.css", "r") as f:
-    custom_css = f.read()
-
-def get_current_game(session_id):
-    if not session_id:
-        return None
-    return game_engine.get_game(session_id)
-
-def start_new_game_ui(scenario_name):
-    """Starts a new game based on scenario selection."""
-    
-    difficulty = "medium" # Default
-    if "Coffee Shop" in scenario_name:
-        difficulty = "easy"
-    elif "Gallery" in scenario_name:
-        difficulty = "hard"
-    
-    session_id, game = game_engine.start_game(difficulty)
-    
-    # Generate Suspect Cards HTML and Button Updates
-    suspects = game.scenario["suspects"]
-    cards = [format_suspect_card(s) for s in suspects]
-    
-    # Pad if fewer than 4
-    while len(cards) < 4:
-        cards.append("")
+from pydantic import BaseModel
+
+# --- Setup FastAPI for Static Files ---
+app = FastAPI()
+# Ensure directories exist
+os.makedirs("ui/static", exist_ok=True)
+app.mount("/static", StaticFiles(directory="ui/static"), name="static")
+
+# --- API Bridge ---
+
+class BridgeRequest(BaseModel):
+    action: str
+    data: dict = {}
+
+@app.post("/api/bridge")
+async def api_bridge(request: BridgeRequest):
+    """Direct API endpoint for game logic communication."""
+    input_data = json.dumps({"action": request.action, "data": request.data})
+    print(f"API Bridge Received: {input_data}")
+    response = session.handle_input(input_data)
+    return response or {} 
+
+# --- Game Logic Wrapper ---
+
+class GameSession:
+    def __init__(self):
+        self.session_id = None
+        self.game = None
+
+    def start(self, difficulty="medium"):
+        self.session_id, self.game = game_engine.start_game(difficulty)
+        return self._get_init_data()
+
+    def _get_init_data(self):
+        if not self.game:
+            return None
+        return {
+            "action": "init_game",
+            "data": {
+                "scenario": self.game.scenario,
+                "round": self.game.round,
+                "points": self.game.points
+            }
+        }
+
+    def handle_input(self, input_json):
+        if not input_json:
+            return None
+            
+        try:
+            data = json.loads(input_json)
+        except:
+            return None
+            
+        action = data.get("action")
+        payload = data.get("data", {})
         
-    # Enable buttons for existing suspects
-    btn_updates = [gr.update(interactive=True, visible=True) for _ in suspects]
-    while len(btn_updates) < 4:
-        btn_updates.append(gr.update(interactive=False, visible=False))
+        if action == "ready":
+            # Wait for explicit start from Gradio UI, or return existing state
+            if self.game:
+                return self._get_init_data()
+            return None # Wait for user to pick case
         
-    # Initial Evidence Board
-    victim_info = game.scenario['victim']
-    # Basic extraction of details if available, otherwise generic placeholders (based on plan/typical structure)
-    found_at = victim_info.get('found_at', victim_info.get('location', 'Unknown Location'))
-    cause_of_death = victim_info.get('cause_of_death', 'Unknown')
-    
-    evidence_md = f"""## 📁 Case: {game.scenario['title']}
-**Victim:** {victim_info['name']}
-**Time of Death:** {victim_info['time_of_death']}
-**Found At:** {found_at}
-**Cause of Death:** {cause_of_death}
+        if not self.game:
+            return None
 
----
+        if action == "select_suspect":
+            return None 
+            
+        if action == "chat_message":
+            suspect_id = payload.get("suspect_id")
+            message = payload.get("message")
+            response = self.game.question_suspect(suspect_id, message)
+            
+            suspect_name = next((s["name"] for s in self.game.scenario["suspects"] if s["id"] == suspect_id), "Suspect")
+            
+            return {
+                "action": "update_chat",
+                "data": {
+                    "role": "suspect",
+                    "name": suspect_name,
+                    "content": response
+                }
+            }
+            
+        if action == "use_tool":
+            tool_name = payload.get("tool")
+            arg = payload.get("input")
+            
+            kwargs = {}
+            if tool_name == "get_location":
+                kwargs = {"phone_number": arg}
+            elif tool_name == "get_footage":
+                kwargs = {"location": arg}
+            elif tool_name == "call_alibi":
+                kwargs = {"phone_number": arg}
+            elif tool_name == "get_dna_test":
+                kwargs = {"evidence_id": arg}
+                
+            result = self.game.use_tool(tool_name, **kwargs)
+            
+            evidence_data = {
+                "title": f"Tool: {tool_name}",
+                "description": str(result)
+            }
+            
+            return {
+                "action": "add_evidence",
+                "data": evidence_data
+            }
 
-### 🔎 Evidence Log
-*Evidence revealed during investigation will appear here.*
-"""
-    
-    # Initial Chat
-    initial_chat = [
-        {"role": "assistant", "content": f"CASE FILE LOADED: {game.scenario['title']}\nVictim: {game.scenario['victim']['name']}\nTime of Death: {game.scenario['victim']['time_of_death']}"}
-    ]
-    
-    return (
-        session_id,
-        cards[0], cards[1], cards[2], cards[3], # Suspect HTML
-        btn_updates[0], btn_updates[1], btn_updates[2], btn_updates[3], # Suspect Buttons
-        initial_chat, # Chatbot
-        evidence_md, # Evidence board
-        f"Round: {game.round}/5 | Points: {game.points}", # Stats
-        None, # Reset selected suspect ID
-        gr.update(interactive=True), # Question input
-        gr.update(interactive=True), # Question btn
-        gr.update(interactive=True), # Tool btn
-        "**Select a suspect to begin interrogation.**" # Status
-    )
+        return None
 
-def select_suspect_by_index(session_id, index):
-    game = get_current_game(session_id)
-    if not game or index >= len(game.scenario["suspects"]):
-        return None, "Error"
-    
-    suspect = game.scenario["suspects"][index]
-    return suspect['id'], f"**Interrogating:** {suspect['name']}"
+session = GameSession()
 
-def submit_question(session_id, suspect_id, question, history):
-    game = get_current_game(session_id)
-    if not game:
-        return history, "Error: No active game."
-    
-    if not suspect_id:
-        return history, "Error: Select a suspect first."
-        
-    if not question:
-        return history, "Error: Enter a question."
+# --- Gradio App ---
 
-    response = game.question_suspect(suspect_id, question)
-    
-    # Look up suspect name for nicer chat
-    suspect_name = next((s["name"] for s in game.scenario["suspects"] if s["id"] == suspect_id), suspect_id)
+def get_game_iframe():
+    with open("ui/templates/game_interface.html", "r") as f:
+        html_content = f.read()
+    html_content = html_content.replace('../static/', '/static/')
+    html_content_escaped = html_content.replace('"', '&quot;')
     
-    history.append({"role": "user", "content": f"**Detective to {suspect_name}:** {question}"})
-    history.append({"role": "assistant", "content": f"**{suspect_name}:** {response}"})
-    
-    return history, "" # Clear input
+    # Iframe is hidden initially
+    iframe = f"""
+    <iframe 
+        id="game-iframe"
+        srcdoc="{html_content_escaped}"
+        style="width: 100%; height: 95vh; border: none;"
+        allow="autoplay; fullscreen"
+    ></iframe>
+    """
+    return iframe
 
-def use_tool_ui(session_id, tool_name, arg1, history, current_evidence_md):
-    game = get_current_game(session_id)
-    if not game:
-        return history, current_evidence_md, "Error"
-        
-    # Construct kwargs based on tool
-    kwargs = {}
-    if tool_name == "get_location":
-        kwargs = {"phone_number": arg1}
-    elif tool_name == "get_footage":
-        kwargs = {"location": arg1}
-    elif tool_name == "get_dna_test":
-        kwargs = {"evidence_id": arg1}
-    elif tool_name == "call_alibi":
-        kwargs = {"phone_number": arg1}
-        
-    result = game.use_tool(tool_name, **kwargs)
-    
-    # Format the result
-    formatted_result = format_tool_result_markdown(tool_name, result)
+def start_game_from_ui(case_name):
+    difficulty = "medium"
+    if "Coffee" in case_name: difficulty = "easy"
+    if "Gallery" in case_name: difficulty = "hard"
     
-    # Update History
-    history.append({"role": "assistant", "content": f"🔧 **System:** Used {tool_name}\nInput: {arg1}\n\n{formatted_result}"})
+    init_data = session.start(difficulty)
     
-    # Update Evidence Board
-    # We append the new formatted result to the markdown
-    new_evidence_md = current_evidence_md + f"\n\n---\n\n{formatted_result}"
-    
-    stats = f"Round: {game.round}/5 | Points: {game.points}"
-    
-    return history, new_evidence_md, stats
-
-def next_round_ui(session_id):
-    game = get_current_game(session_id)
-    if not game:
-        return "No game"
-        
-    not_over = game.advance_round()
-    stats = f"Round: {game.round}/5 | Points: {game.points}"
-    
-    if not not_over:
-        stats += " [GAME OVER]"
-        
-    return stats
-
-
-# --- UI LAYOUT ---
+    # Return visible updates
+    return (
+        gr.update(visible=False), # Hide selector row
+        gr.update(visible=True),  # Show game frame
+        json.dumps(init_data)     # Send init data to bridge
+    )
 
-with gr.Blocks(title="Murder.Ai") as demo:
-    
-    gr.Markdown("# 🕵️ MURDER.AI")
-    
-    session_state = gr.State("")
-    
-    # Top Controls
-    with gr.Row():
-        scenario_selector = gr.Dropdown(
-            choices=["The Silicon Valley Incident (Medium)", "The Coffee Shop Murder (Easy)", "The Gallery Heist (Hard)"],
-            value="The Silicon Valley Incident (Medium)",
-            label="Select Case Scenario"
-        )
-        start_btn = gr.Button("📂 LOAD CASE FILE", variant="primary")
-    
-    with gr.Row():
-        # Left: Suspect Cards
-        with gr.Column(scale=1):
-            gr.Markdown("## Suspects")
-            
-            # Suspect 1
-            with gr.Group():
-                s1_html = gr.HTML()
-                s1_btn = gr.Button("Interrogate", variant="secondary", visible=False)
-            
-            # Suspect 2
-            with gr.Group():
-                s2_html = gr.HTML()
-                s2_btn = gr.Button("Interrogate", variant="secondary", visible=False)
-                
-            # Suspect 3
-            with gr.Group():
-                s3_html = gr.HTML()
-                s3_btn = gr.Button("Interrogate", variant="secondary", visible=False)
-                
-            # Suspect 4
-            with gr.Group():
-                s4_html = gr.HTML()
-                s4_btn = gr.Button("Interrogate", variant="secondary", visible=False)
-        
-        # Center: Main Game Area
-        with gr.Column(scale=2):
-            game_stats = gr.Markdown("Round: 0/5 | Points: 10")
-            interrogation_status = gr.Markdown("**Select a suspect to begin interrogation.**")
-            
-            chatbot = gr.Chatbot(
-                label="Investigation Log",
-                height=500,
-            )
-            
-            # State variable to store selected suspect ID
-            selected_suspect_id = gr.State(value=None)
-            
-            with gr.Row():
-                question_input = gr.Textbox(label="Question", placeholder="Where were you?", interactive=False, scale=4)
-                ask_btn = gr.Button("Ask", variant="secondary", interactive=False, scale=1)
-            
-            gr.Markdown("### Tools")
-            with gr.Row():
-                tool_dropdown = gr.Dropdown(
-                    label="Select Tool", 
-                    choices=["get_location", "get_footage", "get_dna_test", "call_alibi"],
-                    value="get_location"
-                )
-                arg1_input = gr.Textbox(label="Input (Phone / Location / ID)")
-                use_tool_btn = gr.Button("Use Tool", interactive=False)
+css = """
+#bridge-input, #bridge-output { display: none !important; }
+.gradio-container { padding: 0 !important; max-width: 100% !important; height: 100vh !important; display: flex; flex-direction: column; }
+#game-frame-container { flex-grow: 1; height: 100% !important; border: none; overflow: hidden; padding: 0; }
+#game-frame-container > .html-container { height: 100% !important; display: flex; flex-direction: column; }
+#game-frame-container .prose { flex-grow: 1; height: 100% !important; max-width: 100% !important; }
+footer { display: none !important; } 
+"""
 
-            next_round_btn = gr.Button("▶️ Next Round / End Game")
-            
-        # Right: Evidence Board
-        with gr.Column(scale=1):
-            gr.Markdown("## Evidence Board")
-            evidence_board = gr.Markdown(
-                value="Select a case to begin..."
+with gr.Blocks(title="Murder.Ai", fill_height=True) as demo:
+    gr.HTML(f"<style>{css}</style>")
+    
+    # Case Selector (Visible Initially)
+    with gr.Row(elem_id="case-selector-row", visible=True) as selector_row:
+        with gr.Column():
+            gr.Markdown("# 🕵️ MURDER.AI - CASE FILES")
+            case_dropdown = gr.Dropdown(
+                choices=["The Silicon Valley Incident (Medium)", "The Coffee Shop Murder (Easy)", "The Gallery Heist (Hard)"],
+                value="The Silicon Valley Incident (Medium)",
+                label="Select Case to Investigate"
             )
+            start_btn = gr.Button("📂 OPEN CASE FILE", variant="primary")
 
-    # --- EVENTS ---
-    
-    start_btn.click(
-        fn=start_new_game_ui,
-        inputs=[scenario_selector],
-        outputs=[
-            session_state,
-            s1_html, s2_html, s3_html, s4_html,
-            s1_btn, s2_btn, s3_btn, s4_btn,
-            chatbot,
-            evidence_board,
-            game_stats,
-            selected_suspect_id,
-            question_input,
-            ask_btn,
-            use_tool_btn,
-            interrogation_status
-        ]
-    )
+    # Game Frame (Hidden Initially)
+    with gr.Group(visible=False, elem_id="game-frame-container") as game_group:
+        game_html = gr.HTML(value=get_game_iframe())
     
-    # Suspect Selection Events
-    s1_btn.click(fn=lambda s: select_suspect_by_index(s, 0), inputs=[session_state], outputs=[selected_suspect_id, interrogation_status])
-    s2_btn.click(fn=lambda s: select_suspect_by_index(s, 1), inputs=[session_state], outputs=[selected_suspect_id, interrogation_status])
-    s3_btn.click(fn=lambda s: select_suspect_by_index(s, 2), inputs=[session_state], outputs=[selected_suspect_id, interrogation_status])
-    s4_btn.click(fn=lambda s: select_suspect_by_index(s, 3), inputs=[session_state], outputs=[selected_suspect_id, interrogation_status])
+    bridge_input = gr.Textbox(elem_id="bridge-input", visible=True)
+    bridge_output = gr.Textbox(elem_id="bridge-output", visible=True)
     
-    ask_btn.click(
-        fn=submit_question,
-        inputs=[session_state, selected_suspect_id, question_input, chatbot],
-        outputs=[chatbot, question_input]
-    )
-    
-    use_tool_btn.click(
-        fn=use_tool_ui,
-        inputs=[session_state, tool_dropdown, arg1_input, chatbot, evidence_board],
-        outputs=[chatbot, evidence_board, game_stats]
+    # Start Game Event
+    start_btn.click(
+        fn=start_game_from_ui,
+        inputs=[case_dropdown],
+        outputs=[selector_row, game_group, bridge_output]
     )
     
-    next_round_btn.click(
-        fn=next_round_ui,
-        inputs=[session_state],
-        outputs=[game_stats]
+    # Bridge Logic (Python -> JS)
+    bridge_output.change(
+        None,
+        inputs=[bridge_output],
+        js="""
+        (data) => {
+            if (!data) return;
+            const iframe = document.querySelector('#game-frame-container iframe');
+            if (iframe && iframe.contentWindow) {
+                iframe.contentWindow.postMessage(JSON.parse(data), '*');
+            }
+        }
+        """
     )
 
-demo.launch(
-    server_name="0.0.0.0", 
-    server_port=7860,
-    allowed_paths=["."],
-    css=custom_css
-)
+app = gr.mount_gradio_app(app, demo, path="/")
+
+if __name__ == "__main__":
+    uvicorn.run(app, host="0.0.0.0", port=7860)

requirements.txt

@@ -1,3 +1,5 @@
 gradio>=5.0
 google-generativeai
 python-dotenv
+fastapi
+uvicorn[standard]

ui/static/css/noir.css

@@ -0,0 +1,386 @@
+/* noir.css - Murder.Ai Theme */
+
+@import url('https://fonts.googleapis.com/css2?family=Special+Elite&family=Roboto:wght@300;700&display=swap');
+
+:root {
+    --bg-color: #1a1a1a;
+    --desk-color: #2c1e12;
+    --paper-color: #f4e4bc;
+    --ink-color: #2a2a2a;
+    --accent-red: #8a0303;
+    --string-color: #a31515;
+    --highlight-glow: rgba(255, 255, 255, 0.1);
+}
+
+body, html {
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    height: 100%;
+    background-color: var(--bg-color);
+    font-family: 'Roboto', sans-serif;
+    overflow: hidden;
+    user-select: none; /* Game-like feel */
+}
+
+#game-container {
+    display: grid;
+    grid-template-columns: 250px 1fr 250px;
+    grid-template-rows: 60px 1fr 250px;
+    height: 100vh;
+    width: 100vw;
+    background: 
+        radial-gradient(circle at 50% 50%, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.8) 100%),
+        repeating-linear-gradient(45deg, #2c1e12 0px, #251810 10px, #2c1e12 20px); /* Faux Wood */
+    box-shadow: inset 0 0 100px black;
+}
+
+/* --- Header --- */
+#top-bar {
+    grid-column: 1 / -1;
+    background: rgba(0, 0, 0, 0.8);
+    color: #eee;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 20px;
+    border-bottom: 2px solid #444;
+    font-family: 'Special Elite', monospace;
+    z-index: 10;
+}
+
+.game-title {
+    font-size: 1.5rem;
+    letter-spacing: 2px;
+    color: var(--accent-red);
+    text-shadow: 0 0 5px var(--accent-red);
+}
+
+.stats-panel {
+    display: flex;
+    gap: 20px;
+    font-size: 1.1rem;
+}
+
+/* --- Left Panel: Suspect Files --- */
+#suspect-files {
+    grid-row: 2 / 3;
+    background: rgba(0, 0, 0, 0.3);
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+    overflow-y: auto;
+    border-right: 1px solid rgba(255,255,255,0.1);
+}
+
+.folder-label {
+    font-family: 'Special Elite', cursive;
+    color: #aaa;
+    text-align: center;
+    border-bottom: 1px dashed #555;
+    padding-bottom: 5px;
+    margin-bottom: 10px;
+}
+
+.suspect-card {
+    background-color: var(--paper-color);
+    padding: 10px 10px 25px 10px; /* Polaroid bottom heavy */
+    box-shadow: 3px 3px 5px rgba(0,0,0,0.5);
+    transform: rotate(-2deg);
+    transition: transform 0.2s, box-shadow 0.2s;
+    cursor: pointer;
+    position: relative;
+}
+
+.suspect-card:hover {
+    transform: rotate(0deg) scale(1.05);
+    box-shadow: 5px 5px 15px rgba(0,0,0,0.7);
+    z-index: 5;
+}
+
+.suspect-card:nth-child(even) {
+    transform: rotate(1deg);
+}
+
+.suspect-img {
+    width: 100%;
+    height: 120px;
+    background-color: #333;
+    margin-bottom: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #777;
+    font-size: 2rem;
+    filter: sepia(0.8) contrast(1.2);
+}
+
+.suspect-name {
+    font-family: 'Special Elite', cursive;
+    font-size: 1.1rem;
+    color: var(--ink-color);
+    text-align: center;
+}
+
+.suspect-phone {
+    font-size: 0.8rem;
+    text-align: center;
+    color: #555;
+    margin-top: 5px;
+    cursor: pointer;
+    border: 1px dashed #aaa;
+    padding: 2px;
+    border-radius: 3px;
+}
+
+.suspect-phone:hover {
+    background: rgba(0,0,0,0.05);
+    color: #000;
+}
+
+.status-stamp {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%) rotate(-15deg);
+    border: 3px solid var(--accent-red);
+    color: var(--accent-red);
+    font-weight: bold;
+    padding: 5px 10px;
+    font-family: 'Special Elite', cursive;
+    font-size: 1.2rem;
+    opacity: 0;
+    transition: opacity 0.3s;
+    pointer-events: none;
+}
+
+.suspect-card.guilty .status-stamp {
+    opacity: 1;
+    content: "GUILTY";
+}
+
+/* --- Center Panel: The Evidence Board --- */
+#evidence-board {
+    grid-row: 2 / 3;
+    grid-column: 2 / 3;
+    position: relative;
+    /* background-image: url('data:image/svg+xml;base64,PHN2Zy4uLz4='); NO SVG HERE, causes 404 if broken */
+    background-color: #c08848;
+    box-shadow: inset 0 0 50px rgba(0,0,0,0.6);
+    overflow: hidden; /* Or auto if we want scrolling */
+    cursor: crosshair;
+}
+
+.evidence-item {
+    position: absolute;
+    background: var(--paper-color);
+    padding: 10px;
+    box-shadow: 2px 2px 4px rgba(0,0,0,0.4);
+    max-width: 200px;
+    font-family: 'Special Elite', cursive;
+    font-size: 0.9rem;
+    color: var(--ink-color);
+    border-top: 1px solid rgba(255,255,255,0.5);
+    transition: transform 0.2s;
+}
+
+.evidence-item.case-file {
+    background: #e8dcc8;
+    width: 250px;
+    max-width: 300px;
+    border: 1px solid #888;
+    padding: 15px;
+    z-index: 5;
+}
+
+.evidence-item:before {
+    /* Pushpin */
+    content: '';
+    position: absolute;
+    top: -5px;
+    left: 50%;
+    width: 10px;
+    height: 10px;
+    background: red;
+    border-radius: 50%;
+    box-shadow: 1px 1px 2px black;
+}
+
+.evidence-item:hover {
+    transform: scale(1.1);
+    z-index: 10;
+}
+
+/* Red String Implementation (SVG Overlay) */
+#string-layer {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+}
+
+/* --- Right Panel: Tools --- */
+#tools-panel {
+    grid-row: 2 / 3;
+    grid-column: 3 / 4;
+    background: rgba(0, 0, 0, 0.3);
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    border-left: 1px solid rgba(255,255,255,0.1);
+}
+
+.tool-btn {
+    background: #333;
+    border: 2px solid #555;
+    color: #ccc;
+    padding: 15px;
+    text-align: center;
+    cursor: pointer;
+    transition: all 0.2s;
+    border-radius: 5px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 5px;
+}
+
+.tool-btn:hover {
+    background: #444;
+    border-color: #777;
+    color: white;
+    transform: translateY(-2px);
+}
+
+.tool-btn:active {
+    transform: translateY(1px);
+}
+
+.tool-icon {
+    font-size: 1.5rem;
+}
+
+/* --- Bottom Panel: Chat / Log --- */
+#chat-panel {
+    grid-column: 1 / -1;
+    grid-row: 3 / 4;
+    background: #111;
+    border-top: 4px solid #333;
+    display: grid;
+    grid-template-columns: 1fr 300px;
+    font-family: 'Special Elite', monospace;
+}
+
+#chat-log {
+    padding: 20px;
+    overflow-y: auto;
+    color: #ddd;
+    background: 
+        linear-gradient(rgba(18, 16, 16, 0.95), rgba(18, 16, 16, 0.95));
+        /* Removed faulty SVG URL here too */
+}
+
+.chat-message {
+    margin-bottom: 15px;
+    padding: 10px;
+    border-left: 3px solid #555;
+    animation: typewriter 0.5s ease-out;
+}
+
+.chat-message.detective {
+    border-left-color: #4a9eff;
+    background: rgba(74, 158, 255, 0.05);
+}
+
+.chat-message.suspect {
+    border-left-color: #ff4a4a;
+    background: rgba(255, 74, 74, 0.05);
+}
+
+.chat-message.system {
+    border-left-color: #4aff4a;
+    font-style: italic;
+    color: #888;
+}
+
+#chat-input-area {
+    background: #222;
+    padding: 15px;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    border-left: 1px solid #333;
+}
+
+textarea {
+    width: 100%;
+    height: 100%;
+    background: #000;
+    border: 1px solid #444;
+    color: #0f0; /* Matrix style input */
+    padding: 10px;
+    font-family: 'Courier New', monospace;
+    resize: none;
+}
+
+textarea:focus {
+    outline: none;
+    border-color: #666;
+}
+
+button.send-btn {
+    background: var(--accent-red);
+    color: white;
+    border: none;
+    padding: 10px;
+    font-family: 'Special Elite', cursive;
+    cursor: pointer;
+    font-size: 1.1rem;
+}
+
+button.send-btn:hover {
+    background: #b30000;
+}
+
+/* --- Animations --- */
+@keyframes typewriter {
+    from { opacity: 0; transform: translateY(10px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+/* --- Loading Overlay --- */
+#loading-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: black;
+    z-index: 100;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    color: white;
+    font-family: 'Special Elite', cursive;
+    transition: opacity 1s;
+    pointer-events: none;
+}
+
+.loader-spinner {
+    width: 50px;
+    height: 50px;
+    border: 5px solid #333;
+    border-top-color: var(--accent-red);
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+    margin-bottom: 20px;
+}
+
+@keyframes spin {
+    to { transform: rotate(360deg); }
+}

ui/static/js/game_logic.js

@@ -0,0 +1,310 @@
+/* game_logic.js - Murder.Ai Frontend Logic */
+
+console.log("🕵️ Murder.Ai Detective Interface Initialized");
+
+// State
+let gameState = {
+    suspects: [],
+    evidence: [],
+    chatLog: [],
+    currentSuspect: null
+};
+
+// --- Bridge: Communication with Parent (Python/Gradio) ---
+
+// We now use direct API calls for reliability
+async function sendAction(action, data) {
+    // console.log("📤 Sending API request:", action, data);
+    try {
+        const response = await fetch('/api/bridge', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({ action, data }),
+        });
+        
+        if (!response.ok) throw new Error(`API Error: ${response.status}`);
+        
+        const result = await response.json();
+        // console.log("📥 API Response:", result);
+        
+        if (result && result.action) {
+            handleServerMessage(result);
+        }
+    } catch (e) {
+        console.error("Bridge Error:", e);
+    }
+}
+
+// Keep listener for any future server-pushed events (if we add sockets later)
+window.addEventListener('message', function(event) {
+    const { action, data } = event.data;
+    if (action) handleServerMessage({ action, data });
+});
+
+function handleServerMessage(message) {
+    const { action, data } = message;
+    switch(action) {
+        case 'init_game':
+            initializeGame(data);
+            break;
+        case 'update_chat':
+            addChatMessage(data.role, data.content, data.name);
+            break;
+        case 'add_evidence':
+            addEvidenceToBoard(data);
+            break;
+        case 'update_status':
+            updateStatus(data);
+            break;
+        case 'game_over':
+            triggerGameOver(data);
+            break;
+        default:
+            console.warn("Unknown action:", action);
+    }
+}
+
+// --- Game Logic ---
+
+function initializeGame(data) {
+    gameState = data;
+    renderSuspects();
+    document.getElementById('loading-overlay').style.opacity = 0;
+    setTimeout(() => {
+        document.getElementById('loading-overlay').style.display = 'none';
+    }, 1000);
+    
+    addChatMessage('system', `CASE LOADED: ${data.scenario.title}`);
+    addChatMessage('system', `VICTIM: ${data.scenario.victim.name}`);
+    
+    // Update UI stats
+    document.getElementById('round-display').innerText = `${data.round}/5`;
+    document.getElementById('points-display').innerText = data.points;
+    
+    renderCaseFile(data.scenario);
+}
+
+function renderCaseFile(scenario) {
+    const victim = scenario.victim;
+    const details = `
+        <div style="border-bottom: 2px solid black; margin-bottom: 5px; padding-bottom: 5px;"><strong>POLICE REPORT</strong></div>
+        <div><strong>CASE:</strong> ${scenario.title}</div>
+        <div><strong>VICTIM:</strong> ${victim.name} (${victim.age})</div>
+        <div><strong>OCCUPATION:</strong> ${victim.occupation}</div>
+        <div><strong>TIME OF DEATH:</strong> ${victim.time_of_death}</div>
+        <div><strong>LOCATION:</strong> ${victim.location || "Unknown"}</div>
+    `;
+    
+    addEvidenceToBoard({
+        title: "CASE FILE #A47",
+        description: details,
+        type: "file"
+    }, 20, 20);
+}
+
+// --- UI Rendering: Suspects ---
+
+function renderSuspects() {
+    const container = document.getElementById('suspect-files');
+    container.innerHTML = '<div class="folder-label">SUSPECTS</div>';
+    
+    if (!gameState.scenario || !gameState.scenario.suspects) return;
+
+    gameState.scenario.suspects.forEach(suspect => {
+        const card = document.createElement('div');
+        card.className = 'suspect-card';
+        card.dataset.id = suspect.id;
+        card.onclick = () => selectSuspect(suspect.id);
+        
+        // Placeholder Avatar (Initials)
+        const initials = suspect.name.split(' ').map(n => n[0]).join('');
+        
+        card.innerHTML = `
+            <div class="suspect-img">${initials}</div>
+            <div class="suspect-name">${suspect.name}</div>
+            <div class="suspect-role">${suspect.role}</div>
+            <div class="suspect-phone" title="Click to copy" onclick="event.stopPropagation(); copyToClipboard('${suspect.phone_number}')">
+                📞 ${suspect.phone_number} 📋
+            </div>
+            <div class="status-stamp"></div>
+        `;
+        
+        container.appendChild(card);
+    });
+}
+
+function copyToClipboard(text) {
+    navigator.clipboard.writeText(text).then(() => {
+        alert("Copied: " + text);
+    }).catch(err => {
+        console.error('Failed to copy: ', err);
+    });
+}
+
+function selectSuspect(suspectId) {
+    gameState.currentSuspect = suspectId;
+    const suspect = gameState.scenario.suspects.find(s => s.id === suspectId);
+    
+    // Highlight visual
+    document.querySelectorAll('.suspect-card').forEach(el => {
+        el.style.border = el.dataset.id === suspectId ? '2px solid red' : 'none';
+    });
+    
+    addChatMessage('system', `Selected suspect: ${suspect.name}. You may now question them.`);
+    sendAction('select_suspect', { suspect_id: suspectId });
+}
+
+// --- UI Rendering: Chat ---
+
+function addChatMessage(role, text, name="System") {
+    const log = document.getElementById('chat-log');
+    const msg = document.createElement('div');
+    
+    let className = 'system';
+    if (role === 'user' || role === 'detective') className = 'detective';
+    if (role === 'assistant' || role === 'suspect') className = 'suspect';
+    
+    msg.className = `chat-message ${className}`;
+    
+    // Format: NAME: Message
+    const displayName = name ? name.toUpperCase() : role.toUpperCase();
+    msg.innerHTML = `<strong>${displayName}:</strong> ${text}`;
+    
+    log.appendChild(msg);
+    log.scrollTop = log.scrollHeight;
+}
+
+function sendUserMessage() {
+    const input = document.getElementById('chat-input');
+    const text = input.value.trim();
+    
+    if (!text) return;
+    
+    if (!gameState.currentSuspect) {
+        alert("Select a suspect first!");
+        return;
+    }
+    
+    addChatMessage('detective', text, "YOU");
+    sendAction('chat_message', { 
+        suspect_id: gameState.currentSuspect,
+        message: text 
+    });
+    
+    input.value = '';
+}
+
+// --- UI Rendering: Evidence Board ---
+
+function addEvidenceToBoard(evidenceData, fixedX = null, fixedY = null) {
+    const board = document.getElementById('evidence-board');
+    
+    const item = document.createElement('div');
+    item.className = 'evidence-item';
+    if (evidenceData.type === 'file') {
+        item.classList.add('case-file');
+        item.innerHTML = evidenceData.description;
+    } else {
+        item.innerHTML = `
+            <strong>${evidenceData.title || "Evidence"}</strong><br>
+            ${evidenceData.description || "No details."}
+        `;
+    }
+    
+    // Placement
+    let x, y;
+    if (fixedX !== null && fixedY !== null) {
+        x = fixedX;
+        y = fixedY;
+        item.style.transform = 'rotate(-2deg)'; // Slight tilt for files
+    } else {
+        x = Math.floor(Math.random() * (board.clientWidth - 200));
+        y = Math.floor(Math.random() * (board.clientHeight - 100));
+        item.style.transform = `rotate(${Math.random() * 10 - 5}deg)`;
+    }
+    
+    item.style.left = x + 'px';
+    item.style.top = y + 'px';
+    
+    // Make draggable (simple implementation)
+    makeDraggable(item);
+    
+    board.appendChild(item);
+    
+    // Play sound effect (optional)
+}
+
+function makeDraggable(elmnt) {
+    let pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
+    elmnt.onmousedown = dragMouseDown;
+
+    function dragMouseDown(e) {
+        e = e || window.event;
+        e.preventDefault();
+        pos3 = e.clientX;
+        pos4 = e.clientY;
+        document.onmouseup = closeDragElement;
+        document.onmousemove = elementDrag;
+        // Bring to front
+        elmnt.style.zIndex = 100;
+    }
+
+    function elementDrag(e) {
+        e = e || window.event;
+        e.preventDefault();
+        pos1 = pos3 - e.clientX;
+        pos2 = pos4 - e.clientY;
+        pos3 = e.clientX;
+        pos4 = e.clientY;
+        elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
+        elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
+    }
+
+    function closeDragElement() {
+        document.onmouseup = null;
+        document.onmousemove = null;
+        elmnt.style.zIndex = 10;
+    }
+}
+
+// --- Tools ---
+
+function useTool(toolName) {
+    const input = prompt(`Enter input for ${toolName} (e.g., phone number):`);
+    if (input) {
+        sendAction('use_tool', { tool: toolName, input: input });
+    }
+}
+
+// --- Listeners ---
+
+document.getElementById('send-btn').addEventListener('click', sendUserMessage);
+document.getElementById('chat-input').addEventListener('keypress', function (e) {
+    if (e.key === 'Enter' && !e.shiftKey) {
+        e.preventDefault();
+        sendUserMessage();
+    }
+});
+
+// Tool Buttons
+document.getElementById('tool-map').onclick = () => useTool('get_location');
+document.getElementById('tool-camera').onclick = () => useTool('get_footage');
+document.getElementById('tool-phone').onclick = () => useTool('call_alibi');
+document.getElementById('tool-dna').onclick = () => useTool('get_dna_test');
+
+// Notify Parent that we are ready (Retry loop)
+console.log("📡 Attempting to connect to game server...");
+const handshakeInterval = setInterval(() => {
+    if (gameState.scenario) {
+        clearInterval(handshakeInterval);
+        console.log("✅ Connection established.");
+    } else {
+        console.log("📡 Sending 'ready' signal...");
+        sendAction('ready', {});
+    }
+}, 2000);
+
+// Immediate first try
+sendAction('ready', {});

ui/templates/game_interface.html

@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Murder.Ai Detective Interface</title>
+    <link rel="stylesheet" href="../static/css/noir.css">
+</head>
+<body>
+
+    <!-- Loading Screen -->
+    <div id="loading-overlay">
+        <div class="loader-spinner"></div>
+        <div>INITIALIZING CASE FILE...</div>
+    </div>
+
+    <div id="game-container">
+        
+        <!-- Header -->
+        <div id="top-bar">
+            <div class="game-title">MURDER.AI</div>
+            <div class="stats-panel">
+                <span>ROUND: <span id="round-display">1/5</span></span>
+                <span>POINTS: <span id="points-display">10</span></span>
+            </div>
+        </div>
+
+        <!-- Left: Suspect Files -->
+        <div id="suspect-files">
+            <!-- Populated by JS -->
+        </div>
+
+        <!-- Center: Evidence Board -->
+        <div id="evidence-board">
+            <!-- Red string SVG layer -->
+            <svg id="string-layer"></svg>
+            <!-- Evidence items populated by JS -->
+        </div>
+
+        <!-- Right: Tools -->
+        <div id="tools-panel">
+            <div class="tool-btn" id="tool-map">
+                <span class="tool-icon">🗺️</span>
+                <span>Location</span>
+            </div>
+            <div class="tool-btn" id="tool-camera">
+                <span class="tool-icon">📹</span>
+                <span>Footage</span>
+            </div>
+            <div class="tool-btn" id="tool-phone">
+                <span class="tool-icon">📞</span>
+                <span>Call Alibi</span>
+            </div>
+            <div class="tool-btn" id="tool-dna">
+                <span class="tool-icon">🔬</span>
+                <span>DNA Test</span>
+            </div>
+            <div class="tool-btn" id="tool-accuse" style="margin-top: auto; border-color: red; color: red;">
+                <span class="tool-icon">⚖️</span>
+                <span>ACCUSE</span>
+            </div>
+        </div>
+
+        <!-- Bottom: Chat / Log -->
+        <div id="chat-panel">
+            <div id="chat-log">
+                <div class="chat-message system">System initialized. Waiting for case data...</div>
+            </div>
+            <div id="chat-input-area">
+                <textarea id="chat-input" placeholder="Type your question here..."></textarea>
+                <button id="send-btn" class="send-btn">INTERROGATE</button>
+            </div>
+        </div>
+
+    </div>
+
+    <script src="../static/js/game_logic.js"></script>
+</body>
+</html>