+
+
Add your priority artists
+
+ We'll run deep research — fan data, release windows, competitive benchmarks
+ — before you ever open a chat.
+
+
+
+ {/* Search input */}
+
+
+
+ setQuery(e.target.value)}
+ onFocus={() => setFocused(true)}
+ onBlur={() => setTimeout(() => setFocused(false), 150)}
+ onKeyDown={e => {
+ if (e.key === "Enter" && results.length > 0) addFromSpotify(results[0]);
+ else if (e.key === "Enter" && query.trim()) addManual();
+ }}
+ className="pl-9 pr-9"
+ />
+ {searching && (
+
+ )}
+
+
+ {/* Dropdown */}
+ {showDropdown && (
+
+ {results.map(a => (
+
+ ))}
+
+ )}
+
+ {/* Manual add fallback */}
+ {showManualAdd && (
+
+
+
+ )}
+
+
+ {/* Added artists */}
+ {artists.length > 0 && (
+
+ {artists.map((a, i) => (
+ -
+
+
+
{a.name}
+ {a.spotifyUrl && (
+
Spotify connected ✓
+ )}
+
+ ))}
+
+ )}
+
+
+ 0
+ ? `Research ${artists.length} artist${artists.length > 1 ? "s" : ""} →`
+ : "Add at least one artist"
+ }
+ />
+ {artists.length === 0 && (
+
+ )}
+
+
+ {particles.map(p => (
+ 0.5 ? "50%" : "2px",
+ backgroundColor: p.color,
+ }}
+ initial={{ y: 0, opacity: 1, rotate: 0, scale: 1 }}
+ animate={{
+ y: "110vh",
+ opacity: [1, 1, 0],
+ rotate: p.rotateEnd,
+ scale: [1, 1, 0.5],
+ }}
+ transition={{
+ duration: p.duration,
+ delay: p.delay,
+ ease: "easeIn",
+ }}
+ />
+ ))}
+
+ );
+}
diff --git a/components/Onboarding/OnboardingConnectionsStep.tsx b/components/Onboarding/OnboardingConnectionsStep.tsx
new file mode 100644
index 000000000..31e156ac8
--- /dev/null
+++ b/components/Onboarding/OnboardingConnectionsStep.tsx
@@ -0,0 +1,138 @@
+"use client";
+
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Loader2, CheckCircle2, ExternalLink } from "lucide-react";
+import { OnboardingNavButtons } from "./OnboardingNavButtons";
+import { cn } from "@/lib/utils";
+import { useAccessToken } from "@/hooks/useAccessToken";
+import { authorizeConnectorApi } from "@/lib/composio/api/authorizeConnectorApi";
+
+const FEATURED_CONNECTORS = [
+ {
+ slug: "googlesheets",
+ name: "Google Sheets",
+ icon: "📊",
+ benefit: "Sync fan data and tour reports automatically",
+ },
+ {
+ slug: "googledrive",
+ name: "Google Drive",
+ icon: "📁",
+ benefit: "Access EPKs, assets and files from your AI",
+ },
+ {
+ slug: "tiktok",
+ name: "TikTok",
+ icon: "🎵",
+ benefit: "Track viral moments and creator content",
+ },
+ {
+ slug: "googledocs",
+ name: "Google Docs",
+ icon: "📝",
+ benefit: "Auto-draft press releases and pitch docs",
+ },
+];
+
+interface Props {
+ connected: string[];
+ onConnect: (slug: string) => void;
+ onNext: () => void;
+ onBack: () => void;
+}
+
+/**
+ * Step to connect key platform integrations during onboarding.
+ */
+export function OnboardingConnectionsStep({ connected, onConnect, onNext, onBack }: Props) {
+ const accessToken = useAccessToken();
+ const [connecting, setConnecting] = useState(null);
+
+ const handleConnect = async (slug: string) => {
+ if (!accessToken) return;
+ setConnecting(slug);
+ try {
+ const url = await authorizeConnectorApi(accessToken, {
+ connector: slug,
+ callbackUrl: window.location.href,
+ });
+ if (url) {
+ onConnect(slug);
+ window.open(url, "_blank", "noopener,noreferrer");
+ }
+ } catch {
+ // silently continue
+ } finally {
+ setConnecting(null);
+ }
+ };
+
+ return (
+
+
+
+ Connect your tools
+
+
+ Give Recoupable access to the places your work already lives.
+ Connect what you want — skip the rest.
+
+
+
+
+ {FEATURED_CONNECTORS.map(c => {
+ const isConnected = connected.includes(c.slug);
+ const isConnecting = connecting === c.slug;
+
+ return (
+
+
{c.icon}
+
+
{c.name}
+
{c.benefit}
+
+ {isConnected ? (
+
+ ) : (
+
+ )}
+
+ );
+ })}
+
+
+
+
0 ? `Continue with ${connected.length} connected →` : "Skip for now →"}
+ />
+
+ More connectors available in Settings → Connectors
+
+
+
+
+
Quick intro
+
+ We'll use this to personalize your workspace.
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/components/Onboarding/OnboardingPulseStep.tsx b/components/Onboarding/OnboardingPulseStep.tsx
new file mode 100644
index 000000000..08638be3c
--- /dev/null
+++ b/components/Onboarding/OnboardingPulseStep.tsx
@@ -0,0 +1,82 @@
+"use client";
+
+import { Switch } from "@/components/ui/switch";
+import { cn } from "@/lib/utils";
+import { OnboardingNavButtons } from "./OnboardingNavButtons";
+
+const PULSE_BENEFITS = [
+ { icon: "📈", text: "Daily streaming performance summaries" },
+ { icon: "🔔", text: "Alerts when an artist spikes on social" },
+ { icon: "🎯", text: "Weekly priority actions for each artist" },
+ { icon: "📬", text: "Delivered to your inbox every morning" },
+];
+
+interface Props {
+ enabled: boolean;
+ onToggle: (v: boolean) => void;
+ onNext: () => void;
+ onBack: () => void;
+}
+
+/**
+ * Onboarding step to activate Pulse — daily AI briefings per artist.
+ */
+export function OnboardingPulseStep({ enabled, onToggle, onNext, onBack }: Props) {
+ return (
+
+
+
+ ⚡
+
Turn on Pulse
+
+
+ Pulse sends you an AI-generated daily briefing on each of your artists —
+ so you always know what to do next before you even open the app.
+
+
+
+ {/* Toggle card */}
+
onToggle(!enabled)}
+ >
+
+
+
Daily Artist Intelligence
+
+ {enabled ? "Active — you'll get your first briefing tomorrow morning." : "Off — tap to activate."}
+
+
+
e.stopPropagation()} />
+
+
+
+ {/* Benefits list */}
+
+ {PULSE_BENEFITS.map((b, i) => (
+
+ {b.icon}
+ {b.text}
+
+ ))}
+
+
+
+
+
+ What best describes you?
+
+ We'll personalize your entire workspace to your world.
+
+
+
+
+ {ONBOARDING_ROLES.map((role, i) => (
+ onSelect(role.id)}
+ initial={{ opacity: 0, y: 8 }}
+ animate={{ opacity: 1, y: 0 }}
+ transition={{ delay: i * 0.05 }}
+ className={cn(
+ "flex flex-col items-start gap-1 rounded-xl border-2 p-4 text-left transition-all hover:border-primary hover:bg-primary/5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+ selected === role.id
+ ? "border-primary bg-primary/10"
+ : "border-border bg-muted/30",
+ )}
+ >
+ {role.icon}
+ {role.label}
+ {role.description}
+
+ ))}
+
+
+
+
+ {STEPS.map((step, i) => {
+ const isCompleted = i < currentIdx;
+ const isCurrent = i === currentIdx;
+
+ return (
+
+ {/* Dot */}
+
+ {/* Connector line */}
+ {i < STEPS.length - 1 && (
+
+ )}
+
+ );
+ })}
+
+
+
+ Your first week, already planned
+
+
+ Based on your role and{" "}
+ {displayArtist},
+ we've queued these to run automatically.
+
+
+
+
+ {tasks.map((task, i) => (
+
+
{task.icon}
+
+
{task.title}
+
{task.desc}
+
+
+ Queued ✓
+
+
+ ))}
+
+
+
+
+ {/* Animated orb */}
+
+
+ {/* Headline */}
+
+
+ {displayName
+ ? `Hey ${displayName} — welcome to Recoupable.`
+ : "Welcome to Recoupable."}
+
+
+ The AI platform built for people who actually move music.
+
+
+
+ {/* Social proof */}
+
+ {SOCIAL_PROOF.map((s, i) => (
+
+ {s}
+
+ ))}
+
+
+ {/* Animated research lines */}
+
+
+ {RESEARCH_LINES.map((line, i) =>
+ i <= lineIdx ? (
+
+
+ {i < lineIdx ? "✅" : "⏳"}
+
+
+ {line}
+
+
+ ) : null,
+ )}
+
+
+
+ {done && (
+
+ Let's set you up →
+
+ )}
+