From 93170cb5137a4c831f4f6e384161f40836ef2493 Mon Sep 17 00:00:00 2001
From: HuiMi24 <mihui24@gmail.com>
Date: Sat, 14 Mar 2026 20:22:02 +0800
Subject: [PATCH 01/10] feat: switch to vertical slide preview with
 click-to-edit single slide

---
 frontend/src/App.jsx    | 58 +++++++++++++++++++++++++++--------------
 frontend/src/styles.css | 53 ++++++++++++++++++++++++++++++-------
 2 files changed, 81 insertions(+), 30 deletions(-)

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 22d915c..4c5850e 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -42,6 +42,7 @@ export default function App() {
   const [loading, setLoading] = useState(false)
   const [notice, setNotice] = useState('')
   const [previewImages, setPreviewImages] = useState([])
+  const [selectedSlideIndex, setSelectedSlideIndex] = useState(0)
   const [chatInput, setChatInput] = useState('')
   const [messages, setMessages] = useState([
     { role: 'assistant', text: 'Enter a topic and click "Generate PPT". Then continue editing through chat.' },
@@ -55,11 +56,17 @@ export default function App() {
     }))
   }, [doc])
 
+  const selectedSlide = useMemo(
+    () => titleAndBody.find((s) => s.slide_index === selectedSlideIndex) || titleAndBody[0] || null,
+    [titleAndBody, selectedSlideIndex],
+  )
+
   const loadPPT = async (path = pptPath) => {
     setLoading(true)
     try {
       const data = await api(`/api/ppt?path=${encodeURIComponent(path)}`)
       setDoc(data)
+      setSelectedSlideIndex(0)
       setPptPath(path)
       const preview = await api(`/api/ppt/preview?path=${encodeURIComponent(path)}`)
       setPreviewImages(preview.images || [])
@@ -254,28 +261,39 @@ export default function App() {
             <button className="ghost-btn" onClick={saveManualEdits} disabled={loading || !doc}>Save Text Changes</button>
           </div>
 
-          {previewImages.length > 0 && (
-            <div className="preview-strip">
-              {previewImages.map((img, idx) => (
-                <img key={img} src={toAbsolute(img)} alt={`Slide preview ${idx + 1}`} />
-              ))}
-            </div>
-          )}
-
           {!doc && <div className="skeleton">Start by entering a topic and generating a PPT from the left panel.</div>}
           {doc && (
-            <div className="slides-list">
-              {titleAndBody.map((slide) => (
-                <article className="slide-card" key={slide.slide_index}>
-                  <h3>Slide {slide.slide_index + 1}</h3>
-                  {slide.editableShapes.map((sh) => (
-                    <label key={sh.shape_index}>
-                      <span>{sh.role} · shape #{sh.shape_index}</span>
-                      <textarea value={sh.text} onChange={(e) => updateText(slide.slide_index, sh.shape_index, e.target.value)} />
-                    </label>
-                  ))}
-                </article>
-              ))}
+            <div className="editor-layout">
+              <div className="preview-column">
+                {previewImages.map((img, idx) => (
+                  <button
+                    type="button"
+                    key={img}
+                    className={`preview-thumb ${selectedSlideIndex === idx ? 'active' : ''}`}
+                    onClick={() => setSelectedSlideIndex(idx)}
+                  >
+                    <img src={toAbsolute(img)} alt={`Slide preview ${idx + 1}`} />
+                    <span>Slide {idx + 1}</span>
+                  </button>
+                ))}
+              </div>
+
+              <div className="slides-list">
+                {selectedSlide && (
+                  <article className="slide-card" key={selectedSlide.slide_index}>
+                    <h3>Slide {selectedSlide.slide_index + 1}</h3>
+                    {selectedSlide.editableShapes.map((sh) => (
+                      <label key={sh.shape_index}>
+                        <span>{sh.role} · shape #{sh.shape_index}</span>
+                        <textarea
+                          value={sh.text}
+                          onChange={(e) => updateText(selectedSlide.slide_index, sh.shape_index, e.target.value)}
+                        />
+                      </label>
+                    ))}
+                  </article>
+                )}
+              </div>
             </div>
           )}
         </section>
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 010833b..5d7326e 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -139,23 +139,46 @@ button:disabled { opacity: 0.5; cursor: not-allowed; }
   margin-bottom: 10px;
 }
 
-.preview-strip {
+.editor-layout {
   display: grid;
-  grid-auto-flow: column;
-  grid-auto-columns: 260px;
-  gap: 10px;
-  overflow-x: auto;
-  margin-bottom: 10px;
-  padding-bottom: 4px;
+  grid-template-columns: 220px 1fr;
+  gap: 12px;
 }
 
-.preview-strip img {
-  width: 100%;
+.preview-column {
+  max-height: 72vh;
+  overflow: auto;
+  padding-right: 4px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.preview-thumb {
+  text-align: left;
+  background: rgba(27, 10, 48, 0.9);
+  border: 1px solid rgba(196, 181, 253, 0.25);
   border-radius: 10px;
-  border: 1px solid rgba(148, 163, 184, 0.3);
+  padding: 8px;
+}
+
+.preview-thumb.active {
+  border-color: rgba(216, 180, 254, 0.9);
+  box-shadow: 0 0 0 2px rgba(168, 85, 247, 0.35);
+}
+
+.preview-thumb img {
+  width: 100%;
+  border-radius: 8px;
+  margin-bottom: 4px;
   background: #0b1222;
 }
 
+.preview-thumb span {
+  font-size: 12px;
+  color: #e9d5ff;
+}
+
 .slides-list {
   max-height: 72vh;
   overflow: auto;
@@ -224,5 +247,15 @@ button:disabled { opacity: 0.5; cursor: not-allowed; }
 
 @media (max-width: 1200px) {
   .main-grid { grid-template-columns: 1fr; }
+  .editor-layout { grid-template-columns: 1fr; }
+  .preview-column {
+    max-height: 240px;
+    flex-direction: row;
+    overflow-x: auto;
+    overflow-y: hidden;
+  }
+  .preview-thumb {
+    min-width: 180px;
+  }
   .chat-box, .slides-list { max-height: 42vh; height: auto; }
 }

From f279f279785f465e1d52e1b1c841cdf71027bb6e Mon Sep 17 00:00:00 2001
From: HuiMi24 <mihui24@gmail.com>
Date: Sat, 14 Mar 2026 20:23:55 +0800
Subject: [PATCH 02/10] feat: enlarge preview layout and add selected slide
 large preview

---
 frontend/src/App.jsx    | 10 ++++++++++
 frontend/src/styles.css | 25 +++++++++++++++++++------
 2 files changed, 29 insertions(+), 6 deletions(-)

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 4c5850e..aa774f3 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -282,6 +282,16 @@ export default function App() {
                 {selectedSlide && (
                   <article className="slide-card" key={selectedSlide.slide_index}>
                     <h3>Slide {selectedSlide.slide_index + 1}</h3>
+
+                    {previewImages[selectedSlide.slide_index] && (
+                      <div className="selected-preview">
+                        <img
+                          src={toAbsolute(previewImages[selectedSlide.slide_index])}
+                          alt={`Selected slide ${selectedSlide.slide_index + 1}`}
+                        />
+                      </div>
+                    )}
+
                     {selectedSlide.editableShapes.map((sh) => (
                       <label key={sh.shape_index}>
                         <span>{sh.role} · shape #{sh.shape_index}</span>
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 5d7326e..33aa186 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -141,8 +141,8 @@ button:disabled { opacity: 0.5; cursor: not-allowed; }
 
 .editor-layout {
   display: grid;
-  grid-template-columns: 220px 1fr;
-  gap: 12px;
+  grid-template-columns: 300px 1fr;
+  gap: 14px;
 }
 
 .preview-column {
@@ -158,8 +158,8 @@ button:disabled { opacity: 0.5; cursor: not-allowed; }
   text-align: left;
   background: rgba(27, 10, 48, 0.9);
   border: 1px solid rgba(196, 181, 253, 0.25);
-  border-radius: 10px;
-  padding: 8px;
+  border-radius: 12px;
+  padding: 10px;
 }
 
 .preview-thumb.active {
@@ -175,10 +175,23 @@ button:disabled { opacity: 0.5; cursor: not-allowed; }
 }
 
 .preview-thumb span {
-  font-size: 12px;
+  font-size: 13px;
   color: #e9d5ff;
 }
 
+.selected-preview {
+  margin-bottom: 12px;
+  border-radius: 12px;
+  overflow: hidden;
+  border: 1px solid rgba(196, 181, 253, 0.3);
+  background: #140a24;
+}
+
+.selected-preview img {
+  width: 100%;
+  display: block;
+}
+
 .slides-list {
   max-height: 72vh;
   overflow: auto;
@@ -255,7 +268,7 @@ button:disabled { opacity: 0.5; cursor: not-allowed; }
     overflow-y: hidden;
   }
   .preview-thumb {
-    min-width: 180px;
+    min-width: 220px;
   }
   .chat-box, .slides-list { max-height: 42vh; height: auto; }
 }

From 9a93eb0fa532e3d85694d919402018965ea04932 Mon Sep 17 00:00:00 2001
From: HuiMi24 <mihui24@gmail.com>
Date: Sat, 14 Mar 2026 20:26:57 +0800
Subject: [PATCH 03/10] feat: move chat edits panel to bottom layout

---
 frontend/src/App.jsx    | 36 ++++++++++++++++++------------------
 frontend/src/styles.css |  9 +++++++--
 2 files changed, 25 insertions(+), 20 deletions(-)

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index aa774f3..c16c206 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -307,25 +307,25 @@ export default function App() {
             </div>
           )}
         </section>
-
-        <section className="panel chat-panel">
-          <h2>Chat Edits</h2>
-          <div className="chat-box">
-            {messages.map((m, i) => (
-              <div key={i} className={`msg ${m.role}`}>{m.text}</div>
-            ))}
-            {loading && <div className="msg assistant">Processing...</div>}
-          </div>
-          <div className="chat-input-row">
-            <input
-              value={chatInput}
-              onChange={(e) => setChatInput(e.target.value)}
-              placeholder="Example: change slide 3 title to Growth Loop"
-            />
-            <button onClick={sendChat} disabled={loading || !doc}>Send</button>
-          </div>
-        </section>
       </main>
+
+      <section className="panel chat-panel chat-panel-bottom">
+        <h2>Chat Edits</h2>
+        <div className="chat-box">
+          {messages.map((m, i) => (
+            <div key={i} className={`msg ${m.role}`}>{m.text}</div>
+          ))}
+          {loading && <div className="msg assistant">Processing...</div>}
+        </div>
+        <div className="chat-input-row">
+          <input
+            value={chatInput}
+            onChange={(e) => setChatInput(e.target.value)}
+            placeholder="Example: change slide 3 title to Growth Loop"
+          />
+          <button onClick={sendChat} disabled={loading || !doc}>Send</button>
+        </div>
+      </section>
     </div>
   )
 }
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 33aa186..d84b19c 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -60,7 +60,7 @@ body {
 
 .main-grid {
   display: grid;
-  grid-template-columns: 330px 1fr 360px;
+  grid-template-columns: 330px 1fr;
   gap: 14px;
   align-items: start;
 }
@@ -223,8 +223,13 @@ button:disabled { opacity: 0.5; cursor: not-allowed; }
   color: #d8b4fe;
 }
 
+.chat-panel-bottom {
+  margin-top: 14px;
+}
+
 .chat-box {
-  height: 62vh;
+  height: 34vh;
+  min-height: 240px;
   overflow: auto;
   border-radius: 12px;
   padding: 10px;

From 09b95bcd85b6801f8b5538f58c38bf74bda31f6e Mon Sep 17 00:00:00 2001
From: HuiMi24 <mihui24@gmail.com>
Date: Sat, 14 Mar 2026 20:33:13 +0800
Subject: [PATCH 04/10] feat: add floating chat, resizable layout, autosave
 undo-redo, and slide status

---
 frontend/src/App.jsx      | 177 +++++++++++++++++++++++++-------------
 frontend/src/App.test.jsx |   6 +-
 frontend/src/styles.css   | 130 +++++++++++++---------------
 3 files changed, 178 insertions(+), 135 deletions(-)

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index c16c206..e3abea0 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -1,4 +1,4 @@
-import { useMemo, useState } from 'react'
+import { useEffect, useMemo, useRef, useState } from 'react'
 
 const API_BASE =
   import.meta.env.VITE_API_BASE ||
@@ -37,17 +37,30 @@ const initialForm = {
 
 export default function App() {
   const [form, setForm] = useState(initialForm)
+  const [leftWidth, setLeftWidth] = useState(360)
+  const [isResizing, setIsResizing] = useState(false)
+
   const [pptPath, setPptPath] = useState('')
   const [doc, setDoc] = useState(null)
   const [loading, setLoading] = useState(false)
   const [notice, setNotice] = useState('')
+
   const [previewImages, setPreviewImages] = useState([])
   const [selectedSlideIndex, setSelectedSlideIndex] = useState(0)
+  const [dirtySlides, setDirtySlides] = useState(() => new Set())
+
+  const [undoStack, setUndoStack] = useState([])
+  const [redoStack, setRedoStack] = useState([])
+  const [isDirty, setIsDirty] = useState(false)
+
+  const [chatOpen, setChatOpen] = useState(true)
   const [chatInput, setChatInput] = useState('')
   const [messages, setMessages] = useState([
-    { role: 'assistant', text: 'Enter a topic and click "Generate PPT". Then continue editing through chat.' },
+    { role: 'assistant', text: 'Enter a topic and click "Generate PPT". Then continue editing via chat.' },
   ])
 
+  const autosaveTimerRef = useRef(null)
+
   const titleAndBody = useMemo(() => {
     if (!doc) return []
     return doc.slides.map((s) => ({
@@ -61,6 +74,34 @@ export default function App() {
     [titleAndBody, selectedSlideIndex],
   )
 
+  useEffect(() => {
+    if (!isResizing) return
+
+    const onMove = (e) => {
+      const min = 300
+      const max = Math.min(520, window.innerWidth * 0.45)
+      setLeftWidth(Math.max(min, Math.min(max, e.clientX - 32)))
+    }
+
+    const onUp = () => setIsResizing(false)
+
+    window.addEventListener('mousemove', onMove)
+    window.addEventListener('mouseup', onUp)
+    return () => {
+      window.removeEventListener('mousemove', onMove)
+      window.removeEventListener('mouseup', onUp)
+    }
+  }, [isResizing])
+
+  useEffect(() => {
+    if (!isDirty || !doc || !pptPath) return
+    clearTimeout(autosaveTimerRef.current)
+    autosaveTimerRef.current = setTimeout(() => {
+      saveManualEdits({ silent: true })
+    }, 1500)
+    return () => clearTimeout(autosaveTimerRef.current)
+  }, [doc, isDirty, pptPath])
+
   const loadPPT = async (path = pptPath) => {
     setLoading(true)
     try {
@@ -68,6 +109,10 @@ export default function App() {
       setDoc(data)
       setSelectedSlideIndex(0)
       setPptPath(path)
+      setDirtySlides(new Set())
+      setUndoStack([])
+      setRedoStack([])
+      setIsDirty(false)
       const preview = await api(`/api/ppt/preview?path=${encodeURIComponent(path)}`)
       setPreviewImages(preview.images || [])
     } finally {
@@ -110,18 +155,43 @@ export default function App() {
 
   const updateText = (slideIndex, shapeIndex, value) => {
     setDoc((prev) => {
+      if (!prev) return prev
+      setUndoStack((s) => [...s, structuredClone(prev)])
+      setRedoStack([])
       const cloned = structuredClone(prev)
       const slide = cloned.slides.find((s) => s.slide_index === slideIndex)
       const shape = slide?.shapes.find((sh) => sh.shape_index === shapeIndex)
-      if (shape) shape.text = value
+      if (shape) {
+        shape.text = value
+        setDirtySlides((set0) => new Set([...set0, slideIndex]))
+        setIsDirty(true)
+      }
       return cloned
     })
   }
 
-  const saveManualEdits = async () => {
+  const undo = () => {
+    if (!undoStack.length || !doc) return
+    const prev = undoStack[undoStack.length - 1]
+    setUndoStack((s) => s.slice(0, -1))
+    setRedoStack((s) => [...s, structuredClone(doc)])
+    setDoc(prev)
+    setIsDirty(true)
+  }
+
+  const redo = () => {
+    if (!redoStack.length || !doc) return
+    const next = redoStack[redoStack.length - 1]
+    setRedoStack((s) => s.slice(0, -1))
+    setUndoStack((s) => [...s, structuredClone(doc)])
+    setDoc(next)
+    setIsDirty(true)
+  }
+
+  const saveManualEdits = async ({ silent = false } = {}) => {
     if (!doc || !pptPath) return
     setLoading(true)
-    setNotice('')
+    if (!silent) setNotice('')
     try {
       const edits = []
       for (const s of doc.slides) {
@@ -134,7 +204,7 @@ export default function App() {
         body: JSON.stringify({ path: pptPath, edits }),
       })
       await loadPPT(data.output_path)
-      setNotice(`Text edits saved: ${data.output_path}`)
+      setNotice(silent ? `Auto-saved at ${new Date().toLocaleTimeString()}` : `Text edits saved: ${data.output_path}`)
     } catch (e) {
       setNotice(e.message)
     } finally {
@@ -180,7 +250,7 @@ export default function App() {
 
       {notice && <div className="notice">{notice}</div>}
 
-      <main className="main-grid">
+      <main className="main-grid" style={{ gridTemplateColumns: `${leftWidth}px 8px 1fr` }}>
         <aside className="panel generator-panel">
           <h2>Generator</h2>
           <label>
@@ -195,33 +265,19 @@ export default function App() {
           <div className="field-grid">
             <label>
               Preset
-              <select
-                data-testid="preset-select"
-                value={form.preset}
-                onChange={(e) => setForm((f) => ({ ...f, preset: e.target.value }))}
-              >
+              <select data-testid="preset-select" value={form.preset} onChange={(e) => setForm((f) => ({ ...f, preset: e.target.value }))}>
                 {PRESET_OPTIONS.map((option) => (
-                  <option key={option} value={option}>
-                    {option}
-                  </option>
+                  <option key={option} value={option}>{option}</option>
                 ))}
               </select>
             </label>
             <label>
               Audience
-              <input
-                value={form.audience}
-                onChange={(e) => setForm((f) => ({ ...f, audience: e.target.value }))}
-                placeholder="e.g. leadership team, students"
-              />
+              <input value={form.audience} onChange={(e) => setForm((f) => ({ ...f, audience: e.target.value }))} />
             </label>
             <label>
               Tone
-              <input
-                value={form.tone}
-                onChange={(e) => setForm((f) => ({ ...f, tone: e.target.value }))}
-                placeholder="e.g. concise, formal"
-              />
+              <input value={form.tone} onChange={(e) => setForm((f) => ({ ...f, tone: e.target.value }))} />
             </label>
             <label>
               Slides
@@ -235,15 +291,9 @@ export default function App() {
             </label>
             <label>
               Language
-              <select
-                data-testid="language-select"
-                value={form.language}
-                onChange={(e) => setForm((f) => ({ ...f, language: e.target.value }))}
-              >
+              <select data-testid="language-select" value={form.language} onChange={(e) => setForm((f) => ({ ...f, language: e.target.value }))}>
                 {LANGUAGE_OPTIONS.map((option) => (
-                  <option key={option.value} value={option.value}>
-                    {option.label}
-                  </option>
+                  <option key={option.value} value={option.value}>{option.label}</option>
                 ))}
               </select>
             </label>
@@ -255,10 +305,16 @@ export default function App() {
           <p className="hint">The generated deck will load in the editor automatically.</p>
         </aside>
 
+        <div className="resize-handle" onMouseDown={() => setIsResizing(true)} />
+
         <section className="panel editor-panel">
           <div className="panel-head">
             <h2>Preview and Text Editing</h2>
-            <button className="ghost-btn" onClick={saveManualEdits} disabled={loading || !doc}>Save Text Changes</button>
+            <div className="row-actions">
+              <button className="ghost-btn" onClick={undo} disabled={!undoStack.length}>Undo</button>
+              <button className="ghost-btn" onClick={redo} disabled={!redoStack.length}>Redo</button>
+              <button className="ghost-btn" onClick={() => saveManualEdits()} disabled={loading || !doc}>Save</button>
+            </div>
           </div>
 
           {!doc && <div className="skeleton">Start by entering a topic and generating a PPT from the left panel.</div>}
@@ -273,7 +329,10 @@ export default function App() {
                     onClick={() => setSelectedSlideIndex(idx)}
                   >
                     <img src={toAbsolute(img)} alt={`Slide preview ${idx + 1}`} />
-                    <span>Slide {idx + 1}</span>
+                    <span>
+                      Slide {idx + 1}
+                      {dirtySlides.has(idx) && <em className="dirty-tag"> • modified</em>}
+                    </span>
                   </button>
                 ))}
               </div>
@@ -282,23 +341,15 @@ export default function App() {
                 {selectedSlide && (
                   <article className="slide-card" key={selectedSlide.slide_index}>
                     <h3>Slide {selectedSlide.slide_index + 1}</h3>
-
                     {previewImages[selectedSlide.slide_index] && (
                       <div className="selected-preview">
-                        <img
-                          src={toAbsolute(previewImages[selectedSlide.slide_index])}
-                          alt={`Selected slide ${selectedSlide.slide_index + 1}`}
-                        />
+                        <img src={toAbsolute(previewImages[selectedSlide.slide_index])} alt={`Selected slide ${selectedSlide.slide_index + 1}`} />
                       </div>
                     )}
-
                     {selectedSlide.editableShapes.map((sh) => (
                       <label key={sh.shape_index}>
                         <span>{sh.role} · shape #{sh.shape_index}</span>
-                        <textarea
-                          value={sh.text}
-                          onChange={(e) => updateText(selectedSlide.slide_index, sh.shape_index, e.target.value)}
-                        />
+                        <textarea value={sh.text} onChange={(e) => updateText(selectedSlide.slide_index, sh.shape_index, e.target.value)} />
                       </label>
                     ))}
                   </article>
@@ -309,23 +360,25 @@ export default function App() {
         </section>
       </main>
 
-      <section className="panel chat-panel chat-panel-bottom">
-        <h2>Chat Edits</h2>
-        <div className="chat-box">
-          {messages.map((m, i) => (
-            <div key={i} className={`msg ${m.role}`}>{m.text}</div>
-          ))}
-          {loading && <div className="msg assistant">Processing...</div>}
-        </div>
-        <div className="chat-input-row">
-          <input
-            value={chatInput}
-            onChange={(e) => setChatInput(e.target.value)}
-            placeholder="Example: change slide 3 title to Growth Loop"
-          />
-          <button onClick={sendChat} disabled={loading || !doc}>Send</button>
-        </div>
-      </section>
+      <button className="chat-fab" onClick={() => setChatOpen((v) => !v)}>
+        {chatOpen ? 'Hide Chat' : 'Chat Edit'}
+      </button>
+
+      {chatOpen && (
+        <section className="panel chat-floating">
+          <h2>Chat Edits</h2>
+          <div className="chat-box">
+            {messages.map((m, i) => (
+              <div key={i} className={`msg ${m.role}`}>{m.text}</div>
+            ))}
+            {loading && <div className="msg assistant">Processing...</div>}
+          </div>
+          <div className="chat-input-row">
+            <input value={chatInput} onChange={(e) => setChatInput(e.target.value)} placeholder="Example: change slide 3 title to Growth Loop" />
+            <button onClick={sendChat} disabled={loading || !doc}>Send</button>
+          </div>
+        </section>
+      )}
     </div>
   )
 }
diff --git a/frontend/src/App.test.jsx b/frontend/src/App.test.jsx
index 465c066..d8b7d48 100644
--- a/frontend/src/App.test.jsx
+++ b/frontend/src/App.test.jsx
@@ -18,6 +18,10 @@ describe('App generator form', () => {
         ok: true,
         json: async () => ({ path: '/tmp/generated.pptx', slide_count: 0, slides: [] }),
       })
+      .mockResolvedValueOnce({
+        ok: true,
+        json: async () => ({ images: [], count: 0 }),
+      })
 
     vi.stubGlobal('fetch', fetchMock)
 
@@ -35,7 +39,7 @@ describe('App generator form', () => {
 
     fireEvent.click(screen.getByRole('button', { name: 'Generate PPT' }))
 
-    await waitFor(() => expect(fetchMock).toHaveBeenCalledTimes(2))
+    await waitFor(() => expect(fetchMock).toHaveBeenCalledTimes(3))
 
     const generateRequest = JSON.parse(fetchMock.mock.calls[0][1].body)
     expect(generateRequest.topic).toBe('AI Platform Plan')
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index d84b19c..7b9d55d 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -16,7 +16,7 @@ body {
 }
 
 .app-shell {
-  max-width: 1420px;
+  max-width: 1500px;
   margin: 0 auto;
   padding: 24px;
 }
@@ -29,16 +29,8 @@ body {
   margin-bottom: 16px;
 }
 
-.topbar h1 {
-  margin: 0;
-  font-size: 32px;
-  letter-spacing: 0.02em;
-}
-
-.topbar p {
-  margin: 6px 0 0;
-  color: #94a3b8;
-}
+.topbar h1 { margin: 0; font-size: 32px; }
+.topbar p { margin: 6px 0 0; color: #b8a8d4; }
 
 .badge {
   background: linear-gradient(135deg, #c084fc, #8b5cf6);
@@ -60,11 +52,18 @@ body {
 
 .main-grid {
   display: grid;
-  grid-template-columns: 330px 1fr;
-  gap: 14px;
+  gap: 0;
   align-items: start;
 }
 
+.resize-handle {
+  width: 8px;
+  cursor: col-resize;
+  background: linear-gradient(180deg, rgba(168, 85, 247, 0.1), rgba(168, 85, 247, 0.45), rgba(168, 85, 247, 0.1));
+  border-radius: 10px;
+  margin: 0 8px;
+}
+
 .panel {
   background: linear-gradient(180deg, rgba(40, 18, 70, 0.94), rgba(28, 12, 52, 0.96));
   border: 1px solid rgba(192, 132, 252, 0.28);
@@ -73,22 +72,10 @@ body {
   box-shadow: 0 20px 35px rgba(12, 2, 24, 0.45);
 }
 
-.panel h2 {
-  margin: 0 0 12px;
-  font-size: 18px;
-}
-
-label {
-  display: block;
-  font-size: 13px;
-  color: #cbd5e1;
-  margin-bottom: 10px;
-}
+.panel h2 { margin: 0 0 12px; font-size: 18px; }
 
-input, textarea, select, button {
-  width: 100%;
-  font: inherit;
-}
+label { display: block; font-size: 13px; color: #cbd5e1; margin-bottom: 10px; }
+input, textarea, select, button { width: 100%; font: inherit; }
 
 input, textarea, select {
   margin-top: 6px;
@@ -101,11 +88,7 @@ input, textarea, select {
 
 textarea { min-height: 84px; resize: vertical; }
 
-.field-grid {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 8px;
-}
+.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
 
 .primary-btn, button {
   border: none;
@@ -125,11 +108,7 @@ button:disabled { opacity: 0.5; cursor: not-allowed; }
   border: 1px solid rgba(148, 163, 184, 0.3);
 }
 
-.hint {
-  color: #d8b4fe;
-  font-size: 12px;
-  margin-top: 10px;
-}
+.hint { color: #d8b4fe; font-size: 12px; margin-top: 10px; }
 
 .panel-head {
   display: flex;
@@ -139,6 +118,11 @@ button:disabled { opacity: 0.5; cursor: not-allowed; }
   margin-bottom: 10px;
 }
 
+.row-actions {
+  display: flex;
+  gap: 6px;
+}
+
 .editor-layout {
   display: grid;
   grid-template-columns: 300px 1fr;
@@ -174,23 +158,8 @@ button:disabled { opacity: 0.5; cursor: not-allowed; }
   background: #0b1222;
 }
 
-.preview-thumb span {
-  font-size: 13px;
-  color: #e9d5ff;
-}
-
-.selected-preview {
-  margin-bottom: 12px;
-  border-radius: 12px;
-  overflow: hidden;
-  border: 1px solid rgba(196, 181, 253, 0.3);
-  background: #140a24;
-}
-
-.selected-preview img {
-  width: 100%;
-  display: block;
-}
+.preview-thumb span { font-size: 13px; color: #e9d5ff; }
+.dirty-tag { color: #fbbf24; font-style: normal; }
 
 .slides-list {
   max-height: 72vh;
@@ -203,18 +172,21 @@ button:disabled { opacity: 0.5; cursor: not-allowed; }
   border: 1px solid rgba(192, 132, 252, 0.25);
   border-radius: 12px;
   padding: 10px;
-  margin-bottom: 10px;
 }
 
 .slide-card h3 { margin: 0 0 8px; font-size: 15px; }
+.slide-card span { display: inline-block; font-size: 12px; color: #c4b5fd; margin-bottom: 2px; }
 
-.slide-card span {
-  display: inline-block;
-  font-size: 12px;
-  color: #c4b5fd;
-  margin-bottom: 2px;
+.selected-preview {
+  margin-bottom: 12px;
+  border-radius: 12px;
+  overflow: hidden;
+  border: 1px solid rgba(196, 181, 253, 0.3);
+  background: #140a24;
 }
 
+.selected-preview img { width: 100%; display: block; }
+
 .skeleton {
   border-radius: 10px;
   padding: 14px;
@@ -223,8 +195,22 @@ button:disabled { opacity: 0.5; cursor: not-allowed; }
   color: #d8b4fe;
 }
 
-.chat-panel-bottom {
-  margin-top: 14px;
+.chat-fab {
+  position: fixed;
+  right: 24px;
+  bottom: 24px;
+  width: auto;
+  padding: 10px 14px;
+  border-radius: 999px;
+  z-index: 1200;
+}
+
+.chat-floating {
+  position: fixed;
+  right: 24px;
+  bottom: 76px;
+  width: min(520px, calc(100vw - 32px));
+  z-index: 1100;
 }
 
 .chat-box {
@@ -257,14 +243,11 @@ button:disabled { opacity: 0.5; cursor: not-allowed; }
   border: 1px solid rgba(196, 181, 253, 0.26);
 }
 
-.chat-input-row {
-  display: grid;
-  grid-template-columns: 1fr 84px;
-  gap: 8px;
-}
+.chat-input-row { display: grid; grid-template-columns: 1fr 84px; gap: 8px; }
 
 @media (max-width: 1200px) {
-  .main-grid { grid-template-columns: 1fr; }
+  .main-grid { grid-template-columns: 1fr !important; }
+  .resize-handle { display: none; }
   .editor-layout { grid-template-columns: 1fr; }
   .preview-column {
     max-height: 240px;
@@ -272,8 +255,11 @@ button:disabled { opacity: 0.5; cursor: not-allowed; }
     overflow-x: auto;
     overflow-y: hidden;
   }
-  .preview-thumb {
-    min-width: 220px;
+  .preview-thumb { min-width: 220px; }
+  .chat-floating {
+    right: 8px;
+    left: 8px;
+    width: auto;
+    bottom: 68px;
   }
-  .chat-box, .slides-list { max-height: 42vh; height: auto; }
 }

From b248ea7ee27ff4107a382522cb49566dc655b343 Mon Sep 17 00:00:00 2001
From: HuiMi24 <mihui24@gmail.com>
Date: Sat, 14 Mar 2026 20:40:29 +0800
Subject: [PATCH 05/10] feat: add floating chat, theme cards, quick actions,
 and ppt download

---
 backend/app/main.py       | 14 ++++++++
 frontend/src/App.jsx      | 69 ++++++++++++++++++++++++++++++++++++---
 frontend/src/App.test.jsx |  4 +--
 frontend/src/styles.css   | 60 ++++++++++++++++++++++++++++++++++
 4 files changed, 139 insertions(+), 8 deletions(-)

diff --git a/backend/app/main.py b/backend/app/main.py
index afd4ccf..017b375 100644
--- a/backend/app/main.py
+++ b/backend/app/main.py
@@ -2,6 +2,7 @@
 
 from fastapi import FastAPI, HTTPException
 from fastapi.middleware.cors import CORSMiddleware
+from fastapi.responses import FileResponse
 from fastapi.staticfiles import StaticFiles
 
 from .chat_service import ChatPlanner
@@ -78,6 +79,19 @@ def preview_ppt(path: str):
         raise HTTPException(status_code=400, detail=str(e))
 
 
+@app.get("/api/ppt/download")
+def download_ppt(path: str):
+    try:
+        p = Path(path)
+        if not p.exists() or not p.is_file():
+            raise HTTPException(status_code=404, detail="PPT file not found")
+        return FileResponse(path=str(p), filename=p.name, media_type="application/vnd.openxmlformats-officedocument.presentationml.presentation")
+    except HTTPException:
+        raise
+    except Exception as e:
+        raise HTTPException(status_code=400, detail=str(e))
+
+
 @app.post("/api/ppt/update")
 def update_ppt(req: UpdateRequest):
     try:
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index e3abea0..168d897 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -4,7 +4,12 @@ const API_BASE =
   import.meta.env.VITE_API_BASE ||
   `${window.location.protocol}//${window.location.hostname}:8000`
 
-const PRESET_OPTIONS = ['Business', 'Tech', 'Education', 'Marketing']
+const PRESET_OPTIONS = [
+  { name: 'Business', desc: 'Executive, clean, data-focused', colors: ['#3b82f6', '#1e3a8a'] },
+  { name: 'Tech', desc: 'Modern, product & engineering', colors: ['#22c55e', '#0f766e'] },
+  { name: 'Education', desc: 'Clear, instructional, calm', colors: ['#eab308', '#a16207'] },
+  { name: 'Marketing', desc: 'Bold, storytelling, conversion', colors: ['#f43f5e', '#be123c'] },
+]
 
 const LANGUAGE_OPTIONS = [
   { label: 'English', value: 'en-US' },
@@ -238,6 +243,32 @@ export default function App() {
     }
   }
 
+  const copySlideText = async () => {
+    if (!selectedSlide) return
+    const text = selectedSlide.editableShapes.map((s) => `[${s.role}] ${s.text}`).join('\n')
+    await navigator.clipboard.writeText(text)
+    setNotice(`Slide ${selectedSlide.slide_index + 1} text copied`)
+  }
+
+  const rewriteTitle = () => {
+    if (!selectedSlide) return
+    const titleShape = selectedSlide.editableShapes.find((s) => s.role === 'title') || selectedSlide.editableShapes[0]
+    if (!titleShape) return
+    const current = titleShape.text.trim()
+    const next = current ? `Overview: ${current.replace(/^Overview:\s*/i, '')}` : 'Overview'
+    updateText(selectedSlide.slide_index, titleShape.shape_index, next)
+  }
+
+  const expandBullets = () => {
+    if (!selectedSlide) return
+    selectedSlide.editableShapes
+      .filter((s) => s.role !== 'title')
+      .forEach((shape) => {
+        const expanded = `${shape.text}\n• Impact: expected business value and next action`
+        updateText(selectedSlide.slide_index, shape.shape_index, expanded)
+      })
+  }
+
   return (
     <div className="app-shell">
       <header className="topbar">
@@ -264,12 +295,25 @@ export default function App() {
 
           <div className="field-grid">
             <label>
-              Preset
-              <select data-testid="preset-select" value={form.preset} onChange={(e) => setForm((f) => ({ ...f, preset: e.target.value }))}>
+              Theme preset
+              <div className="theme-cards">
                 {PRESET_OPTIONS.map((option) => (
-                  <option key={option} value={option}>{option}</option>
+                  <button
+                    type="button"
+                    key={option.name}
+                    data-testid={`preset-${option.name.toLowerCase()}`}
+                    className={`theme-card ${form.preset === option.name ? 'active' : ''}`}
+                    onClick={() => setForm((f) => ({ ...f, preset: option.name }))}
+                  >
+                    <div className="theme-swatches">
+                      <span style={{ background: option.colors[0] }} />
+                      <span style={{ background: option.colors[1] }} />
+                    </div>
+                    <strong>{option.name}</strong>
+                    <small>{option.desc}</small>
+                  </button>
                 ))}
-              </select>
+              </div>
             </label>
             <label>
               Audience
@@ -314,6 +358,16 @@ export default function App() {
               <button className="ghost-btn" onClick={undo} disabled={!undoStack.length}>Undo</button>
               <button className="ghost-btn" onClick={redo} disabled={!redoStack.length}>Redo</button>
               <button className="ghost-btn" onClick={() => saveManualEdits()} disabled={loading || !doc}>Save</button>
+              {pptPath && (
+                <a
+                  className="ghost-btn link-btn"
+                  href={`${API_BASE}/api/ppt/download?path=${encodeURIComponent(pptPath)}`}
+                  target="_blank"
+                  rel="noreferrer"
+                >
+                  Download .pptx
+                </a>
+              )}
             </div>
           </div>
 
@@ -341,6 +395,11 @@ export default function App() {
                 {selectedSlide && (
                   <article className="slide-card" key={selectedSlide.slide_index}>
                     <h3>Slide {selectedSlide.slide_index + 1}</h3>
+                    <div className="quick-actions">
+                      <button className="ghost-btn" onClick={copySlideText}>Copy Slide Text</button>
+                      <button className="ghost-btn" onClick={rewriteTitle}>Rewrite Title</button>
+                      <button className="ghost-btn" onClick={expandBullets}>Expand Bullets</button>
+                    </div>
                     {previewImages[selectedSlide.slide_index] && (
                       <div className="selected-preview">
                         <img src={toAbsolute(previewImages[selectedSlide.slide_index])} alt={`Selected slide ${selectedSlide.slide_index + 1}`} />
diff --git a/frontend/src/App.test.jsx b/frontend/src/App.test.jsx
index d8b7d48..a4e355a 100644
--- a/frontend/src/App.test.jsx
+++ b/frontend/src/App.test.jsx
@@ -30,9 +30,7 @@ describe('App generator form', () => {
     fireEvent.change(screen.getByLabelText('Topic / Prompt *'), {
       target: { value: 'AI Platform Plan' },
     })
-    fireEvent.change(screen.getByTestId('preset-select'), {
-      target: { value: 'Tech' },
-    })
+    fireEvent.click(screen.getByTestId('preset-tech'))
     fireEvent.change(screen.getByTestId('language-select'), {
       target: { value: 'ja-JP' },
     })
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 7b9d55d..03b95a8 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -77,6 +77,8 @@ body {
 label { display: block; font-size: 13px; color: #cbd5e1; margin-bottom: 10px; }
 input, textarea, select, button { width: 100%; font: inherit; }
 
+a { color: inherit; text-decoration: none; }
+
 input, textarea, select {
   margin-top: 6px;
   border: 1px solid rgba(196, 181, 253, 0.35);
@@ -90,6 +92,51 @@ textarea { min-height: 84px; resize: vertical; }
 
 .field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
 
+.theme-cards {
+  margin-top: 8px;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 8px;
+}
+
+.theme-card {
+  text-align: left;
+  background: rgba(45, 17, 78, 0.8);
+  border: 1px solid rgba(196, 181, 253, 0.26);
+  border-radius: 10px;
+  padding: 8px;
+}
+
+.theme-card strong {
+  display: block;
+  font-size: 13px;
+}
+
+.theme-card small {
+  display: block;
+  color: #d8b4fe;
+  opacity: 0.9;
+  font-size: 11px;
+}
+
+.theme-card.active {
+  border-color: rgba(216, 180, 254, 0.95);
+  box-shadow: 0 0 0 2px rgba(168, 85, 247, 0.35);
+}
+
+.theme-swatches {
+  display: flex;
+  gap: 6px;
+  margin-bottom: 6px;
+}
+
+.theme-swatches span {
+  width: 16px;
+  height: 16px;
+  border-radius: 6px;
+  display: inline-block;
+}
+
 .primary-btn, button {
   border: none;
   background: linear-gradient(135deg, #a855f7, #7c3aed);
@@ -108,6 +155,12 @@ button:disabled { opacity: 0.5; cursor: not-allowed; }
   border: 1px solid rgba(148, 163, 184, 0.3);
 }
 
+.link-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
 .hint { color: #d8b4fe; font-size: 12px; margin-top: 10px; }
 
 .panel-head {
@@ -177,6 +230,13 @@ button:disabled { opacity: 0.5; cursor: not-allowed; }
 .slide-card h3 { margin: 0 0 8px; font-size: 15px; }
 .slide-card span { display: inline-block; font-size: 12px; color: #c4b5fd; margin-bottom: 2px; }
 
+.quick-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-bottom: 10px;
+}
+
 .selected-preview {
   margin-bottom: 12px;
   border-radius: 12px;

From 6b85c82f46abf00577e1a9e39b811cd8ca060138 Mon Sep 17 00:00:00 2001
From: HuiMi24 <mihui24@gmail.com>
Date: Sat, 14 Mar 2026 20:48:23 +0800
Subject: [PATCH 06/10] fix: preserve selected slide after save/refresh
 operations

---
 frontend/src/App.jsx | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 168d897..d228fe7 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -51,7 +51,7 @@ export default function App() {
   const [notice, setNotice] = useState('')
 
   const [previewImages, setPreviewImages] = useState([])
-  const [selectedSlideIndex, setSelectedSlideIndex] = useState(0)
+  const [selectedSlideIndex, setSelectedSlideIndex] = useState(() => Number(localStorage.getItem('chatppt:selectedSlide') || 0))
   const [dirtySlides, setDirtySlides] = useState(() => new Set())
 
   const [undoStack, setUndoStack] = useState([])
@@ -79,6 +79,10 @@ export default function App() {
     [titleAndBody, selectedSlideIndex],
   )
 
+  useEffect(() => {
+    localStorage.setItem('chatppt:selectedSlide', String(selectedSlideIndex))
+  }, [selectedSlideIndex])
+
   useEffect(() => {
     if (!isResizing) return
 
@@ -107,12 +111,16 @@ export default function App() {
     return () => clearTimeout(autosaveTimerRef.current)
   }, [doc, isDirty, pptPath])
 
-  const loadPPT = async (path = pptPath) => {
+  const loadPPT = async (path = pptPath, { keepSelection = true } = {}) => {
     setLoading(true)
     try {
       const data = await api(`/api/ppt?path=${encodeURIComponent(path)}`)
       setDoc(data)
-      setSelectedSlideIndex(0)
+      if (keepSelection) {
+        setSelectedSlideIndex((prev) => Math.min(prev, Math.max(0, (data.slides?.length || 1) - 1)))
+      } else {
+        setSelectedSlideIndex(0)
+      }
       setPptPath(path)
       setDirtySlides(new Set())
       setUndoStack([])
@@ -142,7 +150,7 @@ export default function App() {
         method: 'POST',
         body: JSON.stringify(payload),
       })
-      await loadPPT(data.output_path)
+      await loadPPT(data.output_path, { keepSelection: false })
       setNotice(`Generated and loaded: ${data.output_path} (Theme: ${data.theme.name})`)
       setMessages((m) => [
         ...m,

From b20f8f3c75159fdbca9dd01ddd9f072ff77c557c Mon Sep 17 00:00:00 2001
From: HuiMi24 <mihui24@gmail.com>
Date: Sat, 14 Mar 2026 20:49:55 +0800
Subject: [PATCH 07/10] fix: preserve theme styling after text save by
 reapplying theme

---
 backend/app/ppt_service.py | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/backend/app/ppt_service.py b/backend/app/ppt_service.py
index a849b14..f440d45 100644
--- a/backend/app/ppt_service.py
+++ b/backend/app/ppt_service.py
@@ -52,6 +52,12 @@ def apply_edits(self, path: str, edits: List[EditInstruction], output_path: str
             shape = slide.shapes[edit.shape_index]
             if hasattr(shape, "text"):
                 shape.text = edit.new_text
+
+        # Re-apply inferred theme after text edits so color/font style is not lost
+        # when certain PPT text boxes reset run formatting.
+        theme = self.infer_theme_for_presentation(prs)
+        self.apply_theme_to_presentation(prs, theme)
+
         save_path = output_path or self._default_output(path, "edited")
         prs.save(save_path)
         return save_path

From 691d170bb19cafb58f82cab013ca1bdefe0f308c Mon Sep 17 00:00:00 2001
From: HuiMi24 <mihui24@gmail.com>
Date: Sat, 14 Mar 2026 20:53:47 +0800
Subject: [PATCH 08/10] style: refresh UI theme, add tooltips, floating chat
 polish, and LLM quick actions

---
 frontend/src/App.jsx    |  65 ++++++++++-----
 frontend/src/styles.css | 179 ++++++++++++++++++----------------------
 2 files changed, 125 insertions(+), 119 deletions(-)

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index d228fe7..f6d93f0 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -258,23 +258,40 @@ export default function App() {
     setNotice(`Slide ${selectedSlide.slide_index + 1} text copied`)
   }
 
-  const rewriteTitle = () => {
-    if (!selectedSlide) return
-    const titleShape = selectedSlide.editableShapes.find((s) => s.role === 'title') || selectedSlide.editableShapes[0]
-    if (!titleShape) return
-    const current = titleShape.text.trim()
-    const next = current ? `Overview: ${current.replace(/^Overview:\s*/i, '')}` : 'Overview'
-    updateText(selectedSlide.slide_index, titleShape.shape_index, next)
+  const rewriteTitle = async () => {
+    if (!selectedSlide || !pptPath) return
+    const message = `Rewrite the title of slide ${selectedSlide.slide_index + 1} to be clearer and more professional, keep it concise.`
+    setLoading(true)
+    try {
+      const data = await api('/api/chat', {
+        method: 'POST',
+        body: JSON.stringify({ path: pptPath, message }),
+      })
+      setMessages((m) => [...m, { role: 'assistant', text: `Rewrite title done (${data.used_llm ? 'LLM' : 'fallback'}).` }])
+      await loadPPT(data.output_path)
+    } catch (e) {
+      setNotice(`Rewrite title failed: ${e.message}`)
+    } finally {
+      setLoading(false)
+    }
   }
 
-  const expandBullets = () => {
-    if (!selectedSlide) return
-    selectedSlide.editableShapes
-      .filter((s) => s.role !== 'title')
-      .forEach((shape) => {
-        const expanded = `${shape.text}\n• Impact: expected business value and next action`
-        updateText(selectedSlide.slide_index, shape.shape_index, expanded)
+  const expandBullets = async () => {
+    if (!selectedSlide || !pptPath) return
+    const message = `Expand the key bullet points on slide ${selectedSlide.slide_index + 1} with more detail, keep structure clear.`
+    setLoading(true)
+    try {
+      const data = await api('/api/chat', {
+        method: 'POST',
+        body: JSON.stringify({ path: pptPath, message }),
       })
+      setMessages((m) => [...m, { role: 'assistant', text: `Expand bullets done (${data.used_llm ? 'LLM' : 'fallback'}).` }])
+      await loadPPT(data.output_path)
+    } catch (e) {
+      setNotice(`Expand bullets failed: ${e.message}`)
+    } finally {
+      setLoading(false)
+    }
   }
 
   return (
@@ -324,11 +341,17 @@ export default function App() {
               </div>
             </label>
             <label>
-              Audience
+              <span className="label-row">
+                Audience
+                <span className="field-help" title="Who will read this deck? Example: leadership team, technical audience, students.">ⓘ</span>
+              </span>
               <input value={form.audience} onChange={(e) => setForm((f) => ({ ...f, audience: e.target.value }))} />
             </label>
             <label>
-              Tone
+              <span className="label-row">
+                Tone
+                <span className="field-help" title="Writing style for the slides. Example: concise, formal, persuasive, friendly.">ⓘ</span>
+              </span>
               <input value={form.tone} onChange={(e) => setForm((f) => ({ ...f, tone: e.target.value }))} />
             </label>
             <label>
@@ -367,14 +390,12 @@ export default function App() {
               <button className="ghost-btn" onClick={redo} disabled={!redoStack.length}>Redo</button>
               <button className="ghost-btn" onClick={() => saveManualEdits()} disabled={loading || !doc}>Save</button>
               {pptPath && (
-                <a
-                  className="ghost-btn link-btn"
-                  href={`${API_BASE}/api/ppt/download?path=${encodeURIComponent(pptPath)}`}
-                  target="_blank"
-                  rel="noreferrer"
+                <button
+                  className="ghost-btn"
+                  onClick={() => window.open(`${API_BASE}/api/ppt/download?path=${encodeURIComponent(pptPath)}`, '_blank')}
                 >
                   Download .pptx
-                </a>
+                </button>
               )}
             </div>
           </div>
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 03b95a8..4d63cbd 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -1,18 +1,20 @@
 :root {
   font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-  color: #f3e8ff;
-  background: #12061f;
+  color: #0f172a;
+  background: #f3fbff;
 }
 
 * { box-sizing: border-box; }
 
+a { color: inherit; text-decoration: none; }
+
 body {
   margin: 0;
   min-height: 100vh;
   background:
-    radial-gradient(circle at 18% 0%, rgba(192, 132, 252, 0.45), transparent 42%),
-    radial-gradient(circle at 82% 0%, rgba(139, 92, 246, 0.30), transparent 36%),
-    #12061f;
+    radial-gradient(circle at 15% 0%, rgba(56, 189, 248, 0.18), transparent 45%),
+    radial-gradient(circle at 85% 0%, rgba(34, 197, 94, 0.14), transparent 40%),
+    #f3fbff;
 }
 
 .app-shell {
@@ -29,12 +31,12 @@ body {
   margin-bottom: 16px;
 }
 
-.topbar h1 { margin: 0; font-size: 32px; }
-.topbar p { margin: 6px 0 0; color: #b8a8d4; }
+.topbar h1 { margin: 0; font-size: 32px; color: #0f172a; }
+.topbar p { margin: 6px 0 0; color: #475569; }
 
 .badge {
-  background: linear-gradient(135deg, #c084fc, #8b5cf6);
-  color: #2a0e42;
+  background: linear-gradient(135deg, #38bdf8, #22c55e);
+  color: #042f2e;
   font-weight: 700;
   font-size: 12px;
   padding: 8px 12px;
@@ -45,9 +47,9 @@ body {
   margin-bottom: 14px;
   padding: 10px 12px;
   border-radius: 10px;
-  background: rgba(168, 85, 247, 0.18);
-  border: 1px solid rgba(196, 181, 253, 0.45);
-  color: #e9d5ff;
+  background: #ecfeff;
+  border: 1px solid #67e8f9;
+  color: #0e7490;
 }
 
 .main-grid {
@@ -59,37 +61,55 @@ body {
 .resize-handle {
   width: 8px;
   cursor: col-resize;
-  background: linear-gradient(180deg, rgba(168, 85, 247, 0.1), rgba(168, 85, 247, 0.45), rgba(168, 85, 247, 0.1));
+  background: linear-gradient(180deg, rgba(56, 189, 248, 0.2), rgba(34, 197, 94, 0.5), rgba(56, 189, 248, 0.2));
   border-radius: 10px;
   margin: 0 8px;
 }
 
 .panel {
-  background: linear-gradient(180deg, rgba(40, 18, 70, 0.94), rgba(28, 12, 52, 0.96));
-  border: 1px solid rgba(192, 132, 252, 0.28);
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 252, 255, 0.98));
+  border: 1px solid #cfe9f6;
   border-radius: 16px;
   padding: 14px;
-  box-shadow: 0 20px 35px rgba(12, 2, 24, 0.45);
+  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.08);
 }
 
-.panel h2 { margin: 0 0 12px; font-size: 18px; }
+.panel h2 { margin: 0 0 12px; font-size: 18px; color: #0f172a; }
 
-label { display: block; font-size: 13px; color: #cbd5e1; margin-bottom: 10px; }
+label { display: block; font-size: 13px; color: #334155; margin-bottom: 10px; }
 input, textarea, select, button { width: 100%; font: inherit; }
 
-a { color: inherit; text-decoration: none; }
-
 input, textarea, select {
   margin-top: 6px;
-  border: 1px solid rgba(196, 181, 253, 0.35);
-  background: rgba(46, 16, 81, 0.6);
-  color: #f3e8ff;
+  border: 1px solid #cbd5e1;
+  background: #ffffff;
+  color: #0f172a;
   border-radius: 10px;
   padding: 10px;
 }
 
 textarea { min-height: 84px; resize: vertical; }
 
+.label-row {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.field-help {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  border-radius: 999px;
+  background: #e0f2fe;
+  color: #0369a1;
+  font-size: 11px;
+  font-weight: 700;
+  cursor: help;
+}
+
 .field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
 
 .theme-cards {
@@ -101,46 +121,27 @@ textarea { min-height: 84px; resize: vertical; }
 
 .theme-card {
   text-align: left;
-  background: rgba(45, 17, 78, 0.8);
-  border: 1px solid rgba(196, 181, 253, 0.26);
+  background: #f8fafc;
+  border: 1px solid #dbeafe;
   border-radius: 10px;
   padding: 8px;
 }
 
-.theme-card strong {
-  display: block;
-  font-size: 13px;
-}
-
-.theme-card small {
-  display: block;
-  color: #d8b4fe;
-  opacity: 0.9;
-  font-size: 11px;
-}
+.theme-card strong { display: block; font-size: 13px; color: #0f172a; }
+.theme-card small { display: block; color: #64748b; font-size: 11px; }
 
 .theme-card.active {
-  border-color: rgba(216, 180, 254, 0.95);
-  box-shadow: 0 0 0 2px rgba(168, 85, 247, 0.35);
+  border-color: #38bdf8;
+  box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.2);
 }
 
-.theme-swatches {
-  display: flex;
-  gap: 6px;
-  margin-bottom: 6px;
-}
-
-.theme-swatches span {
-  width: 16px;
-  height: 16px;
-  border-radius: 6px;
-  display: inline-block;
-}
+.theme-swatches { display: flex; gap: 6px; margin-bottom: 6px; }
+.theme-swatches span { width: 16px; height: 16px; border-radius: 6px; display: inline-block; }
 
 .primary-btn, button {
   border: none;
-  background: linear-gradient(135deg, #a855f7, #7c3aed);
-  color: #faf5ff;
+  background: linear-gradient(135deg, #0ea5e9, #22c55e);
+  color: #f8fafc;
   border-radius: 10px;
   padding: 10px 12px;
   font-weight: 600;
@@ -151,17 +152,12 @@ button:disabled { opacity: 0.5; cursor: not-allowed; }
 
 .ghost-btn {
   width: auto;
-  background: rgba(148, 163, 184, 0.15);
-  border: 1px solid rgba(148, 163, 184, 0.3);
-}
-
-.link-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
+  color: #0f172a;
+  background: #f8fafc;
+  border: 1px solid #cbd5e1;
 }
 
-.hint { color: #d8b4fe; font-size: 12px; margin-top: 10px; }
+.hint { color: #0e7490; font-size: 12px; margin-top: 10px; }
 
 .panel-head {
   display: flex;
@@ -171,16 +167,9 @@ button:disabled { opacity: 0.5; cursor: not-allowed; }
   margin-bottom: 10px;
 }
 
-.row-actions {
-  display: flex;
-  gap: 6px;
-}
+.row-actions { display: flex; gap: 6px; flex-wrap: wrap; }
 
-.editor-layout {
-  display: grid;
-  grid-template-columns: 300px 1fr;
-  gap: 14px;
-}
+.editor-layout { display: grid; grid-template-columns: 300px 1fr; gap: 14px; }
 
 .preview-column {
   max-height: 72vh;
@@ -193,42 +182,38 @@ button:disabled { opacity: 0.5; cursor: not-allowed; }
 
 .preview-thumb {
   text-align: left;
-  background: rgba(27, 10, 48, 0.9);
-  border: 1px solid rgba(196, 181, 253, 0.25);
+  background: #ffffff;
+  border: 1px solid #dbeafe;
   border-radius: 12px;
   padding: 10px;
 }
 
 .preview-thumb.active {
-  border-color: rgba(216, 180, 254, 0.9);
-  box-shadow: 0 0 0 2px rgba(168, 85, 247, 0.35);
+  border-color: #0ea5e9;
+  box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.2);
 }
 
 .preview-thumb img {
   width: 100%;
   border-radius: 8px;
   margin-bottom: 4px;
-  background: #0b1222;
+  background: #e2e8f0;
 }
 
-.preview-thumb span { font-size: 13px; color: #e9d5ff; }
-.dirty-tag { color: #fbbf24; font-style: normal; }
+.preview-thumb span { font-size: 13px; color: #0f172a; }
+.dirty-tag { color: #ca8a04; font-style: normal; }
 
-.slides-list {
-  max-height: 72vh;
-  overflow: auto;
-  padding-right: 4px;
-}
+.slides-list { max-height: 72vh; overflow: auto; padding-right: 4px; }
 
 .slide-card {
-  background: rgba(30, 10, 54, 0.68);
-  border: 1px solid rgba(192, 132, 252, 0.25);
+  background: #ffffff;
+  border: 1px solid #dbeafe;
   border-radius: 12px;
   padding: 10px;
 }
 
-.slide-card h3 { margin: 0 0 8px; font-size: 15px; }
-.slide-card span { display: inline-block; font-size: 12px; color: #c4b5fd; margin-bottom: 2px; }
+.slide-card h3 { margin: 0 0 8px; font-size: 15px; color: #0f172a; }
+.slide-card span { display: inline-block; font-size: 12px; color: #0369a1; margin-bottom: 2px; }
 
 .quick-actions {
   display: flex;
@@ -241,8 +226,8 @@ button:disabled { opacity: 0.5; cursor: not-allowed; }
   margin-bottom: 12px;
   border-radius: 12px;
   overflow: hidden;
-  border: 1px solid rgba(196, 181, 253, 0.3);
-  background: #140a24;
+  border: 1px solid #bae6fd;
+  background: #f0f9ff;
 }
 
 .selected-preview img { width: 100%; display: block; }
@@ -250,9 +235,9 @@ button:disabled { opacity: 0.5; cursor: not-allowed; }
 .skeleton {
   border-radius: 10px;
   padding: 14px;
-  background: rgba(168, 85, 247, 0.10);
-  border: 1px dashed rgba(196, 181, 253, 0.45);
-  color: #d8b4fe;
+  background: #f0f9ff;
+  border: 1px dashed #7dd3fc;
+  color: #0369a1;
 }
 
 .chat-fab {
@@ -279,8 +264,8 @@ button:disabled { opacity: 0.5; cursor: not-allowed; }
   overflow: auto;
   border-radius: 12px;
   padding: 10px;
-  background: rgba(24, 8, 44, 0.74);
-  border: 1px solid rgba(196, 181, 253, 0.22);
+  background: #f8fafc;
+  border: 1px solid #dbeafe;
   margin-bottom: 10px;
 }
 
@@ -294,13 +279,13 @@ button:disabled { opacity: 0.5; cursor: not-allowed; }
 }
 
 .msg.user {
-  background: rgba(168, 85, 247, 0.30);
-  border: 1px solid rgba(192, 132, 252, 0.45);
+  background: #e0f2fe;
+  border: 1px solid #7dd3fc;
 }
 
 .msg.assistant {
-  background: rgba(44, 16, 74, 0.85);
-  border: 1px solid rgba(196, 181, 253, 0.26);
+  background: #ecfeff;
+  border: 1px solid #a5f3fc;
 }
 
 .chat-input-row { display: grid; grid-template-columns: 1fr 84px; gap: 8px; }

From 9278659dd5e3dbd5656f2d7d2bb7cdab42c26342 Mon Sep 17 00:00:00 2001
From: HuiMi24 <mihui24@gmail.com>
Date: Sat, 14 Mar 2026 20:58:17 +0800
Subject: [PATCH 09/10] fix: preserve style switch preview updates and add
 audience/tone placeholders

---
 frontend/src/App.jsx | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index f6d93f0..a98dd06 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -30,6 +30,7 @@ async function api(path, options = {}) {
 }
 
 const toAbsolute = (url) => (url?.startsWith('http') ? url : `${API_BASE}${url}`)
+const withVersion = (url, version) => `${toAbsolute(url)}${toAbsolute(url).includes('?') ? '&' : '?'}v=${version}`
 
 const initialForm = {
   topic: '',
@@ -51,6 +52,7 @@ export default function App() {
   const [notice, setNotice] = useState('')
 
   const [previewImages, setPreviewImages] = useState([])
+  const [previewVersion, setPreviewVersion] = useState(Date.now())
   const [selectedSlideIndex, setSelectedSlideIndex] = useState(() => Number(localStorage.getItem('chatppt:selectedSlide') || 0))
   const [dirtySlides, setDirtySlides] = useState(() => new Set())
 
@@ -128,6 +130,7 @@ export default function App() {
       setIsDirty(false)
       const preview = await api(`/api/ppt/preview?path=${encodeURIComponent(path)}`)
       setPreviewImages(preview.images || [])
+      setPreviewVersion(Date.now())
     } finally {
       setLoading(false)
     }
@@ -345,14 +348,22 @@ export default function App() {
                 Audience
                 <span className="field-help" title="Who will read this deck? Example: leadership team, technical audience, students.">ⓘ</span>
               </span>
-              <input value={form.audience} onChange={(e) => setForm((f) => ({ ...f, audience: e.target.value }))} />
+              <input
+                value={form.audience}
+                placeholder="e.g. leadership team, investors, new users"
+                onChange={(e) => setForm((f) => ({ ...f, audience: e.target.value }))}
+              />
             </label>
             <label>
               <span className="label-row">
                 Tone
                 <span className="field-help" title="Writing style for the slides. Example: concise, formal, persuasive, friendly.">ⓘ</span>
               </span>
-              <input value={form.tone} onChange={(e) => setForm((f) => ({ ...f, tone: e.target.value }))} />
+              <input
+                value={form.tone}
+                placeholder="e.g. concise, persuasive, formal, friendly"
+                onChange={(e) => setForm((f) => ({ ...f, tone: e.target.value }))}
+              />
             </label>
             <label>
               Slides
@@ -411,7 +422,7 @@ export default function App() {
                     className={`preview-thumb ${selectedSlideIndex === idx ? 'active' : ''}`}
                     onClick={() => setSelectedSlideIndex(idx)}
                   >
-                    <img src={toAbsolute(img)} alt={`Slide preview ${idx + 1}`} />
+                    <img src={withVersion(img, previewVersion)} alt={`Slide preview ${idx + 1}`} />
                     <span>
                       Slide {idx + 1}
                       {dirtySlides.has(idx) && <em className="dirty-tag"> • modified</em>}
@@ -431,7 +442,7 @@ export default function App() {
                     </div>
                     {previewImages[selectedSlide.slide_index] && (
                       <div className="selected-preview">
-                        <img src={toAbsolute(previewImages[selectedSlide.slide_index])} alt={`Selected slide ${selectedSlide.slide_index + 1}`} />
+                        <img src={withVersion(previewImages[selectedSlide.slide_index], previewVersion)} alt={`Selected slide ${selectedSlide.slide_index + 1}`} />
                       </div>
                     )}
                     {selectedSlide.editableShapes.map((sh) => (

From 7b226a145e82cc310b219239f00f96e39d377b53 Mon Sep 17 00:00:00 2001
From: HuiMi24 <mihui24@gmail.com>
Date: Sat, 14 Mar 2026 21:03:43 +0800
Subject: [PATCH 10/10] feat: move preset controls, apply theme on click, and
 refine fresh UI layout

---
 backend/app/generator_service.py |  9 +++++
 backend/app/main.py              | 18 ++++++++++
 backend/app/models.py            |  6 ++++
 frontend/src/App.jsx             | 62 +++++++++++++++++++++-----------
 frontend/src/styles.css          | 27 ++++++++++++++
 5 files changed, 101 insertions(+), 21 deletions(-)

diff --git a/backend/app/generator_service.py b/backend/app/generator_service.py
index f5a3551..26714ff 100644
--- a/backend/app/generator_service.py
+++ b/backend/app/generator_service.py
@@ -52,6 +52,15 @@ class GeneratorService:
     def __init__(self, ppt_service: PPTService):
         self.ppt_service = ppt_service
 
+    def apply_theme_preset(self, path: str, preset: str, output_path: str | None = None) -> tuple[str, ThemeConfig]:
+        prs = Presentation(path)
+        req = GenerateRequest(topic="theme-apply", preset=preset)
+        theme = self._select_theme(req, [])
+        self.ppt_service.apply_theme_to_presentation(prs, theme)
+        save_path = output_path or self.ppt_service._default_output(path, f"preset-{theme.name}")
+        prs.save(save_path)
+        return save_path, theme
+
     def generate(self, req: GenerateRequest) -> tuple[str, List[OutlineSlide], ThemeConfig]:
         if os.getenv("FAKE_LLM_RESPONSES", "0") == "1":
             outline = self._fake_llm_outline(req)
diff --git a/backend/app/main.py b/backend/app/main.py
index 017b375..88ef0fc 100644
--- a/backend/app/main.py
+++ b/backend/app/main.py
@@ -13,6 +13,7 @@
     GenerateRequest,
     GenerateResponse,
     ThemeApplyRequest,
+    ThemePresetApplyRequest,
     UpdateRequest,
 )
 from .ppt_service import PPTService
@@ -130,3 +131,20 @@ def apply_theme(req: ThemeApplyRequest):
         }
     except Exception as e:
         raise HTTPException(status_code=400, detail=str(e))
+
+
+@app.post("/api/theme/apply-preset")
+def apply_theme_preset(req: ThemePresetApplyRequest):
+    try:
+        output, theme = generator_service.apply_theme_preset(req.path, req.preset, req.output_path)
+        return {
+            "output_path": output,
+            "theme": {
+                "name": theme.name,
+                "font_name": theme.font_name,
+                "title_size_pt": theme.title_size_pt,
+                "body_size_pt": theme.body_size_pt,
+            },
+        }
+    except Exception as e:
+        raise HTTPException(status_code=400, detail=str(e))
diff --git a/backend/app/models.py b/backend/app/models.py
index 985aa59..15f76aa 100644
--- a/backend/app/models.py
+++ b/backend/app/models.py
@@ -44,6 +44,12 @@ class ThemeApplyRequest(BaseModel):
     output_path: Optional[str] = None
 
 
+class ThemePresetApplyRequest(BaseModel):
+    path: str
+    preset: str
+    output_path: Optional[str] = None
+
+
 class ChatResponse(BaseModel):
     plan: List[EditInstruction]
     output_path: str
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index a98dd06..bfe6637 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -136,6 +136,25 @@ export default function App() {
     }
   }
 
+  const applyPresetImmediately = async (presetName) => {
+    setForm((f) => ({ ...f, preset: presetName }))
+    if (!pptPath) return
+
+    setLoading(true)
+    try {
+      const data = await api('/api/theme/apply-preset', {
+        method: 'POST',
+        body: JSON.stringify({ path: pptPath, preset: presetName }),
+      })
+      await loadPPT(data.output_path)
+      setNotice(`Preset switched to ${presetName} and applied immediately.`)
+    } catch (e) {
+      setNotice(`Apply preset failed: ${e.message}`)
+    } finally {
+      setLoading(false)
+    }
+  }
+
   const generatePPT = async () => {
     if (!form.topic.trim()) return
     setLoading(true)
@@ -322,27 +341,6 @@ export default function App() {
           </label>
 
           <div className="field-grid">
-            <label>
-              Theme preset
-              <div className="theme-cards">
-                {PRESET_OPTIONS.map((option) => (
-                  <button
-                    type="button"
-                    key={option.name}
-                    data-testid={`preset-${option.name.toLowerCase()}`}
-                    className={`theme-card ${form.preset === option.name ? 'active' : ''}`}
-                    onClick={() => setForm((f) => ({ ...f, preset: option.name }))}
-                  >
-                    <div className="theme-swatches">
-                      <span style={{ background: option.colors[0] }} />
-                      <span style={{ background: option.colors[1] }} />
-                    </div>
-                    <strong>{option.name}</strong>
-                    <small>{option.desc}</small>
-                  </button>
-                ))}
-              </div>
-            </label>
             <label>
               <span className="label-row">
                 Audience
@@ -411,6 +409,28 @@ export default function App() {
             </div>
           </div>
 
+          <div className="preset-inline">
+            <span>Theme preset:</span>
+            <div className="theme-cards compact">
+              {PRESET_OPTIONS.map((option) => (
+                <button
+                  type="button"
+                  key={option.name}
+                  data-testid={`preset-${option.name.toLowerCase()}`}
+                  className={`theme-card ${form.preset === option.name ? 'active' : ''}`}
+                  onClick={() => applyPresetImmediately(option.name)}
+                  disabled={loading}
+                >
+                  <div className="theme-swatches">
+                    <span style={{ background: option.colors[0] }} />
+                    <span style={{ background: option.colors[1] }} />
+                  </div>
+                  <strong>{option.name}</strong>
+                </button>
+              ))}
+            </div>
+          </div>
+
           {!doc && <div className="skeleton">Start by entering a topic and generating a PPT from the left panel.</div>}
           {doc && (
             <div className="editor-layout">
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 4d63cbd..27188e8 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -119,6 +119,33 @@ textarea { min-height: 84px; resize: vertical; }
   gap: 8px;
 }
 
+.preset-inline {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 10px;
+}
+
+.preset-inline > span {
+  color: #475569;
+  font-size: 13px;
+  min-width: 92px;
+}
+
+.theme-cards.compact {
+  margin-top: 0;
+  grid-template-columns: repeat(4, minmax(110px, 1fr));
+  flex: 1;
+}
+
+.theme-cards.compact .theme-card {
+  padding: 6px 8px;
+}
+
+.theme-cards.compact .theme-card small {
+  display: none;
+}
+
 .theme-card {
   text-align: left;
   background: #f8fafc;