@jiggai/kitchen-plugin-marketing 0.2.6 → 0.2.7

package/dist/api/handler.js

@@ -224,8 +224,141 @@ function getTeamId(req) {
 function getUserId(req) {
   return req.headers["x-user-id"] || "system";
 }
-async function handleRequest(req, _ctx) {
+function getPostizConfig(req) {
+  const apiKey = req.query.postizApiKey || req.headers["x-postiz-api-key"];
+  const baseUrl = req.query.postizBaseUrl || req.headers["x-postiz-base-url"] || "https://api.postiz.com/public/v1";
+  if (!apiKey) return null;
+  return { apiKey, baseUrl: baseUrl.replace(/\/+$/, "") };
+}
+async function postizFetch(config, path, options) {
+  return fetch(`${config.baseUrl}${path}`, {
+    ...options,
+    headers: {
+      "Authorization": config.apiKey,
+      "Content-Type": "application/json",
+      ...options?.headers || {}
+    }
+  });
+}
+async function detectProviders(req, teamId) {
+  const providers = [];
+  const postizCfg = getPostizConfig(req);
+  if (postizCfg) {
+    try {
+      const res = await postizFetch(postizCfg, "/integrations");
+      if (res.ok) {
+        const data = await res.json();
+        const integrations = Array.isArray(data) ? data : data.integrations || [];
+        for (const integ of integrations) {
+          providers.push({
+            id: `postiz:${integ.id}`,
+            type: "postiz",
+            platform: integ.providerIdentifier || integ.provider || "unknown",
+            displayName: integ.name || integ.providerIdentifier || "Postiz account",
+            username: integ.username || void 0,
+            avatar: integ.picture || integ.avatar || void 0,
+            isActive: !integ.disabled,
+            capabilities: ["post", "schedule"],
+            meta: { postizId: integ.id, provider: integ.providerIdentifier }
+          });
+        }
+      }
+    } catch {
+    }
+  }
+  try {
+    const fs = await import("fs");
+    const path = await import("path");
+    const os = await import("os");
+    const configPath = path.join(os.homedir(), ".openclaw", "openclaw.json");
+    if (fs.existsSync(configPath)) {
+      const cfg = JSON.parse(fs.readFileSync(configPath, "utf8"));
+      const plugins = cfg?.plugins?.entries || {};
+      if (plugins.discord?.enabled) {
+        providers.push({
+          id: "gateway:discord",
+          type: "gateway",
+          platform: "discord",
+          displayName: "Discord (via OpenClaw)",
+          isActive: true,
+          capabilities: ["post"],
+          meta: { channel: "discord" }
+        });
+      }
+      if (plugins.telegram?.enabled) {
+        providers.push({
+          id: "gateway:telegram",
+          type: "gateway",
+          platform: "telegram",
+          displayName: "Telegram (via OpenClaw)",
+          isActive: true,
+          capabilities: ["post"],
+          meta: { channel: "telegram" }
+        });
+      }
+    }
+  } catch {
+  }
+  return providers;
+}
+async function postizPublish(config, body) {
+  const payload = {
+    content: body.content,
+    integrationIds: body.integrationIds
+  };
+  if (body.scheduledAt) {
+    payload.date = body.scheduledAt;
+  }
+  if (body.settings) {
+    payload.settings = body.settings;
+  }
+  if (body.mediaUrls && body.mediaUrls.length > 0) {
+    payload.media = body.mediaUrls.map((url) => ({ url }));
+  }
+  const res = await postizFetch(config, "/posts", {
+    method: "POST",
+    body: JSON.stringify(payload)
+  });
+  const data = await res.json().catch(() => null);
+  if (!res.ok) {
+    return apiError(res.status, "POSTIZ_ERROR", data?.message || `Postiz returned ${res.status}`, data);
+  }
+  return { status: 201, data };
+}
+async function handleRequest(req, ctx) {
   const teamId = getTeamId(req);
+  if (req.path === "/providers" && req.method === "GET") {
+    try {
+      const providers = await detectProviders(req, teamId);
+      return { status: 200, data: { providers } };
+    } catch (error) {
+      return apiError(500, "DETECT_ERROR", error?.message || "Failed to detect providers");
+    }
+  }
+  if (req.path === "/providers/postiz/integrations" && req.method === "GET") {
+    const postizCfg = getPostizConfig(req);
+    if (!postizCfg) return apiError(400, "NO_POSTIZ", "Postiz API key not configured");
+    try {
+      const res = await postizFetch(postizCfg, "/integrations");
+      const data = await res.json();
+      return { status: res.status, data };
+    } catch (error) {
+      return apiError(502, "POSTIZ_UNREACHABLE", error?.message || "Cannot reach Postiz");
+    }
+  }
+  if (req.path === "/publish" && req.method === "POST") {
+    const postizCfg = getPostizConfig(req);
+    if (!postizCfg) return apiError(400, "NO_POSTIZ", "Postiz API key not configured");
+    const body = req.body || {};
+    if (!body.content || !body.integrationIds?.length) {
+      return apiError(400, "VALIDATION_ERROR", "content and integrationIds are required");
+    }
+    try {
+      return await postizPublish(postizCfg, body);
+    } catch (error) {
+      return apiError(502, "POSTIZ_ERROR", error?.message || "Publish failed");
+    }
+  }
   if (req.path === "/posts" && req.method === "GET") {
     try {
       const { db } = initializeDatabase(teamId);

package/dist/tabs/accounts.js

@@ -29,85 +29,186 @@
         background: "var(--ck-accent-red)",
         border: "1px solid rgba(255,255,255,0.08)",
         borderRadius: "10px",
-        padding: "0.6rem 0.85rem",
+        padding: "0.5rem 0.75rem",
         color: "white",
         fontWeight: 700,
-        cursor: "pointer"
+        cursor: "pointer",
+        fontSize: "0.8rem"
       },
       btnGhost: {
         background: "rgba(255,255,255,0.03)",
         border: "1px solid var(--ck-border-subtle)",
         borderRadius: "10px",
-        padding: "0.6rem 0.85rem",
+        padding: "0.5rem 0.75rem",
         color: "var(--ck-text-primary)",
         fontWeight: 600,
-        cursor: "pointer"
-      }
+        cursor: "pointer",
+        fontSize: "0.8rem"
+      },
+      badge: (color) => ({
+        display: "inline-block",
+        background: color,
+        borderRadius: "999px",
+        padding: "0.15rem 0.5rem",
+        fontSize: "0.7rem",
+        fontWeight: 600,
+        color: "white"
+      })
+    };
+    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 = {
+      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)"
     };
     function Accounts(props) {
       const teamId = String(props?.teamId || "default");
       const apiBase = useMemo(() => `/api/plugins/marketing`, []);
-      const [accounts, setAccounts] = useState([]);
+      const [providers, setProviders] = useState([]);
+      const [manualAccounts, setManualAccounts] = useState([]);
       const [loading, setLoading] = useState(true);
-      const [open, setOpen] = useState(false);
-      const [platform, setPlatform] = useState("twitter");
-      const [displayName, setDisplayName] = useState("");
-      const [username, setUsername] = useState("");
-      const [accessToken, setAccessToken] = useState("");
-      const [saving, setSaving] = useState(false);
+      const [detecting, setDetecting] = useState(false);
       const [error, setError] = useState(null);
-      const refresh = async () => {
-        setLoading(true);
+      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 [manName, setManName] = useState("");
+      const [manUser, setManUser] = useState("");
+      const [manToken, setManToken] = useState("");
+      const [saving, setSaving] = useState(false);
+      useEffect(() => {
+        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");
+          }
+        } catch {
+        }
+      }, [teamId]);
+      const savePostizConfig = () => {
+        try {
+          localStorage.setItem(`ck-postiz-${teamId}`, JSON.stringify({ apiKey: postizKey, baseUrl: postizUrl }));
+        } catch {
+        }
+        setShowPostizSetup(false);
+        void detectAll();
+      };
+      const detectAll = async () => {
+        setDetecting(true);
         setError(null);
         try {
-          const res = await fetch(`${apiBase}/accounts?team=${encodeURIComponent(teamId)}`);
+          const headers = {};
+          if (postizKey) {
+            headers["x-postiz-api-key"] = postizKey;
+            headers["x-postiz-base-url"] = postizUrl;
+          }
+          const res = await fetch(`${apiBase}/providers?team=${encodeURIComponent(teamId)}`, { headers });
           const json = await res.json();
-          setAccounts(Array.isArray(json.accounts) ? json.accounts : []);
+          setProviders(Array.isArray(json.providers) ? json.providers : []);
         } catch (e) {
-          setError(e?.message || "Failed to load accounts");
+          setError(e?.message || "Failed to detect providers");
         } finally {
-          setLoading(false);
+          setDetecting(false);
         }
       };
+      const loadManual = async () => {
+        try {
+          const res = await fetch(`${apiBase}/accounts?team=${encodeURIComponent(teamId)}`);
+          const json = await res.json();
+          setManualAccounts(Array.isArray(json.accounts) ? json.accounts : []);
+        } catch {
+        }
+      };
+      const refresh = async () => {
+        setLoading(true);
+        await Promise.all([detectAll(), loadManual()]);
+        setLoading(false);
+      };
       useEffect(() => {
         void refresh();
       }, [teamId]);
-      const onConnect = async () => {
+      const onManualConnect = async () => {
         setSaving(true);
         setError(null);
         try {
-          const res = await fetch(
-            `${apiBase}/accounts?team=${encodeURIComponent(teamId)}`,
-            {
-              method: "POST",
-              headers: { "content-type": "application/json" },
-              body: JSON.stringify({
-                platform,
-                displayName: displayName || `${platform} account`,
-                username: username || void 0,
-                credentials: { accessToken },
-                settings: {}
-              })
-            }
-          );
-          if (!res.ok) {
-            const err = await res.json().catch(() => null);
-            throw new Error(err?.message || `Connect failed (${res.status})`);
-          }
-          setOpen(false);
-          setDisplayName("");
-          setUsername("");
-          setAccessToken("");
-          await refresh();
+          const res = await fetch(`${apiBase}/accounts?team=${encodeURIComponent(teamId)}`, {
+            method: "POST",
+            headers: { "content-type": "application/json" },
+            body: JSON.stringify({
+              platform: manPlatform,
+              displayName: manName || `${manPlatform} account`,
+              username: manUser || void 0,
+              credentials: { accessToken: manToken }
+            })
+          });
+          if (!res.ok) throw new Error(`Failed (${res.status})`);
+          setShowManual(false);
+          setManName("");
+          setManUser("");
+          setManToken("");
+          await loadManual();
         } catch (e) {
-          setError(e?.message || "Failed to connect account");
+          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"
+      };
       return h(
         "div",
         { className: "space-y-3" },
+        // ---- Header ----
         h(
           "div",
           { style: t.card },
@@ -117,22 +218,81 @@
             h(
               "div",
               null,
-              h("div", { className: "text-sm font-medium", style: t.text }, "Accounts"),
-              h("div", { className: "mt-1 text-xs", style: t.faint }, "OAuth flows next. For now this stores an access token placeholder per team.")
+              h("div", { className: "text-sm font-medium", style: t.text }, "Connected Accounts"),
+              h(
+                "div",
+                { className: "mt-1 text-xs", style: t.faint },
+                `${allProviders.length} provider${allProviders.length !== 1 ? "s" : ""} detected`
+              )
             ),
             h(
               "div",
-              { className: "flex gap-2" },
-              h("button", { type: "button", onClick: () => void refresh(), style: t.btnGhost }, "Refresh"),
-              h("button", { type: "button", onClick: () => setOpen(true), style: t.btnPrimary }, "Connect")
+              { className: "flex flex-wrap gap-2" },
+              h(
+                "button",
+                { type: "button", onClick: () => void refresh(), style: t.btnGhost, disabled: detecting },
+                detecting ? "Detecting\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")
             )
           ),
-          error ? h("div", { className: "mt-2 text-sm", style: { color: "rgba(248,113,113,0.95)" } }, error) : null
+          error && h("div", { className: "mt-2 text-xs", style: { color: "rgba(248,113,113,0.95)" } }, error)
         ),
-        open ? h(
+        // ---- Postiz setup ----
+        showPostizSetup && h(
           "div",
           { style: t.card },
-          h("div", { className: "text-sm font-medium mb-3", style: t.text }, "Connect account"),
+          h("div", { className: "text-sm font-medium mb-2", style: t.text }, "Postiz Configuration"),
+          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."
+          ),
+          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 }, "API Key"),
+              h("input", {
+                type: "password",
+                value: postizKey,
+                onChange: (e) => setPostizKey(e.target.value),
+                placeholder: "your-postiz-api-key",
+                style: t.input
+              })
+            ),
+            h(
+              "div",
+              null,
+              h("div", { className: "text-xs font-medium mb-1", style: t.faint }, "Base URL"),
+              h("input", {
+                value: postizUrl,
+                onChange: (e) => setPostizUrl(e.target.value),
+                placeholder: "https://api.postiz.com/public/v1",
+                style: t.input
+              })
+            )
+          ),
+          h(
+            "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")
+          )
+        ),
+        // ---- Manual account 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: "grid grid-cols-1 gap-2 sm:grid-cols-2" },
@@ -142,78 +302,117 @@
               h("div", { className: "text-xs font-medium mb-1", style: t.faint }, "Platform"),
               h(
                 "select",
-                {
-                  value: platform,
-                  onChange: (e) => setPlatform(e.target.value),
-                  style: t.input
-                },
+                { 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: "linkedin" }, "LinkedIn"),
+                h("option", { value: "bluesky" }, "Bluesky"),
+                h("option", { value: "mastodon" }, "Mastodon")
               )
             ),
             h(
               "div",
               null,
               h("div", { className: "text-xs font-medium mb-1", style: t.faint }, "Display name"),
-              h("input", {
-                value: displayName,
-                onChange: (e) => setDisplayName(e.target.value),
-                placeholder: "e.g. RJ \u2014 Main",
-                style: t.input
-              })
+              h("input", { value: manName, onChange: (e) => setManName(e.target.value), placeholder: "My X account", style: t.input })
             ),
             h(
               "div",
               null,
-              h("div", { className: "text-xs font-medium mb-1", style: t.faint }, "Username (optional)"),
-              h("input", {
-                value: username,
-                onChange: (e) => setUsername(e.target.value),
-                placeholder: "e.g. @handle",
-                style: t.input
-              })
+              h("div", { className: "text-xs font-medium mb-1", style: t.faint }, "Username"),
+              h("input", { value: manUser, onChange: (e) => setManUser(e.target.value), placeholder: "@handle", style: t.input })
             ),
             h(
               "div",
               null,
-              h("div", { className: "text-xs font-medium mb-1", style: t.faint }, "Access token (placeholder)"),
-              h("input", {
-                value: accessToken,
-                onChange: (e) => setAccessToken(e.target.value),
-                placeholder: "token\u2026",
-                style: t.input
-              })
+              h("div", { className: "text-xs font-medium mb-1", style: t.faint }, "Access token"),
+              h("input", { type: "password", value: manToken, onChange: (e) => setManToken(e.target.value), placeholder: "token\u2026", style: t.input })
             )
           ),
           h(
             "div",
             { className: "mt-3 flex gap-2" },
-            h("button", { type: "button", onClick: () => setOpen(false), style: t.btnGhost }, "Cancel"),
-            h("button", { type: "button", onClick: () => void onConnect(), style: { ...t.btnPrimary, opacity: saving ? 0.7 : 1 }, disabled: saving }, saving ? "Connecting\u2026" : "Save")
+            h("button", { type: "button", onClick: () => setShowManual(false), style: t.btnGhost }, "Cancel"),
+            h("button", { type: "button", onClick: () => void onManualConnect(), style: t.btnPrimary, disabled: saving }, saving ? "Saving\u2026" : "Connect")
           )
