Index: chapterx-frontend/src/components/writer/AISuggestionPanel.tsx
===================================================================
--- chapterx-frontend/src/components/writer/AISuggestionPanel.tsx	(revision 3ae4bab8dcf6c40690ba2765146e7e1f70fa3a2f)
+++ chapterx-frontend/src/components/writer/AISuggestionPanel.tsx	(revision a6e33d1f34c0dbbfff38bfb2c73eea32abfe7cff)
@@ -100,5 +100,5 @@
 }
 
-export const AISuggestionPanel: React.FC<AISuggestionPanelProps> = ({ chapterId, storyId }) => {
+export const AISuggestionPanel: React.FC<AISuggestionPanelProps> = ({ chapterId }) => {
   const { aiSuggestions, acceptSuggestion, rejectSuggestion, fetchSuggestions } = useStoryStore()
   const { addToast } = useUIStore()
@@ -108,11 +108,9 @@
   useEffect(() => {
     setLoading(true)
-    fetchSuggestions().finally(() => setLoading(false))
+    fetchSuggestions(chapterId).finally(() => setLoading(false))
   }, [chapterId])
 
-  // Filter by storyId if available (backend), else fall back to chapterId (mock)
-  const chapterSuggestions = aiSuggestions.filter(s =>
-    storyId ? (s as any).story_id === storyId : s.chapter_id === chapterId
-  )
+  // Backend already scopes results to this chapter via NEED_APPROVAL
+  const chapterSuggestions = aiSuggestions
   const pending = chapterSuggestions.filter(s => s.accepted === null)
   const accepted = chapterSuggestions.filter(s => s.accepted === true)
Index: chapterx-frontend/src/store/storyStore.ts
===================================================================
--- chapterx-frontend/src/store/storyStore.ts	(revision 3ae4bab8dcf6c40690ba2765146e7e1f70fa3a2f)
+++ chapterx-frontend/src/store/storyStore.ts	(revision a6e33d1f34c0dbbfff38bfb2c73eea32abfe7cff)
@@ -7,4 +7,5 @@
   Collaboration,
   AISuggestion,
+  SuggestionType,
   Genre,
   ReadingList,
@@ -105,5 +106,5 @@
 
   // AI Suggestion actions
-  fetchSuggestions: () => Promise<void>
+  fetchSuggestions: (chapterId: number) => Promise<void>
   acceptSuggestion: (id: number) => Promise<void>
   rejectSuggestion: (id: number) => Promise<void>
@@ -434,15 +435,15 @@
   },
 
-  fetchSuggestions: async () => {
-    try {
-      const res = await axios.get(`${API}/aisuggestions`)
-      const data = res.data.aiSuggestions ?? res.data
+  fetchSuggestions: async (chapterId) => {
+    try {
+      const res = await axios.get(`${API}/aisuggestions/chapter/${chapterId}`)
+      const data: any[] = res.data ?? []
       const mapped: AISuggestion[] = data.map((s: any) => ({
         suggestion_id: s.id,
-        chapter_id: s.storyId,
+        chapter_id: chapterId,
         story_id: s.storyId,
         original_text: s.originalText,
         suggested_text: s.suggestedText,
-        suggestion_type: 'style' as const,
+        suggestion_type: (s.suggestionTypes?.[0] ?? 'style') as SuggestionType,
         accepted: s.accepted === true ? true : s.accepted === false ? false : null,
         applied_at: s.appliedAt ?? undefined,
@@ -471,5 +472,5 @@
         suggestedText: s.suggested_text,
         accepted: true,
-      })
+      }, { headers: getAuthHeaders() })
     } catch {
       // keep optimistic update even if backend fails
@@ -491,5 +492,5 @@
         suggestedText: s.suggested_text,
         accepted: false,
-      })
+      }, { headers: getAuthHeaders() })
     } catch {
       // keep optimistic update even if backend fails
@@ -502,9 +503,9 @@
     set(state => ({ aiSuggestions: [...state.aiSuggestions, { ...suggestion, suggestion_id: tempId }] }))
     try {
-      const res = await axios.post('${API}/aisuggestions', {
+      const res = await axios.post(`${API}/aisuggestions`, {
         originalText: suggestion.original_text,
         suggestedText: suggestion.suggested_text,
         storyId: suggestion.chapter_id,
-      })
+      }, { headers: getAuthHeaders() })
       const newId = res.data.id ?? tempId
       set(state => ({