Index: chapterx-frontend/src/pages/writer/CreateStoryPage.tsx
===================================================================
--- chapterx-frontend/src/pages/writer/CreateStoryPage.tsx	(revision b62cefc14094ca5ac7154f7d48797a1e6c444935)
+++ chapterx-frontend/src/pages/writer/CreateStoryPage.tsx	(revision acf690c1403ecbecd948a46d950278f177f2d408)
@@ -1,3 +1,3 @@
-import React, { useState } from 'react'
+import React, { useState, useRef } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { Feather, ArrowLeft, X } from 'lucide-react'
@@ -6,4 +6,5 @@
 import { useUIStore } from '../../store/uiStore'
 import { Button } from '../../components/ui/Button'
+import { StoryCreationAIPanel, StoryCreationAIPanelRef } from '../../components/writer/StoryCreationAIPanel'
 import { Story } from '../../types'
 
@@ -13,6 +14,7 @@
   const navigate = useNavigate()
   const { currentUser } = useAuthStore()
-  const { addStory } = useStoryStore()
+  const { addStory, addSuggestion } = useStoryStore()
   const { addToast } = useUIStore()
+  const aiPanelRef = useRef<StoryCreationAIPanelRef>(null)
   const [form, setForm] = useState({
     title: '',
@@ -53,7 +55,16 @@
       total_views: 0,
     }
-    addStory(story)
+    let realId: number
+    try {
+      realId = await addStory(story)
+    } catch (err: any) {
+      const msg = err?.response?.data?.message || err?.message || 'Failed to save story.'
+      addToast(msg, 'error')
+      setLoading(false)
+      return
+    }
+
     addToast(status === 'published' ? 'Story published!' : 'Draft saved!')
-    navigate(`/writer/edit-story/${story.story_id}`)
+    navigate(`/writer/edit-story/${realId}`)
     setLoading(false)
   }