-        ) : null,
-        h(
+        ),
+        // ---- 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(
           "div",
           { style: t.card },
-          h("div", { className: "text-sm font-medium mb-2", style: t.text }, "Connected"),
-          loading ? h("div", { className: "py-6 text-center text-sm", style: t.faint }, "Loading\u2026") : accounts.length === 0 ? h("div", { className: "py-6 text-center text-sm", style: t.faint }, "No accounts connected yet.") : h(
+          h(
             "div",
-            { className: "space-y-2" },
-            ...accounts.map(
-              (a) => h(
-                "div",
-                { key: a.id, style: { ...t.card, padding: "0.75rem" } },
-                h(
+            { 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."
+            )
+          )
+        ),
+        !loading && Object.entries(grouped).map(
+          ([type, items]) => 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(
                   "div",
-                  { className: "flex items-center justify-between gap-2" },
+                  { 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: {
+                      width: 32,
+                      height: 32,
+                      borderRadius: "50%",
+                      background: "rgba(255,255,255,0.06)",
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      fontSize: "1rem"
+                    }
+                  }, PLATFORM_ICONS[p.platform] || "\u{1F517}"),
+                  // Info
                   h(
                     "div",
-                    null,
-                    h("div", { className: "text-sm font-medium", style: t.text }, a.displayName),
-                    h("div", { className: "text-xs", style: t.faint }, `${a.platform}${a.username ? ` \xB7 ${a.username}` : ""}`)
+                    { 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 ")
+                    )
                   ),
-                  h("div", { className: "text-xs", style: a.isActive ? t.muted : t.faint }, a.isActive ? "active" : "disabled")
+                  // Status + capabilities
+                  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)"
+                      }
+                    })
+                  )
                 )
               )
             )

