plotlink-ows 1.0.28 → 1.0.32

package/app/lib/generate-claude-md.ts

@@ -0,0 +1,147 @@
+import fs from "fs";
+import path from "path";
+import { CONFIG_DIR } from "./paths";
+
+const CLAUDE_MD_PATH = path.join(CONFIG_DIR, "CLAUDE.md");
+
+/** Read the installed package version from package.json */
+function getVersion(): string {
+  const pkgPath = path.join(__dirname, "..", "..", "package.json");
+  try {
+    return JSON.parse(fs.readFileSync(pkgPath, "utf-8")).version;
+  } catch {
+    return "unknown";
+  }
+}
+
+function generateContent(version: string, port: number): string {
+  return `# PlotLink OWS — Local Writer API (v${version})
+
+> Auto-generated by PlotLink OWS on startup. Do not edit manually.
+
+Local writer app running at \`http://localhost:${port}\`.
+All endpoints except auth use \`Authorization: Bearer {token}\` headers.
+
+## Authentication
+
+The OWS passphrase is stored in \`~/.plotlink-ows/.env\` as \`OWS_PASSPHRASE\`.
+For login, the passphrase is hashed with HMAC-SHA256 and compared against the stored hash.
+
+| Endpoint | Method | Auth | Purpose |
+|----------|--------|------|---------|
+| \`/api/auth/status\` | GET | No | Check if passphrase is configured |
+| \`/api/auth/setup\` | POST | No | First-run passphrase setup (≥4 chars) → returns \`{ token }\` |
+| \`/api/auth/login\` | POST | No | Login with passphrase → returns \`{ token }\` (24h TTL) |
+| \`/api/auth/verify\` | GET | Bearer | Check token validity |
+| \`/api/auth/reset-passphrase\` | POST | Bearer | Update passphrase |
+
+## Publishing
+
+| Endpoint | Method | Purpose |
+|----------|--------|---------|
+| \`/api/publish/preflight\` | GET | Check wallet balance, Filebase config |
+| \`/api/publish/file\` | POST | Publish story on-chain (SSE stream of progress events) |
+| \`/api/publish/retry-index\` | POST | Retry indexing for a published file |
+| \`/api/publish/upload-cover\` | POST | Upload cover image — FormData \`file\` field, **WebP or JPEG only**, max 500KB → returns \`{ cid }\` |
+| \`/api/publish/upload-plot-image\` | POST | Upload plot illustration — FormData \`file\` field, **WebP or JPEG only**, max 500KB → returns \`{ cid, url }\` |
+| \`/api/publish/update-storyline\` | POST | Update storyline metadata (coverCid, genre, language, isNsfw) |
+
+**Publish flow:** Upload to IPFS → estimate gas → sign with OWS wallet → broadcast → confirm → index on plotlink.xyz (8s delay + 10 retries × 30s). Genesis files call \`createStoryline\`, plot files (\`plot-*.md\`) call \`chainPlot\`. Content limit: 10K chars.
+
+**Cover update workflow:**
+1. \`POST /api/publish/upload-cover\` with image file → get \`cid\`
+2. \`POST /api/publish/update-storyline\` with \`{ storylineId, coverCid: cid }\` → updates on plotlink.xyz
+
+**Metadata update workflow:**
+1. \`POST /api/publish/update-storyline\` with \`{ storylineId, genre?, language?, isNsfw? }\`
+
+Both upload-cover and update-storyline sign messages with the OWS wallet.
+
+**Illustration workflow (for plot files):**
+1. Upload image via \`POST /api/publish/upload-plot-image\` → get \`{ cid, url }\`
+2. Insert markdown in the plot content: \`![Scene description](url)\`
+3. Verify the image renders correctly in Preview before publishing
+4. Publish the plot — content is stored on IPFS with an on-chain keccak256 hash
+
+**WARNING: Content is immutable after publish.** Once published, plot content (including image references) cannot be edited, removed, or changed. Always verify illustrations in Preview before publishing.
+
+## Stories
+
+| Endpoint | Method | Purpose |
+|----------|--------|---------|
+| \`/api/stories\` | GET | List all stories |
+| \`/api/stories/archived\` | GET | List archived stories |
+| \`/api/stories/archive\` | POST | Archive a story \`{ name }\` |
+| \`/api/stories/restore\` | POST | Restore archived story \`{ name }\` |
+| \`/api/stories/:name\` | GET | Story detail with file contents |
+| \`/api/stories/:name/:file\` | GET | Single file content and publish status |
+| \`/api/stories/:name/:file\` | PUT | Update file content \`{ content }\` |
+| \`/api/stories/:name/:file/publish-status\` | POST | Record publish result (txHash, storylineId, etc.) |
+| \`/api/stories/:name/:file/mark-not-indexed\` | POST | Mark file as not indexed \`{ indexError? }\` |
+
+## Terminal
+
+| Endpoint | Method | Purpose |
+|----------|--------|---------|
+| \`/api/terminal/spawn\` | POST | Spawn Claude CLI session for a story \`{ storyName?, resume? }\` |
+| \`/api/terminal/session/:storyName\` | GET | Get stored session ID for a story |
+| \`/api/terminal/status\` | GET | List all active terminal sessions |
+| \`/api/terminal/rename\` | POST | Rename session \`{ oldName, newName }\` |
+| \`/api/terminal/stop\` | POST | Kill default PTY (legacy) |
+| \`/api/terminal/:storyName\` | DELETE | Kill a story's PTY |
+| \`/api/terminal/:storyName/discard\` | DELETE | Kill PTY and clean metadata |
+| \`/ws/terminal\` | WebSocket | Live PTY relay \`?token={token}&story={name}&resume={bool}\` |
+
+## Other Endpoints
+
+| Endpoint | Method | Purpose |
+|----------|--------|---------|
+| \`/api/wallet\` | GET | Wallet info and balances (ETH, USDC, PLOT) |
+| \`/api/wallet/create\` | POST | Create OWS wallet if not exists |
+| \`/api/dashboard\` | GET | Writer dashboard stats (stories, costs, royalties) |
+| \`/api/settings/register-agent\` | POST | Register wallet on ERC-8004 |
+| \`/api/settings/generate-binding\` | POST | Generate wallet binding proof |
+| \`/api/settings/link-status\` | GET | Check ERC-8004 registration status |
+| \`/api/health\` | GET | Health check |
+
+## Story File Structure
+
+Stories live in \`~/.plotlink-ows/stories/{story-name}/\`:
+
+\`\`\`
+stories/{story-name}/
+  structure.md    # Outline, characters, arc
+  genesis.md      # Synopsis hook (~1000 chars)
+  plot-01.md      # Chapter 1 (max 10K chars)
+  ...
+\`\`\`
+
+## Supported Genres (21)
+
+Romance, Fantasy, Science Fiction, Mystery, Thriller, Horror, Adventure, Historical Fiction, Contemporary Lit, Humor, Poetry, Non-Fiction, Fanfiction, Short Story, Paranormal, Werewolf, LGBTQ+, New Adult, Teen Fiction, Diverse Lit, Others
+
+## Supported Languages (11)
+
+English, Chinese, Korean, Japanese, Spanish, French, Hindi, Arabic, Portuguese, Russian, Others
+`;
+}
+
+/**
+ * Write/update ~/.plotlink-ows/CLAUDE.md on startup.
+ * Skips the write if the file already contains the current version stamp.
+ */
+export function generateClaudeMd(): void {
+  const version = getVersion();
+  const port = Number(process.env.APP_PORT) || 7777;
+
+  // Check if the file already matches the current version
+  if (fs.existsSync(CLAUDE_MD_PATH)) {
+    try {
+      const firstLine = fs.readFileSync(CLAUDE_MD_PATH, "utf-8").split("\n")[0];
+      if (firstLine.includes(`(v${version})`)) return;
+    } catch { /* regenerate on read error */ }
+  }
+
+  fs.writeFileSync(CLAUDE_MD_PATH, generateContent(version, port), "utf-8");
+  console.log(`  Updated ~/.plotlink-ows/CLAUDE.md (v${version})`);
+}

