-
-
- {log.creator_name}
-
- {log.creator_handle}
-
-
-
-
-
- {channelLabels[log.channel]}
-
- {log.subject && (
-
- {log.subject}
+ <>
+
+
+
+ {selectable && (
+
+
+ onSelectChange?.(checked === true)
+ }
+ />
+
+ )}
+
+ {/* Header */}
+
+
+
+ {log.creator_name}
+
+ {log.creator_handle}
- )}
+
+
+
+
+ {channelLabels[log.channel]}
+
+ {log.subject && (
+
+ {log.subject}
+
+ )}
+
+
+
+
+ {timeAgo(log.created_at)}
-
-
- {timeAgo(log.created_at)}
-
-
- {/* Message Preview */}
-
- {log.content}
-
+ {/* Message Preview */}
+
+ {log.content}
+
- {/* Actions */}
- {log.status === "Draft" && (
-
-
- {log.channel === "email" ? (
-
- ) : (
+ {/* Actions */}
+ {log.status === "Draft" && (
+
- )}
-
-
- )}
+ {log.channel === "email" ? (
+
+ ) : (
+
+ )}
+
+
+ )}
- {/* Sent status */}
- {log.status === "Sent" && log.sent_at && (
-
+ {/* Sent status */}
+ {log.status === "Sent" && log.sent_at && (
+
+
+ Sent
+
+
+ {new Date(log.sent_at).toLocaleDateString("en-US", {
+ month: "short",
+ day: "numeric",
+ hour: "numeric",
+ minute: "2-digit",
+ })}
+
+
+ )}
+
+ {log.status === "Replied" && (
- Sent
+ Replied
-
- {new Date(log.sent_at).toLocaleDateString("en-US", {
- month: "short",
- day: "numeric",
- hour: "numeric",
- minute: "2-digit",
- })}
-
-
- )}
-
- {log.status === "Replied" && (
-
- Replied
-
- )}
+ )}
- {log.status === "Failed" && (
-
- Failed
-
- )}
+ {log.status === "Failed" && (
+
+ Failed
+
+ )}
+
-
-
-
+
+
+
+ {/* DM Send Confirmation Dialog */}
+
+
+
+ Did you send the DM?
+
+ Confirm that you pasted and sent the message to{" "}
+ {log.creator_name} ({log.creator_handle}). This will mark the
+ outreach as sent and advance the pipeline.
+
+
+
+ Not yet
+
+ Yes, I sent it
+
+
+
+
+
)
}
diff --git a/apps/command-center/src/components/outreach-queue.tsx b/apps/command-center/src/components/outreach-queue.tsx
index 34a0f91..dd3f8b2 100644
--- a/apps/command-center/src/components/outreach-queue.tsx
+++ b/apps/command-center/src/components/outreach-queue.tsx
@@ -4,10 +4,34 @@ import { useState, useEffect, useCallback } from "react"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
+import { Card, CardContent } from "@/components/ui/card"
+import { Progress } from "@/components/ui/progress"
+import { Textarea } from "@/components/ui/textarea"
+import {
+ AlertDialog,
+ AlertDialogAction,
+ AlertDialogCancel,
+ AlertDialogContent,
+ AlertDialogDescription,
+ AlertDialogFooter,
+ AlertDialogHeader,
+ AlertDialogTitle,
+} from "@/components/ui/alert-dialog"
import { DraftCard } from "@/components/draft-card"
-import { Send, CheckCircle, Inbox, Loader2 } from "lucide-react"
+import {
+ Send,
+ CheckCircle,
+ Inbox,
+ Loader2,
+ ExternalLink,
+ SkipForward,
+ MessageSquare,
+ Clock,
+ Zap,
+} from "lucide-react"
import { toast } from "sonner"
-import type { OutreachLog } from "@/lib/types"
+import { openInstagramDM, openTikTokDM } from "@/lib/playwright-dm"
+import type { OutreachLog, RateLimitStatus } from "@/lib/types"
export function OutreachQueue() {
const [selectedDrafts, setSelectedDrafts] = useState
>(new Set())
@@ -15,25 +39,41 @@ export function OutreachQueue() {
const [sentToday, setSentToday] = useState([])
const [failed, setFailed] = useState([])
const [loading, setLoading] = useState(true)
+ const [gmailConnected, setGmailConnected] = useState(false)
+
+ // DM Focus Mode state
+ const [dmFocusIndex, setDmFocusIndex] = useState(0)
+ const [dmMessage, setDmMessage] = useState("")
+ const [showDmConfirm, setShowDmConfirm] = useState(false)
+ const [rateLimits, setRateLimits] = useState>({})
+
+ const dmDrafts = drafts.filter(
+ (d) => d.channel === "instagram" || d.channel === "tiktok" || d.channel === "twitter"
+ )
+ const emailDrafts = drafts.filter((d) => d.channel === "email")
+ const currentDm = dmDrafts[dmFocusIndex] || null
const fetchOutreach = useCallback(async () => {
setLoading(true)
try {
- const [draftsRes, sentRes, failedRes] = await Promise.all([
+ const [draftsRes, sentRes, failedRes, authRes] = await Promise.all([
fetch("/api/outreach?status=Draft"),
fetch("/api/outreach?status=Sent"),
fetch("/api/outreach?status=Failed"),
+ fetch("/api/auth/status"),
])
- const [draftsJson, sentJson, failedJson] = await Promise.all([
+ const [draftsJson, sentJson, failedJson, authJson] = await Promise.all([
draftsRes.json(),
sentRes.json(),
failedRes.json(),
+ authRes.json(),
])
setDrafts(draftsJson.data || [])
setSentToday(sentJson.data || [])
setFailed(failedJson.data || [])
+ setGmailConnected(authJson.gmail?.connected && authJson.gmail?.mode === "api")
} catch {
toast.error("Failed to load outreach queue")
} finally {
@@ -41,11 +81,29 @@ export function OutreachQueue() {
}
}, [])
+ // Fetch rate limits for DM platforms
+ const fetchRateLimits = useCallback(async () => {
+ try {
+ const [igRes, ttRes] = await Promise.all([
+ fetch("/api/outreach/check-rate?platform=instagram"),
+ fetch("/api/outreach/check-rate?platform=tiktok"),
+ ])
+ const [igData, ttData] = await Promise.all([igRes.json(), ttRes.json()])
+ setRateLimits({ instagram: igData, tiktok: ttData })
+ } catch {
+ // Silently fail — rate limits are informational
+ }
+ }, [])
+
useEffect(() => {
fetchOutreach()
- }, [fetchOutreach])
+ fetchRateLimits()
+ }, [fetchOutreach, fetchRateLimits])
- const emailDrafts = drafts.filter((d) => d.channel === "email")
+ // Update DM message when current DM changes
+ useEffect(() => {
+ if (currentDm) setDmMessage(currentDm.content)
+ }, [currentDm])
function toggleDraft(id: string, checked: boolean) {
setSelectedDrafts((prev) => {
@@ -69,6 +127,100 @@ export function OutreachQueue() {
fetchOutreach()
}
+ // DM Focus Mode: copy + open
+ const handleDmCopyAndOpen = async () => {
+ if (!currentDm) return
+
+ const platform = currentDm.channel
+ const limit = rateLimits[platform]
+ if (limit && !limit.allowed) {
+ toast.error(
+ `${platform} rate limit reached (${limit.dailySent}/${limit.dailyCap} today)`
+ )
+ return
+ }
+
+ await navigator.clipboard.writeText(dmMessage)
+
+ const handle = currentDm.creator_handle || ""
+ let profileUrl = ""
+ if (currentDm.channel === "instagram") {
+ profileUrl = openInstagramDM(handle, dmMessage).url
+ } else if (currentDm.channel === "tiktok") {
+ profileUrl = openTikTokDM(handle, dmMessage).url
+ } else {
+ profileUrl = `https://twitter.com/${handle.replace(/^@/, "")}`
+ }
+
+ window.open(profileUrl, "_blank")
+ toast.success("Message copied! Paste it in the DM window", { duration: 4000 })
+ setShowDmConfirm(true)
+ }
+
+ const handleDmConfirmSent = async () => {
+ if (!currentDm) return
+ setShowDmConfirm(false)
+
+ await fetch("/api/outreach/approve", {
+ method: "POST",
+ headers: { "Content-Type": "application/json" },
+ body: JSON.stringify({ outreach_id: currentDm.id, action: "send" }),
+ })
+
+ fetchRateLimits()
+
+ // Move to next DM
+ if (dmFocusIndex < dmDrafts.length - 1) {
+ setDmFocusIndex(dmFocusIndex + 1)
+ }
+ fetchOutreach()
+ }
+
+ const handleDmSkip = async () => {
+ if (!currentDm) return
+
+ await fetch("/api/outreach/approve", {
+ method: "POST",
+ headers: { "Content-Type": "application/json" },
+ body: JSON.stringify({ outreach_id: currentDm.id, action: "skip" }),
+ })
+
+ toast.info(`Skipped ${currentDm.creator_name}`)
+
+ if (dmFocusIndex < dmDrafts.length - 1) {
+ setDmFocusIndex(dmFocusIndex + 1)
+ }
+ fetchOutreach()
+ }
+
+ // Rate limit display
+ const RateLimitBadge = ({ platform }: { platform: string }) => {
+ const limit = rateLimits[platform]
+ if (!limit) return null
+
+ const percentage = limit.dailyCap > 0 ? (limit.dailySent / limit.dailyCap) * 100 : 0
+ const isNearLimit = percentage > 80
+ const isAtLimit = !limit.allowed
+
+ return (
+
+
+
+ {limit.dailySent}/{limit.dailyCap} {platform} today
+ {limit.warmupDay <= 28 && ` (warm-up week ${Math.ceil(limit.warmupDay / 7)})`}
+
+
+ )
+ }
+
return (
@@ -84,6 +236,18 @@ export function OutreachQueue() {
)}
+
+
+ DM Focus
+ {dmDrafts.length > 0 && (
+
+ {dmDrafts.length}
+
+ )}
+
Sent
{sentToday.length > 0 && (
@@ -108,6 +272,7 @@ export function OutreachQueue() {
+ {/* Drafts Tab (list view) */}
{loading ? (
@@ -115,7 +280,6 @@ export function OutreachQueue() {
) : (
<>
- {/* Bulk Actions */}
{drafts.length > 0 && (
{emailDrafts.length > 0 && (
@@ -127,7 +291,9 @@ export function OutreachQueue() {
}
>
- Approve All Emails ({emailDrafts.length})
+ {gmailConnected
+ ? `Send All Emails (${emailDrafts.length})`
+ : `Approve All Emails (${emailDrafts.length})`}
)}
{selectedDrafts.size > 0 && (
@@ -152,6 +318,7 @@ export function OutreachQueue() {
toggleDraft(log.id, checked)}
@@ -164,6 +331,113 @@ export function OutreachQueue() {
)}
+ {/* DM Focus Mode Tab */}
+
+ {loading ? (
+
+
+
+ ) : dmDrafts.length === 0 ? (
+
+
+
No DM drafts in queue
+
+ Generate drafts from the Creators page to start sending DMs.
+
+
+ {/* Progress bar */}
+
+
+
+ {/* Rate limit status */}
+
+
+
+
+
+ {/* Current DM card */}
+ {currentDm && (
+
+
+ {/* Creator info */}
+
+
+
+ {currentDm.creator_name}
+
+
+ {currentDm.creator_handle}
+
+
+
+ {currentDm.channel === "instagram"
+ ? "Instagram"
+ : currentDm.channel === "tiktok"
+ ? "TikTok"
+ : "Twitter"}
+
+