package/dist/tabs/content-library.js

@@ -7,6 +7,7 @@
     const useEffect = R.useEffect;
     const useMemo = R.useMemo;
     const useState = R.useState;
+    const useCallback = R.useCallback;
     const t = {
       text: { color: "var(--ck-text-primary)" },
       muted: { color: "var(--ck-text-secondary)" },
@@ -43,6 +44,15 @@
         fontWeight: 600,
         cursor: "pointer"
       },
+      btnPublish: {
+        background: "rgba(99,179,237,0.2)",
+        border: "1px solid rgba(99,179,237,0.4)",
+        borderRadius: "10px",
+        padding: "0.6rem 0.85rem",
+        color: "rgba(210,235,255,0.95)",
+        fontWeight: 700,
+        cursor: "pointer"
+      },
       pill: (active) => ({
         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)"}`,
@@ -52,81 +62,162 @@
         color: active ? "rgba(210,235,255,0.95)" : "var(--ck-text-secondary)",
         cursor: "pointer",
         userSelect: "none"
-      })
+      }),
+      statusBadge: (status) => {
+        const colors = {
+          draft: "rgba(167,139,250,0.7)",
+          scheduled: "rgba(251,191,36,0.7)",
+          published: "rgba(74,222,128,0.7)",
+          failed: "rgba(248,113,113,0.7)"
+        };
+        return {
+          display: "inline-block",
+          background: colors[status] || "rgba(100,100,100,0.5)",
+          borderRadius: "999px",
+          padding: "0.1rem 0.45rem",
+          fontSize: "0.7rem",
+          fontWeight: 600,
+          color: "white"
+        };
+      }
     };
     function ContentLibrary(props) {
       const teamId = String(props?.teamId || "default");
+      const apiBase = useMemo(() => `/api/plugins/marketing`, []);
       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 [content, setContent] = useState("");
-      const [platforms, setPlatforms] = useState(["twitter"]);
+      const [selectedProviders, setSelectedProviders] = useState([]);
       const [scheduledAt, setScheduledAt] = useState("");
-      const status = useMemo(() => scheduledAt ? "scheduled" : "draft", [scheduledAt]);
-      const apiBase = useMemo(() => `/api/plugins/marketing`, []);
-      const refresh = async () => {
-        setLoading(true);
-        setError(null);
+      const postizHeaders = useMemo(() => {
+        try {
+          const stored = localStorage.getItem(`ck-postiz-${teamId}`);
+          if (stored) {
+            const parsed = JSON.parse(stored);
+            if (parsed.apiKey) {
+              return {
+                "x-postiz-api-key": parsed.apiKey,
+                "x-postiz-base-url": parsed.baseUrl || "https://api.postiz.com/public/v1"
+              };
+            }
+          }
+        } catch {
+        }
+        return {};
+      }, [teamId]);
+      const loadPosts = useCallback(async () => {
         try {
-          const res = await fetch(`${apiBase}/posts?team=${encodeURIComponent(teamId)}&limit=25&offset=0`);
+          const res = await fetch(`${apiBase}/posts?team=${encodeURIComponent(teamId)}&limit=25`);
           const json = await res.json();
           setPosts(Array.isArray(json.data) ? json.data : []);
-        } catch (e) {
-          setError(e?.message || "Failed to load posts");
-        } finally {
-          setLoading(false);
+        } catch {
         }
-      };
+      }, [apiBase, teamId]);
+      const loadProviders = useCallback(async () => {
+        try {
+          const res = await fetch(`${apiBase}/providers?team=${encodeURIComponent(teamId)}`, { headers: postizHeaders });
+          const json = await res.json();
+          const detected = Array.isArray(json.providers) ? json.providers : [];
+          setProviders(detected);
+        } catch {
+        }
+      }, [apiBase, teamId, postizHeaders]);
       useEffect(() => {
-        void refresh();
-      }, [teamId]);
-      const togglePlatform = (p) => {
-        setPlatforms((prev) => {
-          if (prev.includes(p)) return prev.filter((x) => x !== p);
-          return [...prev, p];
-        });
+        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]
+        );
       };
