@jiggai/kitchen-plugin-marketing 0.2.9 → 0.2.11

package/dist/tabs/content-library.js

@@ -8,6 +8,7 @@
     const useMemo = R.useMemo;
     const useState = R.useState;
     const useCallback = R.useCallback;
+    const useRef = R.useRef;
     const t = {
       text: { color: "var(--ck-text-primary)" },
       muted: { color: "var(--ck-text-secondary)" },
@@ -53,15 +54,16 @@
         fontWeight: 700,
         cursor: "pointer"
       },
-      pill: (active) => ({
+      pill: (active, connected) => ({
         background: active ? "rgba(99,179,237,0.16)" : "rgba(255,255,255,0.03)",
         border: `1px solid ${active ? "rgba(99,179,237,0.45)" : "var(--ck-border-subtle)"}`,
         borderRadius: "999px",
         padding: "0.25rem 0.55rem",
         fontSize: "0.8rem",
-        color: active ? "rgba(210,235,255,0.95)" : "var(--ck-text-secondary)",
-        cursor: "pointer",
-        userSelect: "none"
+        color: active ? "rgba(210,235,255,0.95)" : connected ? "var(--ck-text-secondary)" : "var(--ck-text-tertiary)",
+        cursor: connected ? "pointer" : "default",
+        userSelect: "none",
+        opacity: connected ? 1 : 0.5
       }),
       statusBadge: (status) => {
         const colors = {
@@ -79,21 +81,46 @@
           fontWeight: 600,
           color: "white"
         };
-      }
+      },
+      backendBadge: (backend) => {
+        const colors = {
+          postiz: "rgba(99,179,237,0.5)",
+          gateway: "rgba(134,239,172,0.5)",
+          direct: "rgba(251,191,36,0.5)"
+        };
+        return {
+          display: "inline-block",
+          background: colors[backend] || "rgba(100,100,100,0.3)",
+          borderRadius: "999px",
+          padding: "0.05rem 0.35rem",
+          fontSize: "0.6rem",
+          fontWeight: 600,
+          color: "white",
+          marginLeft: "0.25rem"
+        };
+      },
+      charWarn: (pct) => ({
+        color: pct > 100 ? "rgba(248,113,113,0.95)" : pct > 90 ? "rgba(251,191,36,0.9)" : "var(--ck-text-tertiary)",
+        fontSize: "0.75rem"
+      })
     };
     function ContentLibrary(props) {
       const teamId = String(props?.teamId || "default");
       const apiBase = useMemo(() => `/api/plugins/marketing`, []);
+      const [drivers, setDrivers] = useState([]);
       const [posts, setPosts] = useState([]);
-      const [providers, setProviders] = useState([]);
       const [loading, setLoading] = useState(true);
       const [saving, setSaving] = useState(false);
       const [publishing, setPublishing] = useState(false);
       const [error, setError] = useState(null);
       const [success, setSuccess] = useState(null);
+      const [filterStatus, setFilterStatus] = useState("all");
       const [content, setContent] = useState("");
-      const [selectedProviders, setSelectedProviders] = useState([]);
+      const [selectedPlatforms, setSelectedPlatforms] = useState([]);
       const [scheduledAt, setScheduledAt] = useState("");
+      const [mediaUrl, setMediaUrl] = useState("");
+      const [showMedia, setShowMedia] = useState(false);
+      const successTimeout = useRef(null);
       const postizHeaders = useMemo(() => {
         try {
           const stored = localStorage.getItem(`ck-postiz-${teamId}`);
@@ -110,44 +137,61 @@
         }
         return {};
       }, [teamId]);
-      const loadPosts = useCallback(async () => {
+      const loadDrivers = useCallback(async () => {
         try {
-          const res = await fetch(`${apiBase}/posts?team=${encodeURIComponent(teamId)}&limit=25`);
+          const res = await fetch(`${apiBase}/drivers?team=${encodeURIComponent(teamId)}`, { headers: postizHeaders });
           const json = await res.json();
-          setPosts(Array.isArray(json.data) ? json.data : []);
+          setDrivers(Array.isArray(json.drivers) ? json.drivers : []);
         } catch {
         }
-      }, [apiBase, teamId]);
-      const loadProviders = useCallback(async () => {
+      }, [apiBase, teamId, postizHeaders]);
+      const loadPosts = useCallback(async () => {
         try {
-          const res = await fetch(`${apiBase}/providers?team=${encodeURIComponent(teamId)}`, { headers: postizHeaders });
+          const url = `${apiBase}/posts?team=${encodeURIComponent(teamId)}&limit=50`;
+          const res = await fetch(url);
           const json = await res.json();
-          const detected = Array.isArray(json.providers) ? json.providers : [];
-          setProviders(detected);
+          setPosts(Array.isArray(json.data) ? json.data : []);
         } catch {
         }
-      }, [apiBase, teamId, postizHeaders]);
+      }, [apiBase, teamId]);
       useEffect(() => {
         setLoading(true);
-        Promise.all([loadPosts(), loadProviders()]).finally(() => setLoading(false));
-      }, [loadPosts, loadProviders]);
-      const toggleProvider = (id) => {
-        setSelectedProviders(
-          (prev) => prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]
+        Promise.all([loadDrivers(), loadPosts()]).finally(() => setLoading(false));
+      }, [loadDrivers, loadPosts]);
+      const connectedDrivers = useMemo(() => drivers.filter((d) => d.connected), [drivers]);
+      const disconnectedDrivers = useMemo(() => drivers.filter((d) => !d.connected), [drivers]);
+      const togglePlatform = (platform) => {
+        const driver = drivers.find((d) => d.platform === platform);
+        if (!driver?.connected) return;
+        setSelectedPlatforms(
+          (prev) => prev.includes(platform) ? prev.filter((x) => x !== platform) : [...prev, platform]
         );
       };
