+
+
+
+
+
+
+
+
+ {}} onOpenSearch={() => {}} />
+
+
+
+
+
+
+ )
+}
+
+function StatsStrip({ stats, empty }: { stats: Stat[]; empty?: boolean }) {
+ const EMPTY_STATS: Stat[] = [
+ {
+ label: "Items ingested",
+ value: "—",
+ delta: "Connect a source",
+ deltaTint: "neutral",
+ },
+ {
+ label: "Agent sessions",
+ value: "—",
+ delta: "Install an agent",
+ deltaTint: "neutral",
+ },
+ {
+ label: "Active contributors",
+ value: "1",
+ delta: "Just you so far",
+ deltaTint: "neutral",
+ },
+ {
+ label: "Top space",
+ value: "—",
+ delta: "Nothing connected",
+ deltaTint: "neutral",
+ },
+ ]
+ const visible = empty ? EMPTY_STATS : stats
+ return (
+
+
+
+
+
+
+ {}} />
+
+
+
+ ))}
+ + {s.label} +
++ {s.value} +
+ {s.delta && ( ++ {s.delta} +
+ )} ++ Sessions by agent +
++ 0 sessions yet — once you install Cursor, Claude Code, or any + MCP-capable agent, usage shows up here. +
+
+ {["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"].map((d) => (
+
+
+
+
+
+ {d}
+
+
+ ))}
+
+
+
+
+
+ + Sessions by agent +
++ {grandTotal} agent sessions, last 7 days — which tool the team + reached for. +
+
+ {totalsByAgent.map((s) => (
+
+
+ {s.label}{" "}
+ {s.total}
+
+ ))}
+
+
+ {SESSIONS_BY_DAY.map((d, dayIdx) => {
+ const BAR_AREA_PX = 140
+ const totalForDay = dayTotals[dayIdx] ?? 0
+ const barHeightPx = Math.max(
+ 6,
+ Math.round((totalForDay / max) * BAR_AREA_PX),
+ )
+ return (
+
+
+
+ )
+ })}
+
+
+
+ {d.label}
+
+
+ {AGENT_SERIES.map((series, sIdx) => {
+ const val = d.values[series.key] ?? 0
+ if (val === 0) return null
+ const segHeight =
+ totalForDay > 0 ? (val / totalForDay) * 100 : 0
+ return (
+
+ )
+ })}
+
+
+
+ )
+}
+
+function BrainPulseBlock({ empty }: { empty?: boolean }) {
+ return (
+ + {title} +
+ {cta && ( + + )} +
+
+ )
+}
+
+function WeeklyDigestCard({ empty }: { empty?: boolean }) {
+ if (empty) {
+ return (
+
+
+ {empty ? (
+ + Recent answers +
+ {!empty && ( + + )} +
+
+ ) : (
+ + No questions asked yet. +
++ Ask the brain something below — answers and the team's history will + show up here. +
+-
+ {RECENT_ANSWERS.map((a) => (
+
-
+
+ {a.question} +
++ → {a.answer} +
++ {a.who} · {a.when} +
+
+ ))}
+
+
+
+ )
+ }
+ return (
+ + This week +
++ Your brain is just getting started. +
++ Once sources are connected and the team starts asking questions, + you'll see decisions, deadlines, and contributor highlights here. +
+ +
+
+
+ )
+}
+
+function ActivityFeedBlock({ empty }: { empty?: boolean }) {
+ if (empty) {
+ return (
+
+
+
+ + This week +
++ {WEEKLY_DIGEST.range} +
++ {WEEKLY_DIGEST.headline.split(/(\d+)/).map((piece, i) => + /^\d+$/.test(piece) ? ( + + {piece} + + ) : ( + {piece} + ), + )} +
+ +-
+ {WEEKLY_DIGEST.bullets.map((b) => (
+
- + + + {b.label} + + + ))} +
+
+
+
+
+
+ + Nothing happening yet. +
++ As sources sync and the team starts using the brain, every event + will show up here in real time. +
+
+ {ACTIVITY.map((a, i) => (
+
+
+
+ ))}
+
+ {sourceIcon(a.source)}
+
+ + {a.text} +
+ + {a.when} + ++ Just you so far +
++ A brain gets sharper as more people contribute. Invite teammates to + see who's adding what. +
+ +
+
+ + Team activity +
+ + This week + ++ What your team's been adding to the brain. +
+ +
+ {TEAM_THIS_WEEK.map((member) => (
+
+
+
+
+ ))}
+
+ {member.name[0]}
+
+
+
+
+ {member.contributions}
+
+ + {member.name} +
++ {member.summary} +
+
+
+
+
+ + Recent +
+-
+ {TEAM_RECENT.map((event, i) => (
+
- + {event.who} {event.what} + · {event.when} + + ))} +
-
-)
-
-function buildSpotlightCatalog(
- router: ReturnType
- ),
- onOpen: () => {
- track("mcp")
- void router.push("/?view=integrations")
- },
- },
- {
- id: "coding-claude-supermemory",
- title: "Claude Supermemory",
- description:
- "Persistent memory for Claude Code — context and decisions across sessions.",
- icon: spotlightPluginCornerIcon(
- "/images/plugins/claude-code.svg",
- "Claude Supermemory",
- ),
- pro: true,
- onOpen: () => {
- track("plugin_claude_supermemory")
- openPluginsPanel()
- },
- },
- {
- id: "coding-opencode",
- title: "OpenCode",
- description:
- "Memory layer for OpenCode — search past sessions and inject context.",
- icon: spotlightPluginCornerIcon(
- "/images/plugins/opencode.svg",
- "OpenCode",
- ),
- pro: true,
- onOpen: () => {
- track("plugin_opencode")
- openPluginsPanel()
- },
- },
- {
- id: "connections",
- title: "Connections",
- description:
- "Link Notion, Google Drive, or OneDrive to import your docs",
- icon: spotlightConnectionsIcon,
- pro: true,
- onOpen: () => {
- track("connections")
- void router.push("/?add=connect")
- },
- },
- ],
- productivity: [
- {
- id: "chrome",
- title: "Chrome Extension",
- description:
- "Save any webpage, import bookmarks, sync ChatGPT memories",
- icon: 
,
- onOpen: () => {
- track("import_x")
- void router.push("/?view=import")
- },
- },
- ],
- agents: [
- {
- id: "agents-openclaw",
- title: "OpenClaw",
- description:
- "Multi-platform memory for OpenClaw — Telegram, WhatsApp, Discord, Slack, and more.",
- icon: spotlightPluginCornerIcon(
- "/images/plugins/openclaw.svg",
- "OpenClaw",
- ),
- pro: true,
- onOpen: () => {
- track("plugin_openclaw")
- openPluginsPanel()
- },
- },
- {
- id: "agents-hermes",
- title: "Hermes",
- description:
- "Memory layer for the Hermes agent — recall, capture, and user profile.",
- icon: spotlightPluginCornerIcon("/images/plugins/hermes.svg", "Hermes"),
- onOpen: () => {
- track("plugin_hermes")
- openPluginsPanel()
- },
- },
- {
- id: "agents-claude-supermemory",
- title: "Claude Supermemory",
- description:
- "Persistent memory for Claude Code — context and decisions across sessions.",
- icon: spotlightPluginCornerIcon(
- "/images/plugins/claude-code.svg",
- "Claude Supermemory",
- ),
- pro: true,
- onOpen: () => {
- track("plugin_claude_supermemory")
- openPluginsPanel()
- },
- },
- {
- id: "agents-opencode",
- title: "OpenCode",
- description:
- "Memory layer for OpenCode — search past sessions and inject context.",
- icon: spotlightPluginCornerIcon(
- "/images/plugins/opencode.svg",
- "OpenCode",
- ),
- pro: true,
- onOpen: () => {
- track("plugin_opencode")
- openPluginsPanel()
- },
- },
- {
- id: "console-api",
- title: "Console & API",
- description:
- "API keys, orgs, and the hosted API for production agent workloads",
- icon: {
- e.preventDefault()
- setIsDragging(true)
- }}
- onDragLeave={() => setIsDragging(false)}
- onDrop={handleDrop}
+
-
- {isDragging && (
-
-
- )}
-
-
-
+ {step === "about" && (
+ - Drop your PDF resume -
-
-
-
-
-
- {/* ── IDLE ── */}
- {status === "idle" && (
-
-
- )}
-
- {/* ── PROCESSING ── */}
- {status === "processing" && (
-
-
- )}
-
- {/* ── DONE ── */}
- {status === "done" && (
-
-
- )}
-
- {/* ── ERROR ── */}
- {status === "error" && (
-
-
- )}
-
-
- - Let NOVA know about you -
- -
-
- {detected && detected !== "resume" && (
-
- {currentAccountLookup?.status === "found" && (
-
- )}
-
-
- {!detected && (
-
- {[
- {
- label: "@yourhandle",
- action: () => {
- handleChange("@")
- inputRef.current?.focus()
- },
- },
- {
- label: "linkedin.com/in/you",
- action: () => {
- handleChange("linkedin.com/in/")
- inputRef.current?.focus()
- },
- },
- {
- label: "Drop a PDF resume",
- action: () => fileRef.current?.click(),
- },
- ].map((chip) => (
-
- ))}
-
- )}
-
-
- {
- const f = e.target.files?.[0]
- if (f) {
- setResumeFile(f)
- handleSubmit("resume", f)
- }
- }}
- />
-
-
- {detected && detected !== "resume" && (
-
- {(() => {
- const Icon = SOURCE_ICON[detected as "x" | "linkedin"]
- return
- )}
-
-
- handleChange(e.target.value)}
- onKeyDown={(e) => {
- if (e.key === "Enter" && canSubmit)
- handleSubmit(detected as "x" | "linkedin")
- }}
- placeholder="Paste an X handle, LinkedIn URL, or drop a PDF"
- className={cn(
- "w-full py-3 bg-[#070E1B] border rounded-xl text-white text-sm placeholder:text-[#525966] focus:outline-none transition-all",
- detected && detected !== "resume"
- ? "pl-8 pr-11"
- : "px-4 pr-11",
- detected
- ? "border-[#2261CA]/50 focus:border-[#2261CA]"
- : "border-[#52596633] focus:border-white/20",
- )}
- />
-
-
- {hasDetectedAccount && detected !== "resume" && (
-
- {isCheckingAccount ? (
-
- handleSubmit(detected as "x" | "linkedin")
- }
- className="rounded-xl size-8 flex items-center justify-center border-[0.5px] border-[#161F2C] hover:scale-[0.95] active:scale-[0.95] transition-transform cursor-pointer"
- style={{
- background:
- "linear-gradient(180deg, #0D121A -26.14%, #000 100%)",
- }}
- >
-
- ) : null}
-
- )}
-
-
-
-
-
-
- - Finishing your first save -
-- Most finish in under a minute. Below is optional: ways to add - more later. -
-
- {/* biome-ignore lint/a11y/noStaticElementInteractions: pause category rotation on hover/focus within */}
-
- setPauseSpotlight(true)}
- onMouseLeave={() => setPauseSpotlight(false)}
- onFocus={() => setPauseSpotlight(true)}
- onBlur={(e) => {
- if (
- !e.currentTarget.contains(e.relatedTarget as Node | null)
- ) {
- setPauseSpotlight(false)
- }
- }}
- >
-
-
- {categoryCards.map((card) => (
-
-
-
-
-
-
-
-
-
-
- {SPOTLIGHT_CATEGORY_TABS.map((tab) => (
-
- ))}
-
-
-
- {SPOTLIGHT_CATEGORY_TABS.map((tab) => (
-
-
-
-
-
- {/* Document card with stamp */}
- - It's in your memory -
-- Your first save is ready. When you want more, use Integrations - for browser, phone, editor, and AI tools, all in one place. -
-
- {/* Clickable document card */}
- router.push("/?view=list")}
- className="group w-full text-left bg-[#080E18] border border-[rgba(255,255,255,0.07)] rounded-2xl p-4 cursor-pointer hover:border-[rgba(255,255,255,0.14)] transition-colors"
- >
- {/* Faux document lines */}
-
-
- {/* Stamp */}
-
-
-
-
-
-
- {/* Memory snippets */}
-
-
-
-
-
-
-
-
-
-
- - {docTitle || "Your document"} -
- - {memoriesCount} memories - -- View in memories → -
-
- {/* Ink ring ripple */}
- {stampLanded && (
-
-
-
-
- i
- ? { opacity: 1, x: 0 }
- : { opacity: 0, x: -8 }
- }
- transition={{ duration: 0.35, ease: "easeOut" }}
- className="flex items-start gap-2 text-left"
- >
-
-
- ))}
-
-
- {/* CTAs */}
- - Nova learned -
- {memorySnippets.slice(0, 3).map((snippet, i) => ( -- {snippet} -
-
-
-
-
- {errorMsg}
-
-
-
-
-
+}[] = [
+ {
+ label: "Mon",
+ values: {
+ cursor: 8,
+ claudeCode: 4,
+ claudeDesktop: 3,
+ chatgpt: 2,
+ other: 1,
+ },
+ },
+ {
+ label: "Tue",
+ values: {
+ cursor: 10,
+ claudeCode: 6,
+ claudeDesktop: 4,
+ chatgpt: 3,
+ other: 1,
+ },
+ },
+ {
+ label: "Wed",
+ values: {
+ cursor: 12,
+ claudeCode: 9,
+ claudeDesktop: 5,
+ chatgpt: 4,
+ other: 1,
+ },
+ },
+ {
+ label: "Thu",
+ values: {
+ cursor: 9,
+ claudeCode: 5,
+ claudeDesktop: 4,
+ chatgpt: 3,
+ other: 1,
+ },
+ },
+ {
+ label: "Fri",
+ values: {
+ cursor: 14,
+ claudeCode: 10,
+ claudeDesktop: 6,
+ chatgpt: 4,
+ other: 2,
+ },
+ },
+ {
+ label: "Sat",
+ values: {
+ cursor: 5,
+ claudeCode: 3,
+ claudeDesktop: 2,
+ chatgpt: 1,
+ other: 1,
+ },
+ },
+ {
+ label: "Sun",
+ values: {
+ cursor: 17,
+ claudeCode: 12,
+ claudeDesktop: 7,
+ chatgpt: 4,
+ other: 1,
+ },
+ },
+]
+
+export const RECENT_ANSWERS = [
+ {
+ question: "What did we decide about pricing?",
+ answer: "Pro stays at $20/mo. No overages, top-up only.",
+ who: "You",
+ when: "2h ago",
+ },
+ {
+ question: "What's blocking the Acme deal?",
+ answer: "MSA review — Jane drafting a net-30 counter.",
+ who: "You",
+ when: "4h ago",
+ },
+ {
+ question: "Who owns the onboarding rewrite?",
+ answer: "Design team. Ship target Friday.",
+ who: "Sarah Kim",
+ when: "Yesterday",
+ },
+]
+
+export const WEEKLY_DIGEST = {
+ range: "Mon – Fri",
+ headline:
+ "Your brain captured 642 items, surfaced 12 decisions, and answered 184 questions across the team.",
+ bullets: [
+ { label: "5 deadlines coming up next week", tint: "text-[#4BA0FA]" },
+ {
+ label: "2 conflicts surfaced between Notion and Slack",
+ tint: "text-[#FF8A47]",
+ },
+ {
+ label: "Sarah Kim led contributions with 14 docs",
+ tint: "text-[#A1A1AA]",
+ },
+ ],
+}
+
+export const TEAM_THIS_WEEK = [
+ {
+ name: "Sarah Kim",
+ email: "sarah@acme.com",
+ contributions: 14,
+ summary: "14 docs · 3 spaces",
+ color: "#FF8A47",
+ },
+ {
+ name: "Jane Doe",
+ email: "jane@acme.com",
+ contributions: 11,
+ summary: "11 docs · 2 spaces",
+ color: "#4BA0FA",
+ },
+ {
+ name: "Mahesh S.",
+ email: "mahesh@acme.com",
+ contributions: 9,
+ summary: "9 docs · 1 space",
+ color: "#A1A1AA",
+ },
+ {
+ name: "Alex Chen",
+ email: "alex@acme.com",
+ contributions: 7,
+ summary: "7 docs · 2 spaces",
+ color: "#10A37F",
+ },
+]
+
+export const TEAM_RECENT = [
+ { who: "Sarah Kim", what: "added a memo to acme-deal-q2", when: "14m" },
+ { who: "Jane Doe", what: "updated the Acme MSA draft", when: "1h" },
+ { who: "You", what: 'asked "What did we decide about pricing?"', when: "2h" },
+ {
+ who: "Sarah Kim",
+ what: "connected Notion to Sales space",
+ when: "Yesterday",
+ },
+]
+
+export type ActivityEvent = {
+ when: string
+ text: string
+ source: "drive" | "notion" | "slack" | "system" | "answer" | "decision"
+}
+
+export const ACTIVITY: ActivityEvent[] = [
+ { when: "2m", text: "23 new docs ingested from Drive", source: "drive" },
+ { when: "14m", text: "Jane added a memo to acme-deal-q2", source: "notion" },
+ {
+ when: "1h",
+ text: "Decision surfaced: pricing locked at $20 Pro",
+ source: "slack",
+ },
+ {
+ when: "3h",
+ text: "14 Notion pages updated by Sarah Kim",
+ source: "notion",
+ },
+ { when: "5h", text: "New entity formed: pricing-v3", source: "system" },
+ {
+ when: "Yesterday",
+ text: "MSA contract uploaded · auto-tagged contracts/MSA",
+ source: "drive",
+ },
+]
+
+export type TimelineKind =
+ | "answer"
+ | "decision"
+ | "ingest"
+ | "mention"
+ | "system"
+
+export type TimelineEvent = {
+ kind: TimelineKind
+ when: string
+ title: string
+ detail?: string
+ source?: string
+ who?: string
+}
+
+export const TIMELINE_EVENTS: TimelineEvent[] = [
+ {
+ kind: "answer",
+ when: "2m ago",
+ title: "What did we decide about pricing?",
+ detail: "Pro stays at $20/mo. No overages, top-up only.",
+ source: "You asked",
+ },
+ {
+ kind: "ingest",
+ when: "14m ago",
+ title: "23 new docs ingested from Drive",
+ detail: "Q2 roadmap, Acme MSA draft v3, customer feedback Q1, +20 more.",
+ source: "Drive",
+ },
+ {
+ kind: "decision",
+ when: "1h ago",
+ title: "Decision: pricing locked at $20 Pro",
+ detail:
+ "Decided in #leadership thread to keep Pro at $20/mo. No overages — top-up only.",
+ source: "Slack · #leadership",
+ },
+ {
+ kind: "answer",
+ when: "4h ago",
+ title: "What's blocking the Acme deal?",
+ detail: "MSA review — Jane drafting a net-30 counter.",
+ source: "You asked",
+ },
+ {
+ kind: "mention",
+ when: "Today",
+ title: "onboarding-rewrite mentioned in 3 docs",
+ detail: "Owner: design team · Ship target: Friday.",
+ source: "Drive",
+ who: "Mahesh",
+ },
+ {
+ kind: "system",
+ when: "5h ago",
+ title: "New entity formed: pricing-v3",
+ detail: "Linked across 4 sources · auto-tagged by the brain.",
+ },
+ {
+ kind: "ingest",
+ when: "Yesterday",
+ title: "MSA contract uploaded · auto-tagged contracts/MSA",
+ source: "Drive",
+ },
+ {
+ kind: "answer",
+ when: "Yesterday",
+ title: "Who owns the onboarding rewrite?",
+ detail: "Design team. Ship target Friday.",
+ source: "Sarah Kim asked",
+ },
+ {
+ kind: "ingest",
+ when: "Yesterday",
+ title: "14 Notion pages updated by Sarah Kim",
+ source: "Notion",
+ who: "Sarah Kim",
+ },
+]
+
+export type SourceStatus = "healthy" | "syncing" | "warning" | "error"
+
+export type ConnectedSource = {
+ id: string
+ name: string
+ iconKey: "drive" | "notion" | "gmail" | "onedrive" | "github"
+ status: SourceStatus
+ delta: string
+ when: string
+ statusMessage?: string
+}
+
+export const CONNECTED_SOURCES: ConnectedSource[] = [
+ {
+ id: "drive",
+ name: "Google Drive",
+ iconKey: "drive",
+ status: "healthy",
+ delta: "+24 items",
+ when: "12m ago",
+ },
+ {
+ id: "notion",
+ name: "Company Notion",
+ iconKey: "notion",
+ status: "warning",
+ delta: "Sync stalled",
+ when: "4h ago",
+ statusMessage: "Re-auth · token expired",
+ },
+ {
+ id: "gmail",
+ name: "Gmail",
+ iconKey: "gmail",
+ status: "syncing",
+ delta: "Ingesting…",
+ when: "Just now",
+ },
+]
+
+export type RecommendedSource = {
+ id: string
+ name: string
+ iconKey: "slack" | "linear" | "granola" | "github" | "calendar"
+ reason: string
+}
+
+export const RECOMMENDED_SOURCES: RecommendedSource[] = [
+ {
+ id: "slack",
+ name: "Slack",
+ iconKey: "slack",
+ reason: "Decisions and threads — most teams connect this.",
+ },
+ {
+ id: "github",
+ name: "GitHub",
+ iconKey: "github",
+ reason: "PRs, issues, READMEs from your repos.",
+ },
+ {
+ id: "linear",
+ name: "Linear",
+ iconKey: "linear",
+ reason: "Track project decisions and blockers.",
+ },
+]
+
+export type LiveSession = {
+ name: string
+ avatarColor: string
+ status: "live" | "idle" | "away"
+ tool: string
+ toolColor: string
+ doing?: string
+ elapsed?: string
+}
+
+export const LIVE_SESSIONS: LiveSession[] = [
+ {
+ name: "Sarah Kim",
+ avatarColor: "#FF8A47",
+ status: "live",
+ tool: "Cursor",
+ toolColor: "#4BA0FA",
+ doing: "Refactoring auth flow with brain context",
+ elapsed: "3m elapsed",
+ },
+ {
+ name: "Jane Doe",
+ avatarColor: "#4BA0FA",
+ status: "live",
+ tool: "Claude Code",
+ toolColor: "#FF8A47",
+ doing: "MSA review · pulling Acme history",
+ elapsed: "18m elapsed",
+ },
+ {
+ name: "You",
+ avatarColor: "#A1A1AA",
+ status: "idle",
+ tool: "Cursor",
+ toolColor: "#4BA0FA",
+ elapsed: "Idle · 12m",
+ },
+]
+
+export const TODAY_SESSIONS_SUMMARY: {
+ name: string
+ avatarColor: string
+ tool: string
+ count: number
+ lastAt: string
+}[] = [
+ {
+ name: "Alex Chen",
+ avatarColor: "#10A37F",
+ tool: "ChatGPT",
+ count: 4,
+ lastAt: "2h ago",
+ },
+ {
+ name: "Mahesh S.",
+ avatarColor: "#A1A1AA",
+ tool: "Claude Desktop",
+ count: 7,
+ lastAt: "3h ago",
+ },
+ {
+ name: "Sarah Kim",
+ avatarColor: "#FF8A47",
+ tool: "Cursor",
+ count: 11,
+ lastAt: "Now",
+ },
+]
+
+export type ChatMessage = { role: "user" | "brain"; text: string }
+
+export const SAMPLE_CHAT: ChatMessage[] = [
+ {
+ role: "user",
+ text: "What did we decide about pricing this quarter?",
+ },
+ {
+ role: "brain",
+ text: "Pro is locked at $20/mo. No overages — top-up only. Decided in the #leadership Slack thread on May 28.",
+ },
+ {
+ role: "user",
+ text: "Who's working on the Acme MSA?",
+ },
+ {
+ role: "brain",
+ text: "Jane Doe is drafting a net-30 counter to Acme's net-60 ask. Latest draft is in Drive (Acme · MSA draft v3.pdf).",
+ },
+]
diff --git a/apps/web/components/brain-home/widgets.tsx b/apps/web/components/brain-home/widgets.tsx
new file mode 100644
index 00000000..69ff83f3
--- /dev/null
+++ b/apps/web/components/brain-home/widgets.tsx
@@ -0,0 +1,671 @@
+"use client"
+
+import { cn } from "@lib/utils"
+import { dmSans125ClassName } from "@/lib/fonts"
+import { GoogleDrive, Notion } from "@ui/assets/icons"
+import {
+ AlertCircle,
+ ArrowRight,
+ Calendar,
+ CheckCircle2,
+ FileText,
+ Github,
+ Loader2,
+ MessageSquare,
+ Plus,
+ Quote,
+ Sparkles,
+ Target,
+} from "lucide-react"
+import {
+ ACTIVITY,
+ AGENT_SERIES,
+ CONNECTED_SOURCES,
+ RECENT_ANSWERS,
+ RECOMMENDED_SOURCES,
+ SESSIONS_BY_DAY,
+ STATS,
+ TEAM_RECENT,
+ TEAM_THIS_WEEK,
+ WEEKLY_DIGEST,
+ type ActivityEvent,
+ type ConnectedSource,
+ type RecommendedSource,
+ type Stat,
+} from "./data"
+
+function GmailIcon({ className }: { className?: string }) {
+ return (
+
+ )
+}
+
+export const modalCardStyle = {
+ boxShadow:
+ "0 2.842px 14.211px 0 rgba(0, 0, 0, 0.25), 0.711px 0.711px 0.711px 0 rgba(255, 255, 255, 0.10) inset",
+}
+
+export const inputBevelStyle = {
+ boxShadow:
+ "0px 1px 2px 0px rgba(0,43,87,0.1), inset 0px 0px 0px 1px rgba(43,49,67,0.08), inset 0px 1px 1px 0px rgba(0,0,0,0.08), inset 0px 2px 4px 0px rgba(0,0,0,0.02)",
+}
+
+export function StatsStrip({ stats = STATS }: { stats?: Stat[] }) {
+ return (
+
+ {stats.map((s) => (
+
+ )
+}
+
+export function SectionHeader({ title, cta }: { title: string; cta?: string }) {
+ return (
+
+
+ )
+}
+
+export function BrainActivityChart() {
+ const totalsByAgent = AGENT_SERIES.map((s) => ({
+ ...s,
+ total: SESSIONS_BY_DAY.reduce((sum, d) => sum + (d.values[s.key] ?? 0), 0),
+ }))
+ const grandTotal = totalsByAgent.reduce((sum, s) => sum + s.total, 0)
+ const dayTotals = SESSIONS_BY_DAY.map((d) =>
+ AGENT_SERIES.reduce((sum, s) => sum + (d.values[s.key] ?? 0), 0),
+ )
+ const max = Math.max(...dayTotals)
+ return (
+
+
+
+ )
+}
+
+function activitySourceIcon(s: ActivityEvent["source"]) {
+ if (s === "drive") return
+
+ )
+}
+
+export function TeamActivityRail() {
+ return (
+
+
+ )
+}
+
+export function BrainHomeBackground() {
+ return (
+
+
+ )
+ }
+ const issueCount = CONNECTED_SOURCES.filter(
+ (s) => s.status === "warning" || s.status === "error",
+ ).length
+ return (
+
+
+ )
+}
+
+function recommendedIcon(key: RecommendedSource["iconKey"]) {
+ if (key === "slack")
+ return
+
+ )
+}
diff --git a/apps/web/components/onboarding-brain/onboarding-confetti.tsx b/apps/web/components/onboarding-brain/onboarding-confetti.tsx
new file mode 100644
index 00000000..2aac5ac6
--- /dev/null
+++ b/apps/web/components/onboarding-brain/onboarding-confetti.tsx
@@ -0,0 +1,53 @@
+"use client"
+
+import { useEffect, useRef } from "react"
+import { useQueryState } from "nuqs"
+
+const COLORS = ["#4BA0FA", "#FF8A47", "#B19CFF", "#10A37F", "#fafafa"]
+
+export function OnboardingConfetti() {
+ const [onboarded, setOnboarded] = useQueryState("onboarded")
+ const fired = useRef(false)
+
+ useEffect(() => {
+ if (onboarded !== "1" || fired.current) return
+ fired.current = true
+ setOnboarded(null)
+
+ const reduceMotion = window.matchMedia?.(
+ "(prefers-reduced-motion: reduce)",
+ ).matches
+ if (reduceMotion) return
+
+ let raf = 0
+ const run = async () => {
+ const confetti = (await import("canvas-confetti")).default
+ const end = Date.now() + 1400
+ const frame = () => {
+ confetti({
+ particleCount: 4,
+ angle: 60,
+ spread: 70,
+ startVelocity: 55,
+ origin: { x: 0, y: 0.7 },
+ colors: COLORS,
+ })
+ confetti({
+ particleCount: 4,
+ angle: 120,
+ spread: 70,
+ startVelocity: 55,
+ origin: { x: 1, y: 0.7 },
+ colors: COLORS,
+ })
+ if (Date.now() < end) raf = requestAnimationFrame(frame)
+ }
+ frame()
+ }
+ run()
+
+ return () => cancelAnimationFrame(raf)
+ }, [onboarded, setOnboarded])
+
+ return null
+}
diff --git a/apps/web/components/onboarding-brain/shell.tsx b/apps/web/components/onboarding-brain/shell.tsx
new file mode 100644
index 00000000..9b2d9b30
--- /dev/null
+++ b/apps/web/components/onboarding-brain/shell.tsx
@@ -0,0 +1,137 @@
+"use client"
+
+import { LogoFull } from "@ui/assets/Logo"
+import { cn } from "@lib/utils"
+import { dmSansClassName } from "@/lib/fonts"
+import { motion } from "motion/react"
+import { BRAIN_STEPS, BRAIN_STEP_LABELS, type BrainStep } from "./types"
+
+interface ShellProps {
+ step: BrainStep
+ domain?: string | null
+ children: React.ReactNode
+}
+
+export function BrainShell({ step, children }: ShellProps) {
+ const visibleSteps: BrainStep[] = BRAIN_STEPS
+
+ return (
+ = {}
+ if (!values.name && defaultName) patch.name = defaultName
+ if (!values.workspaceName && suggestedWorkspaceName) {
+ patch.workspaceName = suggestedWorkspaceName
+ }
+ if (!values.workspaceDomain && domain) {
+ patch.workspaceDomain = domain
+ }
+ if (Object.keys(patch).length > 0) onChange({ ...values, ...patch })
+ }, [defaultName, suggestedWorkspaceName, domain])
+
+ const canContinue =
+ values.name.trim().length > 0 && values.workspaceName.trim().length > 0
+
+ return (
+
+
+ ))}
+ + {s.label} +
++ {s.value} +
+ {s.delta && ( ++ {s.delta} +
+ )} +
+
+ )
+}
+
+export function RecentAnswersCard() {
+ return (
+ + {title} +
+ {cta && ( + + )} +
+
+ )
+}
+
+export function WeeklyDigestCard() {
+ return (
+
+
+ + Recent answers +
+ +-
+ {RECENT_ANSWERS.map((a) => (
+
-
+
+ {a.question} +
++ → {a.answer} +
++ {a.who} · {a.when} +
+
+ ))}
+
+
+
+ )
+}
+
+export function BrainPulseBlock() {
+ return (
+
+
+ + This week +
++ {WEEKLY_DIGEST.range} +
++ {WEEKLY_DIGEST.headline.split(/(\d+)/).map((piece, i) => + /^\d+$/.test(piece) ? ( + + {piece} + + ) : ( + {piece} + ), + )} +
+-
+ {WEEKLY_DIGEST.bullets.map((b) => (
+
- + + + {b.label} + + + ))} +
+
+
+
+ + Sessions by agent +
++ {grandTotal} agent sessions, last 7 days — which tool the team + reached for. +
+
+ {totalsByAgent.map((s) => (
+
+
+ {s.label}{" "}
+ {s.total}
+
+ ))}
+
+
+ {SESSIONS_BY_DAY.map((d, dayIdx) => {
+ const BAR_AREA_PX = 140
+ const totalForDay = dayTotals[dayIdx] ?? 0
+ const barHeightPx = Math.max(
+ 6,
+ Math.round((totalForDay / max) * BAR_AREA_PX),
+ )
+ return (
+
+
+
+ )
+ })}
+
+
+
+ {d.label}
+
+
+ {AGENT_SERIES.map((series, sIdx) => {
+ const val = d.values[series.key] ?? 0
+ if (val === 0) return null
+ const segHeight =
+ totalForDay > 0 ? (val / totalForDay) * 100 : 0
+ return (
+
+ )
+ })}
+
+
+ {ACTIVITY.map((a, i) => (
+
+
+
+ ))}
+
+ {activitySourceIcon(a.source)}
+
+ + {a.text} +
+ + {a.when} + +
+
+ + Team activity +
+ + This week + ++ What your team's been adding to the brain. +
+
+ {TEAM_THIS_WEEK.map((member) => (
+
+
+
+ ))}
+
+ {member.name[0]}
+
+
+
+
+ {member.contributions}
+
+ + {member.name} +
++ {member.summary} +
+
+
+
+ + Recent +
+-
+ {TEAM_RECENT.map((event, i) => (
+
- + {event.who} {event.what} + · {event.when} + + ))} +
+
+
+
+
+ )
+}
+
+export function Quotation({ children }: { children: React.ReactNode }) {
+ return (
+
+ + {children} + + ) +} + +function connectedSourceIcon(key: ConnectedSource["iconKey"]) { + if (key === "drive") return
+ Sources health +
++ Nothing connected yet — Drive, Notion, Gmail and more are ready when + you are. +
+ +
+
+ + Sources health +
+ {issueCount > 0 ? ( + + {issueCount} need attention + + ) : ( + + All healthy + + )} ++ Is the brain getting fed? +
+ +-
+ {CONNECTED_SOURCES.map((s) => {
+ const meta = sourceStatusMeta(s.status)
+ return (
+
-
+ + {connectedSourceIcon(s.iconKey)} ++++++
+ {s.name} +
+ + {s.when} + ++ {meta.icon} + {s.statusMessage ?? s.delta} +
+
+ )
+ })}
+
+ Add more to the brain +
++ Teams like yours connect these next. +
+ +-
+ {RECOMMENDED_SOURCES.map((r) => (
+
-
+ + {recommendedIcon(r.iconKey)} ++++++
+ {r.name} +
++ + {r.reason} +
+
+ ))}
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
+
+function StepIndicator({
+ step,
+ visibleSteps,
+}: {
+ step: BrainStep
+ visibleSteps: BrainStep[]
+}) {
+ const currentIdx = visibleSteps.indexOf(step)
+ return (
+ {children}
+
+ {visibleSteps.map((s, i) => {
+ const isDone = i < currentIdx
+ const isCurrent = i === currentIdx
+ const isLast = i === visibleSteps.length - 1
+ return (
+
+ )
+}
+
+function StepDot({ done, current }: { done: boolean; current: boolean }) {
+ if (current) {
+ return (
+
+
+ )
+ })}
+
+
+ {!isLast && (
+
+
+ )}
+
+
+ )
+ }
+ if (done) {
+ return (
+
+
+
+ )
+ }
+ return (
+
+
+
+ )
+}
diff --git a/apps/web/components/onboarding-brain/step-about.tsx b/apps/web/components/onboarding-brain/step-about.tsx
new file mode 100644
index 00000000..5d8ff4f2
--- /dev/null
+++ b/apps/web/components/onboarding-brain/step-about.tsx
@@ -0,0 +1,473 @@
+"use client"
+
+import { useEffect, useState } from "react"
+import { motion } from "motion/react"
+import { Button } from "@ui/components/button"
+import { Input } from "@ui/components/input"
+import { Textarea } from "@ui/components/textarea"
+import {
+ ArrowRight,
+ Brain,
+ Building2,
+ LayoutGrid,
+ Loader2,
+ Plug,
+ Terminal,
+ User2,
+ UserPlus,
+ Users2,
+} from "lucide-react"
+import { cn } from "@lib/utils"
+import { dmSans125ClassName } from "@/lib/fonts"
+import type { BrainMode } from "./types"
+
+export interface AboutValues {
+ name: string
+ about: string
+ workspaceName: string
+ workspaceDomain: string
+}
+
+interface Props {
+ mode: BrainMode
+ onModeChange: (m: BrainMode) => void
+ domain: string | null
+ suggestedWorkspaceName: string
+ defaultName: string
+ avatarUrl: string | null
+ values: AboutValues
+ onChange: (next: AboutValues) => void
+ onContinue: () => void
+ submitting?: boolean
+}
+
+const cardSurfaceStyle = {
+ boxShadow:
+ "0 2.842px 14.211px 0 rgba(0, 0, 0, 0.25), 0.711px 0.711px 0.711px 0 rgba(255, 255, 255, 0.10) inset",
+}
+
+const inputBevelStyle = {
+ boxShadow:
+ "0px 1px 2px 0px rgba(0,43,87,0.1), inset 0px 0px 0px 1px rgba(43,49,67,0.08), inset 0px 1px 1px 0px rgba(0,0,0,0.08), inset 0px 2px 4px 0px rgba(0,0,0,0.02)",
+}
+
+const fieldLabel = "pl-2 pb-2 font-semibold text-[14px] text-[#737373]"
+const inputClass =
+ "bg-[#0F1217] border border-[rgba(82,89,102,0.2)] rounded-[12px] text-[#fafafa] text-[14px] placeholder:text-[#525D6E] h-12 px-4 shadow-none focus-visible:ring-0 focus-visible:border-[rgba(115,115,115,0.3)] transition-colors"
+
+export function StepAbout({
+ mode,
+ onModeChange,
+ domain,
+ suggestedWorkspaceName,
+ defaultName,
+ avatarUrl,
+ values,
+ onChange,
+ onContinue,
+ submitting,
+}: Props) {
+ // biome-ignore lint/correctness/useExhaustiveDependencies: one-time initialization when defaults become available
+ useEffect(() => {
+ const patch: Partial
+
+
+
+ Tell us about you +
++ So your brain sounds like yours, not the docs. +
+ +
+
+
+
+ Your name
+ onChange({ ...values, name: e.target.value })} + placeholder="e.g. Mahesh" + className={inputClass} + style={inputBevelStyle} + /> +
+
+ What are you here for?{" "} + (optional) +
+