@jiggai/kitchen-plugin-marketing 0.4.0 → 0.5.0

package/dist/api/handler.js

@@ -1002,8 +1002,187 @@ async function handleRequest(req, ctx) {
       return apiError(500, "DATABASE_ERROR", error?.message || "Unknown error");
     }
   }
+  const MEDIA_DIR = (0, import_path2.join)((0, import_os2.homedir)(), ".openclaw", "kitchen", "plugins", "marketing", "media");
+  function ensureMediaDir(team) {
+    const dir = (0, import_path2.join)(MEDIA_DIR, team);
+    (0, import_fs2.mkdirSync)(dir, { recursive: true });
+    return dir;
+  }
+  if (req.path === "/media" && req.method === "POST") {
+    try {
+      const body = req.body;
+      if (!body?.data) return apiError(400, "VALIDATION_ERROR", "data (base64) is required");
+      let base64 = body.data;
+      let detectedMime = body.mimeType || "application/octet-stream";
+      const dataUrlMatch = base64.match(/^data:([^;]+);base64,(.+)$/);
+      if (dataUrlMatch) {
+        detectedMime = dataUrlMatch[1];
+        base64 = dataUrlMatch[2];
+      }
+      const buf = Buffer.from(base64, "base64");
+      const id = (0, import_crypto2.randomUUID)();
+      const ext = (0, import_path2.extname)(body.filename || "") || mimeToExt(detectedMime);
+      const storedFilename = `${id}${ext}`;
+      const dir = ensureMediaDir(teamId);
+      const filePath = (0, import_path2.join)(dir, storedFilename);
+      (0, import_fs2.writeFileSync)(filePath, buf);
+      const { db } = initializeDatabase(teamId);
+      const now = (/* @__PURE__ */ new Date()).toISOString();
+      const userId = getUserId(req);
+      const record = {
+        id,
+        teamId,
+        filename: storedFilename,
+        originalName: body.filename || storedFilename,
+        mimeType: detectedMime,
+        size: buf.length,
+        width: null,
+        height: null,
+        alt: body.alt || null,
+        tags: JSON.stringify(body.tags || []),
+        url: `/api/plugins/marketing/media/${id}/file?team=${encodeURIComponent(teamId)}`,
+        thumbnailUrl: null,
+        createdAt: now,
+        createdBy: userId
+      };
+      await db.insert(media).values(record);
+      return {
+        status: 201,
+        data: {
+          id,
+          filename: record.originalName,
+          mimeType: detectedMime,
+          size: buf.length,
+          url: record.url,
+          alt: record.alt,
+          tags: body.tags || [],
+          createdAt: now
+        }
+      };
+    } catch (error) {
+      return apiError(500, "UPLOAD_ERROR", error?.message || "Upload failed");
+    }
+  }
+  if (req.path === "/media" && req.method === "GET") {
+    try {
+      const { db } = initializeDatabase(teamId);
+      const { limit, offset } = parsePagination(req.query);
+      const conditions = [(0, import_drizzle_orm2.eq)(media.teamId, teamId)];
+      if (req.query.mimeType) {
+        conditions.push((0, import_drizzle_orm2.like)(media.mimeType, `${req.query.mimeType}%`));
+      }
+      const totalResult = await db.select({ count: import_drizzle_orm2.sql`count(*)` }).from(media).where((0, import_drizzle_orm2.and)(...conditions));
+      const total = totalResult[0]?.count ?? 0;
+      const items = await db.select().from(media).where((0, import_drizzle_orm2.and)(...conditions)).orderBy((0, import_drizzle_orm2.desc)(media.createdAt)).limit(limit).offset(offset);
+      const data = items.map((m) => {
+        let thumbnailDataUrl;
+        if (m.mimeType.startsWith("image/")) {
+          const fp = (0, import_path2.join)(MEDIA_DIR, teamId, m.filename);
+          if ((0, import_fs2.existsSync)(fp)) {
+            const raw = (0, import_fs2.readFileSync)(fp);
+            if (raw.length < 2 * 1024 * 1024) {
+              thumbnailDataUrl = `data:${m.mimeType};base64,${raw.toString("base64")}`;
+            }
+          }
+        }
+        return {
+          id: m.id,
+          filename: m.originalName,
+          mimeType: m.mimeType,
+          size: m.size,
+          url: m.url,
+          thumbnailDataUrl,
+          alt: m.alt,
+          tags: JSON.parse(m.tags || "[]"),
+          createdAt: m.createdAt
+        };
+      });
+      return {
+        status: 200,
+        data: { data, total, offset, limit, hasMore: offset + limit < total }
+      };
+    } catch (error) {
+      return apiError(500, "DATABASE_ERROR", error?.message || "Failed to list media");
+    }
+  }
+  const mediaIdMatch = req.path.match(/^\/media\/([a-f0-9-]+)$/);
+  if (mediaIdMatch && req.method === "GET") {
+    try {
+      const { db } = initializeDatabase(teamId);
+      const [item] = await db.select().from(media).where((0, import_drizzle_orm2.and)((0, import_drizzle_orm2.eq)(media.id, mediaIdMatch[1]), (0, import_drizzle_orm2.eq)(media.teamId, teamId)));
+      if (!item) return apiError(404, "NOT_FOUND", "Media not found");
+      let dataUrl;
+      const fp = (0, import_path2.join)(MEDIA_DIR, teamId, item.filename);
+      if ((0, import_fs2.existsSync)(fp)) {
+        const raw = (0, import_fs2.readFileSync)(fp);
+        dataUrl = `data:${item.mimeType};base64,${raw.toString("base64")}`;
+      }
+      return {
+        status: 200,
+        data: {
+          id: item.id,
+          filename: item.originalName,
+          mimeType: item.mimeType,
+          size: item.size,
+          url: item.url,
+          dataUrl,
+          alt: item.alt,
+          tags: JSON.parse(item.tags || "[]"),
+          createdAt: item.createdAt
+        }
+      };
+    } catch (error) {
+      return apiError(500, "DATABASE_ERROR", error?.message || "Failed to get media");
+    }
+  }
+  const mediaFileMatch = req.path.match(/^\/media\/([a-f0-9-]+)\/file$/);
+  if (mediaFileMatch && req.method === "GET") {
+    try {
+      const { db } = initializeDatabase(teamId);
+      const [item] = await db.select().from(media).where((0, import_drizzle_orm2.and)((0, import_drizzle_orm2.eq)(media.id, mediaFileMatch[1]), (0, import_drizzle_orm2.eq)(media.teamId, teamId)));
+      if (!item) return apiError(404, "NOT_FOUND", "Media not found");
+      const fp = (0, import_path2.join)(MEDIA_DIR, teamId, item.filename);
+      if (!(0, import_fs2.existsSync)(fp)) return apiError(404, "NOT_FOUND", "File missing from disk");
+      const raw = (0, import_fs2.readFileSync)(fp);
+      const dataUrl = `data:${item.mimeType};base64,${raw.toString("base64")}`;
+      return { status: 200, data: { dataUrl, mimeType: item.mimeType, filename: item.originalName } };
+    } catch (error) {
+      return apiError(500, "FILE_ERROR", error?.message || "Failed to serve file");
+    }
+  }
+  if (mediaIdMatch && req.method === "DELETE") {
+    try {
+      const { db } = initializeDatabase(teamId);
+      const [item] = await db.select().from(media).where((0, import_drizzle_orm2.and)((0, import_drizzle_orm2.eq)(media.id, mediaIdMatch[1]), (0, import_drizzle_orm2.eq)(media.teamId, teamId)));
+      if (!item) return apiError(404, "NOT_FOUND", "Media not found");
+      const fp = (0, import_path2.join)(MEDIA_DIR, teamId, item.filename);
+      try {
+        (0, import_fs2.unlinkSync)(fp);
+      } catch {
+      }
+      await db.delete(media).where((0, import_drizzle_orm2.eq)(media.id, mediaIdMatch[1]));
+      return { status: 200, data: { deleted: true, id: mediaIdMatch[1] } };
+    } catch (error) {
+      return apiError(500, "DATABASE_ERROR", error?.message || "Failed to delete media");
+    }
+  }
   return apiError(501, "NOT_IMPLEMENTED", `No handler for ${req.method} ${req.path}`);
 }