package/app/lib/publish.ts

@@ -461,6 +461,41 @@ export async function uploadCoverImage(
   return data.cid;
 }
 
+/**
+ * Upload a plot illustration image to PlotLink via signed API call.
+ * Returns the IPFS CID and URL of the uploaded image.
+ */
+export async function uploadPlotImage(
+  walletName: string,
+  walletAddress: `0x${string}`,
+  imageFile: File,
+): Promise<{ cid: string; url: string }> {
+  const PLOTLINK_URL = process.env.NEXT_PUBLIC_APP_URL || "https://plotlink.xyz";
+  const account = createOwsAccount(walletName, walletAddress);
+
+  const timestamp = Date.now();
+  const message = `PlotLink: Upload plot image\nTimestamp: ${timestamp}`;
+  const signature = await account.signMessage({ message });
+
+  const formData = new FormData();
+  formData.append("file", imageFile);
+  formData.append("message", message);
+  formData.append("signature", signature);
+
+  const res = await fetch(`${PLOTLINK_URL}/api/upload-plot-image`, {
+    method: "POST",
+    body: formData,
+  });
+
+  if (!res.ok) {
+    const err = await res.json().catch(() => ({})) as Record<string, string>;
+    throw new Error(err.error || `Plot image upload failed: HTTP ${res.status}`);
+  }
+
+  const data = await res.json() as { cid: string; url: string };
+  return data;
+}
+
 /**
  * Update storyline metadata (cover, genre, language, NSFW) on PlotLink via signed API call.
  * Uses createOwsAccount for signing (not raw owsSignMsg).

package/app/routes/publish.ts

@@ -1,6 +1,6 @@
 import { Hono } from "hono";
 import { streamSSE } from "hono/streaming";
-import { publishStoryline, publishPlot, getEthBalance, estimatePublishCost, uploadCoverImage, updateStoryline } from "../lib/publish";
+import { publishStoryline, publishPlot, getEthBalance, estimatePublishCost, uploadCoverImage, uploadPlotImage, updateStoryline } from "../lib/publish";
 import { keccak256, toBytes } from "viem";
 import { listAgentWallets, getBaseAddress } from "../../lib/ows/wallet";
 
@@ -231,6 +231,41 @@ publish.post("/upload-cover", async (c) => {
   }
 });
 
+/** POST /api/publish/upload-plot-image — upload plot illustration with wallet signature */
+publish.post("/upload-plot-image", async (c) => {
+  try {
+    const wallets = listAgentWallets();
+    const wallet = wallets.find((w) => w.name.startsWith("plotlink-writer"));
+    if (!wallet) return c.json({ error: "No OWS wallet" }, 400);
+
+    const address = getBaseAddress(wallet);
+    if (!address) return c.json({ error: "No EVM address on wallet" }, 400);
+
+    const formData = await c.req.formData();
+    const file = formData.get("file");
+    if (!file || !(file instanceof File)) {
+      return c.json({ error: "No image file provided" }, 400);
+    }
+
+    // Validate file size (500KB max)
+    if (file.size > 500 * 1024) {
+      return c.json({ error: "Image exceeds 500KB limit" }, 400);
+    }
+
+    // Validate file type — only WebP and JPEG accepted by the plotlink server
+    const allowedTypes = ["image/webp", "image/jpeg"];
+    if (!allowedTypes.includes(file.type)) {
+      return c.json({ error: "Only WebP and JPEG images are accepted" }, 400);
+    }
+
+    const result = await uploadPlotImage(wallet.name, address as `0x${string}`, file);
+    return c.json(result);
+  } catch (err: unknown) {
+    const message = err instanceof Error ? err.message : "Plot image upload failed";
+    return c.json({ error: message }, 500);
+  }
+});
+
 /** POST /api/publish/update-storyline — update storyline metadata with wallet signature */
 publish.post("/update-storyline", async (c) => {
   try {

package/app/server.ts

@@ -23,6 +23,7 @@ import { terminalRoutes, attachTerminalWs } from "./routes/terminal";
 import { storiesRoutes } from "./routes/stories";
 import { settingsRoutes } from "./routes/settings";
 import { initDb } from "./db";
+import { generateClaudeMd } from "./lib/generate-claude-md";
 import { execSync } from "child_process";
 import fs from "fs";
 
@@ -48,8 +49,15 @@ app.route("/api/stories", storiesRoutes);
 app.use("/api/settings/*", requireAuth);
 app.route("/api/settings", settingsRoutes);
 
+// App version (read once at startup)
+const appVersion = (() => {
+  try {
+    return JSON.parse(fs.readFileSync(path.join(__dirname, "..", "package.json"), "utf-8")).version;
+  } catch { return "unknown"; }
+})();
+
 // Health check
-app.get("/api/health", (c) => c.json({ status: "ok" }));
+app.get("/api/health", (c) => c.json({ status: "ok", version: appVersion }));
 
 // In production, serve the built frontend
 const distPath = path.join(__dirname, "web", "dist");
@@ -117,6 +125,9 @@ async function start() {
   // Auto-migrate from old package-relative paths
   migrateOldData();
 
+  // Generate/update ~/.plotlink-ows/CLAUDE.md for agent discovery
+  generateClaudeMd();
+
   // Run Prisma db push to ensure schema is up to date
   const schemaPath = path.join(__dirname, "prisma", "schema.prisma");
   execSync(`npx prisma db push --schema ${schemaPath} --skip-generate`, {

package/app/web/components/Layout.tsx

@@ -69,6 +69,7 @@ function WalletSetupPage({ token, onComplete }: { token: string; onComplete: ()
 export function Layout({ token, onLogout }: { token: string; onLogout: () => void }) {
   const [page, setPage] = useState<Page>("home");
   const [storyCount, setStoryCount] = useState(0);
+  const [appVersion, setAppVersion] = useState<string | null>(null);
 
   const authFetch = useCallback(async (url: string, opts?: RequestInit) => {
     return fetch(url, {
@@ -80,6 +81,12 @@ export function Layout({ token, onLogout }: { token: string; onLogout: () => voi
     });
   }, [token]);
 
+  useEffect(() => {
+    fetch("/api/health").then((r) => r.json()).then((d) => {
+      if (d.version) setAppVersion(d.version);
+    }).catch(() => {});
+  }, []);
+
   useEffect(() => {
     async function checkSetup() {
       try {
@@ -111,7 +118,7 @@ export function Layout({ token, onLogout }: { token: string; onLogout: () => voi
           <button onClick={() => { if (page !== "wallet-setup") setPage("home"); }} className="flex items-center gap-2 hover:opacity-80">
             <span className="text-accent text-sm font-bold tracking-tight">PlotLink OWS</span>
           </button>
-          <span className="text-muted text-[10px] uppercase tracking-wider">writer</span>
+          <span className="text-muted text-[10px] uppercase tracking-wider">writer{appVersion ? ` v${appVersion}` : ""}</span>
         </div>
         {page !== "wallet-setup" && (
         <nav className="flex items-center gap-4">

package/app/web/components/PreviewPanel.tsx

@@ -2,9 +2,48 @@ import { useState, useEffect, useCallback, useRef } from "react";
 import ReactMarkdown from "react-markdown";
 import remarkBreaks from "remark-breaks";
 import remarkGfm from "remark-gfm";
-import rehypeSanitize from "rehype-sanitize";
+import rehypeSanitize, { defaultSchema } from "rehype-sanitize";
 import { GENRES, LANGUAGES } from "../../../lib/genres";
 
+/** Custom sanitizer matching plotlink.xyz — allows img with src, alt, title */
+const sanitizeSchema = {
+  ...defaultSchema,
+  attributes: {
+    ...defaultSchema.attributes,
+    img: ["src", "alt", "title"],
+  },
+};
+
+const IPFS_GATEWAY = "https://ipfs.filebase.io/ipfs/";
+
+/** Find all markdown image references in content */
+function findImageRefs(text: string): Array<{ full: string; alt: string; url: string }> {
+  const results: Array<{ full: string; alt: string; url: string }> = [];
+  const re = /!\[([^\]]*)\]\(([^)]+)\)/g;
+  let m;
+  while ((m = re.exec(text)) !== null) {
+    results.push({ full: m[0], alt: m[1], url: m[2] });
+  }
+  return results;
+}
+
+/** Validate image references for publishing */
+function validateImageRefs(text: string): { count: number; warnings: string[] } {
+  const refs = findImageRefs(text);
+  const warnings: string[] = [];
+  for (const ref of refs) {
+    if (!ref.url.startsWith(IPFS_GATEWAY)) {
+      warnings.push(`Non-IPFS image URL: ${ref.url.length > 60 ? ref.url.slice(0, 60) + "..." : ref.url}`);
+    }
+  }
+  // Check for malformed image markdown (missing closing bracket/paren)
+  const malformed = text.match(/!\[[^\]]*\]\([^)]*$|!\[[^\]]*$(?!\])/gm);
+  if (malformed) {
+    warnings.push("Malformed image markdown detected — check brackets and parentheses");
+  }
+  return { count: refs.length, warnings };
+}
+
 interface PreviewPanelProps {
   storyName: string | null;
   fileName: string | null;
@@ -56,6 +95,14 @@ export function PreviewPanel({ storyName, fileName, authFetch, onPublish, publis
   const [editSuccess, setEditSuccess] = useState(false);
   const coverInputRef = useRef<HTMLInputElement>(null);
 
+  // Inline illustration state
+  const [showIllustrations, setShowIllustrations] = useState(false);
+  const [illustrationUploading, setIllustrationUploading] = useState(false);
+  const [illustrationError, setIllustrationError] = useState<string | null>(null);
+  const [uploadedImages, setUploadedImages] = useState<Array<{ cid: string; url: string }>>([]);
+  const [copiedIndex, setCopiedIndex] = useState<number | null>(null);
+  const illustrationInputRef = useRef<HTMLInputElement>(null);
+
   const prevFileRef = useRef<string | null>(null);
 
   const loadFile = useCallback(async () => {
@@ -153,6 +200,45 @@ export function PreviewPanel({ storyName, fileName, authFetch, onPublish, publis
     setEditError(null);
   }, []);
 
+  // Handle illustration image upload from File object
+  const uploadIllustration = useCallback(async (file: File) => {
+    if (file.size > 500 * 1024) {
+      setIllustrationError("Image exceeds 500KB limit");
+      return;
+    }
+    const allowedTypes = ["image/webp", "image/jpeg"];
+    if (!allowedTypes.includes(file.type)) {
+      setIllustrationError("Only WebP and JPEG images are accepted");
+      return;
+    }
+    setIllustrationUploading(true);
+    setIllustrationError(null);
+    try {
+      const formData = new FormData();
+      formData.append("file", file);
+      const res = await authFetch("/api/publish/upload-plot-image", {
+        method: "POST",
+        body: formData,
+      });
+      if (!res.ok) {
+        const err = await res.json();
+        throw new Error(err.error || "Upload failed");
+      }
+      const data = await res.json();
+      setUploadedImages((prev) => [...prev, { cid: data.cid, url: data.url }]);
+    } catch (err) {
+      setIllustrationError(err instanceof Error ? err.message : "Upload failed");
+    } finally {
+      setIllustrationUploading(false);
+      if (illustrationInputRef.current) illustrationInputRef.current.value = "";
+    }
+  }, [authFetch]);
+
+  const handleIllustrationInput = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (file) uploadIllustration(file);
+  }, [uploadIllustration]);
+
   // Save storyline edits (cover upload + metadata update)
   const handleEditSave = useCallback(async () => {
     if (!fileData?.storylineId) return;
@@ -215,6 +301,9 @@ export function PreviewPanel({ storyName, fileName, authFetch, onPublish, publis
     setEditError(null);
     setEditSuccess(false);
     setEditMetaLoaded(false);
+    setShowIllustrations(false);
+    setUploadedImages([]);
+    setIllustrationError(null);
   }, [storyName, fileName]);
 
   // Fetch current storyline metadata when edit panel opens
@@ -310,6 +399,10 @@ export function PreviewPanel({ storyName, fileName, authFetch, onPublish, publis
   // Don't show over-limit warning for already-published files
   const overLimit = !isPublished && charLimit !== null && charCount > charLimit;
 
+  // Pre-publish image validation for pending content
+  const publishContent = fileData?.content ?? "";
+  const imageValidation = !isPublished ? validateImageRefs(publishContent) : { count: 0, warnings: [] };
+
   return (
     <div className="h-full flex flex-col">
       {/* Header with file path + tabs */}
@@ -372,7 +465,7 @@ export function PreviewPanel({ storyName, fileName, authFetch, onPublish, publis
             <div className="prose max-w-none">
               <ReactMarkdown
                 remarkPlugins={[remarkBreaks, remarkGfm]}
-                rehypePlugins={[rehypeSanitize]}
+                rehypePlugins={[[rehypeSanitize, sanitizeSchema]]}
               >
                 {fileData.content}
               </ReactMarkdown>
@@ -407,6 +500,70 @@ 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>
       )}
 
@@ -636,7 +793,14 @@ export function PreviewPanel({ storyName, fileName, authFetch, onPublish, publis
                 </>
               )}
               <button
-                onClick={() => storyName && fileName && onPublish?.(storyName, fileName, selectedGenre, selectedLanguage, isNsfw)}
+                onClick={() => {
+                  if (!storyName || !fileName) return;
+                  if (imageValidation.count > 0) {
+                    const msg = `This plot contains ${imageValidation.count} illustration(s). Content is immutable after publishing — image references cannot be changed or removed.\n\nPlease verify illustrations appear correctly in Preview before continuing.\n\nPublish now?`;
+                    if (!window.confirm(msg)) return;
+                  }
+                  onPublish?.(storyName, fileName, selectedGenre, selectedLanguage, isNsfw);
+                }}
                 disabled={!!publishingFile || overLimit}
                 className="px-4 py-1.5 bg-accent text-white text-sm rounded hover:bg-accent-dim disabled:opacity-50 disabled:cursor-not-allowed"
               >
@@ -646,6 +810,13 @@ export function PreviewPanel({ storyName, fileName, authFetch, onPublish, publis
                 <span className="text-error text-xs">Reduce content to publish</span>
               )}
             </div>
+            {imageValidation.warnings.length > 0 && (
+              <div className="flex flex-col gap-0.5">
+                {imageValidation.warnings.map((w, i) => (
+                  <span key={i} className="text-amber-600 text-xs">{w}</span>
+                ))}
+              </div>
+            )}
             {(isGenesis) && (
               <div className="flex items-center gap-2">
                 <label className="flex items-center gap-1.5 text-xs text-muted cursor-pointer">