@jiggai/kitchen-plugin-marketing 0.2.4 → 0.2.6

package/dist/api/handler.js

@@ -0,0 +1,377 @@
+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";
+}
+async function handleRequest(req, _ctx) {
+  const teamId = getTeamId(req);
+  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,75 +4,219 @@
     const R = window.React;
     if (!R) return;
     const h = R.createElement;
-    const theme = {
+    const useEffect = R.useEffect;
+    const useMemo = R.useMemo;
+    const useState = R.useState;
+    const t = {
       text: { color: "var(--ck-text-primary)" },
-      textMuted: { color: "var(--ck-text-secondary)" },
-      textFaint: { color: "var(--ck-text-tertiary)" },
+      muted: { color: "var(--ck-text-secondary)" },
+      faint: { color: "var(--ck-text-tertiary)" },
       card: {
-        background: "var(--ck-bg-glass)",
+        background: "rgba(255,255,255,0.03)",
         border: "1px solid var(--ck-border-subtle)",
-        borderRadius: "14px",
-        backdropFilter: "blur(18px) saturate(1.25)"
+        borderRadius: "10px",
+        padding: "1rem"
       },
-      banner: {
-        background: "var(--ck-bg-glass)",
-        border: "1px solid rgba(237,199,80,0.25)",
-        borderRadius: "14px",
-        color: "rgba(237,199,80,0.9)",
-        backdropFilter: "blur(18px)"
+      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"
       },
-      platformBtn: {
-        background: "var(--ck-bg-glass)",
+      btnGhost: {
+        background: "rgba(255,255,255,0.03)",
         border: "1px solid var(--ck-border-subtle)",
-        borderRadius: "12px",
-        cursor: "pointer",
-        backdropFilter: "blur(18px)",
-        transition: "border-color 0.15s, background 0.15s"
+        borderRadius: "10px",
+        padding: "0.6rem 0.85rem",
+        color: "var(--ck-text-primary)",
+        fontWeight: 600,
+        cursor: "pointer"
       }
     };
-    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() {
+    function Accounts(props) {
+      const teamId = String(props?.teamId || "default");
+      const apiBase = useMemo(() => `/api/plugins/marketing`, []);
+      const [accounts, setAccounts] = 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 [error, setError] = useState(null);
+      const refresh = async () => {
+        setLoading(true);
+        setError(null);
+        try {
+          const res = await fetch(`${apiBase}/accounts?team=${encodeURIComponent(teamId)}`);
+          const json = await res.json();
+          setAccounts(Array.isArray(json.accounts) ? json.accounts : []);
+        } catch (e) {
+          setError(e?.message || "Failed to load accounts");
+        } finally {
+          setLoading(false);
+        }
+      };
+      useEffect(() => {
+        void refresh();
+      }, [teamId]);
+      const onConnect = 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();
+        } catch (e) {
+          setError(e?.message || "Failed to connect account");
+        } finally {
+          setSaving(false);
+        }
+      };
       return h(
         "div",
-        { className: "p-8 max-w-5xl mx-auto" },
-        h("h2", { className: "text-2xl font-bold mb-6", style: theme.text }, "Social Media Accounts"),
-        h("div", { className: "p-4 mb-6 text-sm", style: theme.banner }, "\u{1F517} Connect and manage your social media accounts"),
+        { className: "space-y-3" },
         h(
           "div",
-          { className: "p-6 mb-4", style: theme.card },
-          h("h3", { className: "text-lg font-semibold mb-4", style: theme.text }, "Add New Account"),
+          { style: t.card },
           h(
             "div",
-            { className: "grid grid-cols-4 gap-3" },
-            ...platforms.map(
-              (p) => h(
-                "div",
+            { className: "flex items-start justify-between gap-2" },
+            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: "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")
+            )
+          ),
+          error ? h("div", { className: "mt-2 text-sm", style: { color: "rgba(248,113,113,0.95)" } }, error) : null
+        ),
+        open ? h(
+          "div",
+          { style: t.card },
+          h("div", { className: "text-sm font-medium mb-3", style: t.text }, "Connect account"),
+          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",
                 {
-                  key: p.name,
-                  className: "p-5 text-center",
-                  style: theme.platformBtn
+                  value: platform,
+                  onChange: (e) => setPlatform(e.target.value),
+                  style: t.input
                 },
-                h("div", { className: "text-2xl mb-2" }, p.icon),
-                h("div", { className: "text-sm font-medium", style: theme.text }, p.name)
+                h("option", { value: "twitter" }, "Twitter / X"),
+                h("option", { value: "instagram" }, "Instagram"),
+                h("option", { value: "linkedin" }, "LinkedIn")
               )
+            ),
+            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(
+              "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",
+              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: "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")
           )
-        ),
+        ) : null,
         h(
           "div",
-          { className: "p-6", style: theme.card },
-          h("h3", { className: "text-lg font-semibold mb-3", style: theme.text }, "Connected Accounts"),
-          h(
+          { 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(
             "div",
-            { className: "text-center py-8" },
-            h("div", { className: "text-4xl mb-3 opacity-60" }, "\u{1F50C}"),
-            h("p", { className: "text-sm", style: theme.textMuted }, "No accounts connected yet"),
-            h("p", { className: "text-xs mt-1", style: theme.textFaint }, "Click a platform above to get started")
+            { className: "space-y-2" },
+            ...accounts.map(
+              (a) => h(
+                "div",
+                { key: a.id, style: { ...t.card, padding: "0.75rem" } },
+                h(
+                  "div",
+                  { className: "flex items-center justify-between gap-2" },
+                  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}` : ""}`)
+                  ),
+                  h("div", { className: "text-xs", style: a.isActive ? t.muted : t.faint }, a.isActive ? "active" : "disabled")
+                )
+              )
+            )
           )
         )
       );