+function mimeToExt(mime) {
+  const map = {
+    "image/jpeg": ".jpg",
+    "image/png": ".png",
+    "image/gif": ".gif",
+    "image/webp": ".webp",
+    "image/svg+xml": ".svg",
+    "video/mp4": ".mp4",
+    "video/webm": ".webm",
+    "video/quicktime": ".mov",
+    "audio/mpeg": ".mp3",
+    "audio/wav": ".wav"
+  };
+  return map[mime] || "";
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   handleRequest

package/dist/tabs/content-library.js

@@ -120,6 +120,11 @@
       const [scheduledAt, setScheduledAt] = useState("");
       const [mediaUrl, setMediaUrl] = useState("");
       const [showMedia, setShowMedia] = useState(false);
+      const [mediaLibrary, setMediaLibrary] = useState([]);
+      const [showMediaPicker, setShowMediaPicker] = useState(false);
+      const [uploading, setUploading] = useState(false);
+      const [selectedMediaIds, setSelectedMediaIds] = useState([]);
+      const fileInputRef = useRef(null);
       const successTimeout = useRef(null);
       const postizHeaders = useMemo(() => {
         try {
@@ -154,10 +159,64 @@
         } catch {
         }
       }, [apiBase, teamId]);
+      const loadMedia = useCallback(async () => {
+        try {
+          const res = await fetch(`${apiBase}/media?team=${encodeURIComponent(teamId)}&limit=100`);
+          const json = await res.json();
+          setMediaLibrary(Array.isArray(json.data) ? json.data : []);
+        } catch {
+        }
+      }, [apiBase, teamId]);
+      const handleFileUpload = useCallback(async (files) => {
+        if (!files || files.length === 0) return;
+        setUploading(true);
+        setError(null);
+        try {
+          for (const file of Array.from(files)) {
+            const base64 = await new Promise((resolve, reject) => {
+              const reader = new FileReader();
+              reader.onload = () => resolve(reader.result);
+              reader.onerror = reject;
+              reader.readAsDataURL(file);
+            });
+            const res = await fetch(`${apiBase}/media?team=${encodeURIComponent(teamId)}`, {
+              method: "POST",
+              headers: { "content-type": "application/json" },
+              body: JSON.stringify({ data: base64, filename: file.name, mimeType: file.type })
+            });
+            if (!res.ok) {
+              const err = await res.json().catch(() => ({}));
+              throw new Error(err.message || `Upload failed (${res.status})`);
+            }
+            const item = await res.json();
+            setSelectedMediaIds((prev) => [...prev, item.id]);
+          }
+          await loadMedia();
+          showSuccess(`Uploaded ${files.length} file${files.length > 1 ? "s" : ""}`);
+        } catch (e) {
+          setError(e?.message || "Upload failed");
+        } finally {
+          setUploading(false);
+          if (fileInputRef.current) fileInputRef.current.value = "";
+        }
+      }, [apiBase, teamId, loadMedia]);
+      const deleteMedia = useCallback(async (id) => {
+        try {
+          await fetch(`${apiBase}/media/${id}?team=${encodeURIComponent(teamId)}`, { method: "DELETE" });
+          setSelectedMediaIds((prev) => prev.filter((x) => x !== id));
+          await loadMedia();
+        } catch {
+        }
+      }, [apiBase, teamId, loadMedia]);
+      const toggleMediaSelect = (id) => {
+        setSelectedMediaIds(
+          (prev) => prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]
+        );
+      };
       useEffect(() => {
         setLoading(true);
-        Promise.all([loadDrivers(), loadPosts()]).finally(() => setLoading(false));
-      }, [loadDrivers, loadPosts]);
+        Promise.all([loadDrivers(), loadPosts(), loadMedia()]).finally(() => setLoading(false));
+      }, [loadDrivers, loadPosts, loadMedia]);
       const connectedDrivers = useMemo(() => drivers.filter((d) => d.connected), [drivers]);
       const disconnectedDrivers = useMemo(() => drivers.filter((d) => !d.connected), [drivers]);
       const togglePlatform = (platform) => {
@@ -274,137 +333,487 @@
       return h(
         "div",
         { className: "space-y-3" },
-        // ---- Composer ----
+        // ---- Composer (two-column: compose left, preview right) ----
         h(
           "div",
           { style: t.card },
           h("div", { className: "text-sm font-medium mb-3", style: t.text }, "Compose"),
           h(
             "div",
-            { className: "space-y-3" },
-            h("textarea", {
-              value: content,
-              onChange: (e) => setContent(e.target.value),
-              placeholder: "Write your post\u2026",
-              rows: 5,
-              style: { ...t.input, resize: "vertical", minHeight: "110px", fontFamily: "inherit" }
-            }),
-            // Character count
-            charLimit && content.length > 0 && h(
-              "div",
-              { style: t.charWarn(content.length / charLimit * 100) },
-              `${content.length} / ${charLimit} characters`,
-              content.length > charLimit && " \u26A0 over limit"
-            ),
-            !charLimit && content.length > 0 && h("div", { className: "text-xs", style: t.faint }, `${content.length} chars`),
-            // Platform selector — connected
+            { style: { display: "flex", gap: "1rem" } },
+            // LEFT — compose pane
             h(
               "div",
-              null,
-              h("div", { className: "text-xs font-medium mb-2", style: t.faint }, "Publish to"),
-              connectedDrivers.length > 0 ? h(
+              { style: { flex: 1, minWidth: 0 }, className: "space-y-3" },
+              h("textarea", {
+                value: content,
+                onChange: (e) => setContent(e.target.value),
+                placeholder: "Write your post\u2026",
+                rows: 5,
+                style: { ...t.input, resize: "vertical", minHeight: "160px", fontFamily: "inherit" }
+              }),
+              // Character count
+              charLimit && content.length > 0 && h(
                 "div",
-                { className: "flex flex-wrap gap-2" },
-                ...connectedDrivers.map(
-                  (d) => h(
-                    "span",
-                    {
+                { style: t.charWarn(content.length / charLimit * 100) },
+                `${content.length} / ${charLimit} characters`,
+                content.length > charLimit && " \u26A0 over limit"
+              ),
+              !charLimit && content.length > 0 && h("div", { className: "text-xs", style: t.faint }, `${content.length} chars`),
+              // Platform selector — connected
+              h(
+                "div",
+                null,
+                h("div", { className: "text-xs font-medium mb-2", style: t.faint }, "Publish to"),
+                connectedDrivers.length > 0 ? h(
+                  "div",
+                  { className: "flex flex-wrap gap-2" },
+                  ...connectedDrivers.map(
+                    (d) => h(
+                      "span",
+                      {
+                        key: d.platform,
+                        onClick: () => togglePlatform(d.platform),
+                        style: t.pill(selectedPlatforms.includes(d.platform), true),
+                        role: "button",
+                        tabIndex: 0,
+                        title: `${d.displayName} via ${d.backend}`
+                      },
+                      `${d.icon} ${d.label}`,
+                      h("span", { style: t.backendBadge(d.backend) }, d.backend)
+                    )
+                  ),
+                  ...disconnectedDrivers.map(
+                    (d) => h("span", {
                       key: d.platform,
-                      onClick: () => togglePlatform(d.platform),
-                      style: t.pill(selectedPlatforms.includes(d.platform), true),
-                      role: "button",
-                      tabIndex: 0,
-                      title: `${d.displayName} via ${d.backend}`
-                    },
-                    `${d.icon} ${d.label}`,
-                    h("span", { style: t.backendBadge(d.backend) }, d.backend)
+                      style: t.pill(false, false),
+                      title: `${d.label} \u2014 not connected`
+                    }, `${d.icon} ${d.label}`)
+                  )
+                ) : h(
+                  "div",
+                  { className: "flex flex-wrap gap-2" },
+                  ...drivers.map(
+                    (d) => h(
+                      "span",
+                      { key: d.platform, style: t.pill(false, false), title: "Not connected" },
+                      `${d.icon} ${d.label}`
+                    )
+                  ),
+                  h(
+                    "div",
+                    { className: "text-xs mt-1", style: t.faint },
+                    "No platforms connected. Go to Accounts tab to set up Postiz or add accounts."
                   )
-                ),
-                ...disconnectedDrivers.map(
-                  (d) => h("span", {
-                    key: d.platform,
-                    style: t.pill(false, false),
-                    title: `${d.label} \u2014 not connected`
-                  }, `${d.icon} ${d.label}`)
                 )
-              ) : h(
+              ),
+              // Media (upload, URL, or library picker)
+              h(
                 "div",
-                { className: "flex flex-wrap gap-2" },
-                ...drivers.map(
-                  (d) => h(
-                    "span",
-                    { key: d.platform, style: t.pill(false, false), title: "Not connected" },
-                    `${d.icon} ${d.label}`
+                null,
+                h("button", {
+                  type: "button",
+                  onClick: () => setShowMedia(!showMedia),
+                  style: { ...t.btnGhost, padding: "0.3rem 0.55rem", fontSize: "0.8rem" }
+                }, showMedia ? "\u2212 Media" : "+ Media"),
+                showMedia && h(
+                  "div",
+                  { className: "mt-2 space-y-2" },
+                  // Upload + URL row
+                  h(
+                    "div",
+                    { className: "flex gap-2 items-center" },
+                    h("input", {
+                      ref: fileInputRef,
+                      type: "file",
+                      accept: "image/*,video/*",
+                      multiple: true,
+                      style: { display: "none" },
+                      onChange: (e) => handleFileUpload(e.target.files)
+                    }),
+                    h("button", {
+                      type: "button",
+                      onClick: () => fileInputRef.current?.click(),
+                      style: { ...t.btnGhost, padding: "0.35rem 0.7rem", fontSize: "0.8rem", whiteSpace: "nowrap" },
+                      disabled: uploading
+                    }, uploading ? "\u23F3 Uploading\u2026" : "\u{1F4C1} Upload"),
+                    h("button", {
+                      type: "button",
+                      onClick: () => {
+                        loadMedia();
+                        setShowMediaPicker(!showMediaPicker);
+                      },
+                      style: { ...t.btnGhost, padding: "0.35rem 0.7rem", fontSize: "0.8rem", whiteSpace: "nowrap" }
+                    }, showMediaPicker ? "Hide Library" : "\u{1F5BC}\uFE0F Library"),
+                    h("input", {
+                      type: "url",
+                      value: mediaUrl,
+                      onChange: (e) => setMediaUrl(e.target.value),
+                      placeholder: "\u2026or paste a URL",
+                      style: { ...t.input, flex: 1 }
+                    })
+                  ),
+                  // Selected media thumbnails
+                  selectedMediaIds.length > 0 && h(
+                    "div",
+                    { className: "flex flex-wrap gap-2" },
+                    ...selectedMediaIds.map((id) => {
+                      const item = mediaLibrary.find((m) => m.id === id);
+                      if (!item) return null;
+                      return h(
+                        "div",
+                        {
+                          key: id,
+                          style: {
+                            position: "relative",
+                            width: "72px",
+                            height: "72px",
+                            borderRadius: "8px",
+                            overflow: "hidden",
+                            border: "2px solid rgba(127,90,240,0.5)"
+                          }
+                        },
+                        item.mimeType?.startsWith("video/") ? h("div", {
+                          style: {
+                            width: "100%",
+                            height: "100%",
+                            background: "rgba(0,0,0,0.4)",
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            color: "white",
+                            fontSize: "1.2rem"
+                          }
+                        }, "\u{1F3A5}") : h("img", {
+                          src: item.thumbnailDataUrl || item.url,
+                          style: { width: "100%", height: "100%", objectFit: "cover" }
+                        }),
+                        h("button", {
+                          type: "button",
+                          onClick: () => toggleMediaSelect(id),
+                          style: {
+                            position: "absolute",
+                            top: "2px",
+                            right: "2px",
+                            background: "rgba(0,0,0,0.6)",
+                            border: "none",
+                            borderRadius: "50%",
+                            width: "18px",
+                            height: "18px",
+                            color: "white",
+                            fontSize: "0.65rem",
+                            cursor: "pointer",
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            lineHeight: "1"
+                          }
+                        }, "\u2715")
+                      );
+                    })
+                  ),
+                  // Media library picker grid
+                  showMediaPicker && h(
+                    "div",
+                    {
+                      style: {
+                        background: "rgba(255,255,255,0.02)",
+                        border: "1px solid var(--ck-border-subtle)",
+                        borderRadius: "10px",
+                        padding: "0.75rem",
+                        maxHeight: "260px",
+                        overflowY: "auto"
+                      }
+                    },
+                    h(
+                      "div",
+                      { className: "text-xs font-medium mb-2", style: t.faint },
+                      `Media Library (${mediaLibrary.length} items)`
+                    ),
+                    mediaLibrary.length === 0 ? h("div", { className: "text-xs py-4 text-center", style: t.faint }, "No media yet. Upload some files!") : h(
+                      "div",
+                      {
+                        style: {
+                          display: "grid",
+                          gridTemplateColumns: "repeat(auto-fill, minmax(80px, 1fr))",
+                          gap: "0.5rem"
+                        }
+                      },
+                      ...mediaLibrary.map((item) => {
+                        const isSelected = selectedMediaIds.includes(item.id);
+                        return h(
+                          "div",
+                          {
+                            key: item.id,
+                            onClick: () => toggleMediaSelect(item.id),
+                            style: {
+                              position: "relative",
+                              cursor: "pointer",
+                              width: "100%",
+                              paddingTop: "100%",
+                              borderRadius: "8px",
+                              overflow: "hidden",
+                              border: isSelected ? "2px solid rgba(127,90,240,0.7)" : "1px solid var(--ck-border-subtle)",
+                              boxShadow: isSelected ? "0 0 8px rgba(127,90,240,0.3)" : "none"
+                            }
+                          },
+                          item.mimeType?.startsWith("video/") ? h("div", {
+                            style: {
+                              position: "absolute",
+                              inset: "0",
+                              background: "rgba(0,0,0,0.4)",
+                              display: "flex",
+                              alignItems: "center",
+                              justifyContent: "center",
+                              color: "white",
+                              fontSize: "1.5rem"
+                            }
+                          }, "\u{1F3A5}") : h("img", {
+                            src: item.thumbnailDataUrl || item.url,
+                            style: {
+                              position: "absolute",
+                              inset: "0",
+                              width: "100%",
+                              height: "100%",
+                              objectFit: "cover"
+                            }
+                          }),
+                          isSelected && h("div", {
+                            style: {
+                              position: "absolute",
+                              top: "4px",
+                              right: "4px",
+                              background: "rgba(127,90,240,0.85)",
+                              borderRadius: "50%",
+                              width: "20px",
+                              height: "20px",
+                              display: "flex",
+                              alignItems: "center",
+                              justifyContent: "center",
+                              color: "white",
+                              fontSize: "0.7rem",
+                              fontWeight: "700"
+                            }
+                          }, "\u2713"),
+                          h("button", {
+                            type: "button",
+                            onClick: (e) => {
+                              e.stopPropagation();
+                              deleteMedia(item.id);
+                            },
+                            style: {
+                              position: "absolute",
+                              bottom: "4px",
+                              right: "4px",
+                              background: "rgba(220,38,38,0.7)",
+                              border: "none",
+                              borderRadius: "50%",
+                              width: "18px",
+                              height: "18px",
+                              color: "white",
+                              fontSize: "0.6rem",
+                              cursor: "pointer",
+                              display: "flex",
+                              alignItems: "center",
+                              justifyContent: "center",
+                              opacity: "0.6",
+                              lineHeight: "1"
+                            },
+                            title: "Delete from library"
+                          }, "\u{1F5D1}"),
+                          h("div", {
+                            style: {
+                              position: "absolute",
+                              bottom: "0",
+                              left: "0",
+                              right: "0",
+                              background: "rgba(0,0,0,0.6)",
+                              padding: "2px 4px",
+                              fontSize: "0.55rem",
+                              color: "rgba(255,255,255,0.8)",
+                              whiteSpace: "nowrap",
+                              overflow: "hidden",
+                              textOverflow: "ellipsis"
+                            }
+                          }, item.filename)
+                        );
+                      })
+                    )
                   )
-                ),
+                )
+              ),
+              // Schedule (only if any selected platform supports it)
+              (canSchedule || !hasSelection) && h(
+                "div",
+                { className: "grid grid-cols-1 gap-2 sm:grid-cols-2" },
                 h(
                   "div",
-                  { className: "text-xs mt-1", style: t.faint },
-                  "No platforms connected. Go to Accounts tab to set up Postiz or add accounts."
+                  null,
+                  h(
+                    "div",
+                    { className: "text-xs font-medium mb-1", style: t.faint },
+                    canSchedule ? "Schedule (optional)" : "Schedule (connect Postiz for scheduling)"
+                  ),
+                  h("input", {
+                    type: "datetime-local",
+                    value: scheduledAt,
+                    onChange: (e) => setScheduledAt(e.target.value),
+                    style: { ...t.input, opacity: canSchedule || !hasSelection ? 1 : 0.5 },
+                    disabled: hasSelection && !canSchedule
+                  })
                 )
-              )
+              ),
+              // Actions
+              h(
+                "div",
+                { className: "flex flex-wrap gap-2 items-center" },
+                h("button", {
+                  type: "button",
+                  onClick: () => void onSaveDraft(),
+                  style: { ...t.btnGhost, opacity: saving ? 0.7 : 1 },
+                  disabled: saving || !content.trim()
+                }, saving ? "Saving\u2026" : "Save draft"),
+                hasConnected && hasSelection && h("button", {
+                  type: "button",
+                  onClick: () => void onPublish(),
+                  style: { ...t.btnPublish, opacity: publishing ? 0.7 : 1 },
+                  disabled: publishing || !content.trim()
+                }, publishing ? "Publishing\u2026" : scheduledAt ? "\u23F1 Schedule" : "\u{1F4E4} Publish now")
+              ),
+              error && h("div", { className: "text-xs", style: { color: "rgba(248,113,113,0.95)" } }, error),
+              success && h("div", { className: "text-xs", style: { color: "rgba(74,222,128,0.9)" } }, success)
             ),
-            // Media URL (collapsible)
+            // RIGHT — live preview pane
             h(
               "div",
-              null,
-              h("button", {
-                type: "button",
-                onClick: () => setShowMedia(!showMedia),
-                style: { ...t.btnGhost, padding: "0.3rem 0.55rem", fontSize: "0.8rem" }
-              }, showMedia ? "\u2212 Media" : "+ Media"),
-              showMedia && h(
+              {
+                style: {
+                  width: "320px",
+                  flexShrink: 0,
+                  background: "rgba(255,255,255,0.02)",
+                  border: "1px solid var(--ck-border-subtle)",
+                  borderRadius: "10px",
+                  padding: "1rem",
+                  display: "flex",
+                  flexDirection: "column",
+                  alignSelf: "flex-start"
+                }
+              },
+              h("div", { className: "text-sm font-medium mb-3", style: t.text }, "Post Preview"),
+              // Selected platforms
+              selectedPlatforms.length > 0 && h(
                 "div",
-                { className: "mt-2" },
-                h("input", {
-                  type: "url",
-                  value: mediaUrl,
-                  onChange: (e) => setMediaUrl(e.target.value),
-                  placeholder: "Paste image or video URL\u2026",
-                  style: t.input
+                { className: "flex flex-wrap gap-1 mb-3" },
+                ...selectedPlatforms.map((pl) => {
+                  const drv = drivers.find((d) => d.platform === pl);
+                  return h("span", {
+                    key: pl,
+                    style: {
+                      background: "rgba(127,90,240,0.15)",
+                      border: "1px solid rgba(127,90,240,0.3)",
+                      borderRadius: "999px",
+                      padding: "0.12rem 0.45rem",
+                      fontSize: "0.72rem",
+                      color: "var(--ck-text-secondary)"
+                    }
+                  }, drv ? `${drv.icon} ${drv.label}` : pl);
                 })
-              )
-            ),
-            // Schedule (only if any selected platform supports it)
-            (canSchedule || !hasSelection) && h(
-              "div",
-              { className: "grid grid-cols-1 gap-2 sm:grid-cols-2" },
-              h(
+              ),
+              // Scheduling info
+              scheduledAt && h("div", {
+                className: "text-xs mb-3",
+                style: { color: "rgba(251,191,36,0.85)" }
+              }, `\u23F1 Scheduled: ${new Date(scheduledAt).toLocaleString()}`),
+              // Content preview
+              content.trim() ? h("div", {
+                style: {
+                  background: "rgba(255,255,255,0.03)",
+                  border: "1px solid var(--ck-border-subtle)",
+                  borderRadius: "10px",
+                  padding: "0.85rem",
+                  whiteSpace: "pre-wrap",
+                  fontSize: "0.85rem",
+                  color: "var(--ck-text-primary)",
+                  lineHeight: "1.55",
+                  maxHeight: "300px",
+                  overflowY: "auto",
+                  wordBreak: "break-word"
+                }
+              }, content) : h("div", {
+                style: {
+                  color: "var(--ck-text-tertiary)",
+                  fontSize: "0.85rem",
+                  fontStyle: "italic",
+                  padding: "2rem 0.5rem",
+                  textAlign: "center"
+                }
+              }, "Start writing to see a preview"),
+              // Media preview (selected library items + URL)
+              (selectedMediaIds.length > 0 || mediaUrl && showMedia) && h(
                 "div",
-                null,
+                { className: "mt-3 space-y-2" },
+                ...selectedMediaIds.map((id) => {
+                  const item = mediaLibrary.find((m) => m.id === id);
+                  if (!item) return null;
+                  return item.mimeType?.startsWith("video/") ? h("div", {
+                    key: id,
+                    style: {
+                      background: "rgba(0,0,0,0.3)",
+                      borderRadius: "8px",
+                      border: "1px solid var(--ck-border-subtle)",
+                      padding: "1rem",
+                      textAlign: "center",
+                      color: "var(--ck-text-secondary)",
+                      fontSize: "0.8rem"
+                    }
+                  }, `\u{1F3A5} ${item.filename}`) : h("img", {
+                    key: id,
+                    src: item.thumbnailDataUrl || item.url,
+                    style: {
+                      maxWidth: "100%",
+                      borderRadius: "8px",
+                      border: "1px solid var(--ck-border-subtle)"
+                    }
+                  });
+                }),
+                mediaUrl && showMedia && h("img", {
+                  src: mediaUrl,
+                  style: {
+                    maxWidth: "100%",
+                    borderRadius: "8px",
+                    border: "1px solid var(--ck-border-subtle)"
+                  },
+                  onError: (e) => {
+                    e.target.style.display = "none";
+                  }
+                })
+              ),
+              // Character limit bar
+              charLimit && content.length > 0 && h(
+                "div",
+                { className: "mt-3" },
                 h(
                   "div",
-                  { className: "text-xs font-medium mb-1", style: t.faint },
-                  canSchedule ? "Schedule (optional)" : "Schedule (connect Postiz for scheduling)"
+                  { style: { height: "4px", borderRadius: "2px", background: "rgba(255,255,255,0.06)", overflow: "hidden" } },
+                  h("div", {
+                    style: {
+                      height: "100%",
+                      borderRadius: "2px",
+                      width: `${Math.min(content.length / charLimit * 100, 100)}%`,
+                      background: content.length > charLimit ? "rgba(248,113,113,0.8)" : content.length > charLimit * 0.9 ? "rgba(251,191,36,0.8)" : "rgba(127,90,240,0.6)",
+                      transition: "width 0.2s, background 0.2s"
+                    }
+                  })
                 ),
-                h("input", {
-                  type: "datetime-local",
-                  value: scheduledAt,
-                  onChange: (e) => setScheduledAt(e.target.value),
-                  style: { ...t.input, opacity: canSchedule || !hasSelection ? 1 : 0.5 },
-                  disabled: hasSelection && !canSchedule
-                })
+                h("div", {
+                  className: "text-xs mt-1",
+                  style: {
+                    color: content.length > charLimit ? "rgba(248,113,113,0.9)" : "var(--ck-text-tertiary)",
+                    textAlign: "right"
+                  }
+                }, `${content.length} / ${charLimit}`)
               )
-            ),
-            // Actions
-            h(
-              "div",
-              { className: "flex flex-wrap gap-2 items-center" },
-              h("button", {
-                type: "button",
-                onClick: () => void onSaveDraft(),
-                style: { ...t.btnGhost, opacity: saving ? 0.7 : 1 },
-                disabled: saving || !content.trim()
-              }, saving ? "Saving\u2026" : "Save draft"),
-              hasConnected && hasSelection && h("button", {
-                type: "button",
-                onClick: () => void onPublish(),
-                style: { ...t.btnPublish, opacity: publishing ? 0.7 : 1 },
-                disabled: publishing || !content.trim()
-              }, publishing ? "Publishing\u2026" : scheduledAt ? "\u23F1 Schedule" : "\u{1F4E4} Publish now")
-            ),
-            error && h("div", { className: "text-xs", style: { color: "rgba(248,113,113,0.95)" } }, error),
-            success && h("div", { className: "text-xs", style: { color: "rgba(74,222,128,0.9)" } }, success)
+            )
           )
         ),
         // ---- Posts list ----

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jiggai/kitchen-plugin-marketing",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Marketing Suite plugin for ClawKitchen",
   "main": "dist/index.js",
   "files": [