Phase 4: UI updates for sentence-level categorization

- Add collapsible sentence breakdown to submissions page
- Show category distribution per submission
- Add updateSentenceCategory() JavaScript function
- Display confidence scores for each sentence
- Editable sentence categories with inline feedback

app/templates/admin/submissions.html

@@ -66,6 +66,55 @@
 
                     <p class="mb-3">{{ sub.message }}</p>
 
+                    {% if sub.sentence_analysis_done and sub.sentences %}
+                    <!-- NEW: Category Distribution -->
+                    <div class="mb-2">
+                        <strong>Category Distribution:</strong>
+                        {% for category, percentage in sub.get_category_distribution().items() %}
+                            <span class="badge bg-secondary">{{ category }}: {{ percentage }}%</span>
+                        {% endfor %}
+                    </div>
+
+                    <!-- NEW: Collapsible Sentence Breakdown -->
+                    <button class="btn btn-sm btn-outline-primary mb-2" 
+                            type="button" 
+                            data-bs-toggle="collapse" 
+                            data-bs-target="#sentences-{{ sub.id }}">
+                        <i class="bi bi-list-nested"></i> View Sentences ({{ sub.sentences|length }})
+                    </button>
+                    
+                    <div class="collapse" id="sentences-{{ sub.id }}">
+                        <div class="border-start border-primary ps-3 mt-2">
+                            {% for sentence in sub.sentences %}
+                                <div class="mb-2 p-2 bg-light rounded">
+                                    <div class="d-flex justify-content-between align-items-start">
+                                        <div class="flex-grow-1">
+                                            <small class="text-muted">Sentence {{ sentence.sentence_index + 1 }}:</small>
+                                            <p class="mb-1">{{ sentence.text }}</p>
+                                        </div>
+                                        <div class="ms-2">
+                                            <select class="form-select form-select-sm" 
+                                                    style="width: 150px;"
+                                                    onchange="updateSentenceCategory({{ sentence.id }}, this.value, this)">
+                                                <option value="">Uncategorized</option>
+                                                {% for cat in categories %}
+                                                    <option value="{{ cat }}" 
+                                                            {% if sentence.category == cat %}selected{% endif %}>
+                                                        {{ cat }}
+                                                    </option>
+                                                {% endfor %}
+                                            </select>
+                                        </div>
+                                    </div>
+                                    {% if sentence.confidence %}
+                                        <small class="text-muted">Confidence: {{ "%.0f"|format(sentence.confidence * 100) }}%</small>
+                                    {% endif %}
+                                </div>
+                            {% endfor %}
+                        </div>
+                    </div>
+                    {% endif %}
+
                     {% if sub.latitude and sub.longitude %}
                     <p class="text-muted small mb-3">
                         <i class="bi bi-geo-alt-fill"></i>
@@ -147,6 +196,35 @@ function updateCategory(submissionId, category, selectElement) {
     });
 }
 
+function updateSentenceCategory(sentenceId, category, selectElement) {
+    fetch(`{{ url_for("admin.update_sentence_category", sentence_id=0) }}`.replace('/0', `/${sentenceId}`), {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ category: category || null })
+    })
+    .then(response => response.json())
+    .then(data => {
+        if (data.success) {
+            // Show success feedback
+            const originalBg = selectElement.style.backgroundColor;
+            selectElement.style.backgroundColor = '#d1fae5';
+            setTimeout(() => {
+                selectElement.style.backgroundColor = originalBg;
+            }, 500);
+        } else {
+            alert('Failed to update sentence category: ' + (data.error || 'Unknown error'));
+            location.reload();
+        }
+    })
+    .catch(err => {
+        console.error('Sentence category update error:', err);
+        alert('Error updating sentence category: ' + err.message);
+        location.reload();
+    });
+}
+
 function toggleFlag(submissionId) {
     fetch(`{{ url_for("admin.toggle_flag", submission_id=0) }}`.replace('/0', `/${submissionId}`), {
         method: 'POST'