fix: clean up AI response processing and improve UI

Remove problematic regex that was causing text artifacts in responses.
Also improve mobile chat interface and update styling.

.dockerignore

@@ -0,0 +1,53 @@
+# Node modules
+node_modules/
+npm-debug.log*
+yarn-debug.log*
+
+# Git
+.git/
+.gitignore
+
+# Environment files
+.env
+.env.*
+
+# IDE files
+.vscode/
+.idea/
+*.swp
+*.swo
+
+# OS files
+.DS_Store
+Thumbs.db
+
+# Logs
+*.log
+logs/
+
+# Temporary files
+tmp/
+temp/
+.aider*
+
+# Documentation
+*.md
+!README.md
+
+# Planning documents
+*_PLAN.md
+IMPLEMENTATION_*.md
+
+# Python cache
+__pycache__/
+*.pyc
+*.pyo
+*.pyd
+
+# Coverage
+coverage/
+.nyc_output/
+
+# Build artifacts
+dist/
+build/

.gitignore

@@ -55,7 +55,17 @@ tmp/
 temp/
 .aider*
 
+# Python
+__pycache__/
+*.py[cod]
+*$py.class
+*.so
+
 # Planning documents
 HF_DATASET_INTEGRATION_PLAN.md
 *_PLAN.md
 IMPLEMENTATION_*.md
+
+# Local configuration files
+*.local
+.env

Makefile

@@ -0,0 +1,48 @@
+.PHONY: help dev dev-python dev-docker build test clean install docker-build docker-run docker-dev
+
+help: ## Show this help message
+	@echo "Available commands:"
+	@grep -E '^[a-zA-Z_-]+:.*?## .*$$' $(MAKEFILE_LIST) | sort | awk 'BEGIN {FS = ":.*?## "}; {printf "  \033[36m%-15s\033[0m %s\n", $$1, $$2}'
+
+install: ## Install dependencies
+	@echo "Installing Python dependencies..."
+	pip install -r requirements.txt
+	@echo "Installing Node.js dependencies..."
+	npm install
+
+dev: ## Start local development server (Python HTTP server)
+	@echo "Starting local development server on http://localhost:8000"
+	python local-server.py 8000
+
+dev-python: ## Start FastAPI development server
+	@echo "Starting FastAPI server on http://localhost:7860"
+	python app.py
+
+dev-docker: ## Start development environment with Docker Compose
+	docker-compose --profile dev up --build
+
+build: ## Build the application (no-op for vanilla JS)
+	@echo "No build step needed for vanilla JS application"
+
+test: ## Run tests (placeholder)
+	@echo "No tests configured yet"
+
+clean: ## Clean temporary files
+	find . -type f -name "*.pyc" -delete
+	find . -type d -name "__pycache__" -delete
+	find . -type d -name "node_modules" -exec rm -rf {} + 2>/dev/null || true
+
+docker-build: ## Build Docker image
+	docker build -t cloze-reader .
+
+docker-run: ## Run Docker container
+	docker run -p 7860:7860 --env-file .env cloze-reader
+
+docker-dev: ## Start with docker-compose
+	docker-compose up --build
+
+logs: ## Show Docker logs
+	docker-compose logs -f
+
+stop: ## Stop Docker containers
+	docker-compose down

docker-compose.yml

@@ -0,0 +1,27 @@
+version: '3.8'
+
+services:
+  cloze-reader:
+    build: .
+    ports:
+      - "7860:7860"
+    environment:
+      - OPENROUTER_API_KEY=${OPENROUTER_API_KEY:-}
+      - HF_API_KEY=${HF_API_KEY:-}
+    volumes:
+      - ./src:/app/src:ro
+      - ./index.html:/app/index.html:ro
+    restart: unless-stopped
+    
+  dev-server:
+    image: python:3.9-slim
+    working_dir: /app
+    ports:
+      - "8000:8000"
+    volumes:
+      - .:/app
+    command: python -m http.server 8000
+    environment:
+      - PYTHONUNBUFFERED=1
+    profiles:
+      - dev

local-server.py

