npm - @jiggai/kitchen-plugin-marketing - Versions diffs - 0.2.9 → 0.2.10 - Mend

@jiggai/kitchen-plugin-marketing 0.2.9 → 0.2.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3) hide show

package/dist/tabs/accounts.js +197 -157
package/dist/tabs/content-library.js +226 -92
package/package.json +1 -1

package/dist/tabs/accounts.js CHANGED Viewed

@@ -53,59 +53,59 @@
         fontSize: "0.7rem",
         fontWeight: 600,
         color: "white"
+      }),
+      capPill: (active) => ({
+        display: "inline-block",
+        background: active ? "rgba(99,179,237,0.15)" : "rgba(255,255,255,0.03)",
+        border: `1px solid ${active ? "rgba(99,179,237,0.3)" : "var(--ck-border-subtle)"}`,
+        borderRadius: "999px",
+        padding: "0.1rem 0.4rem",
+        fontSize: "0.6rem",
+        color: active ? "rgba(210,235,255,0.9)" : "var(--ck-text-tertiary)"
       })
     };
-    const PLATFORM_ICONS = {
-      x: "\u{1D54F}",
-      twitter: "\u{1D54F}",
-      instagram: "\u{1F4F7}",
-      linkedin: "\u{1F4BC}",
-      facebook: "\u{1F4D8}",
-      youtube: "\u25B6\uFE0F",
-      tiktok: "\u{1F3B5}",
-      bluesky: "\u{1F98B}",
-      mastodon: "\u{1F418}",
-      reddit: "\u{1F916}",
-      discord: "\u{1F4AC}",
-      telegram: "\u2708\uFE0F",
-      pinterest: "\u{1F4CC}",
-      threads: "\u{1F9F5}",
-      medium: "\u270D\uFE0F",
-      wordpress: "\u{1F4DD}"
-    };
-    const TYPE_COLORS = {
+    const BACKEND_COLORS = {
       postiz: "rgba(99,179,237,0.7)",
       gateway: "rgba(134,239,172,0.7)",
-      skill: "rgba(251,191,36,0.7)",
-      manual: "rgba(167,139,250,0.7)"
+      direct: "rgba(251,191,36,0.7)",
+      none: "rgba(100,100,100,0.5)"
+    };
+    const BACKEND_LABELS = {
+      postiz: "Postiz",
+      gateway: "OpenClaw",
+      direct: "Direct API",
+      none: "Not connected"
     };
     function Accounts(props) {
       const teamId = String(props?.teamId || "default");
       const apiBase = useMemo(() => `/api/plugins/marketing`, []);
-      const [providers, setProviders] = useState([]);
+      const [drivers, setDrivers] = useState([]);
       const [manualAccounts, setManualAccounts] = useState([]);
       const [loading, setLoading] = useState(true);
-      const [detecting, setDetecting] = useState(false);
       const [error, setError] = useState(null);
       const [postizKey, setPostizKey] = useState("");
       const [postizUrl, setPostizUrl] = useState("https://api.postiz.com/public/v1");
       const [showPostizSetup, setShowPostizSetup] = useState(false);
       const [showManual, setShowManual] = useState(false);
-      const [manPlatform, setManPlatform] = useState("twitter");
+      const [manPlatform, setManPlatform] = useState("x");
       const [manName, setManName] = useState("");
       const [manUser, setManUser] = useState("");
       const [manToken, setManToken] = useState("");
       const [saving, setSaving] = useState(false);
-      useEffect(() => {
+      const getStoredPostiz = () => {
         try {
           const stored = localStorage.getItem(`ck-postiz-${teamId}`);
-          if (stored) {
-            const parsed = JSON.parse(stored);
-            setPostizKey(parsed.apiKey || "");
-            setPostizUrl(parsed.baseUrl || "https://api.postiz.com/public/v1");
-          }
+          if (stored) return JSON.parse(stored);
         } catch {
         }
+        return null;
+      };
+      useEffect(() => {
+        const stored = getStoredPostiz();
+        if (stored) {
+          setPostizKey(stored.apiKey || "");
+          setPostizUrl(stored.baseUrl || "https://api.postiz.com/public/v1");
+        }
       }, [teamId]);
       const savePostizConfig = () => {
         try {
@@ -113,18 +113,9 @@
         } catch {
         }
         setShowPostizSetup(false);
-        void detectAll();
-      };
-      const getStoredPostiz = () => {
-        try {
-          const stored = localStorage.getItem(`ck-postiz-${teamId}`);
-          if (stored) return JSON.parse(stored);
-        } catch {
-        }
-        return null;
+        void loadDrivers();
       };
-      const detectAll = async () => {
-        setDetecting(true);
+      const loadDrivers = async () => {
         setError(null);
         try {
           const stored = getStoredPostiz();
@@ -135,13 +126,11 @@
             headers["x-postiz-api-key"] = key;
             headers["x-postiz-base-url"] = url;
           }
-          const res = await fetch(`${apiBase}/providers?team=${encodeURIComponent(teamId)}`, { headers });
+          const res = await fetch(`${apiBase}/drivers?team=${encodeURIComponent(teamId)}`, { headers });
           const json = await res.json();
-          setProviders(Array.isArray(json.providers) ? json.providers : []);
+          setDrivers(Array.isArray(json.drivers) ? json.drivers : []);
         } catch (e) {
-          setError(e?.message || "Failed to detect providers");
-        } finally {
-          setDetecting(false);
+          setError(e?.message || "Failed to load drivers");
         }
       };
       const loadManual = async () => {
@@ -154,7 +143,7 @@
       };
       const refresh = async () => {
         setLoading(true);
-        await Promise.all([detectAll(), loadManual()]);
+        await Promise.all([loadDrivers(), loadManual()]);
         setLoading(false);
       };
       useEffect(() => {
@@ -179,43 +168,17 @@
           setManName("");
           setManUser("");
           setManToken("");
-          await loadManual();
+          await Promise.all([loadDrivers(), loadManual()]);
         } catch (e) {
           setError(e?.message || "Failed to connect");
         } finally {
           setSaving(false);
         }
       };
-      const allProviders = useMemo(() => {
-        const combined = [...providers];
-        for (const ma of manualAccounts) {
-          combined.push({
-            id: `manual:${ma.id}`,
-            type: "manual",
-            platform: ma.platform,
-            displayName: ma.displayName,
-            username: ma.username,
-            isActive: ma.isActive,
-            capabilities: ["post"]
-          });
-        }
-        return combined;
-      }, [providers, manualAccounts]);
-      const grouped = useMemo(() => {
-        const g = {};
-        for (const p of allProviders) {
-          const key = p.type;
-          if (!g[key]) g[key] = [];
-          g[key].push(p);
-        }
-        return g;
-      }, [allProviders]);
-      const typeLabels = {
-        postiz: "Postiz",
-        gateway: "OpenClaw Channels",
-        skill: "Skills",
-        manual: "Manual"
-      };
+      const connectedDrivers = useMemo(() => drivers.filter((d) => d.connected), [drivers]);
+      const disconnectedDrivers = useMemo(() => drivers.filter((d) => !d.connected), [drivers]);
+      const connectedCount = connectedDrivers.length;
+      const totalCount = drivers.length;
       return h(
         "div",
         { className: "space-y-3" },
@@ -229,11 +192,11 @@
             h(
               "div",
               null,
-              h("div", { className: "text-sm font-medium", style: t.text }, "Connected Accounts"),
+              h("div", { className: "text-sm font-medium", style: t.text }, "Platform Drivers"),
               h(
                 "div",
                 { className: "mt-1 text-xs", style: t.faint },
-                `${allProviders.length} provider${allProviders.length !== 1 ? "s" : ""} detected`
+                `${connectedCount}/${totalCount} platforms connected`
               )
             ),
             h(
@@ -241,15 +204,15 @@
               { className: "flex flex-wrap gap-2" },
               h(
                 "button",
-                { type: "button", onClick: () => void refresh(), style: t.btnGhost, disabled: detecting },
-                detecting ? "Detecting\u2026" : "\u21BB Refresh"
+                { type: "button", onClick: () => void refresh(), style: t.btnGhost, disabled: loading },
+                loading ? "Loading\u2026" : "\u21BB Refresh"
               ),
               h(
                 "button",
                 { type: "button", onClick: () => setShowPostizSetup(!showPostizSetup), style: t.btnGhost },
                 postizKey ? "\u2699 Postiz" : "+ Postiz"
               ),
-              h("button", { type: "button", onClick: () => setShowManual(!showManual), style: t.btnGhost }, "+ Manual")
+              h("button", { type: "button", onClick: () => setShowManual(!showManual), style: t.btnGhost }, "+ Direct token")
             )
           ),
           error && h("div", { className: "mt-2 text-xs", style: { color: "rgba(248,113,113,0.95)" } }, error)
@@ -262,7 +225,7 @@
           h(
             "div",
             { className: "text-xs mb-3", style: t.faint },
-            "Connect Postiz to manage social accounts via their platform. Get your API key from Postiz Settings \u2192 Developers \u2192 Public API."
+            "Postiz manages OAuth connections to social platforms. Get your API key from Postiz Settings \u2192 Developers \u2192 Public API."
           ),
           h(
             "div",
@@ -295,15 +258,15 @@
             "div",
             { className: "mt-3 flex gap-2" },
             h("button", { type: "button", onClick: () => setShowPostizSetup(false), style: t.btnGhost }, "Cancel"),
-            h("button", { type: "button", onClick: savePostizConfig, style: t.btnPrimary }, postizKey ? "Save & Detect" : "Save")
+            h("button", { type: "button", onClick: savePostizConfig, style: t.btnPrimary }, "Save & Detect")
           )
         ),
-        // ---- Manual account form ----
+        // ---- Manual token form ----
         showManual && h(
           "div",
           { style: t.card },
-          h("div", { className: "text-sm font-medium mb-2", style: t.text }, "Add manual account"),
-          h("div", { className: "text-xs mb-3", style: t.faint }, "For direct API access without Postiz. You provide the token."),
+          h("div", { className: "text-sm font-medium mb-2", style: t.text }, "Add direct API token"),
+          h("div", { className: "text-xs mb-3", style: t.faint }, "For platforms where you have your own API credentials. Token is encrypted at rest."),
           h(
             "div",
             { className: "grid grid-cols-1 gap-2 sm:grid-cols-2" },
@@ -314,18 +277,14 @@
               h(
                 "select",
                 { value: manPlatform, onChange: (e) => setManPlatform(e.target.value), style: t.input },
-                h("option", { value: "twitter" }, "Twitter / X"),
-                h("option", { value: "instagram" }, "Instagram"),
-                h("option", { value: "linkedin" }, "LinkedIn"),
-                h("option", { value: "bluesky" }, "Bluesky"),
-                h("option", { value: "mastodon" }, "Mastodon")
+                ...drivers.map((d) => h("option", { key: d.platform, value: d.platform }, d.label))
               )
             ),
             h(
               "div",
               null,
               h("div", { className: "text-xs font-medium mb-1", style: t.faint }, "Display name"),
-              h("input", { value: manName, onChange: (e) => setManName(e.target.value), placeholder: "My X account", style: t.input })
+              h("input", { value: manName, onChange: (e) => setManName(e.target.value), placeholder: "My account", style: t.input })
             ),
             h(
               "div",
@@ -347,87 +306,168 @@
             h("button", { type: "button", onClick: () => void onManualConnect(), style: t.btnPrimary, disabled: saving }, saving ? "Saving\u2026" : "Connect")
           )
         ),
-        // ---- Loading ----
-        loading && h(
-          "div",
-          { style: t.card },
-          h("div", { className: "py-6 text-center text-sm", style: t.faint }, "Detecting providers\u2026")
-        ),
-        // ---- Provider groups ----
-        !loading && allProviders.length === 0 && h(
+        // ---- Connected platforms ----
+        connectedDrivers.length > 0 && h(
           "div",
           { style: t.card },
           h(
             "div",
-            { className: "py-6 text-center space-y-2" },
-            h("div", { className: "text-sm", style: t.faint }, "No providers detected"),
-            h(
-              "div",
-              { className: "text-xs", style: t.faint },
-              "Connect Postiz for full social media management, or add accounts manually."
+            { className: "flex items-center gap-2 mb-3" },
+            h("div", { className: "text-sm font-medium", style: t.text }, "Connected"),
+            h("span", { style: t.badge("rgba(74,222,128,0.7)") }, `${connectedCount}`)
+          ),
+          h(
+            "div",
+            { className: "space-y-2" },
+            ...connectedDrivers.map(
+              (d) => h(
+                "div",
+                { key: d.platform, style: { ...t.card, padding: "0.75rem", display: "flex", alignItems: "center", gap: "0.75rem" } },
+                d.avatar ? h("img", { src: d.avatar, alt: "", style: { width: 36, height: 36, borderRadius: "50%", objectFit: "cover" } }) : h("div", {
+                  style: {
+                    width: 36,
+                    height: 36,
+                    borderRadius: "50%",
+                    background: "rgba(255,255,255,0.06)",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    fontSize: "1.1rem"
+                  }
+                }, d.icon),
+                h(
+                  "div",
+                  { style: { flex: 1, minWidth: 0 } },
+                  h("div", { className: "text-sm font-medium", style: t.text }, d.displayName),
+                  h(
+                    "div",
+                    { className: "text-xs", style: t.faint },
+                    [d.username, d.platform].filter(Boolean).join(" \xB7 ")
+                  )
+                ),
+                h(
+                  "div",
+                  { className: "flex items-center gap-2 shrink-0 flex-wrap" },
+                  h("span", { style: t.badge(BACKEND_COLORS[d.backend] || BACKEND_COLORS.none) }, BACKEND_LABELS[d.backend] || d.backend),
+                  d.capabilities.canPost && h("span", { style: t.capPill(true) }, "post"),
+                  d.capabilities.canSchedule && h("span", { style: t.capPill(true) }, "schedule"),
+                  d.capabilities.canUploadMedia && h("span", { style: t.capPill(true) }, "media"),
+                  d.capabilities.maxLength && h("span", { style: t.capPill(false) }, `${d.capabilities.maxLength} chars`),
+                  h("div", {
+                    style: {
+                      width: 8,
+                      height: 8,
+                      borderRadius: "50%",
+                      background: "rgba(74,222,128,0.8)"
+                    }
+                  })
+                )
+              )
             )
           )
         ),
-        !loading && Object.entries(grouped).map(
-          ([type, items]) => h(
+        // ---- Disconnected platforms ----
+        disconnectedDrivers.length > 0 && h(
+          "div",
+          { style: t.card },
+          h(
             "div",
-            { key: type, style: t.card },
-            h(
-              "div",
-              { className: "flex items-center gap-2 mb-3" },
-              h("div", { className: "text-sm font-medium", style: t.text }, typeLabels[type] || type),
-              h("span", { style: t.badge(TYPE_COLORS[type] || "rgba(100,100,100,0.6)") }, `${items.length}`)
-            ),
-            h(
-              "div",
-              { className: "space-y-2" },
-              ...items.map(
-                (p) => h(
+            { className: "flex items-center gap-2 mb-3" },
+            h("div", { className: "text-sm font-medium", style: t.text }, "Available"),
+            h("span", { style: t.badge("rgba(100,100,100,0.5)") }, `${disconnectedDrivers.length}`)
+          ),
+          h(
+            "div",
+            { className: "text-xs mb-3", style: t.faint },
+            "Connect these via Postiz or by adding a direct API token above."
+          ),
+          h(
+            "div",
+            { className: "space-y-2" },
+            ...disconnectedDrivers.map(
+              (d) => h(
+                "div",
+                { key: d.platform, style: { ...t.card, padding: "0.75rem", display: "flex", alignItems: "center", gap: "0.75rem", opacity: 0.6 } },
+                h("div", {
+                  style: {
+                    width: 36,
+                    height: 36,
+                    borderRadius: "50%",
+                    background: "rgba(255,255,255,0.04)",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    fontSize: "1.1rem"
+                  }
+                }, d.icon),
+                h(
                   "div",
-                  { key: p.id, style: { ...t.card, padding: "0.75rem", display: "flex", alignItems: "center", gap: "0.75rem" } },
-                  // Avatar or platform icon
-                  p.avatar ? h("img", { src: p.avatar, alt: "", style: { width: 32, height: 32, borderRadius: "50%", objectFit: "cover" } }) : h("div", {
+                  { style: { flex: 1, minWidth: 0 } },
+                  h("div", { className: "text-sm font-medium", style: t.text }, d.label),
+                  h("div", { className: "text-xs", style: t.faint }, "Not connected")
+                ),
+                h(
+                  "div",
+                  { className: "flex items-center gap-2 shrink-0" },
+                  d.capabilities.maxLength && h("span", { style: t.capPill(false) }, `${d.capabilities.maxLength} chars`),
+                  h("div", {
                     style: {
-                      width: 32,
-                      height: 32,
+                      width: 8,
+                      height: 8,
                       borderRadius: "50%",
-                      background: "rgba(255,255,255,0.06)",
-                      display: "flex",
-                      alignItems: "center",
-                      justifyContent: "center",
-                      fontSize: "1rem"
+                      background: "rgba(100,100,100,0.4)"
                     }
-                  }, PLATFORM_ICONS[p.platform] || "\u{1F517}"),
-                  // Info
-                  h(
-                    "div",
-                    { style: { flex: 1, minWidth: 0 } },
-                    h("div", { className: "text-sm font-medium", style: t.text }, p.displayName),
-                    h(
-                      "div",
-                      { className: "text-xs", style: t.faint },
-                      [p.platform, p.username].filter(Boolean).join(" \xB7 ")
-                    )
-                  ),
-                  // Status + capabilities
+                  })
+                )
+              )
+            )
+          )
+        ),
+        // ---- Manual accounts (if any exist beyond drivers) ----
+        manualAccounts.length > 0 && h(
+          "div",
+          { style: t.card },
+          h(
+            "div",
+            { className: "flex items-center gap-2 mb-3" },
+            h("div", { className: "text-sm font-medium", style: t.text }, "Stored tokens"),
+            h("span", { style: t.badge("rgba(251,191,36,0.7)") }, `${manualAccounts.length}`)
+          ),
+          h("div", { className: "text-xs mb-3", style: t.faint }, "Tokens stored locally, encrypted at rest. These feed into the direct backend for their platform driver."),
+          h(
+            "div",
+            { className: "space-y-2" },
+            ...manualAccounts.map(
+              (a) => h(
+                "div",
+                { key: a.id, style: { ...t.card, padding: "0.75rem", display: "flex", alignItems: "center", gap: "0.75rem" } },
+                h(
+                  "div",
+                  { style: { flex: 1, minWidth: 0 } },
+                  h("div", { className: "text-sm", style: t.text }, a.displayName),
                   h(
                     "div",
-                    { className: "flex items-center gap-2 shrink-0" },
-                    p.capabilities?.includes("schedule") && h("span", { className: "text-xs", style: t.faint }, "\u23F1"),
-                    p.capabilities?.includes("post") && h("span", { className: "text-xs", style: t.faint }, "\u{1F4E4}"),
-                    h("div", {
-                      style: {
-                        width: 8,
-                        height: 8,
-                        borderRadius: "50%",
-                        background: p.isActive ? "rgba(74,222,128,0.8)" : "rgba(248,113,113,0.6)"
-                      }
-                    })
+                    { className: "text-xs", style: t.faint },
+                    [a.platform, a.username].filter(Boolean).join(" \xB7 ")
                   )
-                )
+                ),
+                h("div", {
+                  style: {
+                    width: 8,
+                    height: 8,
+                    borderRadius: "50%",
+                    background: a.isActive ? "rgba(74,222,128,0.8)" : "rgba(248,113,113,0.6)"
+                  }
+                })
               )
             )
           )
+        ),
+        // ---- Loading ----
+        loading && drivers.length === 0 && h(
+          "div",
+          { style: t.card },
+          h("div", { className: "py-6 text-center text-sm", style: t.faint }, "Detecting platform drivers\u2026")
         )
       );
     }

package/dist/tabs/content-library.js CHANGED Viewed

@@ -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 CHANGED Viewed

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