+      const charLimit = useMemo(() => {
+        if (selectedPlatforms.length === 0) return void 0;
+        const limits = selectedPlatforms.map((p) => drivers.find((d) => d.platform === p)?.capabilities?.maxLength).filter((l) => l !== void 0);
+        return limits.length > 0 ? Math.min(...limits) : void 0;
+      }, [selectedPlatforms, drivers]);
+      const canSchedule = useMemo(() => {
+        return selectedPlatforms.some((p) => drivers.find((d) => d.platform === p)?.capabilities?.canSchedule);
+      }, [selectedPlatforms, drivers]);
+      const showSuccess = (msg) => {
+        setSuccess(msg);
+        if (successTimeout.current) clearTimeout(successTimeout.current);
+        successTimeout.current = setTimeout(() => setSuccess(null), 5e3);
+      };
       const onSaveDraft = async () => {
         if (!content.trim()) return;
         setSaving(true);
         setError(null);
         try {
-          const platforms = selectedProviders.map((id) => providers.find((p) => p.id === id)?.platform).filter(Boolean);
+          const platforms = selectedPlatforms.length > 0 ? selectedPlatforms : ["draft"];
           const res = await fetch(`${apiBase}/posts?team=${encodeURIComponent(teamId)}`, {
             method: "POST",
             headers: { "content-type": "application/json" },
             body: JSON.stringify({
               content,
-              platforms: platforms.length > 0 ? platforms : ["draft"],
+              platforms,
               status: scheduledAt ? "scheduled" : "draft",
               scheduledAt: scheduledAt || void 0
             })
@@ -155,7 +199,9 @@
           if (!res.ok) throw new Error(`Save failed (${res.status})`);
           setContent("");
           setScheduledAt("");
-          setSelectedProviders([]);
+          setSelectedPlatforms([]);
+          setMediaUrl("");
+          showSuccess("Draft saved!");
           await loadPosts();
         } catch (e) {
           setError(e?.message || "Failed to save");
@@ -164,40 +210,54 @@
         }
       };
       const onPublish = async () => {
-        if (!content.trim() || selectedProviders.length === 0) return;
+        if (!content.trim() || selectedPlatforms.length === 0) return;
         setPublishing(true);
         setError(null);
         setSuccess(null);
-        const postizProviders = selectedProviders.filter((id) => id.startsWith("postiz:"));
-        const gatewayProviders = selectedProviders.filter((id) => id.startsWith("gateway:"));
         try {
-          if (postizProviders.length > 0) {
-            const integrationIds = postizProviders.map((id) => {
-              const prov = providers.find((p) => p.id === id);
-              return prov?.meta?.postizId;
-            }).filter(Boolean);
-            const res = await fetch(`${apiBase}/publish?team=${encodeURIComponent(teamId)}`, {
-              method: "POST",
-              headers: { "content-type": "application/json", ...postizHeaders },
-              body: JSON.stringify({
-                content,
-                integrationIds,
-                scheduledAt: scheduledAt || void 0
-              })
-            });
-            if (!res.ok) {
-              const err = await res.json().catch(() => null);
-              throw new Error(err?.message || `Postiz publish failed (${res.status})`);
+          const res = await fetch(`${apiBase}/publish?team=${encodeURIComponent(teamId)}`, {
+            method: "POST",
+            headers: { "content-type": "application/json", ...postizHeaders },
+            body: JSON.stringify({
+              content,
+              platforms: selectedPlatforms,
+              scheduledAt: scheduledAt || void 0,
+              mediaUrls: mediaUrl ? [mediaUrl] : void 0
+            })
+          });
+          const json = await res.json();
+          if (json.results) {
+            const succeeded = json.results.filter((r) => r.success);
+            const failed = json.results.filter((r) => !r.success);
+            if (failed.length > 0 && succeeded.length === 0) {
+              throw new Error(failed.map((f) => `${f.platform}: ${f.error}`).join("; "));
             }
-          }
-          if (gatewayProviders.length > 0 && postizProviders.length === 0) {
-            setSuccess("Saved! Gateway posting requires OpenClaw agent \u2014 use the workflow or ask your assistant to post.");
+            const parts = [];
+            if (succeeded.length > 0) {
+              parts.push(`${scheduledAt ? "Scheduled" : "Published"} to ${succeeded.map((s) => s.platform).join(", ")}`);
+            }
+            if (failed.length > 0) {
+              parts.push(`Failed: ${failed.map((f) => `${f.platform} (${f.error})`).join(", ")}`);
+            }
+            showSuccess(parts.join(" \xB7 "));
           } else {
-            setSuccess(scheduledAt ? "Scheduled via Postiz!" : "Published via Postiz!");
+            showSuccess(scheduledAt ? "Scheduled!" : "Published!");
           }
+          await fetch(`${apiBase}/posts?team=${encodeURIComponent(teamId)}`, {
+            method: "POST",
+            headers: { "content-type": "application/json" },
+            body: JSON.stringify({
+              content,
+              platforms: selectedPlatforms,
+              status: scheduledAt ? "scheduled" : "published",
+              scheduledAt: scheduledAt || void 0
+            })
+          }).catch(() => {
+          });
           setContent("");
           setScheduledAt("");
-          setSelectedProviders([]);
+          setSelectedPlatforms([]);
+          setMediaUrl("");
           await loadPosts();
         } catch (e) {
           setError(e?.message || "Publish failed");
@@ -205,8 +265,12 @@
           setPublishing(false);
         }
       };
-      const postizAvailable = providers.some((p) => p.type === "postiz");
-      const hasSelection = selectedProviders.length > 0;
+      const hasConnected = connectedDrivers.length > 0;
+      const hasSelection = selectedPlatforms.length > 0;
+      const filteredPosts = useMemo(() => {
+        if (filterStatus === "all") return posts;
+        return posts.filter((p) => p.status === filterStatus);
+      }, [posts, filterStatus]);
       return h(
         "div",
         { className: "space-y-3" },
@@ -223,60 +287,103 @@
               onChange: (e) => setContent(e.target.value),
               placeholder: "Write your post\u2026",
               rows: 5,
-              style: { ...t.input, resize: "vertical", minHeight: "110px" }
+              style: { ...t.input, resize: "vertical", minHeight: "110px", fontFamily: "inherit" }
             }),
-            // Provider selector
-            providers.length > 0 && h(
+            // 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
+            h(
               "div",
               null,
               h("div", { className: "text-xs font-medium mb-2", style: t.faint }, "Publish to"),
-              h(
+              connectedDrivers.length > 0 ? h(
                 "div",
                 { className: "flex flex-wrap gap-2" },
-                ...providers.filter((p) => p.isActive).map(
-                  (p) => h(
+                ...connectedDrivers.map(
+                  (d) => h(
                     "span",
                     {
-                      key: p.id,
-                      onClick: () => toggleProvider(p.id),
-                      style: t.pill(selectedProviders.includes(p.id)),
+                      key: d.platform,
+                      onClick: () => togglePlatform(d.platform),
+                      style: t.pill(selectedPlatforms.includes(d.platform), true),
                       role: "button",
-                      tabIndex: 0
+                      tabIndex: 0,
+                      title: `${d.displayName} via ${d.backend}`
                     },
-                    `${p.displayName}`
+                    `${d.icon} ${d.label}`,
+                    h("span", { style: t.backendBadge(d.backend) }, d.backend)
+                  )
+                ),
+                ...disconnectedDrivers.map(
+                  (d) => h("span", {
+                    key: d.platform,
+                    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."
                 )
               )
             ),
-            // No providers hint
-            providers.length === 0 && !loading && h(
+            // Media URL (collapsible)
+            h(
               "div",
-              { className: "text-xs", style: t.faint },
-              "No publishing targets detected. Go to Accounts tab to connect Postiz or add accounts."
+              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" },
+                h("input", {
+                  type: "url",
+                  value: mediaUrl,
+                  onChange: (e) => setMediaUrl(e.target.value),
+                  placeholder: "Paste image or video URL\u2026",
+                  style: t.input
+                })
+              )
             ),
-            // Schedule
-            h(
+            // 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",
                 null,
-                h("div", { className: "text-xs font-medium mb-1", style: t.faint }, "Schedule (optional)"),
+                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
+                  style: { ...t.input, opacity: canSchedule || !hasSelection ? 1 : 0.5 },
+                  disabled: hasSelection && !canSchedule
                 })
-              ),
-              h(
-                "div",
-                { className: "flex items-end" },
-                h(
-                  "div",
-                  { className: "text-xs", style: t.faint },
-                  content.length > 0 ? `${content.length} chars` : ""
-                )
               )
             ),
             // Actions
@@ -289,17 +396,12 @@
                 style: { ...t.btnGhost, opacity: saving ? 0.7 : 1 },
                 disabled: saving || !content.trim()
               }, saving ? "Saving\u2026" : "Save draft"),
-              postizAvailable && hasSelection && h("button", {
+              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"),
-              !postizAvailable && hasSelection && h(
-                "div",
-                { className: "text-xs", style: t.faint },
-                "Connect Postiz on Accounts tab to publish directly."
-              )
+              }, 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)
@@ -311,14 +413,36 @@
           { style: t.card },
           h(
             "div",
-            { className: "flex items-center justify-between mb-2" },
+            { className: "flex items-center justify-between mb-3" },
             h("div", { className: "text-sm font-medium", style: t.text }, "Posts"),
-            h("button", { type: "button", onClick: () => void loadPosts(), style: t.btnGhost, className: "text-xs" }, "\u21BB")
+            h(
+              "div",
+              { className: "flex items-center gap-2" },
+              ...["all", "draft", "scheduled", "published", "failed"].map(
+                (s) => h("button", {
+                  key: s,
+                  type: "button",
+                  onClick: () => setFilterStatus(s),
+                  style: {
+                    ...t.btnGhost,
+                    padding: "0.2rem 0.45rem",
+                    fontSize: "0.7rem",
+                    background: filterStatus === s ? "rgba(99,179,237,0.12)" : void 0,
+                    borderColor: filterStatus === s ? "rgba(99,179,237,0.35)" : void 0
+                  }
+                }, s)
+              ),
+              h("button", { type: "button", onClick: () => void loadPosts(), style: { ...t.btnGhost, padding: "0.2rem 0.45rem", fontSize: "0.7rem" } }, "\u21BB")
+            )
           ),
-          loading ? h("div", { className: "py-6 text-center text-sm", style: t.faint }, "Loading\u2026") : posts.length === 0 ? h("div", { className: "py-6 text-center text-sm", style: t.faint }, "No posts yet.") : h(
+          loading ? h("div", { className: "py-6 text-center text-sm", style: t.faint }, "Loading\u2026") : filteredPosts.length === 0 ? h(
+            "div",
+            { className: "py-6 text-center text-sm", style: t.faint },
+            filterStatus === "all" ? "No posts yet. Compose your first post above!" : `No ${filterStatus} posts.`
+          ) : h(
             "div",
             { className: "space-y-2" },
-            ...posts.map(
+            ...filteredPosts.map(
               (p) => h(
                 "div",
                 { key: p.id, style: { ...t.card, padding: "0.75rem" } },
@@ -333,11 +457,21 @@
                   ),
                   p.scheduledAt && h("div", { className: "text-xs", style: t.muted }, `\u23F1 ${new Date(p.scheduledAt).toLocaleString()}`)
                 ),
-                h("div", { className: "mt-2 whitespace-pre-wrap text-sm", style: t.text }, p.content),
+                h("div", {
+                  className: "mt-2 whitespace-pre-wrap text-sm",
+                  style: { ...t.text, maxHeight: "120px", overflow: "hidden", textOverflow: "ellipsis" }
+                }, p.content),
                 p.platforms?.length > 0 && h(
                   "div",
                   { className: "mt-2 flex flex-wrap gap-1" },
-                  ...p.platforms.map((pl) => h("span", { key: pl, style: t.pill(true) }, pl))
+                  ...p.platforms.map((pl) => {
+                    const driver = drivers.find((d) => d.platform === pl);
+                    return h(
+                      "span",
+                      { key: pl, style: t.pill(true, true) },
+                      driver ? `${driver.icon} ${pl}` : pl
+                    );
+                  })
                 )
               )
             )

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jiggai/kitchen-plugin-marketing",
-  "version": "0.2.9",
+  "version": "0.2.11",
   "description": "Marketing Suite plugin for ClawKitchen",
   "main": "dist/index.js",
   "files": [
@@ -58,15 +58,11 @@
     "test": "echo \"No tests yet\" && exit 0"
   },
   "dependencies": {
-    "better-sqlite3": "^9.4.5",
-    "drizzle-orm": "^0.38.0",
-    "express": "^4.18.2",
-    "multer": "^1.4.4"
+    "better-sqlite3": "^11.0.0",
+    "drizzle-orm": "^0.38.0"
   },
   "devDependencies": {
     "@types/better-sqlite3": "^7.6.10",
-    "@types/express": "^4.17.21",
-    "@types/multer": "^1.4.11",
     "@types/node": "^20.0.0",
     "drizzle-kit": "^0.20.0",
     "esbuild": "^0.24.0",