@@ -0,0 +1,62 @@
+#!/usr/bin/env python3
+"""
+Local development server for cloze-reader
+Serves static files with CORS enabled for local testing
+"""
+
+import http.server
+import socketserver
+import os
+from urllib.parse import urlparse
+import json
+
+class LocalHandler(http.server.SimpleHTTPRequestHandler):
+    def end_headers(self):
+        # Enable CORS for local development
+        self.send_header('Access-Control-Allow-Origin', '*')
+        self.send_header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS')
+        self.send_header('Access-Control-Allow-Headers', 'Content-Type')
+        super().end_headers()
+    
+    def do_GET(self):
+        # Handle root path
+        if self.path == '/':
+            self.path = '/index.html'
+        
+        # Handle icon.png (serve local file if exists, otherwise redirect)
+        if self.path == '/icon.png':
+            if os.path.exists('icon.png'):
+                return super().do_GET()
+            else:
+                self.send_response(302)
+                self.send_header('Location', 'https://raw.githubusercontent.com/zmuhls/cloze-reader/main/icon.png')
+                self.end_headers()
+                return
+        
+        # Serve static files
+        return super().do_GET()
+    
+    def do_OPTIONS(self):
+        self.send_response(200)
+        self.end_headers()
+
+def run_server(port=8000):
+    handler = LocalHandler
+    
+    try:
+        with socketserver.TCPServer(("", port), handler) as httpd:
+            print(f"Local development server running at http://localhost:{port}/")
+            print("Press Ctrl+C to stop")
+            httpd.serve_forever()
+    except KeyboardInterrupt:
+        print("\nServer stopped")
+    except OSError as e:
+        if e.errno == 48:  # Address already in use
+            print(f"Port {port} is already in use. Try a different port.")
+        else:
+            print(f"Error starting server: {e}")
+
+if __name__ == "__main__":
+    import sys
+    port = int(sys.argv[1]) if len(sys.argv) > 1 else 8000
+    run_server(port)

package.json

@@ -0,0 +1,38 @@
+{
+  "name": "cloze-reader",
+  "version": "1.0.0",
+  "description": "Interactive cloze reading comprehension game",
+  "main": "src/app.js",
+  "type": "module",
+  "scripts": {
+    "dev": "python -m http.server 8000",
+    "dev:python": "python app.py",
+    "build": "echo 'No build step needed for vanilla JS'",
+    "test": "echo 'No tests specified yet'",
+    "lint": "echo 'No linting configured yet'",
+    "start": "python app.py",
+    "docker:build": "docker build -t cloze-reader .",
+    "docker:run": "docker run -p 7860:7860 --env-file .env cloze-reader",
+    "docker:dev": "docker-compose up --build",
+    "docker:stop": "docker-compose down",
+    "docker:logs": "docker-compose logs -f",
+    "docker:clean": "docker-compose down -v --remove-orphans"
+  },
+  "keywords": [
+    "education",
+    "reading",
+    "comprehension",
+    "cloze",
+    "game"
+  ],
+  "author": "",
+  "license": "MIT",
+  "devDependencies": {
+    "http-server": "^14.1.1"
+  },
+  "dependencies": {},
+  "engines": {
+    "node": ">=14.0.0",
+    "python": ">=3.9"
+  }
+}

src/aiService.js

@@ -239,7 +239,6 @@ Passage: "${passage}"`
       content = content
         .replace(/^\s*["']|["']\s*$/g, '')  // Remove leading/trailing quotes
         .replace(/^\s*[:;]+\s*/, '')        // Remove leading colons and semicolons
-        .replace(/^\s*[a-z]+:\s*/i, '')     // Remove any word followed by colon (like "mas:")
         .replace(/\*+/g, '')                // Remove asterisks (markdown bold/italic)
         .replace(/_+/g, '')                 // Remove underscores (markdown)
         .replace(/#+\s*/g, '')              // Remove hash symbols (markdown headers)

src/chatInterface.js

@@ -44,7 +44,12 @@ class ChatUI {
           <!-- Question buttons area -->
           <div class="p-4 border-t">
             <div class="text-sm text-gray-600 mb-3">Choose a question:</div>
-            <div id="question-buttons" class="grid grid-cols-2 gap-2">
+            <!-- Dropdown for mobile -->
+            <select id="question-dropdown" class="w-full p-2 border rounded md:hidden mb-2">
+              <option value="">Select a question...</option>
+            </select>
+            <!-- Button grid for desktop -->
+            <div id="question-buttons" class="hidden md:grid grid-cols-2 gap-2">
               <!-- Question buttons will be inserted here -->
             </div>
           </div>
@@ -107,6 +112,7 @@ class ChatUI {
     messagesContainer.innerHTML = `
       <div class="text-center text-gray-500 text-sm">
         Choose a question below to get help with this word.