@@ -73,5 +84,5 @@
 
   return (
-    <div className="max-w-3xl mx-auto px-4 py-8">
+    <div className="max-w-6xl mx-auto px-4 py-8">
       <div className="flex items-center gap-3 mb-8">
         <button onClick={() => navigate('/writer')} className="text-slate-400 hover:text-white transition-colors">
@@ -84,104 +95,117 @@
       </div>
 
-      <div className="space-y-6">
-        {/* Title */}
-        <div>
-          <label className="block text-sm font-medium text-slate-300 mb-1.5">Story Title *</label>
-          <input
-            value={form.title}
-            onChange={e => setField('title', e.target.value)}
-            placeholder="The Chronicles of Eldoria..."
-            className={`w-full px-4 py-3 bg-slate-800 border rounded-xl text-white placeholder-slate-500 focus:outline-none focus:border-indigo-500 text-lg font-serif ${errors.title ? 'border-rose-500' : 'border-slate-700'}`}
-          />
-          {errors.title && <p className="text-rose-400 text-xs mt-1">{errors.title}</p>}
-        </div>
-
-        {/* Short description */}
-        <div>
-          <label className="block text-sm font-medium text-slate-300 mb-1.5">Short Description * <span className="text-slate-500 font-normal">(shown on story cards)</span></label>
-          <textarea
-            value={form.short_description}
-            onChange={e => setField('short_description', e.target.value)}
-            placeholder="When the last dragon awakens..."
-            rows={3}
-            maxLength={280}
-            className={`w-full px-4 py-3 bg-slate-800 border rounded-xl text-white placeholder-slate-500 focus:outline-none focus:border-indigo-500 resize-none ${errors.short_description ? 'border-rose-500' : 'border-slate-700'}`}
-          />
-          <div className="flex justify-between items-center mt-1">
-            {errors.short_description ? <p className="text-rose-400 text-xs">{errors.short_description}</p> : <span />}
-            <span className="text-slate-600 text-xs">{form.short_description.length}/280</span>
-          </div>
-        </div>
-
-        {/* Content */}
-        <div>
-          <label className="block text-sm font-medium text-slate-300 mb-1.5">Story Content *</label>
-          <textarea
-            value={form.content}
-            onChange={e => setField('content', e.target.value)}
-            placeholder="Begin your story here. This is the introduction that readers will see..."
-            rows={8}
-            className={`w-full px-4 py-3 bg-slate-800 border rounded-xl text-white placeholder-slate-500 focus:outline-none focus:border-indigo-500 resize-y font-serif ${errors.content ? 'border-rose-500' : 'border-slate-700'}`}
-          />
-          {errors.content && <p className="text-rose-400 text-xs mt-1">{errors.content}</p>}
-        </div>
-
-        {/* Genres */}
-        <div>
-          <label className="block text-sm font-medium text-slate-300 mb-2">Genres * <span className="text-slate-500 font-normal">(select 1-3)</span></label>
-          <div className="flex flex-wrap gap-2 mb-2">
-            {ALL_GENRES.map(g => (
-              <button
-                key={g}
-                type="button"
-                onClick={() => toggleGenre(g)}
-                className={`px-3 py-1.5 rounded-full text-sm border transition-all ${
-                  form.genres.includes(g)
-                    ? 'bg-indigo-500/30 text-indigo-300 border-indigo-500/50'
-                    : 'bg-slate-800 text-slate-400 border-slate-700 hover:border-slate-500'
-                }`}
-              >
-                {form.genres.includes(g) && <span className="mr-1">✓</span>}
-                {g}
-              </button>
-            ))}
-          </div>
-          {form.genres.length > 0 && (
-            <div className="flex flex-wrap gap-1 mt-1">
-              {form.genres.map(g => (
-                <span key={g} className="flex items-center gap-1 text-xs px-2 py-0.5 bg-indigo-500/20 text-indigo-300 rounded-full">
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+        <div className="lg:col-span-2 space-y-6">
+          {/* Title */}
+          <div>
+            <label className="block text-sm font-medium text-slate-300 mb-1.5">Story Title *</label>
+            <input
+              value={form.title}
+              onChange={e => setField('title', e.target.value)}
+              placeholder="The Chronicles of Eldoria..."
+              className={`w-full px-4 py-3 bg-slate-800 border rounded-xl text-white placeholder-slate-500 focus:outline-none focus:border-indigo-500 text-lg font-serif ${errors.title ? 'border-rose-500' : 'border-slate-700'}`}
+            />
+            {errors.title && <p className="text-rose-400 text-xs mt-1">{errors.title}</p>}
+          </div>
+
+          {/* Short description */}
+          <div>
+            <label className="block text-sm font-medium text-slate-300 mb-1.5">Short Description * <span className="text-slate-500 font-normal">(shown on story cards)</span></label>
+            <textarea
+              value={form.short_description}
+              onChange={e => setField('short_description', e.target.value)}
+              placeholder="When the last dragon awakens..."
+              rows={3}
+              maxLength={280}
+              className={`w-full px-4 py-3 bg-slate-800 border rounded-xl text-white placeholder-slate-500 focus:outline-none focus:border-indigo-500 resize-none ${errors.short_description ? 'border-rose-500' : 'border-slate-700'}`}
+            />
+            <div className="flex justify-between items-center mt-1">
+              {errors.short_description ? <p className="text-rose-400 text-xs">{errors.short_description}</p> : <span />}
+              <span className="text-slate-600 text-xs">{form.short_description.length}/280</span>
+            </div>
+          </div>
+
+          {/* Content */}
+          <div>
+            <label className="block text-sm font-medium text-slate-300 mb-1.5">Story Content *</label>
+            <textarea
+              value={form.content}
+              onChange={e => setField('content', e.target.value)}
+              placeholder="Begin your story here. This is the introduction that readers will see..."
+              rows={8}
+              className={`w-full px-4 py-3 bg-slate-800 border rounded-xl text-white placeholder-slate-500 focus:outline-none focus:border-indigo-500 resize-y font-serif ${errors.content ? 'border-rose-500' : 'border-slate-700'}`}
+            />
+            {errors.content && <p className="text-rose-400 text-xs mt-1">{errors.content}</p>}
+          </div>
+
+          {/* Genres */}
+          <div>
+            <label className="block text-sm font-medium text-slate-300 mb-2">Genres * <span className="text-slate-500 font-normal">(select 1-3)</span></label>
+            <div className="flex flex-wrap gap-2 mb-2">
+              {ALL_GENRES.map(g => (
+                <button
+                  key={g}
+                  type="button"
+                  onClick={() => toggleGenre(g)}
+                  className={`px-3 py-1.5 rounded-full text-sm border transition-all ${
+                    form.genres.includes(g)
+                      ? 'bg-indigo-500/30 text-indigo-300 border-indigo-500/50'
+                      : 'bg-slate-800 text-slate-400 border-slate-700 hover:border-slate-500'
+                  }`}
+                >
+                  {form.genres.includes(g) && <span className="mr-1">✓</span>}
                   {g}
-                  <button onClick={() => toggleGenre(g)}><X size={10} /></button>
-                </span>
+                </button>
               ))}
             </div>
-          )}
-          {errors.genres && <p className="text-rose-400 text-xs mt-1">{errors.genres}</p>}
+            {form.genres.length > 0 && (
+              <div className="flex flex-wrap gap-1 mt-1">
+                {form.genres.map(g => (
+                  <span key={g} className="flex items-center gap-1 text-xs px-2 py-0.5 bg-indigo-500/20 text-indigo-300 rounded-full">
+                    {g}
+                    <button onClick={() => toggleGenre(g)}><X size={10} /></button>
+                  </span>
+                ))}
+              </div>
+            )}
+            {errors.genres && <p className="text-rose-400 text-xs mt-1">{errors.genres}</p>}
+          </div>
+
+          {/* Mature content */}
+          <div className="flex items-center gap-3">
+            <button
+              type="button"
+              onClick={() => setField('mature_content', !form.mature_content)}
+              className={`w-11 h-6 rounded-full transition-colors ${form.mature_content ? 'bg-rose-500' : 'bg-slate-600'} relative flex-shrink-0`}
+            >
+              <div className={`absolute top-1 w-4 h-4 bg-white rounded-full transition-transform ${form.mature_content ? 'translate-x-6' : 'translate-x-1'}`} />
+            </button>
+            <div>
+              <p className="text-white text-sm font-medium">Mature Content (18+)</p>
+              <p className="text-slate-500 text-xs">Enable for stories with adult themes</p>
+            </div>
+          </div>
+
+          {/* Actions */}
+          <div className="flex gap-3 pt-4 border-t border-slate-700">
+            <Button variant="secondary" className="flex-1" onClick={() => handleSubmit('draft')} loading={loading}>
+              Save as Draft
+            </Button>
+            <Button className="flex-1" onClick={() => handleSubmit('published')} loading={loading}>
+              <Feather size={16} />
+              Publish Story
+            </Button>
+          </div>
         </div>
 
-        {/* Mature content */}
-        <div className="flex items-center gap-3">
-          <button
-            type="button"
-            onClick={() => setField('mature_content', !form.mature_content)}
-            className={`w-11 h-6 rounded-full transition-colors ${form.mature_content ? 'bg-rose-500' : 'bg-slate-600'} relative flex-shrink-0`}
-          >
-            <div className={`absolute top-1 w-4 h-4 bg-white rounded-full transition-transform ${form.mature_content ? 'translate-x-6' : 'translate-x-1'}`} />
-          </button>
-          <div>
-            <p className="text-white text-sm font-medium">Mature Content (18+)</p>
-            <p className="text-slate-500 text-xs">Enable for stories with adult themes</p>
-          </div>
-        </div>
-
-        {/* Actions */}
-        <div className="flex gap-3 pt-4 border-t border-slate-700">
-          <Button variant="secondary" className="flex-1" onClick={() => handleSubmit('draft')} loading={loading}>
-            Save as Draft
-          </Button>
-          <Button className="flex-1" onClick={() => handleSubmit('published')} loading={loading}>
-            <Feather size={16} />
-            Publish Story
-          </Button>
+        {/* AI Suggestions Sidebar */}
+        <div className="lg:col-span-1">
+          <StoryCreationAIPanel
+            ref={aiPanelRef}
+            title={form.title}
+            description={form.short_description}
+            content={form.content}
+            genres={form.genres}
+          />
         </div>
       </div>