feat: Add modal and notification system for investigation tools and enhance README with Docker runtime

Dockerfile

@@ -0,0 +1,24 @@
+# Use an official lightweight Python image
+FROM python:3.10-slim
+
+# Prevent Python from writing .pyc files and buffering stdout
+ENV PYTHONDONTWRITEBYTECODE=1
+ENV PYTHONUNBUFFERED=1
+
+# Create a working directory
+WORKDIR /app
+
+# Copy requirements first to leverage Docker layer caching
+COPY requirements.txt .
+
+# Install dependencies
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy the rest of the app
+COPY . .
+
+# Expose port (HF Spaces typically use 7860 for Gradio/Streamlit)
+EXPOSE 7860
+
+# Command to run the app
+CMD ["python", "app.py"]

README.md

@@ -8,6 +8,7 @@ sdk_version: 6.0.1
 app_file: app.py
 pinned: false
 license: gpl-3.0
+runtime: docker
 short_description: Even AI has something to hide
 tags:
   - building-mcp-track-creative

ui/static/css/noir.css

@@ -403,4 +403,107 @@ button.send-btn:hover {
 
 @keyframes spin {
     to { transform: rotate(360deg); }
+}
+
+/* --- Tool Modal --- */
+.modal-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.6);
+    backdrop-filter: blur(5px);
+    z-index: 200;
+    display: none;
+    align-items: center;
+    justify-content: center;
+}
+
+.modal-overlay.active {
+    display: flex;
+}
+
+.modal-content {
+    background: var(--paper-color);
+    padding: 20px;
+    width: 400px;
+    border: 1px solid #555;
+    box-shadow: 0 10px 30px rgba(0,0,0,0.8);
+    font-family: 'Special Elite', cursive;
+    color: var(--ink-color);
+    transform: rotate(-1deg);
+}
+
+.modal-header {
+    font-size: 1.2rem;
+    border-bottom: 2px solid var(--ink-color);
+    margin-bottom: 15px;
+    padding-bottom: 5px;
+    font-weight: bold;
+}
+
+.modal-input {
+    width: 100%;
+    padding: 10px;
+    margin: 10px 0 20px 0;
+    background: rgba(255,255,255,0.5);
+    border: 1px solid #888;
+    font-family: 'Courier New', monospace;
+    font-size: 1.1rem;
+    color: #000;
+    box-sizing: border-box;
+}
+
+.modal-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 10px;
+}
+
+.modal-btn {
+    padding: 8px 15px;
+    border: 1px solid #333;
+    cursor: pointer;
+    font-family: 'Special Elite', cursive;
+    transition: all 0.2s;
+}
+
+.modal-btn.confirm {
+    background: var(--desk-color);
+    color: #eee;
+}
+
+.modal-btn.confirm:hover {
+    background: #444;
+}
+
+.modal-btn.cancel {
+    background: transparent;
+    color: #333;
+}
+
+.modal-btn.cancel:hover {
+    text-decoration: line-through;
+}
+
+/* --- Notification Toast --- */
+#notification-toast {
+    position: fixed;
+    bottom: 30px;
+    left: 50%;
+    transform: translateX(-50%) translateY(100px);
+    background: rgba(0, 0, 0, 0.8);
+    color: white;
+    padding: 10px 20px;
+    border-radius: 5px;
+    font-family: 'Special Elite', cursive;
+    z-index: 300;
+    transition: transform 0.3s ease-out;
+    border: 1px solid #555;
+    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
+}
+
+#notification-toast.show {
+    transform: translateX(-50%) translateY(0);
 }

ui/static/js/game_logic.js

@@ -141,9 +141,20 @@ function renderSuspects() {
     }, 500);
 }
 
+// --- Modal & Notifications ---
+
+function showNotification(message) {
+    const toast = document.getElementById('notification-toast');
+    toast.innerText = message;
+    toast.classList.add('show');
+    setTimeout(() => {
+        toast.classList.remove('show');
+    }, 2000);
+}
+
 function copyToClipboard(text) {
     navigator.clipboard.writeText(text).then(() => {
-        alert("Copied: " + text);
+        showNotification("COPIED: " + text);
     }).catch(err => {
         console.error('Failed to copy: ', err);
     });
@@ -319,15 +330,48 @@ function makeDraggable(elmnt) {
 
 // --- Tools ---
 
+let pendingTool = null;
+
 function useTool(toolName) {
-    const input = prompt(`Enter input for ${toolName} (e.g., phone number):`);
-    if (input) {
-        sendAction('use_tool', { tool: toolName, input: input });
+    pendingTool = toolName;
+    const modal = document.getElementById('tool-modal');
+    const input = document.getElementById('modal-input');
+    const promptText = document.getElementById('modal-prompt-text');
+    
+    // Custom prompts
+    if (toolName === 'get_location') promptText.innerText = "Enter Target Phone Number:";
+    if (toolName === 'call_alibi') promptText.innerText = "Enter Witness Phone Number:";
+    if (toolName === 'get_dna_test') promptText.innerText = "Enter Evidence ID:";
+    if (toolName === 'get_footage') promptText.innerText = "Enter Camera Location:";
+    
+    input.value = '';
+    modal.classList.add('active');
+    input.focus();
+}
+
+function submitTool() {
+    const input = document.getElementById('modal-input');
+    const value = input.value.trim();
+    
+    if (value && pendingTool) {
+        sendAction('use_tool', { tool: pendingTool, input: value });
+        closeModal();
     }
 }
 
+function closeModal() {
+    document.getElementById('tool-modal').classList.remove('active');
+    pendingTool = null;
+}
+
 // --- Listeners ---
 
+document.getElementById('modal-cancel').onclick = closeModal;
+document.getElementById('modal-confirm').onclick = submitTool;
+document.getElementById('modal-input').addEventListener('keypress', function (e) {
+    if (e.key === 'Enter') submitTool();
+});
+
 document.getElementById('send-btn').addEventListener('click', sendUserMessage);
 document.getElementById('chat-input').addEventListener('keypress', function (e) {
     if (e.key === 'Enter' && !e.shiftKey) {

ui/templates/game_interface.html

@@ -74,6 +74,22 @@
 
     </div>
 
+    <!-- Tool Input Modal -->
+    <div id="tool-modal" class="modal-overlay">
+        <div class="modal-content">
+            <div class="modal-header">INVESTIGATION TOOL</div>
+            <div id="modal-prompt-text">Enter details:</div>
+            <input type="text" id="modal-input" class="modal-input" placeholder="...">
+            <div class="modal-actions">
+                <button id="modal-cancel" class="modal-btn cancel">CANCEL</button>
+                <button id="modal-confirm" class="modal-btn confirm">SUBMIT</button>
+            </div>
+        </div>
+    </div>
+
+    <!-- Notification Toast -->
+    <div id="notification-toast">Notification</div>
+
     <script src="../static/js/game_logic.js"></script>
 </body>
 </html>