feat: reconcile moderation queue with canonical comment statuses

Author: brianfunk

docs/plan/M03-agency-operations.md

@@ -17,12 +17,12 @@ Replace mock agency workflows with real data operations.
 - [x] Wire `/agency/users` to real user management page.
 - [x] Remove high-visibility "coming soon" placeholders in core agency routes.
 - [x] Connect docket pages to real Supabase tables/RPCs.
-- [ ] Ensure moderation queue reads/writes real moderation data.
+- [x] Ensure moderation queue reads/writes real moderation data.
 
 ## Acceptance criteria
 
-- [ ] Agency can create and manage dockets without mock data.
-- [ ] Agency moderation actions persist and are auditable.
+- [x] Agency can create and manage dockets without mock data.
+- [x] Agency moderation actions persist and are auditable.
 
 ## Risks/blockers
 
@@ -40,3 +40,4 @@ Replace mock agency workflows with real data operations.
 - 2026-02-11: Replaced public placeholder screens for data access and platform status with implemented content pages.
 - 2026-02-11: Replaced mock data in `src/pages/agency/DocketList.tsx` with real Supabase queries scoped to current agency membership.
 - 2026-02-11: Implemented real docket creation in `src/pages/agency/DocketWizard.tsx` including identity-mode, moderation/captcha settings, and best-effort supporting document persistence.
+- 2026-02-11: Updated moderation logic to canonical comment statuses (`under_review`/`published`) with compatibility mapping for legacy values and persisted moderation logging.

docs/plan/README.md

@@ -34,7 +34,7 @@ This folder tracks implementation progress for the OpenComments production roadm
 - `M00`: Completed
 - `M01`: In progress
 - `M02`: In progress
-- `M03`: In progress
+- `M03`: Completed
 - `M04`: In progress
 - `M05`: Completed
 - `M06`: Completed

src/hooks/useModerationQueue.ts

@@ -2,8 +2,16 @@ import { useState, useEffect } from 'react'
 import { supabase } from '../lib/supabase'
 import { useAgency } from '../contexts/AgencyContext'
 
-export type CommentStatus = 'pending' | 'approved' | 'rejected' | 'flagged'
+export type CommentStatus =
+  | 'pending'
+  | 'submitted'
+  | 'under_review'
+  | 'approved'
+  | 'published'
+  | 'rejected'
+  | 'flagged'
 export type ModerationAction = 'approve' | 'reject' | 'flag' | 'unflag'
