Add agency multi-account workspaces (#25)

Author: im-anishraj

README.md

@@ -37,6 +37,7 @@ Most tools in this market are broad chatbot platforms. CampaignCue is intentiona
 - Public campaign template library.
 - Tracked redirect links with click, CTR, and keyword analytics.
 - Shareable read-only client report pages.
+- Agency-ready multi-account workspaces with member roles and invite links.
 - Production deployment docs for Vercel, Railway, Postgres, and Redis.
 
 ## Demo
@@ -157,7 +158,7 @@ The public launch roadmap is tracked in GitHub issues:
 - [#9 Public campaign templates](https://github.com/im-anishraj/instagram-comment-to-dm/issues/9) - done
 - [#10 Tracked links and analytics](https://github.com/im-anishraj/instagram-comment-to-dm/issues/10) - done
 - [#11 Shareable client reports](https://github.com/im-anishraj/instagram-comment-to-dm/issues/11) - done
-- [#12 Agency multi-account support](https://github.com/im-anishraj/instagram-comment-to-dm/issues/12)
+- [#12 Agency multi-account support](https://github.com/im-anishraj/instagram-comment-to-dm/issues/12) - done
 - [#13 Founding agency offer and referrals](https://github.com/im-anishraj/instagram-comment-to-dm/issues/13)
 - [#14 SEO landing pages](https://github.com/im-anishraj/instagram-comment-to-dm/issues/14)
 

ROADMAP.md

@@ -8,7 +8,7 @@ This roadmap is optimized for three goals:
 
 ## Phase 0: Foundation
 
-Status: merged through issue [#11](https://github.com/im-anishraj/instagram-comment-to-dm/issues/11).
+Status: merged through issue [#12](https://github.com/im-anishraj/instagram-comment-to-dm/issues/12).
 
 - Email magic-link auth.
 - Workspace tenancy.
@@ -70,7 +70,7 @@ Planned work:
 
 Issues:
 
-- [#12 Agency multi-account support](https://github.com/im-anishraj/instagram-comment-to-dm/issues/12)
+- [#12 Agency multi-account support](https://github.com/im-anishraj/instagram-comment-to-dm/issues/12) - done
 - [#13 Founding agency offer and referrals](https://github.com/im-anishraj/instagram-comment-to-dm/issues/13)
 
 Planned work:

__tests__/agency-workspaces.test.ts

@@ -0,0 +1,115 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+const { mockPrisma } = vi.hoisted(() => ({
+  mockPrisma: {
+    instagramAccount: {
+      count: vi.fn(),
+      findUnique: vi.fn(),
+      findFirst: vi.fn(),
+    },
+  },
+}));
+
+vi.mock("@/lib/db/client", () => ({
+  prisma: mockPrisma,
+}));
+
+import {
+  canConnectInstagramAccount,
+  getInstagramAccountLimit,
+  getWorkspaceInstagramAccount,
+} from "../lib/instagram-accounts";
+import {
+  buildInvitationUrl,
+  normalizeInvitationEmail,
+} from "../lib/workspace-invitations";
+
+beforeEach(() => {
+  vi.clearAllMocks();
+});
+
+describe("agency workspace helpers", () => {
+  it("applies account limits from the effective plan", () => {
+    expect(getInstagramAccountLimit("FREE", "NONE")).toBe(1);
+    expect(getInstagramAccountLimit("AGENCY", "ACTIVE")).toBe(10);
+    expect(getInstagramAccountLimit("AGENCY", "PAST_DUE")).toBe(1);
+  });
+
+  it("allows reconnecting an account already owned by the workspace", async () => {
+    mockPrisma.instagramAccount.findUnique.mockResolvedValue({
+      workspaceId: "workspace_123",
+    });
+
+    await expect(
+      canConnectInstagramAccount({
+        workspaceId: "workspace_123",
+        plan: "FREE",
+        subscriptionStatus: "NONE",
+        instagramId: "ig_123",
+      })
+    ).resolves.toMatchObject({ allowed: true, reason: null, limit: 1 });
+    expect(mockPrisma.instagramAccount.count).not.toHaveBeenCalled();
+  });
+
+  it("blocks accounts already connected to another workspace", async () => {
+    mockPrisma.instagramAccount.findUnique.mockResolvedValue({
+      workspaceId: "workspace_other",
+    });
+
+    await expect(
+      canConnectInstagramAccount({
+        workspaceId: "workspace_123",
+        plan: "AGENCY",
+        subscriptionStatus: "ACTIVE",
+        instagramId: "ig_123",
+      })
+    ).resolves.toMatchObject({
+      allowed: false,
+      reason: "already_connected",
+      limit: 10,
+    });
+  });
+
+  it("blocks new account connections when the plan account limit is reached", async () => {
+    mockPrisma.instagramAccount.findUnique.mockResolvedValue(null);
+    mockPrisma.instagramAccount.count.mockResolvedValue(1);
+
+    await expect(
+      canConnectInstagramAccount({
+        workspaceId: "workspace_123",
+        plan: "PRO",
+        subscriptionStatus: "ACTIVE",
+        instagramId: "ig_123",
+      })
+    ).resolves.toMatchObject({
+      allowed: false,
+      reason: "plan_limit",
+      limit: 1,
+    });
+  });
+
+  it("selects a requested workspace account or falls back to the latest account", async () => {
+    mockPrisma.instagramAccount.findFirst.mockResolvedValue({ id: "account_1" });
+
+    await getWorkspaceInstagramAccount("workspace_123", "account_1");
+    expect(mockPrisma.instagramAccount.findFirst).toHaveBeenCalledWith({
+      where: { id: "account_1", workspaceId: "workspace_123" },
+    });
+
+    await getWorkspaceInstagramAccount("workspace_123", "all");
+    expect(mockPrisma.instagramAccount.findFirst).toHaveBeenLastCalledWith({
+      where: { workspaceId: "workspace_123" },
+      orderBy: { connectedAt: "desc" },
+    });
+  });
+
+  it("normalizes invitation emails and builds invite URLs", () => {
+    expect(normalizeInvitationEmail(" Team@Agency.COM ")).toBe(
+      "team@agency.com"
+    );
+    expect(buildInvitationUrl("token_123", "https://campaigncue.com/")).toBe(
+      "https://campaigncue.com/invite/token_123"
+    );
+  });
+});
+

__tests__/billing.test.ts

@@ -29,8 +29,13 @@ describe("billing plan helpers", () => {
     expect(PLAN_LIMITS.FREE).toEqual({
       maxAutomations: 1,
       maxDMsPerMonth: 100,
+      maxInstagramAccounts: 1,
+      maxWorkspaceMembers: 1,
     });
     expect(PLAN_LIMITS.PRO.maxAutomations).toBe(10);
+    expect(PLAN_LIMITS.PRO.maxInstagramAccounts).toBe(1);
+    expect(PLAN_LIMITS.AGENCY.maxInstagramAccounts).toBe(10);
+    expect(PLAN_LIMITS.AGENCY.maxWorkspaceMembers).toBe(10);
     expect(PLAN_LIMITS.AGENCY.maxDMsPerMonth).toBe(10000);
   });
 });

app/(dashboard)/campaigns/new/page.tsx

@@ -8,6 +8,7 @@
 
 import { useEffect, useState } from "react";
 import { useRouter, useSearchParams } from "next/navigation";
+import AccountSelect, { type AccountOption } from "@/components/account-select";
 import KeywordInput from "@/components/keyword-input";
 import PostPicker from "@/components/post-picker";
 import { getCampaignTemplate } from "@/lib/templates/campaign-templates";
@@ -28,7 +29,8 @@ export default function NewCampaignPage() {
 
   const [name, setName] = useState(selectedTemplate?.title ?? "");
   const [goal, setGoal] = useState(selectedTemplate?.goal ?? "");
-  const [accountUsername, setAccountUsername] = useState<string | null>(null);
+  const [accounts, setAccounts] = useState<AccountOption[]>([]);
+  const [selectedAccountId, setSelectedAccountId] = useState("");
   const [postId, setPostId] = useState<string | null>(null);
   const [postUrl, setPostUrl] = useState<string | undefined>();
   const [keywords, setKeywords] = useState<string[]>(
@@ -53,12 +55,27 @@ export default function NewCampaignPage() {
       .then((res) => res.json())
       .then((payload) => {
         if (payload.success) {
-          setAccountUsername(payload.data.instagramAccount?.username ?? null);
+          const nextAccounts = payload.data.instagramAccounts ?? [];
+          setAccounts(nextAccounts);
+          setSelectedAccountId(
+            payload.data.selectedInstagramAccountId ??
+              nextAccounts[0]?.id ??
+              ""
+          );
         }
       })
-      .catch(() => setAccountUsername(null));
+      .catch(() => {
+        setAccounts([]);
+        setSelectedAccountId("");
+      });
   }, []);
 
+  function handleAccountChange(accountId: string) {
+    setSelectedAccountId(accountId);
+    setPostId(null);
+    setPostUrl(undefined);
+  }
+
   async function handleSubmit(e: React.FormEvent) {
     e.preventDefault();
     if (!name || !goal || !postId || keywords.length === 0 || !dmMessage) {
@@ -76,6 +93,7 @@ export default function NewCampaignPage() {
         body: JSON.stringify({
           name,
           goal,
+          instagramAccountId: selectedAccountId,
           postId,
           postUrl: postUrl ?? null,
           keywords,
@@ -159,12 +177,22 @@ export default function NewCampaignPage() {
 
         {/* Instagram Account */}
         <div className="space-y-2">
-          <label className="block text-sm font-medium text-foreground">
+          <p className="block text-sm font-medium text-foreground">
             Instagram Account <span className="text-error">*</span>
-          </label>
-          <div className="rounded-xl border border-border bg-surface px-4 py-3 text-sm text-foreground">
-            {accountUsername ? `@${accountUsername}` : "Connect Instagram before launching a campaign"}
-          </div>
+          </p>
+          {accounts.length > 0 ? (
+            <AccountSelect
+              accounts={accounts}
+              value={selectedAccountId}
+              onChange={handleAccountChange}
+              includeAll={false}
+              label="Connected profile"
+            />
+          ) : (
+            <div className="rounded-xl border border-border bg-surface px-4 py-3 text-sm text-foreground">
+              Connect Instagram before launching a campaign
+            </div>
+          )}
         </div>
 
         {/* Post Picker */}
@@ -178,6 +206,7 @@ export default function NewCampaignPage() {
           <div className="glass rounded-xl p-4">
             <PostPicker
               selectedPostId={postId}
+              instagramAccountId={selectedAccountId}
               onSelect={(id, url) => {
                 setPostId(id);
                 setPostUrl(url);

app/(dashboard)/campaigns/page.tsx

@@ -8,6 +8,7 @@
 
 import { useCallback, useEffect, useState } from "react";
 import Link from "next/link";
+import AccountSelect, { type AccountOption } from "@/components/account-select";
 
 interface Campaign {
   id: string;
@@ -19,6 +20,10 @@ interface Campaign {
   dmMessage: string;
   isActive: boolean;
   wholeWordMatch: boolean;
+  instagramAccount: {
+    username: string;
+    instagramId: string;
+  };
   reportShareSlug: string | null;
   reportShareEnabled: boolean;
   reportUrl: string | null;
@@ -43,18 +48,33 @@ interface Campaign {
 
 export default function CampaignsPage() {
   const [automations, setAutomations] = useState<Campaign[]>([]);
+  const [accounts, setAccounts] = useState<AccountOption[]>([]);
+  const [selectedAccountId, setSelectedAccountId] = useState("all");
   const [loading, setLoading] = useState(true);
 
   const fetchAutomations = useCallback(async () => {
     try {
-      const res = await fetch("/api/automations");
+      const params = new URLSearchParams();
+      if (selectedAccountId !== "all") {
+        params.set("instagramAccountId", selectedAccountId);
+      }
+      const res = await fetch(`/api/automations${params.size ? `?${params}` : ""}`);
       const data = await res.json();
       if (data.success) setAutomations(data.data);
     } catch (err) {
       console.error("Failed to fetch campaigns:", err);
     } finally {
       setLoading(false);
     }
+  }, [selectedAccountId]);
+
+  useEffect(() => {
+    fetch("/api/dashboard/stats")
+      .then((res) => res.json())
+      .then((payload) => {
+        if (payload.success) setAccounts(payload.data.instagramAccounts ?? []);
+      })
+      .catch(console.error);
   }, []);
 
   useEffect(() => {
@@ -64,6 +84,11 @@ export default function CampaignsPage() {
     return () => window.clearTimeout(timer);
   }, [fetchAutomations]);
 
+  function handleAccountChange(accountId: string) {
+    setLoading(true);
+    setSelectedAccountId(accountId);
+  }
+
   async function toggleActive(id: string, isActive: boolean) {
     try {
       await fetch(`/api/automations?id=${id}`, {
@@ -121,21 +146,30 @@ export default function CampaignsPage() {
   return (
     <div className="space-y-6">
       {/* Header */}
-      <div className="flex items-center justify-between">
+      <div className="flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
         <div>
           <p className="text-sm text-muted">
             {automations.length} campaign{automations.length !== 1 ? "s" : ""}
           </p>
         </div>
-        <Link
-          href="/campaigns/new"
-          className="inline-flex items-center gap-2 px-4 py-2.5 rounded-xl bg-gradient-to-r from-indigo-500 to-violet-500 text-sm font-semibold text-white shadow-lg shadow-indigo-500/20 hover:shadow-xl hover:shadow-indigo-500/30 hover:scale-[1.02] active:scale-[0.98] transition-all"
-        >
-          <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor">
-            <path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
-          </svg>
-          New Campaign
-        </Link>
+        <div className="flex flex-col gap-3 sm:flex-row sm:items-end">
+          {accounts.length > 1 && (
+            <AccountSelect
+              accounts={accounts}
+              value={selectedAccountId}
+              onChange={handleAccountChange}
+            />
+          )}
+          <Link
+            href="/campaigns/new"
+            className="inline-flex items-center gap-2 px-4 py-2.5 rounded-xl bg-gradient-to-r from-indigo-500 to-violet-500 text-sm font-semibold text-white shadow-lg shadow-indigo-500/20 hover:shadow-xl hover:shadow-indigo-500/30 hover:scale-[1.02] active:scale-[0.98] transition-all"
+          >
+            <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
+            </svg>
+            New Campaign
+          </Link>
+        </div>
       </div>
 
       {/* Empty state */}
@@ -167,6 +201,9 @@ export default function CampaignsPage() {
               <div className="flex-1 min-w-0">
                 <div className="flex items-center gap-3 mb-3">
                   <h3 className="text-base font-semibold truncate">{auto.name}</h3>
+                  <span className="shrink-0 rounded-full border border-border px-2 py-0.5 text-xs text-muted">
+                    @{auto.instagramAccount.username}
+                  </span>
                   <span
                     className={`text-xs px-2 py-0.5 rounded-full font-medium ${
                       auto.isActive