package/dist/tabs/analytics.js

@@ -4,32 +4,17 @@
     const R = window.React;
     if (!R) return;
     const h = R.createElement;
-    const theme = {
+    const t = {
       text: { color: "var(--ck-text-primary)" },
-      textMuted: { color: "var(--ck-text-secondary)" },
-      textFaint: { color: "var(--ck-text-tertiary)" },
+      muted: { color: "var(--ck-text-secondary)" },
+      faint: { color: "var(--ck-text-tertiary)" },
       card: {
-        background: "var(--ck-bg-glass)",
+        background: "rgba(255,255,255,0.03)",
         border: "1px solid var(--ck-border-subtle)",
-        borderRadius: "14px",
-        backdropFilter: "blur(18px) saturate(1.25)"
-      },
-      banner: {
-        background: "var(--ck-bg-glass)",
-        border: "1px solid rgba(183,148,244,0.25)",
-        borderRadius: "14px",
-        color: "rgba(183,148,244,0.9)",
-        backdropFilter: "blur(18px)"
-      },
-      statLabel: { color: "var(--ck-text-tertiary)", fontSize: "0.75rem", textTransform: "uppercase", letterSpacing: "0.05em" },
-      chartPlaceholder: {
-        border: "1px dashed var(--ck-border-subtle)",
         borderRadius: "10px",
-        height: "16rem",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center"
-      }
+        padding: "1rem"
+      },
+      statLabel: { color: "var(--ck-text-tertiary)", fontSize: "0.75rem", textTransform: "uppercase", letterSpacing: "0.05em" }
     };
     const stats = [
       { label: "Total Posts", value: "0", color: "rgba(99,179,237,0.9)" },
@@ -39,36 +24,27 @@
     function Analytics() {
       return h(
         "div",
-        { className: "p-8 max-w-4xl mx-auto" },
-        h("h2", { className: "text-2xl font-bold mb-6", style: theme.text }, "Analytics"),
-        h("div", { className: "p-4 mb-6 text-sm", style: theme.banner }, "\u{1F4CA} Track your content performance across platforms"),
+        { className: "space-y-3" },
         h(
           "div",
-          { className: "grid grid-cols-3 gap-4 mb-6" },
+          { className: "grid grid-cols-3 gap-3" },
           ...stats.map(
             (s) => h(
               "div",
-              { key: s.label, className: "p-5 text-center", style: theme.card },
-              h("div", { className: "text-3xl font-bold mb-1", style: { color: s.color } }, s.value),
-              h("div", { style: theme.statLabel }, s.label)
+              { key: s.label, className: "text-center p-3", style: t.card },
+              h("div", { className: "text-2xl font-bold mb-1", style: { color: s.color } }, s.value),
+              h("div", { style: t.statLabel }, s.label)
             )
           )
         ),
         h(
           "div",
-          { className: "p-6", style: theme.card },
-          h("h3", { className: "text-lg font-semibold mb-4", style: theme.text }, "Engagement Over Time"),
-          h(
-            "div",
-            { style: theme.chartPlaceholder },
-            h(
-              "div",
-              { className: "text-center" },
-              h("div", { className: "text-4xl mb-3 opacity-60" }, "\u{1F4C8}"),
-              h("p", { className: "text-sm", style: theme.textMuted }, "Your engagement chart will appear here"),
-              h("p", { className: "text-xs mt-1", style: theme.textFaint }, "Start publishing content to see analytics")
-            )
-          )
+          { style: t.card },
+          h("div", { className: "text-sm font-medium mb-3", style: t.text }, "Engagement Over Time"),
+          h("div", {
+            className: "flex items-center justify-center py-8 text-sm",
+            style: { ...t.faint, border: "1px dashed var(--ck-border-subtle)", borderRadius: "8px" }
+          }, "Start publishing content to see analytics")
         )
       );
     }

package/dist/tabs/content-calendar.js

@@ -4,50 +4,34 @@
     const R = window.React;
     if (!R) return;
     const h = R.createElement;
-    const theme = {
+    const t = {
       text: { color: "var(--ck-text-primary)" },
-      textMuted: { color: "var(--ck-text-secondary)" },
-      textFaint: { color: "var(--ck-text-tertiary)" },
+      muted: { color: "var(--ck-text-secondary)" },
+      faint: { color: "var(--ck-text-tertiary)" },
       card: {
-        background: "var(--ck-bg-glass)",
+        background: "rgba(255,255,255,0.03)",
         border: "1px solid var(--ck-border-subtle)",
-        borderRadius: "14px",
-        backdropFilter: "blur(18px) saturate(1.25)"
-      },
-      banner: {
-        background: "var(--ck-bg-glass)",
-        border: "1px solid rgba(72,187,120,0.25)",
-        borderRadius: "14px",
-        color: "rgba(72,187,120,0.9)",
-        backdropFilter: "blur(18px)"
-      },
-      dayHeader: { color: "var(--ck-text-tertiary)", fontSize: "0.75rem", textTransform: "uppercase", letterSpacing: "0.05em" },
-      cell: {
-        border: "1px solid var(--ck-border-subtle)",
-        borderRadius: "8px",
-        minHeight: "5rem",
-        background: "rgba(255,255,255,0.02)"
-      },
-      cellEmpty: {
-        border: "1px solid transparent",
-        borderRadius: "8px",
-        minHeight: "5rem",
-        opacity: 0.2
+        borderRadius: "10px",
+        padding: "1rem"
       },
+      dayHeader: { color: "var(--ck-text-tertiary)", fontSize: "0.75rem", textTransform: "uppercase", letterSpacing: "0.05em", fontWeight: 600 },
+      cell: { border: "1px solid var(--ck-border-subtle)", borderRadius: "6px", minHeight: "4rem", padding: "0.35rem 0.5rem" },
+      cellEmpty: { minHeight: "4rem", opacity: 0.15 },
       dayNum: { color: "var(--ck-text-secondary)", fontSize: "0.8rem", fontWeight: 500 },
       todayBadge: {
         color: "rgba(99,179,237,1)",
         background: "rgba(99,179,237,0.15)",
         fontSize: "0.8rem",
         fontWeight: 700,
-        width: "1.6rem",
-        height: "1.6rem",
+        width: "1.5rem",
+        height: "1.5rem",
         borderRadius: "50%",
         display: "inline-flex",
         alignItems: "center",
         justifyContent: "center"
       }
     };
+    const grid7 = { display: "grid", gridTemplateColumns: "repeat(7,1fr)", gap: "3px" };
     const now = /* @__PURE__ */ new Date();
     const year = now.getFullYear();
     const month = now.getMonth();
@@ -61,35 +45,29 @@
       for (let i = 0; i < 42; i++) {
         const day = i - firstDay + 1;
         if (day < 1 || day > daysInMonth) {
-          cells.push(h("div", { key: i, style: theme.cellEmpty }));
+          cells.push(h("div", { key: i, style: t.cellEmpty }));
         } else {
           const isToday = day === today;
           cells.push(
             h(
               "div",
-              { key: i, className: "p-2", style: theme.cell },
-              h("span", { style: isToday ? theme.todayBadge : theme.dayNum }, day)
+              { key: i, style: t.cell },
+              h("span", { style: isToday ? t.todayBadge : t.dayNum }, day)
             )
           );
         }
       }
       return h(
         "div",
-        { className: "p-8 max-w-4xl mx-auto" },
-        h("h2", { className: "text-2xl font-bold mb-6", style: theme.text }, "Content Calendar"),
-        h("div", { className: "p-4 mb-6 text-sm", style: theme.banner }, "\u{1F4C5} Schedule and plan your content"),
+        { style: t.card },
+        h("div", { className: "text-sm font-medium mb-3", style: t.text }, monthName),
         h(
           "div",
-          { className: "p-6", style: theme.card },
-          h("div", { className: "text-center font-semibold text-lg mb-4", style: theme.text }, monthName),
-          h(
-            "div",
-            { style: { display: "grid", gridTemplateColumns: "repeat(7,1fr)", gap: "4px", marginBottom: "4px" } },
-            ...dayNames.map((d) => h("div", { key: d, className: "text-center py-2 font-semibold", style: theme.dayHeader }, d))
-          ),
-          h("div", { style: { display: "grid", gridTemplateColumns: "repeat(7,1fr)", gap: "4px" } }, ...cells),
-          h("p", { className: "text-xs mt-4", style: theme.textFaint }, "Scheduled posts will appear on their respective dates.")
-        )
+          { style: { ...grid7, marginBottom: "3px" } },
+          ...dayNames.map((d) => h("div", { key: d, className: "text-center py-1", style: t.dayHeader }, d))
+        ),
+        h("div", { style: grid7 }, ...cells),
+        h("div", { className: "mt-3 text-xs", style: t.faint }, "Scheduled posts will appear on their respective dates.")
       );
     }
     window.KitchenPlugin.registerTab("marketing", "content-calendar", ContentCalendar);