-      const onCreate = async () => {
+      const onSaveDraft = async () => {
+        if (!content.trim()) return;
         setSaving(true);
         setError(null);
         try {
-          const res = await fetch(
-            `${apiBase}/posts?team=${encodeURIComponent(teamId)}`,
-            {
+          const platforms = selectedProviders.map((id) => providers.find((p) => p.id === id)?.platform).filter(Boolean);
+          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"],
+              status: scheduledAt ? "scheduled" : "draft",
+              scheduledAt: scheduledAt || void 0
+            })
+          });
+          if (!res.ok) throw new Error(`Save failed (${res.status})`);
+          setContent("");
+          setScheduledAt("");
+          setSelectedProviders([]);
+          await loadPosts();
+        } catch (e) {
+          setError(e?.message || "Failed to save");
+        } finally {
+          setSaving(false);
+        }
+      };
+      const onPublish = async () => {
+        if (!content.trim() || selectedProviders.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" },
+              headers: { "content-type": "application/json", ...postizHeaders },
               body: JSON.stringify({
                 content,
-                platforms,
-                status,
+                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})`);
             }
-          );
-          if (!res.ok) {
-            const err = await res.json().catch(() => null);
-            throw new Error(err?.message || `Create failed (${res.status})`);
+          }
+          if (gatewayProviders.length > 0 && postizProviders.length === 0) {
+            setSuccess("Saved! Gateway posting requires OpenClaw agent \u2014 use the workflow or ask your assistant to post.");
+          } else {
+            setSuccess(scheduledAt ? "Scheduled via Postiz!" : "Published via Postiz!");
           }
           setContent("");
           setScheduledAt("");
-          await refresh();
+          setSelectedProviders([]);
+          await loadPosts();
         } catch (e) {
-          setError(e?.message || "Failed to create post");
+          setError(e?.message || "Publish failed");
         } finally {
-          setSaving(false);
+          setPublishing(false);
         }
       };
+      const postizAvailable = providers.some((p) => p.type === "postiz");
+      const hasSelection = selectedProviders.length > 0;
       return h(
         "div",
         { className: "space-y-3" },
+        // ---- Composer ----
         h(
           "div",
           { style: t.card },
-          h("div", { className: "text-sm font-medium mb-3", style: t.text }, "New Post"),
+          h("div", { className: "text-sm font-medium mb-3", style: t.text }, "Compose"),
           h(
             "div",
-            { className: "space-y-2" },
+            { className: "space-y-3" },
             h("textarea", {
               value: content,
               onChange: (e) => setContent(e.target.value),
@@ -134,20 +225,36 @@
               rows: 5,
               style: { ...t.input, resize: "vertical", minHeight: "110px" }
             }),
-            h(
+            // Provider selector
+            providers.length > 0 && h(
               "div",
-              { className: "flex flex-wrap gap-2 items-center" },
-              h("div", { className: "text-xs font-medium", style: t.faint }, "Platforms"),
-              ["twitter", "instagram", "linkedin"].map(
-                (p) => h("span", {
-                  key: p,
-                  onClick: () => togglePlatform(p),
-                  style: t.pill(platforms.includes(p)),
-                  role: "button",
-                  tabIndex: 0
-                }, p)
+              null,
+              h("div", { className: "text-xs font-medium mb-2", style: t.faint }, "Publish to"),
+              h(
+                "div",
+                { className: "flex flex-wrap gap-2" },
+                ...providers.filter((p) => p.isActive).map(
+                  (p) => h(
+                    "span",
+                    {
+                      key: p.id,
+                      onClick: () => toggleProvider(p.id),
+                      style: t.pill(selectedProviders.includes(p.id)),
+                      role: "button",
+                      tabIndex: 0
+                    },
+                    `${p.displayName}`
+                  )
+                )
               )
             ),
+            // No providers hint
+            providers.length === 0 && !loading && h(
+              "div",
+              { className: "text-xs", style: t.faint },
+              "No publishing targets detected. Go to Accounts tab to connect Postiz or add accounts."
+            ),
+            // Schedule
             h(
               "div",
               { className: "grid grid-cols-1 gap-2 sm:grid-cols-2" },
@@ -164,38 +271,50 @@
               ),
               h(
                 "div",
-                null,
-                h("div", { className: "text-xs font-medium mb-1", style: t.faint }, "Status"),
-                h("div", { className: "text-sm", style: t.muted }, status)
+                { className: "flex items-end" },
+                h(
+                  "div",
+                  { className: "text-xs", style: t.faint },
+                  content.length > 0 ? `${content.length} chars` : ""
+                )
               )
             ),
+            // Actions
             h(
               "div",
               { className: "flex flex-wrap gap-2 items-center" },
               h("button", {
                 type: "button",
-                onClick: () => void refresh(),
-                style: t.btnGhost,
-                disabled: saving
-              }, loading ? "Refreshing\u2026" : "Refresh"),
-              h("button", {
-                type: "button",
-                onClick: () => void onCreate(),
-                style: { ...t.btnPrimary, opacity: saving ? 0.7 : 1 },
-                disabled: saving
+                onClick: () => void onSaveDraft(),
+                style: { ...t.btnGhost, opacity: saving ? 0.7 : 1 },
+                disabled: saving || !content.trim()
               }, saving ? "Saving\u2026" : "Save draft"),
-              h("div", { className: "text-xs", style: t.faint }, "Media embedding + templates next.")
+              postizAvailable && 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."
+              )
             ),
-            error ? h("div", {
-              className: "text-sm mt-2",
-              style: { color: "rgba(248,113,113,0.95)" }
-            }, error) : null
+            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 ----
         h(
           "div",
           { style: t.card },
-          h("div", { className: "text-sm font-medium mb-2", style: t.text }, "Posts"),
+          h(
+            "div",
+            { className: "flex items-center justify-between mb-2" },
+            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")
+          ),
           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(
             "div",
             { className: "space-y-2" },
@@ -206,14 +325,19 @@
                 h(
                   "div",
                   { className: "flex items-center justify-between gap-2" },
-                  h("div", { className: "text-xs font-medium", style: t.faint }, new Date(p.createdAt).toLocaleString()),
-                  h("div", { className: "text-xs", style: t.muted }, `${p.status}${p.scheduledAt ? ` \xB7 ${p.scheduledAt}` : ""}`)
+                  h(
+                    "div",
+                    { className: "flex items-center gap-2" },
+                    h("span", { style: t.statusBadge(p.status) }, p.status),
+                    h("span", { className: "text-xs", style: t.faint }, new Date(p.createdAt).toLocaleString())
+                  ),
+                  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(
+                p.platforms?.length > 0 && h(
                   "div",
-                  { className: "mt-2 flex flex-wrap gap-2" },
-                  ...(p.platforms || []).map((pl) => h("span", { key: pl, style: t.pill(true) }, pl))
+                  { className: "mt-2 flex flex-wrap gap-1" },
+                  ...p.platforms.map((pl) => h("span", { key: pl, style: t.pill(true) }, pl))
                 )
               )
             )

package/package.json

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