From 55d36c82d659138fa62a3b5e46d3f16a74ec401d Mon Sep 17 00:00:00 2001
From: Cho Young-Hwi <cyh76507707@gmail.com>
Date: Thu, 14 May 2026 18:29:12 +0900
Subject: [PATCH 1/2] [#191] Move illustration checkbox from Edit tab to
 Publish area

The illustration upload UI now appears directly above the Publish button
in the action bar, so users can add illustrations without switching tabs.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 app/web/components/PreviewPanel.tsx | 128 ++++++++++++++--------------
 package.json                        |   2 +-
 2 files changed, 65 insertions(+), 65 deletions(-)

diff --git a/app/web/components/PreviewPanel.tsx b/app/web/components/PreviewPanel.tsx
index 192191b..07dc971 100644
--- a/app/web/components/PreviewPanel.tsx
+++ b/app/web/components/PreviewPanel.tsx
@@ -500,70 +500,6 @@ export function PreviewPanel({ storyName, fileName, authFetch, onPublish, publis
               {saving ? "Saving..." : "Save"}
             </button>
           </div>
-          {/* Inline illustration upload for plot files */}
-          {isPlot && (
-            <div className="px-3 py-1.5 border-t border-border">
-              <label className="flex items-center gap-1.5 text-xs text-muted cursor-pointer">
-                <input
-                  type="checkbox"
-                  checked={showIllustrations}
-                  onChange={(e) => setShowIllustrations(e.target.checked)}
-                  className="rounded border-border"
-                />
-                Add illustrations in the plot
-              </label>
-              {showIllustrations && (
-                <div className="mt-2 flex flex-col gap-2">
-                  <div
-                    className="border-2 border-dashed border-border rounded p-3 flex flex-col items-center gap-1.5 cursor-pointer hover:border-accent transition-colors"
-                    onClick={() => illustrationInputRef.current?.click()}
-                    onDragOver={(e) => { e.preventDefault(); e.stopPropagation(); }}
-                    onDrop={(e) => {
-                      e.preventDefault();
-                      e.stopPropagation();
-                      const file = e.dataTransfer.files?.[0];
-                      if (file) uploadIllustration(file);
-                    }}
-                  >
-                    <input
-                      ref={illustrationInputRef}
-                      type="file"
-                      accept="image/webp,image/jpeg"
-                      onChange={handleIllustrationInput}
-                      className="hidden"
-                    />
-                    <span className="text-xs text-muted">
-                      {illustrationUploading ? "Uploading..." : "Drop image here or click to browse"}
-                    </span>
-                    <span className="text-xs text-muted">WebP/JPEG, max 500KB</span>
-                  </div>
-                  {illustrationError && (
-                    <span className="text-error text-xs">{illustrationError}</span>
-                  )}
-                  {uploadedImages.map((img, i) => (
-                    <div key={img.cid} className="border border-border rounded p-2 flex flex-col gap-1 bg-surface">
-                      <span className="text-xs text-green-700">Image uploaded! Copy the markdown below and paste it where you want the illustration to appear in your plot:</span>
-                      <div className="flex items-center gap-1.5">
-                        <code className="flex-1 text-xs bg-background px-2 py-1 rounded font-mono break-all">
-                          ![Scene description]({img.url})
-                        </code>
-                        <button
-                          onClick={() => {
-                            navigator.clipboard.writeText(`![Scene description](${img.url})`);
-                            setCopiedIndex(i);
-                            setTimeout(() => setCopiedIndex(null), 2000);
-                          }}
-                          className="px-2 py-1 text-xs border border-border rounded hover:bg-surface shrink-0"
-                        >
-                          {copiedIndex === i ? "Copied!" : "Copy"}
-                        </button>
-                      </div>
-                    </div>
-                  ))}
-                </div>
-              )}
-            </div>
-          )}
         </div>
       )}
 
@@ -769,6 +705,70 @@ export function PreviewPanel({ storyName, fileName, authFetch, onPublish, publis
           </div>
         ) : (
           <div className="flex flex-col gap-2">
+            {/* Inline illustration upload for plot files */}
+            {isPlot && (
+              <div>
+                <label className="flex items-center gap-1.5 text-xs text-muted cursor-pointer">
+                  <input
+                    type="checkbox"
+                    checked={showIllustrations}
+                    onChange={(e) => setShowIllustrations(e.target.checked)}
+                    className="rounded border-border"
+                  />
+                  Add illustrations in the plot
+                </label>
+                {showIllustrations && (
+                  <div className="mt-2 flex flex-col gap-2">
+                    <div
+                      className="border-2 border-dashed border-border rounded p-3 flex flex-col items-center gap-1.5 cursor-pointer hover:border-accent transition-colors"
+                      onClick={() => illustrationInputRef.current?.click()}
+                      onDragOver={(e) => { e.preventDefault(); e.stopPropagation(); }}
+                      onDrop={(e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        const file = e.dataTransfer.files?.[0];
+                        if (file) uploadIllustration(file);
+                      }}
+                    >
+                      <input
+                        ref={illustrationInputRef}
+                        type="file"
+                        accept="image/webp,image/jpeg"
+                        onChange={handleIllustrationInput}
+                        className="hidden"
+                      />
+                      <span className="text-xs text-muted">
+                        {illustrationUploading ? "Uploading..." : "Drop image here or click to browse"}
+                      </span>
+                      <span className="text-xs text-muted">WebP/JPEG, max 500KB</span>
+                    </div>
+                    {illustrationError && (
+                      <span className="text-error text-xs">{illustrationError}</span>
+                    )}
+                    {uploadedImages.map((img, i) => (
+                      <div key={img.cid} className="border border-border rounded p-2 flex flex-col gap-1 bg-surface">
+                        <span className="text-xs text-green-700">Image uploaded! Copy the markdown below and paste it where you want the illustration to appear in your plot:</span>
+                        <div className="flex items-center gap-1.5">
+                          <code className="flex-1 text-xs bg-background px-2 py-1 rounded font-mono break-all">
+                            ![Scene description]({img.url})
+                          </code>
+                          <button
+                            onClick={() => {
+                              navigator.clipboard.writeText(`![Scene description](${img.url})`);
+                              setCopiedIndex(i);
+                              setTimeout(() => setCopiedIndex(null), 2000);
+                            }}
+                            className="px-2 py-1 text-xs border border-border rounded hover:bg-surface shrink-0"
+                          >
+                            {copiedIndex === i ? "Copied!" : "Copy"}
+                          </button>
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                )}
+              </div>
+            )}
             <div className="flex items-center gap-2">
               {(isGenesis) && (
                 <>
diff --git a/package.json b/package.json
index a0cc251..f08a14a 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "plotlink-ows",
-  "version": "1.0.32",
+  "version": "1.0.33",
   "bin": {
     "plotlink-ows": "./bin/plotlink-ows.js"
   },

From 1bc35ebbaa19062aca5f13c261ee3d33e5392abd Mon Sep 17 00:00:00 2001
From: Cho Young-Hwi <cyh76507707@gmail.com>
Date: Thu, 14 May 2026 18:31:11 +0900
Subject: [PATCH 2/2] [#191] Gate illustration UI to Preview tab only

Only render the illustration checkbox when activeTab === "preview"
so it does not appear while the Edit tab is active.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 app/web/components/PreviewPanel.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/web/components/PreviewPanel.tsx b/app/web/components/PreviewPanel.tsx
index 07dc971..b706768 100644
--- a/app/web/components/PreviewPanel.tsx
+++ b/app/web/components/PreviewPanel.tsx
@@ -705,8 +705,8 @@ export function PreviewPanel({ storyName, fileName, authFetch, onPublish, publis
           </div>
         ) : (
           <div className="flex flex-col gap-2">
-            {/* Inline illustration upload for plot files */}
-            {isPlot && (
+            {/* Inline illustration upload for plot files (Preview tab only) */}
+            {isPlot && activeTab === "preview" && (
               <div>
                 <label className="flex items-center gap-1.5 text-xs text-muted cursor-pointer">
                   <input