20a108402e
Blog Pre-Publication Workflow: - New admin interface (blog-pre-publication.html) for framework-guided content review - Analysis provides: sensitivity check, compliance validation, audience analysis - Publication guidance: timing, monitoring, action recommendations - Response templates for anticipated reader feedback - Overall recommendation: APPROVE/REVIEW/REJECT decision - CSP-compliant implementation (no inline scripts/styles) Comment & Feedback Analysis Workflow: - New admin interface (comment-analysis.html) for social media/article feedback - Sentiment analysis (positive/negative/neutral/mixed with confidence) - Values alignment check (aligned values, concerns, misunderstandings) - Risk assessment (low/medium/high with factors) - Recommended responses (prioritized with rationale) - Framework guidance on whether/how to respond Backend Implementation: - New controller: framework-content-analysis.controller.js - Services invoked: PluralisticDeliberationOrchestrator, BoundaryEnforcer - API routes: /api/admin/blog/analyze, /api/admin/feedback/analyze - Integration with existing auth and validation middleware Framework Validation: During implementation, framework caught and blocked TWO CSP violations: 1. Inline onclick attribute - forced addEventListener pattern 2. Inline style attribute - forced data attributes + JavaScript This demonstrates framework is actively preventing violations in real-time. Transforms blog curation from passive reporter to active agency manager. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
175 lines
7.4 KiB
HTML
175 lines
7.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Comment & Feedback Analysis | Tractatus Admin</title>
|
|
<link rel="icon" type="image/svg+xml" href="/favicon-new.svg">
|
|
<link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1761519055803">
|
|
<link rel="stylesheet" href="/css/tractatus-theme.min.css?v=0.1.0.1761519055803">
|
|
<script src="/js/admin/auth-check.js?v=0.1.0.1761519055803"></script>
|
|
</head>
|
|
<body class="bg-gray-50">
|
|
|
|
<!-- Navigation -->
|
|
<div id="admin-navbar" data-page-title="Comment Analysis" data-page-icon="comments"></div>
|
|
<script src="/js/components/navbar-admin.js?v=0.1.0.1761519055803"></script>
|
|
|
|
<!-- Page Header -->
|
|
<div class="bg-white border-b border-gray-200">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<h1 class="text-3xl font-bold text-gray-900">Comment & Feedback Analysis</h1>
|
|
<p class="text-gray-600 mt-2">Analyze social media comments and article feedback with framework guidance</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main Content -->
|
|
<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
|
|
|
<!-- Input Section -->
|
|
<div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6 mb-8">
|
|
<h2 class="text-xl font-semibold text-gray-900 mb-4">Feedback Details</h2>
|
|
|
|
<div class="space-y-4">
|
|
<!-- Source Selection -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div>
|
|
<label for="feedback-source" class="block text-sm font-medium text-gray-700 mb-2">Source Platform</label>
|
|
<select id="feedback-source" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
|
|
<option value="">Select source...</option>
|
|
<option value="twitter">Twitter/X</option>
|
|
<option value="linkedin">LinkedIn</option>
|
|
<option value="blog-comment">Blog Comment</option>
|
|
<option value="email">Email</option>
|
|
<option value="other">Other</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="related-post" class="block text-sm font-medium text-gray-700 mb-2">Related Article/Post (Optional)</label>
|
|
<input
|
|
type="text"
|
|
id="related-post"
|
|
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
|
|
placeholder="Article title or URL">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Comment/Feedback Content -->
|
|
<div>
|
|
<label for="feedback-content" class="block text-sm font-medium text-gray-700 mb-2">Comment/Feedback Content</label>
|
|
<textarea
|
|
id="feedback-content"
|
|
rows="8"
|
|
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 text-sm"
|
|
placeholder="Paste the comment or feedback here..."></textarea>
|
|
</div>
|
|
|
|
<!-- Your Notes/Questions -->
|
|
<div>
|
|
<label for="your-notes" class="block text-sm font-medium text-gray-700 mb-2">Your Notes/Questions (Optional)</label>
|
|
<textarea
|
|
id="your-notes"
|
|
rows="4"
|
|
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 text-sm"
|
|
placeholder="Add your observations, questions, or concerns about this feedback..."></textarea>
|
|
</div>
|
|
|
|
<!-- Analyze Button -->
|
|
<div class="flex justify-end">
|
|
<button
|
|
id="analyze-feedback-btn"
|
|
class="px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition font-medium">
|
|
<svg class="w-5 h-5 inline-block mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"/>
|
|
</svg>
|
|
Analyze with Framework
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Results Section (Hidden Initially) -->
|
|
<div id="results-section" class="hidden space-y-6">
|
|
|
|
<!-- Sentiment Analysis -->
|
|
<div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
|
|
<h3 class="text-lg font-semibold text-gray-900 mb-4">Sentiment Analysis</h3>
|
|
<div id="sentiment-result" class="space-y-3">
|
|
<!-- Populated by JS -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Framework Analysis -->
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
|
|
|
<!-- Values & Concerns -->
|
|
<div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
|
|
<div class="flex items-center mb-4">
|
|
<div class="w-10 h-10 bg-purple-100 rounded-lg flex items-center justify-center mr-3">
|
|
<svg class="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-lg font-semibold text-gray-900">Values & Concerns</h3>
|
|
</div>
|
|
<div id="values-result" class="text-sm text-gray-700">
|
|
<!-- Populated by JS -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Risk Assessment -->
|
|
<div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
|
|
<div class="flex items-center mb-4">
|
|
<div class="w-10 h-10 bg-orange-100 rounded-lg flex items-center justify-center mr-3">
|
|
<svg class="w-6 h-6 text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-lg font-semibold text-gray-900">Risk Assessment</h3>
|
|
</div>
|
|
<div id="risk-result" class="text-sm text-gray-700">
|
|
<!-- Populated by JS -->
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Recommended Responses -->
|
|
<div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
|
|
<h3 class="text-lg font-semibold text-gray-900 mb-4">Recommended Responses</h3>
|
|
<div id="response-options" class="space-y-4">
|
|
<!-- Populated by JS -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Framework Guidance -->
|
|
<div class="bg-blue-50 border-2 border-blue-200 rounded-lg p-6">
|
|
<h3 class="text-lg font-semibold text-gray-900 mb-3">Framework Guidance</h3>
|
|
<div id="framework-guidance" class="text-sm text-gray-800 space-y-2">
|
|
<!-- Populated by JS -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Action Buttons -->
|
|
<div class="flex justify-end space-x-4">
|
|
<button id="save-analysis-btn" class="px-6 py-3 bg-gray-600 text-white rounded-lg hover:bg-gray-700 transition">
|
|
Save Analysis
|
|
</button>
|
|
<button id="export-report-btn" class="px-6 py-3 bg-green-600 text-white rounded-lg hover:bg-green-700 transition">
|
|
Export Report
|
|
</button>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</main>
|
|
|
|
<script src="/js/admin/comment-analysis.js?v=0.1.0.1761519055803"></script>
|
|
|
|
</body>
|
|
</html>
|