package/dist/tabs/content-library.js

@@ -4,57 +4,218 @@
     const R = window.React;
     if (!R) return;
     const h = R.createElement;
-    const theme = {
+    const useEffect = R.useEffect;
+    const useMemo = R.useMemo;
+    const useState = R.useState;
+    const t = {
       text: { color: "var(--ck-text-primary)" },
-      textMuted: { color: "var(--ck-text-secondary)" },
-      textFaint: { color: "var(--ck-text-tertiary)" },
+      muted: { color: "var(--ck-text-secondary)" },
+      faint: { color: "var(--ck-text-tertiary)" },
       card: {
-        background: "var(--ck-bg-glass)",
+        background: "rgba(255,255,255,0.03)",
         border: "1px solid var(--ck-border-subtle)",
-        borderRadius: "14px",
-        backdropFilter: "blur(18px) saturate(1.25)"
+        borderRadius: "10px",
+        padding: "1rem"
       },
-      banner: {
-        background: "var(--ck-bg-glass)",
-        border: "1px solid rgba(99,179,237,0.25)",
-        borderRadius: "14px",
-        color: "rgba(99,179,237,0.9)",
-        backdropFilter: "blur(18px)"
-      }
+      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"
+      },
+      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"
+      })
     };
-    function ContentLibrary() {
+    function ContentLibrary(props) {
+      const teamId = String(props?.teamId || "default");
+      const [posts, setPosts] = useState([]);
+      const [loading, setLoading] = useState(true);
+      const [saving, setSaving] = useState(false);
+      const [error, setError] = useState(null);
+      const [content, setContent] = useState("");
+      const [platforms, setPlatforms] = useState(["twitter"]);
+      const [scheduledAt, setScheduledAt] = useState("");
+      const status = useMemo(() => scheduledAt ? "scheduled" : "draft", [scheduledAt]);
+      const apiBase = useMemo(() => `/api/plugins/marketing`, []);
+      const refresh = async () => {
+        setLoading(true);
+        setError(null);
+        try {
+          const res = await fetch(`${apiBase}/posts?team=${encodeURIComponent(teamId)}&limit=25&offset=0`);
+          const json = await res.json();
+          setPosts(Array.isArray(json.data) ? json.data : []);
+        } catch (e) {
+          setError(e?.message || "Failed to load posts");
+        } finally {
+          setLoading(false);
+        }
+      };
+      useEffect(() => {
+        void refresh();
+      }, [teamId]);
+      const togglePlatform = (p) => {
+        setPlatforms((prev) => {
+          if (prev.includes(p)) return prev.filter((x) => x !== p);
+          return [...prev, p];
+        });
+      };
+      const onCreate = async () => {
+        setSaving(true);
+        setError(null);
+        try {
+          const res = await fetch(
+            `${apiBase}/posts?team=${encodeURIComponent(teamId)}`,
+            {
+              method: "POST",
+              headers: { "content-type": "application/json" },
+              body: JSON.stringify({
+                content,
+                platforms,
+                status,
+                scheduledAt: scheduledAt || void 0
+              })
+            }
+          );
+          if (!res.ok) {
+            const err = await res.json().catch(() => null);
+            throw new Error(err?.message || `Create failed (${res.status})`);
+          }
+          setContent("");
+          setScheduledAt("");
+          await refresh();
+        } catch (e) {
+          setError(e?.message || "Failed to create post");
+        } finally {
+          setSaving(false);
+        }
+      };
       return h(
         "div",
-        { className: "p-8 max-w-4xl mx-auto" },
-        h("h2", { className: "text-2xl font-bold mb-6", style: theme.text }, "Content Library"),
-        h("div", { className: "p-4 mb-6 text-sm", style: theme.banner }, "\u{1F389} Marketing Suite plugin is active! Manage your content from here."),
+        { className: "space-y-3" },
         h(
           "div",
-          { className: "flex flex-col gap-4" },
+          { style: t.card },
+          h("div", { className: "text-sm font-medium mb-3", style: t.text }, "New Post"),
           h(
             "div",
-            { className: "p-6", style: theme.card },
-            h("h3", { className: "text-lg font-semibold mb-3", style: theme.text }, "Create New Post"),
-            h("p", { className: "text-sm mb-2", style: theme.textMuted }, "Your content creation tools will live here:"),
+            { className: "space-y-2" },
+            h("textarea", {
+              value: content,
+              onChange: (e) => setContent(e.target.value),
+              placeholder: "Write your post\u2026",
+              rows: 5,
+              style: { ...t.input, resize: "vertical", minHeight: "110px" }
+            }),
             h(
-              "ul",
-              { className: "text-sm space-y-1", style: { ...theme.textMuted, 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")
-            )
-          ),
-          h(
-            "div",
-            { className: "p-6", style: theme.card },
-            h("h3", { className: "text-lg font-semibold mb-3", style: theme.text }, "Recent Posts"),
+              "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)
+              )
+            ),
+            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",
+                null,
+                h("div", { className: "text-xs font-medium mb-1", style: t.faint }, "Status"),
+                h("div", { className: "text-sm", style: t.muted }, status)
+              )
+            ),
             h(
               "div",
-              { className: "text-center py-8" },
-              h("div", { className: "text-4xl mb-3 opacity-60" }, "\u270D\uFE0F"),
-              h("p", { className: "text-sm", style: theme.textMuted }, "No posts yet"),
-              h("p", { className: "text-xs mt-1", style: theme.textFaint }, "Create your first post to get started")
+              { 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
+              }, saving ? "Saving\u2026" : "Save draft"),
+              h("div", { className: "text-xs", style: t.faint }, "Media embedding + templates next.")
+            ),
+            error ? h("div", {
+              className: "text-sm mt-2",
+              style: { color: "rgba(248,113,113,0.95)" }
+            }, error) : null
+          )
+        ),
+        h(
+          "div",
+          { style: t.card },
+          h("div", { className: "text-sm font-medium mb-2", style: t.text }, "Posts"),
+          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: "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: "mt-2 whitespace-pre-wrap text-sm", style: t.text }, p.content),
+                h(
+                  "div",
+                  { className: "mt-2 flex flex-wrap gap-2" },
+                  ...(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.4",
+  "version": "0.2.6",
   "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": {