@jiggai/kitchen-plugin-marketing 0.2.5 → 0.2.7

package/dist/api/handler.js

@@ -0,0 +1,510 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc2) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc2 = __getOwnPropDesc(from, key)) || desc2.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/api/handler.ts
+var handler_exports = {};
+__export(handler_exports, {
+  handleRequest: () => handleRequest
+});
+module.exports = __toCommonJS(handler_exports);
+var import_drizzle_orm2 = require("drizzle-orm");
+var import_crypto2 = require("crypto");
+
+// src/db/index.ts
+var import_better_sqlite3 = __toESM(require("better-sqlite3"));
+var import_better_sqlite32 = require("drizzle-orm/better-sqlite3");
+
+// src/db/schema.ts
+var schema_exports = {};
+__export(schema_exports, {
+  accountMetrics: () => accountMetrics,
+  accountMetricsRelations: () => accountMetricsRelations,
+  media: () => media,
+  postMetrics: () => postMetrics,
+  postMetricsRelations: () => postMetricsRelations,
+  posts: () => posts,
+  postsRelations: () => postsRelations,
+  socialAccounts: () => socialAccounts,
+  socialAccountsRelations: () => socialAccountsRelations,
+  templates: () => templates,
+  webhooks: () => webhooks
+});
+var import_sqlite_core = require("drizzle-orm/sqlite-core");
+var import_drizzle_orm = require("drizzle-orm");
+var posts = (0, import_sqlite_core.sqliteTable)("posts", {
+  id: (0, import_sqlite_core.text)("id").primaryKey(),
+  teamId: (0, import_sqlite_core.text)("team_id").notNull(),
+  content: (0, import_sqlite_core.text)("content").notNull(),
+  platforms: (0, import_sqlite_core.text)("platforms").notNull(),
+  // JSON array
+  status: (0, import_sqlite_core.text)("status").notNull(),
+  // draft, scheduled, published, failed
+  scheduledAt: (0, import_sqlite_core.text)("scheduled_at"),
+  // ISO string
+  publishedAt: (0, import_sqlite_core.text)("published_at"),
+  // ISO string
+  tags: (0, import_sqlite_core.text)("tags"),
+  // JSON array
+  mediaIds: (0, import_sqlite_core.text)("media_ids"),
+  // JSON array
+  templateId: (0, import_sqlite_core.text)("template_id"),
+  createdAt: (0, import_sqlite_core.text)("created_at").notNull(),
+  updatedAt: (0, import_sqlite_core.text)("updated_at").notNull(),
+  createdBy: (0, import_sqlite_core.text)("created_by").notNull()
+});
+var media = (0, import_sqlite_core.sqliteTable)("media", {
+  id: (0, import_sqlite_core.text)("id").primaryKey(),
+  teamId: (0, import_sqlite_core.text)("team_id").notNull(),
+  filename: (0, import_sqlite_core.text)("filename").notNull(),
+  originalName: (0, import_sqlite_core.text)("original_name").notNull(),
+  mimeType: (0, import_sqlite_core.text)("mime_type").notNull(),
+  size: (0, import_sqlite_core.integer)("size").notNull(),
+  width: (0, import_sqlite_core.integer)("width"),
+  height: (0, import_sqlite_core.integer)("height"),
+  alt: (0, import_sqlite_core.text)("alt"),
+  tags: (0, import_sqlite_core.text)("tags"),
+  // JSON array
+  url: (0, import_sqlite_core.text)("url").notNull(),
+  thumbnailUrl: (0, import_sqlite_core.text)("thumbnail_url"),
+  createdAt: (0, import_sqlite_core.text)("created_at").notNull(),
+  createdBy: (0, import_sqlite_core.text)("created_by").notNull()
+});
+var templates = (0, import_sqlite_core.sqliteTable)("templates", {
+  id: (0, import_sqlite_core.text)("id").primaryKey(),
+  teamId: (0, import_sqlite_core.text)("team_id").notNull(),
+  name: (0, import_sqlite_core.text)("name").notNull(),
+  content: (0, import_sqlite_core.text)("content").notNull(),
+  variables: (0, import_sqlite_core.text)("variables"),
+  // JSON array of variable definitions
+  tags: (0, import_sqlite_core.text)("tags"),
+  // JSON array
+  createdAt: (0, import_sqlite_core.text)("created_at").notNull(),
+  updatedAt: (0, import_sqlite_core.text)("updated_at").notNull(),
+  createdBy: (0, import_sqlite_core.text)("created_by").notNull()
+});
+var socialAccounts = (0, import_sqlite_core.sqliteTable)("social_accounts", {
+  id: (0, import_sqlite_core.text)("id").primaryKey(),
+  teamId: (0, import_sqlite_core.text)("team_id").notNull(),
+  platform: (0, import_sqlite_core.text)("platform").notNull(),
+  // twitter, linkedin, instagram, etc.
+  displayName: (0, import_sqlite_core.text)("display_name").notNull(),
+  username: (0, import_sqlite_core.text)("username"),
+  avatar: (0, import_sqlite_core.text)("avatar"),
+  isActive: (0, import_sqlite_core.integer)("is_active", { mode: "boolean" }).notNull().default(true),
+  credentials: (0, import_sqlite_core.blob)("credentials").notNull(),
+  // Encrypted JSON
+  settings: (0, import_sqlite_core.text)("settings"),
+  // JSON object
+  lastSync: (0, import_sqlite_core.text)("last_sync"),
+  createdAt: (0, import_sqlite_core.text)("created_at").notNull(),
+  updatedAt: (0, import_sqlite_core.text)("updated_at").notNull()
+});
+var postMetrics = (0, import_sqlite_core.sqliteTable)("post_metrics", {
+  id: (0, import_sqlite_core.text)("id").primaryKey(),
+  postId: (0, import_sqlite_core.text)("post_id").notNull(),
+  platform: (0, import_sqlite_core.text)("platform").notNull(),
+  impressions: (0, import_sqlite_core.integer)("impressions").default(0),
+  likes: (0, import_sqlite_core.integer)("likes").default(0),
+  shares: (0, import_sqlite_core.integer)("shares").default(0),
+  comments: (0, import_sqlite_core.integer)("comments").default(0),
+  clicks: (0, import_sqlite_core.integer)("clicks").default(0),
+  engagementRate: (0, import_sqlite_core.text)("engagement_rate"),
+  // Stored as string to avoid float precision issues
+  syncedAt: (0, import_sqlite_core.text)("synced_at").notNull()
+});
+var accountMetrics = (0, import_sqlite_core.sqliteTable)("account_metrics", {
+  id: (0, import_sqlite_core.text)("id").primaryKey(),
+  accountId: (0, import_sqlite_core.text)("account_id").notNull(),
+  date: (0, import_sqlite_core.text)("date").notNull(),
+  // YYYY-MM-DD format
+  followers: (0, import_sqlite_core.integer)("followers").default(0),
+  following: (0, import_sqlite_core.integer)("following").default(0),
+  posts: (0, import_sqlite_core.integer)("posts").default(0),
+  engagement: (0, import_sqlite_core.integer)("engagement").default(0),
+  reach: (0, import_sqlite_core.integer)("reach").default(0),
+  syncedAt: (0, import_sqlite_core.text)("synced_at").notNull()
+});
+var webhooks = (0, import_sqlite_core.sqliteTable)("webhooks", {
+  id: (0, import_sqlite_core.text)("id").primaryKey(),
+  teamId: (0, import_sqlite_core.text)("team_id").notNull(),
+  url: (0, import_sqlite_core.text)("url").notNull(),
+  events: (0, import_sqlite_core.text)("events").notNull(),
+  // JSON array
+  secret: (0, import_sqlite_core.text)("secret"),
+  isActive: (0, import_sqlite_core.integer)("is_active", { mode: "boolean" }).notNull().default(true),
+  createdAt: (0, import_sqlite_core.text)("created_at").notNull(),
+  lastTriggered: (0, import_sqlite_core.text)("last_triggered")
+});
+var postsRelations = (0, import_drizzle_orm.relations)(posts, ({ many }) => ({
+  metrics: many(postMetrics)
+}));
+var postMetricsRelations = (0, import_drizzle_orm.relations)(postMetrics, ({ one }) => ({
+  post: one(posts, {
+    fields: [postMetrics.postId],
+    references: [posts.id]
+  })
+}));
+var socialAccountsRelations = (0, import_drizzle_orm.relations)(socialAccounts, ({ many }) => ({
+  metrics: many(accountMetrics)
+}));
+var accountMetricsRelations = (0, import_drizzle_orm.relations)(accountMetrics, ({ one }) => ({
+  account: one(socialAccounts, {
+    fields: [accountMetrics.accountId],
+    references: [socialAccounts.id]
+  })
+}));
+
+// src/db/index.ts
+var import_migrator = require("drizzle-orm/better-sqlite3/migrator");
+var import_crypto = require("crypto");
+function createDatabase(teamId) {
+  const dbPath = process.env.KITCHEN_PLUGIN_DB_PATH || "./data";
+  const teamDbFile = `${dbPath}/marketing-${teamId}.db`;
+  const sqlite = new import_better_sqlite3.default(teamDbFile);
+  const db = (0, import_better_sqlite32.drizzle)(sqlite, { schema: schema_exports });
+  return { db, sqlite };
+}
+var ENCRYPTION_KEY = process.env.KITCHEN_ENCRYPTION_KEY || "fallback-key-change-in-production";
+function encryptCredentials(credentials) {
+  const plaintext = JSON.stringify(credentials);
+  const hash = (0, import_crypto.createHash)("sha256").update(ENCRYPTION_KEY).digest();
+  const cipher = (0, import_crypto.createCipher)("aes-256-cbc", hash);
+  let encrypted = cipher.update(plaintext, "utf8", "hex");
+  encrypted += cipher.final("hex");
+  return Buffer.from(encrypted, "hex");
+}
+function initializeDatabase(teamId) {
+  const { db, sqlite } = createDatabase(teamId);
+  try {
+    (0, import_migrator.migrate)(db, { migrationsFolder: "./db/migrations" });
+  } catch (error) {
+    console.warn("Migration warning:", error.message);
+  }
+  return { db, sqlite };
+}
+
+// src/api/handler.ts
+function apiError(status, error, message, details) {
+  const payload = { error, message, details };
+  return { status, data: payload };
+}
+function parsePagination(query) {
+  const limit = Math.min(parseInt(query.limit || "20", 10) || 20, 100);
+  const offset = parseInt(query.offset || "0", 10) || 0;
+  return { limit, offset };
+}
+function getTeamId(req) {
+  return req.query.team || req.query.teamId || req.headers["x-team-id"] || "default";
+}
+function getUserId(req) {
+  return req.headers["x-user-id"] || "system";
+}
+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);
+      const { limit, offset } = parsePagination(req.query);
+      const conditions = [(0, import_drizzle_orm2.eq)(posts.teamId, teamId)];
+      if (req.query.status) {
+        conditions.push((0, import_drizzle_orm2.eq)(posts.status, String(req.query.status)));
+      }
+      if (req.query.platform) {
+        conditions.push((0, import_drizzle_orm2.like)(posts.platforms, `%"${req.query.platform}"%`));
+      }
+      const totalResult = await db.select({ count: import_drizzle_orm2.sql`count(*)` }).from(posts).where((0, import_drizzle_orm2.and)(...conditions));
+      const total = totalResult[0]?.count ?? 0;
+      const posts2 = await db.select().from(posts).where((0, import_drizzle_orm2.and)(...conditions)).orderBy((0, import_drizzle_orm2.desc)(posts.createdAt)).limit(limit).offset(offset);
+      const transformed = posts2.map((post) => ({
+        id: post.id,
+        content: post.content,
+        platforms: JSON.parse(post.platforms || "[]"),
+        status: post.status,
+        scheduledAt: post.scheduledAt || void 0,
+        publishedAt: post.publishedAt || void 0,
+        tags: JSON.parse(post.tags || "[]"),
+        mediaIds: JSON.parse(post.mediaIds || "[]"),
+        templateId: post.templateId || void 0,
+        createdAt: post.createdAt,
+        updatedAt: post.updatedAt,
+        createdBy: post.createdBy
+      }));
+      const payload = {
+        data: transformed,
+        total,
+        offset,
+        limit,
+        hasMore: offset + limit < total
+      };
+      return { status: 200, data: payload };
+    } catch (error) {
+      return apiError(500, "DATABASE_ERROR", error?.message || "Unknown error");
+    }
+  }
+  if (req.path === "/posts" && req.method === "POST") {
+    try {
+      const userId = getUserId(req);
+      const body = req.body || {};
+      if (!body.content || !Array.isArray(body.platforms) || body.platforms.length === 0) {
+        return apiError(400, "VALIDATION_ERROR", "Content and platforms are required");
+      }
+      const { db } = initializeDatabase(teamId);
+      const now = (/* @__PURE__ */ new Date()).toISOString();
+      const newPost = {
+        id: (0, import_crypto2.randomUUID)(),
+        teamId,
+        content: body.content,
+        platforms: JSON.stringify(body.platforms),
+        status: body.status || "draft",
+        scheduledAt: body.scheduledAt || null,
+        publishedAt: null,
+        tags: JSON.stringify(body.tags || []),
+        mediaIds: JSON.stringify(body.mediaIds || []),
+        templateId: body.templateId || null,
+        createdAt: now,
+        updatedAt: now,
+        createdBy: userId
+      };
+      await db.insert(posts).values(newPost);
+      const response = {
+        id: newPost.id,
+        content: newPost.content,
+        platforms: JSON.parse(newPost.platforms),
+        status: newPost.status,
+        scheduledAt: newPost.scheduledAt || void 0,
+        publishedAt: void 0,
+        tags: JSON.parse(newPost.tags),
+        mediaIds: JSON.parse(newPost.mediaIds),
+        templateId: newPost.templateId || void 0,
+        createdAt: newPost.createdAt,
+        updatedAt: newPost.updatedAt,
+        createdBy: newPost.createdBy
+      };
+      return { status: 201, data: response };
+    } catch (error) {
+      return apiError(500, "DATABASE_ERROR", error?.message || "Unknown error");
+    }
+  }
+  if (req.path === "/accounts" && req.method === "GET") {
+    try {
+      const { db } = initializeDatabase(teamId);
+      const accounts = await db.select().from(socialAccounts).where((0, import_drizzle_orm2.eq)(socialAccounts.teamId, teamId)).orderBy((0, import_drizzle_orm2.desc)(socialAccounts.createdAt));
+      const response = accounts.map((account) => ({
+        id: account.id,
+        platform: account.platform,
+        displayName: account.displayName,
+        username: account.username || void 0,
+        avatar: account.avatar || void 0,
+        isActive: account.isActive,
+        settings: JSON.parse(account.settings || "{}"),
+        lastSync: account.lastSync || void 0,
+        createdAt: account.createdAt,
+        updatedAt: account.updatedAt
+      }));
+      return { status: 200, data: { accounts: response } };
+    } catch (error) {
+      return apiError(500, "DATABASE_ERROR", error?.message || "Unknown error");
+    }
+  }
+  if (req.path === "/accounts" && req.method === "POST") {
+    try {
+      const body = req.body || {};
+      if (!body.platform || !body.displayName || !body.credentials) {
+        return apiError(400, "VALIDATION_ERROR", "platform, displayName, and credentials are required");
+      }
+      const { db } = initializeDatabase(teamId);
+      const now = (/* @__PURE__ */ new Date()).toISOString();
+      const newAccount = {
+        id: (0, import_crypto2.randomUUID)(),
+        teamId,
+        platform: body.platform,
+        displayName: body.displayName,
+        username: body.username || null,
+        avatar: null,
+        isActive: true,
+        credentials: encryptCredentials(body.credentials),
+        settings: JSON.stringify(body.settings || {}),
+        lastSync: null,
+        createdAt: now,
+        updatedAt: now
+      };
+      await db.insert(socialAccounts).values(newAccount);
+      const response = {
+        id: newAccount.id,
+        platform: newAccount.platform,
+        displayName: newAccount.displayName,
+        username: newAccount.username || void 0,
+        isActive: newAccount.isActive,
+        settings: JSON.parse(newAccount.settings),
+        createdAt: newAccount.createdAt,
+        updatedAt: newAccount.updatedAt
+      };
+      return { status: 201, data: response };
+    } catch (error) {
+      return apiError(500, "DATABASE_ERROR", error?.message || "Unknown error");
+    }
+  }
+  return apiError(501, "NOT_IMPLEMENTED", `No handler for ${req.method} ${req.path}`);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  handleRequest
+});