+type QueueFilterStatus = 'under_review' | 'published' | 'rejected' | 'flagged'
 
 export interface QueueComment {
   id: string
@@ -27,8 +35,8 @@ export interface QueueComment {
 }
 
 export interface ModerationStats {
-  pending: number
-  approved: number
+  under_review: number
+  published: number
   rejected: number
   flagged: number
   total: number
@@ -38,16 +46,16 @@ export const useModerationQueue = () => {
   const { currentAgency } = useAgency()
   const [comments, setComments] = useState<QueueComment[]>([])
   const [stats, setStats] = useState<ModerationStats>({
-    pending: 0,
-    approved: 0,
+    under_review: 0,
+    published: 0,
     rejected: 0,
     flagged: 0,
     total: 0
   })
   const [loading, setLoading] = useState(true)
   const [error, setError] = useState<string | null>(null)
 
-  const fetchComments = async (status?: CommentStatus) => {
+  const fetchComments = async (status?: QueueFilterStatus) => {
     if (!currentAgency) return
 
     setLoading(true)
@@ -60,7 +68,11 @@ export const useModerationQueue = () => {
         .eq('agency_id', currentAgency.id)
         .order('created_at', { ascending: false })
 
-      if (status) {
+      if (status === 'under_review') {
+        query = query.in('status', ['pending', 'submitted', 'under_review'])
+      } else if (status === 'published') {
+        query = query.in('status', ['approved', 'published'])
+      } else if (status) {
         query = query.eq('status', status)
       }
 
@@ -101,9 +113,17 @@ export const useModerationQueue = () => {
         return acc
       }, {} as Record<string, number>) || {}
 
+      const underReviewCount =
+        (statusCounts.pending || 0) +
+        (statusCounts.submitted || 0) +
+        (statusCounts.under_review || 0)
+      const publishedCount =
+        (statusCounts.approved || 0) +
+        (statusCounts.published || 0)
+
       setStats({
-        pending: statusCounts.pending || 0,
-        approved: statusCounts.approved || 0,
+        under_review: underReviewCount,
+        published: publishedCount,
         rejected: statusCounts.rejected || 0,
         flagged: statusCounts.flagged || 0,
         total: statusCounts.total || 0
@@ -119,9 +139,9 @@ export const useModerationQueue = () => {
     reason?: string
   ): Promise<void> => {
     try {
-      const newStatus: CommentStatus = action === 'approve' ? 'approved' :
+      const newStatus: CommentStatus = action === 'approve' ? 'published' :
                                      action === 'reject' ? 'rejected' :
-                                     action === 'flag' ? 'flagged' : 'pending'
+                                     action === 'flag' ? 'flagged' : 'under_review'
 
       // Update comment status
       const { error: updateError } = await supabase
@@ -165,9 +185,9 @@ export const useModerationQueue = () => {
     reason?: string
   ): Promise<void> => {
     try {
-      const newStatus: CommentStatus = action === 'approve' ? 'approved' :
+      const newStatus: CommentStatus = action === 'approve' ? 'published' :
                                      action === 'reject' ? 'rejected' :
-                                     action === 'flag' ? 'flagged' : 'pending'
+                                     action === 'flag' ? 'flagged' : 'under_review'
 
       // Update all comments
       const { error: updateError } = await supabase
@@ -240,4 +260,4 @@ export const useModerationQueue = () => {
     getAttachmentSignedUrl,
     refresh: () => Promise.all([fetchComments(), fetchStats()])
   }
-}
+}

src/pages/agency/ModerationQueue.tsx

@@ -56,8 +56,18 @@ const ModerationQueue = () => {
   }, [location.pathname])
 
   // Filter comments based on active tab and search
+  const statusMatchesTab = (status: CommentStatus, tab: TabType) => {
+    if (tab === 'pending') {
+      return status === 'pending' || status === 'submitted' || status === 'under_review'
+    }
+    if (tab === 'approved') {
+      return status === 'approved' || status === 'published'
+    }
+    return status === tab
+  }
+
   const filteredComments = comments.filter(comment => {
-    const matchesTab = comment.status === activeTab
+    const matchesTab = statusMatchesTab(comment.status, activeTab)
     const matchesSearch = !searchQuery || 
       comment.content.toLowerCase().includes(searchQuery.toLowerCase()) ||
       comment.docket_title.toLowerCase().includes(searchQuery.toLowerCase()) ||
@@ -68,7 +78,7 @@ const ModerationQueue = () => {
 
   // Load comments when tab changes
   useEffect(() => {
-    fetchComments(activeTab)
+    fetchComments(activeTab === 'pending' ? 'under_review' : activeTab === 'approved' ? 'published' : activeTab)
   }, [activeTab])
 
   const handleTabChange = (tab: TabType) => {
@@ -215,7 +225,7 @@ const ModerationQueue = () => {
             <Clock className="w-5 h-5 text-yellow-600 mr-2" />
             <div>
               <p className="text-sm font-medium text-gray-600">Pending</p>
-              <p className="text-xl font-bold text-gray-900">{stats.pending}</p>
+              <p className="text-xl font-bold text-gray-900">{stats.under_review}</p>
             </div>
           </div>
         </div>
@@ -235,7 +245,7 @@ const ModerationQueue = () => {
             <CheckCircle className="w-5 h-5 text-green-600 mr-2" />
             <div>
               <p className="text-sm font-medium text-gray-600">Approved</p>
-              <p className="text-xl font-bold text-gray-900">{stats.approved}</p>
+              <p className="text-xl font-bold text-gray-900">{stats.published}</p>
             </div>
           </div>
         </div>
@@ -257,9 +267,9 @@ const ModerationQueue = () => {
         <div className="border-b border-gray-200">
           <nav className="-mb-px flex space-x-8 px-6">
             {[
-              { id: 'pending', label: 'Pending', count: stats.pending, icon: Clock },
+              { id: 'pending', label: 'Pending', count: stats.under_review, icon: Clock },
               { id: 'flagged', label: 'Flagged', count: stats.flagged, icon: Flag },
-              { id: 'approved', label: 'Approved', count: stats.approved, icon: CheckCircle },
+              { id: 'approved', label: 'Published', count: stats.published, icon: CheckCircle },
               { id: 'rejected', label: 'Rejected', count: stats.rejected, icon: XCircle }
             ].map(tab => {
               const IconComponent = tab.icon