+        <br>
       </div>
     `;
   }
@@ -159,27 +165,39 @@ class ChatUI {
   // Load question buttons with disabled state for used questions
   loadQuestionButtons() {
     const buttonsContainer = document.getElementById('question-buttons');
+    const dropdown = document.getElementById('question-dropdown');
     const questions = this.game.getSuggestedQuestionsForBlank(this.activeChatBlank);
     
-    let html = '';
+    // Clear existing content
+    buttonsContainer.innerHTML = '';
+    dropdown.innerHTML = '<option value="">Select a question...</option>';
+    
+    // Build button grid for desktop and dropdown options
+    let buttonHtml = '';
     questions.forEach(question => {
       const isDisabled = question.used;
       const buttonClass = isDisabled
-        ? 'question-btn px-3 py-2 bg-gray-200 text-gray-500 rounded cursor-not-allowed text-sm font-medium'
-        : 'question-btn px-3 py-2 bg-blue-100 text-blue-800 rounded hover:bg-blue-200 text-sm font-medium';
+        ? 'question-btn px-2 py-1 bg-gray-100 text-gray-500 rounded cursor-not-allowed text-xs'
+        : 'question-btn px-2 py-1 bg-blue-50 text-blue-700 rounded hover:bg-blue-100 text-xs border border-blue-200';
       
-      html += `
+      // Desktop buttons
+      buttonHtml += `
         <button class="${buttonClass}"
                 data-type="${question.type}"
                 ${isDisabled ? 'disabled' : ''}>
           ${question.text}${isDisabled ? ' ✓' : ''}
         </button>
       `;
+      
+      // Mobile dropdown options
+      if (!isDisabled) {
+        dropdown.innerHTML += `<option value="${question.type}">${question.text}</option>`;
+      }
     });
     
-    buttonsContainer.innerHTML = html;
+    buttonsContainer.innerHTML = buttonHtml;
     
-    // Add click listeners to individual question buttons (not the container)
+    // Add click listeners to desktop buttons
     buttonsContainer.querySelectorAll('.question-btn').forEach(btn => {
       btn.addEventListener('click', (e) => {
         if (!btn.disabled) {
@@ -190,6 +208,14 @@ class ChatUI {
         }
       });
     });
+    
+    // Add change listener to mobile dropdown
+    dropdown.addEventListener('change', (e) => {
+      if (e.target.value) {
+        this.askQuestion(e.target.value);
+        e.target.value = ''; // Reset dropdown
+      }
+    });
   }
 
   // Ask a specific question

src/clozeGameEngine.js

@@ -392,8 +392,8 @@ class ClozeGame {
       const inputHtml = `<input type="text" 
         class="cloze-input" 
         data-blank-index="${index}" 
-        placeholder="${'_'.repeat(Math.max(3, blank.originalWord.length))}"
-        style="width: ${Math.max(80, blank.originalWord.length * 12)}px;">`;
+        placeholder="${'_ '.repeat(Math.max(3, blank.originalWord.length)).trim()}"
+        style="width: ${Math.max(80, blank.originalWord.length * 16)}px;">`;
       
       html = html.replace(`___BLANK_${index}___`, inputHtml);
     });

src/styles.css

@@ -224,7 +224,7 @@
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
     background-color: transparent;
     border: none;
-    border-bottom: 2px solid black;
+    border-bottom: 2px dotted black;
     color: var(--typewriter-ink);
     text-align: center;
     outline: none;
@@ -238,18 +238,18 @@
   }
   
   .cloze-input:focus {
-    border-bottom-color: black;
+    border-bottom: 2px dotted black;
     box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);
     background-color: rgba(0, 0, 0, 0.05);
   }
   
   .cloze-input.correct {
-    border-bottom-color: #10b981;
+    border-bottom: 2px dotted #10b981;
     background-color: rgba(16, 185, 129, 0.1);
   }
   
   .cloze-input.incorrect {
-    border-bottom-color: #ef4444;
+    border-bottom: 2px dotted #ef4444;
     background-color: rgba(239, 68, 68, 0.1);
   }
 
@@ -405,6 +405,34 @@
     }
   }
 
+  /* Compact question buttons for chat interface */
+  #chat-modal .question-btn {
+    padding: 6px 8px;
+    min-height: auto;
+    font-size: 12px;
+    line-height: 1.3;
+    font-weight: 400;
+    transition: all 0.15s ease;
+  }
+
+  /* Mobile dropdown styling */
+  #question-dropdown {
+    background: #f8f9fa;
+    border: 2px solid #e9ecef;
+    border-radius: 8px;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
+    font-size: 15px;
+    font-weight: 500;
+    color: #495057;
+    transition: all 0.2s ease;
+  }
+
+  #question-dropdown:focus {
+    outline: none;
+    border-color: #007bff;
+    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
+  }
+
   /* Print styles */
   @media print {
     body {