package/dist/tabs/accounts.js

@@ -4,6 +4,9 @@
     const R = window.React;
     if (!R) return;
     const h = R.createElement;
+    const useEffect = R.useEffect;
+    const useMemo = R.useMemo;
+    const useState = R.useState;
     const t = {
       text: { color: "var(--ck-text-primary)" },
       muted: { color: "var(--ck-text-secondary)" },
@@ -14,48 +17,406 @@
         borderRadius: "10px",
         padding: "1rem"
       },
-      platformBtn: {
+      input: {
         background: "rgba(255,255,255,0.03)",
         border: "1px solid var(--ck-border-subtle)",
         borderRadius: "10px",
+        padding: "0.6rem 0.75rem",
+        color: "var(--ck-text-primary)",
+        width: "100%"
+      },
+      btnPrimary: {
+        background: "var(--ck-accent-red)",
+        border: "1px solid rgba(255,255,255,0.08)",
+        borderRadius: "10px",
+        padding: "0.5rem 0.75rem",
+        color: "white",
+        fontWeight: 700,
         cursor: "pointer",
-        transition: "border-color 0.15s, background 0.15s",
-        padding: "1rem",
-        textAlign: "center"
-      }
+        fontSize: "0.8rem"
+      },
+      btnGhost: {
+        background: "rgba(255,255,255,0.03)",
+        border: "1px solid var(--ck-border-subtle)",
+        borderRadius: "10px",
+        padding: "0.5rem 0.75rem",
+        color: "var(--ck-text-primary)",
+        fontWeight: 600,
+        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 platforms = [
-      { icon: "\u{1D54F}", name: "Twitter / X" },
-      { icon: "\u{1F4F7}", name: "Instagram" },
-      { icon: "\u{1F3AC}", name: "YouTube" },
-      { icon: "\u{1F4BC}", name: "LinkedIn" }
-    ];
-    function Accounts() {
+    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 [providers, setProviders] = 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 [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 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();
+          setProviders(Array.isArray(json.providers) ? json.providers : []);
+        } catch (e) {
+          setError(e?.message || "Failed to detect providers");
+        } finally {
+          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 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: 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");
+        } 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 },
-          h("div", { className: "text-sm font-medium mb-3", style: t.text }, "Connect Account"),
           h(
             "div",
-            { style: { display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: "0.5rem" } },
-            ...platforms.map(
-              (p) => h(
+            { className: "flex items-start justify-between gap-2" },
+            h(
+              "div",
+              null,
+              h("div", { className: "text-sm font-medium", style: t.text }, "Connected Accounts"),
+              h(
                 "div",
-                { key: p.name, style: t.platformBtn },
-                h("div", { className: "text-xl mb-1" }, p.icon),
-                h("div", { className: "text-xs font-medium", style: t.text }, p.name)
+                { className: "mt-1 text-xs", style: t.faint },
+                `${allProviders.length} provider${allProviders.length !== 1 ? "s" : ""} detected`
               )
+            ),
+            h(
+              "div",
+              { 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-xs", style: { color: "rgba(248,113,113,0.95)" } }, error)
+        ),
+        // ---- Postiz setup ----
+        showPostizSetup && h(
+          "div",
+          { style: t.card },
+          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")
           )
         ),
-        h(
+        // ---- Manual account form ----
+        showManual && h(
           "div",
           { style: t.card },
-          h("div", { className: "text-sm font-medium mb-2", style: t.text }, "Connected Accounts"),
-          h("div", { className: "py-6 text-center text-sm", style: t.faint }, "No accounts connected yet.")
+          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" },
+            h(
+              "div",
+              null,
+              h("div", { className: "text-xs font-medium mb-1", style: t.faint }, "Platform"),
+              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")
+              )
+            ),
+            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(
+              "div",
+              null,
+              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"),
+              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: () => setShowManual(false), style: t.btnGhost }, "Cancel"),
+            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(
+          "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."
+            )
+          )
+        ),
+        !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",
+                  { 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",
+                    { 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
+                  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

@@ -4,6 +4,10 @@
     const R = window.React;
     if (!R) return;
     const h = R.createElement;
+    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)" },
@@ -13,31 +17,331 @@
         border: "1px solid var(--ck-border-subtle)",
         borderRadius: "10px",
         padding: "1rem"
+      },
+      input: {
+        background: "rgba(255,255,255,0.03)",
+        border: "1px solid var(--ck-border-subtle)",
+        borderRadius: "10px",
+        padding: "0.6rem 0.75rem",
+        color: "var(--ck-text-primary)",
+        width: "100%"
+      },
+      btnPrimary: {
+        background: "var(--ck-accent-red)",
+        border: "1px solid rgba(255,255,255,0.08)",
+        borderRadius: "10px",
+        padding: "0.6rem 0.85rem",
+        color: "white",
+        fontWeight: 700,
+        cursor: "pointer"
+      },
+      btnGhost: {
+        background: "rgba(255,255,255,0.03)",
+        border: "1px solid var(--ck-border-subtle)",
+        borderRadius: "10px",
+        padding: "0.6rem 0.85rem",
+        color: "var(--ck-text-primary)",
+        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)"}`,
+        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"
+      }),
+      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() {
+    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 [selectedProviders, setSelectedProviders] = useState([]);
+      const [scheduledAt, setScheduledAt] = useState("");
+      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`);
+          const json = await res.json();
+          setPosts(Array.isArray(json.data) ? json.data : []);
+        } 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(() => {
+        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 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 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", ...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})`);
+            }
+          }
+          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("");
+          setSelectedProviders([]);
+          await loadPosts();
+        } catch (e) {
+          setError(e?.message || "Publish failed");
+        } finally {
+          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-2", style: t.text }, "Create New Post"),
-          h("div", { className: "text-sm", style: t.muted }, "Your content creation tools will live here:"),
+          h("div", { className: "text-sm font-medium mb-3", style: t.text }, "Compose"),
           h(
-            "ul",
-            { className: "text-sm mt-2 space-y-1", style: { ...t.muted, listStyle: "disc inside", paddingLeft: "0.5rem" } },
-            h("li", null, "Rich text editor with media embedding"),
-            h("li", null, "Multi-platform publishing (Twitter, Instagram, LinkedIn)"),
-            h("li", null, "Scheduling & auto-posting"),
-            h("li", null, "Template library for quick starts")
+            "div",
+            { className: "space-y-3" },
+            h("textarea", {
+              value: content,
+              onChange: (e) => setContent(e.target.value),
+              placeholder: "Write your post\u2026",
+              rows: 5,
+              style: { ...t.input, resize: "vertical", minHeight: "110px" }
+            }),
+            // Provider selector
+            providers.length > 0 && h(
+              "div",
+              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" },
+              h(
+                "div",
+                null,
+                h("div", { className: "text-xs font-medium mb-1", style: t.faint }, "Schedule (optional)"),
+                h("input", {
+                  type: "datetime-local",
+                  value: scheduledAt,
+                  onChange: (e) => setScheduledAt(e.target.value),
+                  style: t.input
+                })
+              ),
+              h(
+                "div",
+                { 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 onSaveDraft(),
+                style: { ...t.btnGhost, opacity: saving ? 0.7 : 1 },
+                disabled: saving || !content.trim()
+              }, saving ? "Saving\u2026" : "Save draft"),
+              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-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 }, "Recent Posts"),
-          h("div", { className: "py-6 text-center text-sm", style: t.faint }, "No posts yet \u2014 create your first post to get started.")
+          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" },
+            ...posts.map(
+              (p) => h(
+                "div",
+                { key: p.id, style: { ...t.card, padding: "0.75rem" } },
+                h(
+                  "div",
+                  { className: "flex items-center justify-between gap-2" },
+                  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),
+                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))
+                )
+              )
+            )
+          )
         )
       );
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jiggai/kitchen-plugin-marketing",
-  "version": "0.2.5",
+  "version": "0.2.7",
   "description": "Marketing Suite plugin for ClawKitchen",
   "main": "dist/index.js",
   "files": [
@@ -45,7 +45,7 @@
         "bundle": "./dist/tabs/accounts.js"
       }
     ],
-    "apiRoutes": "./dist/api/routes.js",
+    "apiRoutes": "./dist/api/handler.js",
     "migrations": "./db/migrations"
   },
   "scripts": {