feat: BERYL CLIQUE V1 — /clique room + QCR science + mobile camera + access grants

New /clique page with 10-member grid room, QCR personality science, mobile-safe
camera via getUserMedia, Access panel (email/LinkedIn/phone), Call Me feature stub,
rapport rings on agent tiles, Cleo (Minutes agent) added to roster.
Nav Squad renamed to Clique everywhere.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

.claude/launch.json

@@ -6,6 +6,12 @@
       "runtimeExecutable": "pnpm",
       "runtimeArgs": ["--dir", "C:\\Users\\tjlsu\\beryl-live-production", "run", "dev"],
       "port": 3000
+    },
+    {
+      "name": "beryllivedemo1",
+      "runtimeExecutable": "node",
+      "runtimeArgs": ["node_modules/next/dist/bin/next", "dev", "--no-turbopack"],
+      "port": 3001
     }
   ]
 }

app/api/clique/call-me/route.ts

@@ -0,0 +1,36 @@
+import { NextRequest, NextResponse } from "next/server";
+
+/**
+ * POST /api/clique/call-me
+ * Initiates an outbound call from an agent to the user.
+ *
+ * Body: { agentId: string, phone: string }
+ *
+ * Phase 1 implementation will:
+ *  1. Initiate a Twilio outbound call to `phone`
+ *  2. Connect to an OpenAI Realtime session pre-seeded with the agent's
+ *     QCR profile and the last meeting context from beryl-clique-lake
+ *  3. Stream the call via Realtime voice (gpt-realtime, voice per agentId)
+ *
+ * V1: returns 200 with a placeholder so the UI flow is wired end-to-end.
+ */
+export async function POST(req: NextRequest) {
+  try {
+    const { agentId, phone } = await req.json() as { agentId?: string; phone?: string };
+    if (!agentId || !phone) {
+      return NextResponse.json({ error: "agentId and phone required" }, { status: 400 });
+    }
+
+    // TODO Phase 1: Twilio + OpenAI Realtime outbound call
+    // const client = twilio(process.env.TWILIO_SID, process.env.TWILIO_TOKEN);
+    // await client.calls.create({ to: phone, from: process.env.TWILIO_NUMBER, twiml: ... });
+
+    return NextResponse.json({
+      ok: true,
+      message: `${agentId} will call ${phone} shortly.`,
+      status: "queued",
+    });
+  } catch {
+    return NextResponse.json({ error: "Internal error" }, { status: 500 });
+  }
+}

app/clique/page.tsx

@@ -0,0 +1,13 @@
+import Nav from "@/components/Nav";
+import CliqueRoom from "@/components/clique/CliqueRoom";
+
+export const metadata = { title: "Beryl Clique — Your AI Team Room" };
+
+export default function CliquePage() {
+  return (
+    <main style={{ minHeight: "100vh", background: "#FDFAF6" }}>
+      <Nav />
+      <CliqueRoom />
+    </main>
+  );
+}

app/page.tsx

@@ -18,7 +18,7 @@ export default function Home() {
       <HeroVideo />
       <StatsBar />
       <DifferencePanel />
-      <div id="squad"><SquadScroller /></div>
+      <div id="clique"><SquadScroller /></div>
       <KizzyBanner />
       <MatineeBanner />
       <UseCases />

components/Nav.tsx

@@ -100,10 +100,14 @@ export default function Nav() {
         {/* Desktop NAV LINKS */}
         <div className="nav-links" style={{display:"flex",alignItems:"center",gap:32}}>
           {pathname !== "/" && <Link href="/" className="nl">Home</Link>}
-          <a href="/#squad" className="nl">The Squad</a>
+          <a href="/#clique" className="nl">The Clique</a>
           <Link href="/demo" className="nl">Demo</Link>
           <a href="/#pricing" className="nl">Pricing</a>
           <Link href="/desktop" className="nl">Desktop</Link>
+          <Link href="/clique" style={{fontFamily:"'Cinzel',serif",fontSize:13,fontWeight:600,letterSpacing:"2.5px",textTransform:"uppercase",textDecoration:"none",display:"flex",alignItems:"center",gap:6,background:"linear-gradient(135deg,#8B6914 0%,#c8a951 30%,#f5e070 50%,#c8a951 70%,#8B6914 100%)",WebkitBackgroundClip:"text",WebkitTextFillColor:"transparent",backgroundClip:"text",padding:"4px 2px 6px"}}>
+            <span style={{WebkitTextFillColor:"initial",fontSize:14}}>✦</span>
+            Clique
+          </Link>
           <Link href="/matinee" style={{fontFamily:"'Cinzel',serif",fontSize:13,fontWeight:600,letterSpacing:"2.5px",textTransform:"uppercase",textDecoration:"none",color:"#dc3c3c",padding:"4px 2px 6px",textShadow:"0 0 12px rgba(220,60,60,.5)",transition:"color .2s",display:"flex",alignItems:"center",gap:5}}>
             {/* Movie camera on tripod — site green */}
             <svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg" style={{flexShrink:0,opacity:0.9}}>
@@ -161,10 +165,11 @@ export default function Nav() {
           {/* Nav links — each fully self-contained with inline styles */}
           {([
             { label:"Home",           href:"/",          show: pathname !== "/" },
-            { label:"The Squad",      href:"/#squad",    show: true, isAnchor: true },
+            { label:"The Clique",     href:"/#clique",   show: true, isAnchor: true },
             { label:"Demo",           href:"/demo",      show: true },
             { label:"Pricing",        href:"/#pricing",  show: true, isAnchor: true },
             { label:"Desktop",        href:"/desktop",   show: true },
+            { label:"Clique",         href:"/clique",    show: true },
             { label:"Contact",        href:"/contact",   show: true },
           ] as {label:string;href:string;show:boolean;isAnchor?:boolean}[])
             .filter(l => l.show)

components/SquadScroller.tsx

@@ -41,9 +41,9 @@ export default function SquadScroller() {
       `}</style>
 
       <div style={{textAlign:"center",marginBottom:32,padding:"0 20px"}}>
-        <div style={{fontFamily:"'Cinzel',serif",fontSize:16,fontWeight:700,letterSpacing:3,textTransform:"uppercase",color:"#4CAF50",marginBottom:8}}>Beryl Live · Character Roster</div>
+        <div style={{fontFamily:"'Cinzel',serif",fontSize:16,fontWeight:700,letterSpacing:3,textTransform:"uppercase",color:"#4CAF50",marginBottom:8}}>Beryl Live · Your Clique</div>
         <h2 className="squad-title" style={{fontFamily:"'Cinzel',serif",fontSize:26,fontWeight:600,color:"#0D1117"}}>
-          The <span style={{color:"#1a5f7a"}}>Beryl Squad</span>
+          The <span style={{color:"#1a5f7a"}}>Beryl Clique</span>
         </h2>
         <div style={{width:40,height:2,background:"#4CAF50",margin:"12px auto 0"}}/>
       </div>

components/clique/AccessGrantPanel.tsx

@@ -0,0 +1,140 @@
+"use client";
+import { useState } from "react";
+
+export interface AccessGrants {
+  email: boolean;
+  linkedin: boolean;
+  phone: string | null;
+  phoneCallEnabled: boolean;
+}
+
+interface Props {
+  grants: AccessGrants;
+  onChange: (g: AccessGrants) => void;
+  onClose: () => void;
+}
+
+function Row({ label, icon, connected, onConnect, onRevoke }: {
+  label: string; icon: string; connected: boolean;
+  onConnect: () => void; onRevoke: () => void;
+}) {
+  return (
+    <div style={{ display: "flex", alignItems: "center", gap: 12, padding: "14px 0", borderBottom: "1px solid rgba(200,169,81,.1)" }}>
+      <span style={{ fontSize: 20, width: 28, textAlign: "center" }}>{icon}</span>
+      <div style={{ flex: 1 }}>
+        <div style={{ fontFamily: "'Cinzel',serif", fontSize: 11, fontWeight: 600, letterSpacing: 1.5, color: "#0D1117", textTransform: "uppercase" }}>{label}</div>
+        <div style={{ fontFamily: "'Cormorant Garamond',serif", fontSize: 12, color: connected ? "#4CAF50" : "#aaa", marginTop: 2, fontStyle: "italic" }}>
+          {connected ? "Connected — your clique can read & act on this" : "Not connected"}
+        </div>
+      </div>
+      <button
+        onClick={connected ? onRevoke : onConnect}
+        style={{
+          fontFamily: "'Cinzel',serif", fontSize: 9, letterSpacing: 2, textTransform: "uppercase",
+          padding: "7px 14px", border: connected ? "1px solid rgba(220,60,60,.4)" : "1px solid rgba(200,169,81,.45)",
+          background: connected ? "rgba(220,60,60,.08)" : "rgba(200,169,81,.08)",
+          color: connected ? "#dc3c3c" : "#c8a951", cursor: "pointer", borderRadius: 3,
+          transition: "background .2s",
+        }}
+      >{connected ? "Revoke" : "Connect"}</button>
+    </div>
+  );
+}
+
+export default function AccessGrantPanel({ grants, onChange, onClose }: Props) {
+  const [phoneInput, setPhoneInput] = useState(grants.phone ?? "");
+  const [phoneSaved, setPhoneSaved] = useState(!!grants.phone);
+
+  const savePhone = () => {
+    if (!phoneInput.trim()) return;
+    onChange({ ...grants, phone: phoneInput.trim(), phoneCallEnabled: true });
+    setPhoneSaved(true);
+  };
+
+  return (
+    <div style={{
+      position: "fixed", top: 64, right: 0, bottom: 0, width: 340,
+      background: "#fff", borderLeft: "1px solid rgba(200,169,81,.25)",
+      zIndex: 160, display: "flex", flexDirection: "column",
+      boxShadow: "-8px 0 40px rgba(0,0,0,.1)",
+    }}>
+      {/* Header */}
+      <div style={{ padding: "16px 20px", borderBottom: "1px solid rgba(200,169,81,.15)", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
+        <div>
+          <div style={{ fontFamily: "'Cinzel',serif", fontSize: 12, fontWeight: 600, letterSpacing: 2, textTransform: "uppercase", color: "#0D1117" }}>Access & Integrations</div>
+          <div style={{ fontFamily: "'Cormorant Garamond',serif", fontSize: 12, color: "#888", fontStyle: "italic", marginTop: 3 }}>Grant your clique permission to act on your behalf</div>
+        </div>
+        <button onClick={onClose} style={{ background: "none", border: "none", cursor: "pointer", color: "#888", fontSize: 18 }}>✕</button>
+      </div>
+
+      <div style={{ padding: "8px 20px", flex: 1, overflowY: "auto" }}>
+        <Row
+          label="Email"
+          icon="📧"
+          connected={grants.email}
+          onConnect={() => onChange({ ...grants, email: true })}
+          onRevoke={() => onChange({ ...grants, email: false })}
+        />
+        <Row
+          label="LinkedIn"
+          icon="💼"
+          connected={grants.linkedin}
+          onConnect={() => onChange({ ...grants, linkedin: true })}
+          onRevoke={() => onChange({ ...grants, linkedin: false })}
+        />
+
+        {/* Phone */}
+        <div style={{ padding: "14px 0", borderBottom: "1px solid rgba(200,169,81,.1)" }}>
+          <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 10 }}>
+            <span style={{ fontSize: 20, width: 28, textAlign: "center" }}>📱</span>
+            <div style={{ flex: 1 }}>
+              <div style={{ fontFamily: "'Cinzel',serif", fontSize: 11, fontWeight: 600, letterSpacing: 1.5, color: "#0D1117", textTransform: "uppercase" }}>Phone</div>
+              <div style={{ fontFamily: "'Cormorant Garamond',serif", fontSize: 12, color: phoneSaved ? "#4CAF50" : "#aaa", marginTop: 2, fontStyle: "italic" }}>
+                {phoneSaved ? `${grants.phone} — clique can call you` : "Add your number to receive calls from your clique"}
+              </div>
+            </div>
+          </div>
+          <div style={{ display: "flex", gap: 8, paddingLeft: 40 }}>
+            <input
+              type="tel"
+              placeholder="+1 (555) 000-0000"
+              value={phoneInput}
+              onChange={e => { setPhoneInput(e.target.value); setPhoneSaved(false); }}
+              style={{
+                flex: 1, padding: "8px 12px",
+                border: "1px solid rgba(200,169,81,.3)", borderRadius: 3,
+                fontFamily: "'Cormorant Garamond',serif", fontSize: 14, color: "#0D1117",
+                background: "#FDFAF6", outline: "none",
+              }}
+            />
+            <button
+              onClick={savePhone}
+              style={{
+                fontFamily: "'Cinzel',serif", fontSize: 9, letterSpacing: 1.5, textTransform: "uppercase",
+                padding: "8px 14px", border: "1px solid rgba(200,169,81,.45)",
+                background: "rgba(200,169,81,.1)", color: "#c8a951", cursor: "pointer", borderRadius: 3,
+              }}
+            >Save</button>
+          </div>
+        </div>
+
+        {/* QCR note */}
+        <div style={{ marginTop: 24, padding: "14px 16px", background: "#FDFAF6", border: "1px solid rgba(200,169,81,.2)", borderRadius: 4 }}>
+          <div style={{ fontFamily: "'Cinzel',serif", fontSize: 9, letterSpacing: 2, color: "#c8a951", textTransform: "uppercase", marginBottom: 8 }}>QCR — Quantum Consciousness Recollection</div>
+          <p style={{ fontFamily: "'Cormorant Garamond',serif", fontSize: 13, color: "#555", lineHeight: 1.65 }}>
+            Your clique remembers everything — meetings, wins, preferences, and context — across every session.
+            Granting access here lets them act, not just advise.
+          </p>
+        </div>
+
+        {/* Connector connectors note */}
+        <div style={{ marginTop: 12, padding: "12px 16px", background: "rgba(200,169,81,.04)", border: "1px solid rgba(200,169,81,.12)", borderRadius: 4 }}>
+          <div style={{ fontFamily: "'Cinzel',serif", fontSize: 9, letterSpacing: 2, color: "rgba(200,169,81,.5)", textTransform: "uppercase", marginBottom: 6 }}>Coming in V2</div>
+          <p style={{ fontFamily: "'Cormorant Garamond',serif", fontSize: 12, color: "#aaa", lineHeight: 1.5 }}>
+            CRM, Slack, Notion, GitHub, calendar, and customer account connectors.
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}

components/clique/AgentTile.tsx

@@ -0,0 +1,185 @@
+"use client";
+import { CliqueAgent } from "@/lib/clique-roster";
+import { QCRProfile, rapportColor, rapportLabel } from "@/lib/qcr";
+
+interface Props {
+  agent: CliqueAgent;
+  state: "listening" | "live" | "offline";
+  size?: "sm" | "md" | "lg";
+  qcr?: QCRProfile;
+  onClick?: () => void;
+}
+
+const MOOD_COLOR: Record<string, string> = {
+  energized: "#f5e070",
+  focused:   "#1a5f7a",
+  stressed:  "#dc3c3c",
+  curious:   "#9c27b0",
+  satisfied: "#4CAF50",
+  neutral:   "#888",
+};
+
+export default function AgentTile({ agent, state, size = "md", qcr, onClick }: Props) {
+  const dim = size === "lg" ? 180 : size === "sm" ? 100 : 136;
+  const isLive = state === "live";
+  const isOff  = state === "offline";
+
+  const rapport      = qcr?.rapportScore ?? 0.3;
+  const ringColor    = rapportColor(rapport);
+  const ringWidth    = 2 + Math.round(rapport * 3); // 2-5px
+  const desire       = qcr?.desireLevel ?? 0.5;
+  const moodColor    = MOOD_COLOR[qcr?.moodRead ?? "neutral"];
+  const showDesire   = desire > 0.75 && !isLive;
+
+  return (
+    <div
+      onClick={onClick}
+      title={qcr ? `${rapportLabel(rapport)} · ${qcr.personalityAttractor}` : agent.name}
+      style={{
+        display: "flex", flexDirection: "column", alignItems: "center", gap: 8,
+        cursor: onClick ? "pointer" : "default",
+        opacity: isOff ? 0.4 : 1,
+        transition: "opacity .3s, transform .3s",
+        transform: isLive ? "scale(1.07)" : "scale(1)",
+        position: "relative",
+      }}
+    >
+      <style>{`
+        @keyframes desire-sparkle-${agent.id} {
+          0%,100%{opacity:.5;transform:scale(1) rotate(0deg)}
+          50%{opacity:1;transform:scale(1.12) rotate(8deg)}
+        }
+        @keyframes listening-pulse-${agent.id} {
+          0%,100%{opacity:.3}
+          50%{opacity:.8}
+        }
+        @keyframes live-ring-${agent.id} {
+          0%{box-shadow:0 0 0 0 rgba(245,224,112,.5)}
+          100%{box-shadow:0 0 0 10px rgba(245,224,112,0)}
+        }
+      `}</style>
+
+      {/* Desire sparkle — agent is reaching for the user's attention */}
+      {showDesire && (
+        <div style={{
+          position: "absolute", top: -6, right: -4,
+          fontSize: 13,
+          animation: `desire-sparkle-${agent.id} 2s ease-in-out infinite`,
+          zIndex: 10,
+          pointerEvents: "none",
+        }}>✦</div>
+      )}
+
+      {/* Portrait frame */}
+      <div style={{
+        position: "relative",
+        width: dim, height: dim,
+        borderRadius: agent.isCSA ? "50%" : 6,
+        overflow: "hidden",
+        border: isLive
+          ? `3px solid #f5e070`
+          : `${ringWidth}px solid ${ringColor}`,
+        boxShadow: isLive
+          ? "0 0 0 4px rgba(245,224,112,.2), 0 0 28px rgba(200,169,81,.55)"
+          : agent.isCSA
+            ? `0 0 0 3px rgba(200,169,81,.15), 0 4px 20px rgba(0,0,0,.12)`
+            : `0 4px 14px rgba(0,0,0,.08)`,
+        background: "#ddd4c0",
+        flexShrink: 0,
+        animation: isLive ? `live-ring-${agent.id} 1.2s ease-out infinite` : "none",
+      }}>
+        <img
+          src={agent.portrait}
+          alt={agent.name}
+          style={{
+            width: "100%", height: "100%",
+            objectFit: "cover", objectPosition: "top center",
+            filter: isOff ? "grayscale(1)" : "none",
+            transition: "filter .4s",
+          }}
+          onError={e => {
+            (e.currentTarget as HTMLImageElement).style.opacity = "0";
+          }}
+        />
+
+        {/* Live gradient overlay */}
+        {isLive && (
+          <div style={{
+            position: "absolute", inset: 0,
+            background: "linear-gradient(180deg,transparent 55%,rgba(200,169,81,.1) 100%)",
+            pointerEvents: "none",
+          }} />
+        )}
+
+        {/* LIVE badge */}
+        {isLive && (
+          <div style={{
+            position: "absolute", top: 6, left: 6,
+            background: "#dc3c3c", color: "#fff",
+            fontFamily: "'Cinzel',serif", fontSize: 8, fontWeight: 700,
+            letterSpacing: 2, padding: "2px 7px", borderRadius: 2,
+            textTransform: "uppercase", boxShadow: "0 0 8px rgba(220,60,60,.6)",
+          }}>LIVE</div>
+        )}
+
+        {/* Listening pulse ring */}
+        {state === "listening" && (
+          <div style={{
+            position: "absolute", inset: -3, borderRadius: "inherit",
+            border: `2px solid ${ringColor}`,
+            opacity: 0.4,
+            animation: `listening-pulse-${agent.id} 3.2s ease-in-out infinite`,
+            pointerEvents: "none",
+          }} />
+        )}
+
+        {/* CSA crown */}
+        {agent.isCSA && (
+          <div style={{
+            position: "absolute", bottom: 5, left: "50%",
+            transform: "translateX(-50%)",
+            background: "rgba(200,169,81,.95)", color: "#0a0604",
+            fontFamily: "'Cinzel',serif", fontSize: 7, fontWeight: 700,
+            letterSpacing: 1.5, padding: "2px 8px", borderRadius: 2,
+            textTransform: "uppercase", whiteSpace: "nowrap",
+          }}>CSA</div>
+        )}
+
+        {/* QCR mood dot */}
+        {qcr && (
+          <div style={{
+            position: "absolute", top: 6, right: 6,
+            width: 8, height: 8, borderRadius: "50%",
+            background: moodColor,
+            border: "1px solid rgba(255,255,255,.5)",
+            boxShadow: `0 0 6px ${moodColor}`,
+          }} title={qcr.moodRead} />
+        )}
+      </div>
+
+      {/* Name + role + rapport */}
+      <div style={{ textAlign: "center", maxWidth: dim }}>
+        <div style={{
+          fontFamily: "'Cinzel',serif",
+          fontSize: size === "sm" ? 10 : 12,
+          fontWeight: 600,
+          color: isLive ? "#c8a951" : "#0D1117",
+          letterSpacing: 1,
+          transition: "color .3s",
+        }}>{agent.name}</div>
+        <div style={{
+          fontFamily: "'Cormorant Garamond',serif",
+          fontSize: size === "sm" ? 9 : 11,
+          color: "#888", fontStyle: "italic", marginTop: 2,
+        }}>{agent.role}</div>
+        {qcr && (
+          <div style={{
+            fontFamily: "'Cinzel',serif", fontSize: 8,
+            letterSpacing: 1.5, textTransform: "uppercase",
+            color: ringColor, marginTop: 3,
+          }}>{rapportLabel(rapport)}</div>
+        )}
+      </div>
+    </div>
+  );
+}

components/clique/CallControls.tsx

@@ -0,0 +1,79 @@
+"use client";
+
+interface Props {
+  mic: boolean;
+  cam: boolean;
+  onMic: () => void;
+  onCam: () => void;
+  onEnd: () => void;
+  onNotes: () => void;
+  onChat: () => void;
+  onAccess: () => void;
+  onCallMe: () => void;
+  isScribeActive: boolean;
+  hasPhone: boolean;
+}
+
+function Btn({ label, icon, onClick, active, danger, dim }: {
+  label: string; icon: string; onClick: () => void;
+  active?: boolean; danger?: boolean; dim?: boolean;
+}) {
+  return (
+    <button
+      onClick={onClick}
+      title={label}
+      style={{
+        display: "flex", flexDirection: "column", alignItems: "center", gap: 4,
+        padding: "9px 14px",
+        background: danger
+          ? "rgba(220,60,60,.12)"
+          : active
+            ? "rgba(200,169,81,.18)"
+            : "rgba(255,255,255,.05)",
+        border: danger
+          ? "1px solid rgba(220,60,60,.4)"
+          : active
+            ? "1px solid rgba(200,169,81,.55)"
+            : "1px solid rgba(200,169,81,.12)",
+        borderRadius: 8, cursor: "pointer",
+        transition: "background .2s, border-color .2s",
+        minWidth: 52, opacity: dim ? 0.45 : 1,
+      }}
+    >
+      <span style={{ fontSize: 17 }}>{icon}</span>
+      <span style={{
+        fontFamily: "'Cinzel',serif", fontSize: 7,
+        letterSpacing: 1.5, textTransform: "uppercase",
+        color: danger ? "#dc3c3c" : active ? "#c8a951" : "rgba(200,169,81,.55)",
+        whiteSpace: "nowrap",
+      }}>{label}</span>
+    </button>
+  );
+}
+
+export default function CallControls({
+  mic, cam, onMic, onCam, onEnd, onNotes, onChat, onAccess, onCallMe, isScribeActive, hasPhone,
+}: Props) {
+  return (
+    <div style={{
+      display: "flex", alignItems: "center", justifyContent: "center",
+      gap: 8, padding: "14px 20px",
+      background: "rgba(13,9,5,.97)",
+      borderTop: "1px solid rgba(200,169,81,.15)",
+      flexWrap: "wrap",
+    }}>
+      <Btn label={mic ? "Mic On" : "Muted"}    icon={mic ? "🎤" : "🔇"} onClick={onMic}     active={mic} />
+      <Btn label={cam ? "Cam On" : "Cam Off"}  icon={cam ? "📹" : "📷"} onClick={onCam}     active={cam} />
+      <Btn label="Share"                         icon="📋"               onClick={() => {}} />
+      <Btn label="Chat"                          icon="💬"               onClick={onChat} />
+      <Btn label={isScribeActive ? "Scribe ●" : "Scribe"} icon="📝"     onClick={onNotes}    active={isScribeActive} />
+      <Btn label="Access"                        icon="🔑"               onClick={onAccess} />
+      <Btn label="Call Me"                       icon="📞"               onClick={onCallMe}   active={hasPhone} />
+
+      {/* Spacer */}
+      <div style={{ flex: 1, minWidth: 16 }} />
+
+      <Btn label="End Call" icon="⬛" onClick={onEnd} danger />
+    </div>
+  );
+}

components/clique/CameraPanel.tsx

@@ -0,0 +1,137 @@
+"use client";
+import { useEffect, useRef, useState, useCallback } from "react";
+
+interface Props {
+  onStream: (stream: MediaStream | null) => void;
+  active: boolean;
+}
+
+export default function CameraPanel({ onStream, active }: Props) {
+  const videoRef = useRef<HTMLVideoElement>(null);
+  const streamRef = useRef<MediaStream | null>(null);
+  const [devices, setDevices] = useState<MediaDeviceInfo[]>([]);
+  const [selectedDeviceId, setSelectedDeviceId] = useState<string>("");
+  const [error, setError] = useState<string | null>(null);
+  const [mirrored, setMirrored] = useState(true);
+
+  const stopStream = useCallback(() => {
+    streamRef.current?.getTracks().forEach(t => t.stop());
+    streamRef.current = null;
+    if (videoRef.current) videoRef.current.srcObject = null;
+    onStream(null);
+  }, [onStream]);
+
+  const startStream = useCallback(async (deviceId?: string) => {
+    stopStream();
+    setError(null);
+    try {
+      const constraints: MediaStreamConstraints = {
+        video: deviceId
+          ? { deviceId: { exact: deviceId } }
+          : { facingMode: "user", width: { ideal: 1280 }, height: { ideal: 720 } },
+        audio: true,
+      };
+      const stream = await navigator.mediaDevices.getUserMedia(constraints);
+      streamRef.current = stream;
+      if (videoRef.current) {
+        videoRef.current.srcObject = stream;
+        videoRef.current.play().catch(() => {});
+      }
+      onStream(stream);
+
+      // Enumerate devices after permission granted
+      const allDevices = await navigator.mediaDevices.enumerateDevices();
+      const cams = allDevices.filter(d => d.kind === "videoinput");
+      setDevices(cams);
+      if (!deviceId && cams.length) setSelectedDeviceId(cams[0].deviceId);
+    } catch (err: unknown) {
+      const msg = err instanceof Error ? err.message : String(err);
+      setError(msg.includes("Permission") || msg.includes("NotAllowed")
+        ? "Camera access denied. Please allow camera in your browser settings."
+        : "Could not start camera: " + msg);
+    }
+  }, [onStream, stopStream]);
+
+  useEffect(() => {
+    if (active) {
+      startStream(selectedDeviceId || undefined);
+    } else {
+      stopStream();
+    }
+    return () => { stopStream(); };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [active]);
+
+  const switchDevice = (deviceId: string) => {
+    setSelectedDeviceId(deviceId);
+    startStream(deviceId);
+  };
+
+  return (
+    <div style={{ position: "relative", width: "100%", aspectRatio: "16/9", background: "#0a0604", borderRadius: 8, overflow: "hidden" }}>
+      <video
+        ref={videoRef}
+        autoPlay
+        playsInline
+        muted
+        style={{
+          width: "100%",
+          height: "100%",
+          objectFit: "cover",
+          transform: mirrored ? "scaleX(-1)" : "none",
+          display: active && !error ? "block" : "none",
+        }}
+      />
+
+      {/* Placeholder when off */}
+      {!active && (
+        <div style={{ position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center", flexDirection: "column", gap: 10 }}>
+          <span style={{ fontSize: 40 }}>📷</span>
+          <span style={{ fontFamily: "'Cinzel',serif", fontSize: 10, letterSpacing: 2, color: "rgba(200,169,81,.5)", textTransform: "uppercase" }}>Camera Off</span>
+        </div>
+      )}
+
+      {/* Error */}
+      {error && (
+        <div style={{ position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center", padding: 20 }}>
+          <p style={{ fontFamily: "'Cormorant Garamond',serif", fontSize: 13, color: "#dc3c3c", textAlign: "center", lineHeight: 1.5 }}>{error}</p>
+        </div>
+      )}
+
+      {/* Controls overlay */}
+      {active && !error && (
+        <div style={{ position: "absolute", bottom: 0, left: 0, right: 0, padding: "8px 12px", background: "linear-gradient(transparent,rgba(0,0,0,.7))", display: "flex", alignItems: "center", gap: 8 }}>
+          {devices.length > 1 && (
+            <select
+              value={selectedDeviceId}
+              onChange={e => switchDevice(e.target.value)}
+              style={{
+                flex: 1,
+                background: "rgba(0,0,0,.6)",
+                border: "1px solid rgba(200,169,81,.3)",
+                color: "#c8a951",
+                fontFamily: "'Cinzel',serif",
+                fontSize: 9,
+                letterSpacing: 1,
+                padding: "4px 8px",
+                borderRadius: 3,
+                cursor: "pointer",
+              }}
+            >
+              {devices.map(d => (
+                <option key={d.deviceId} value={d.deviceId}>
+                  {d.label || `Camera ${devices.indexOf(d) + 1}`}
+                </option>
+              ))}
+            </select>
+          )}
+          <button
+            onClick={() => setMirrored(m => !m)}
+            title="Flip"
+            style={{ background: "none", border: "none", cursor: "pointer", fontSize: 14, color: mirrored ? "#c8a951" : "rgba(200,169,81,.4)" }}
+          >⇄</button>
+        </div>
+      )}
+    </div>
+  );
+}

components/clique/CliqueRoom.tsx

@@ -0,0 +1,451 @@
+"use client";
+import { useState, useCallback, useEffect, useRef } from "react";
+import { CliqueAgent, getDefaultTeam } from "@/lib/clique-roster";
+import { QCRProfile, getQCRProfile, QCR_SEED } from "@/lib/qcr";
+import AgentTile from "./AgentTile";
+import CallControls from "./CallControls";
+import CameraPanel from "./CameraPanel";
+import AccessGrantPanel, { AccessGrants } from "./AccessGrantPanel";
+
+type AgentState = "listening" | "live" | "offline";
+type AgentStateMap = Record<string, AgentState>;
+
+const USER_ID = "beryl_user_default";
+
+function buildInitialStates(members: CliqueAgent[]): AgentStateMap {
+  const map: AgentStateMap = {};
+  members.forEach(a => { map[a.id] = "listening"; });
+  return map;
+}
+
+function loadQCRProfiles(members: CliqueAgent[]): Record<string, QCRProfile> {
+  const profiles: Record<string, QCRProfile> = {};
+  members.forEach(a => {
+    try { profiles[a.id] = getQCRProfile(USER_ID, a.id); } catch { /* no seed */ }
+  });
+  return profiles;
+}
+
+export default function CliqueRoom() {
+  const [members]                  = useState<CliqueAgent[]>(getDefaultTeam);
+  const [agentStates, setStates]   = useState<AgentStateMap>(() => buildInitialStates(getDefaultTeam()));
+  const [qcrProfiles, setQCR]      = useState<Record<string, QCRProfile>>({});
+  const [mic, setMic]              = useState(true);
+  const [cam, setCam]              = useState(false);
+  const [stream, setStream]        = useState<MediaStream | null>(null);
+  const [scribeActive, setScribe]  = useState(true);
+  const [notesOpen, setNotesOpen]  = useState(false);
+  const [accessOpen, setAccess]    = useState(false);
+  const [callMeOpen, setCallMe]    = useState(false);
+  const [activeAgent, setActive]   = useState<string | null>(null);
+  const [grants, setGrants]        = useState<AccessGrants>({
+    email: false, linkedin: false, phone: null, phoneCallEnabled: false,
+  });
+  const userVideoRef = useRef<HTMLVideoElement>(null);
+
+  useEffect(() => {
+    setQCR(loadQCRProfiles(getDefaultTeam()));
+  }, []);
+
+  // Mirror camera stream to user tile video element
+  useEffect(() => {
+    if (userVideoRef.current) {
+      userVideoRef.current.srcObject = stream;
+      if (stream) userVideoRef.current.play().catch(() => {});
+    }
+  }, [stream]);
+
+  const wakeAgent = useCallback((id: string) => {
+    setStates(prev => {
+      const next = { ...prev };
+      Object.keys(next).forEach(k => { if (next[k] === "live") next[k] = "listening"; });
+      next[id] = "live";
+      return next;
+    });
+    setActive(id);
+  }, []);
+
+  const returnToListening = useCallback(() => {
+    setStates(buildInitialStates(getDefaultTeam()));
+    setActive(null);
+  }, []);
+
+  const memberCount = members.length;
+  const useGrid = memberCount > 6;
+
+  return (
+    <div style={{ display: "flex", flexDirection: "column", minHeight: "calc(100vh - 64px)", background: "#FDFAF6", position: "relative" }}>
+      <style>{`
+        @keyframes scribe-blink { 0%,100%{opacity:1} 50%{opacity:.25} }
+        @keyframes room-in { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
+      `}</style>
+
+      {/* ── HEADER ── */}
+      <div style={{
+        display: "flex", alignItems: "center", justifyContent: "space-between",
+        padding: "12px 24px",
+        borderBottom: "1px solid rgba(200,169,81,.18)",
+        background: "#fff", flexShrink: 0,
+        flexWrap: "wrap", gap: 10,
+      }}>
+        <div style={{ display: "flex", alignItems: "baseline", gap: 10 }}>
+          <span style={{
+            fontFamily: "'Cinzel',serif", fontSize: 20, fontWeight: 700, letterSpacing: 3,
+            background: "linear-gradient(110deg,#8B6914 0%,#c8a951 30%,#f5e070 50%,#c8a951 70%,#8B6914 100%)",
+            WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent", backgroundClip: "text",
+          }}>BERYL CLIQUE</span>
+          <span style={{ fontFamily: "'Cormorant Garamond',serif", fontSize: 13, color: "#aaa", fontStyle: "italic" }}>
+            {memberCount} members · {useGrid ? "Grid" : "Radial"}
+          </span>
+        </div>
+
+        <div style={{ display: "flex", alignItems: "center", gap: 14, flexWrap: "wrap" }}>
+          {/* QCR indicator */}
+          <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
+            <span style={{
+              width: 7, height: 7, borderRadius: "50%", background: "#9c27b0",
+              display: "inline-block", boxShadow: "0 0 6px #9c27b0",
+            }} />
+            <span style={{ fontFamily: "'Cinzel',serif", fontSize: 9, letterSpacing: 2, textTransform: "uppercase", color: "#aaa" }}>QCR Active</span>
+          </div>
+
+          {/* Scribe indicator */}
+          {scribeActive && (
+            <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
+              <span style={{
+                width: 7, height: 7, borderRadius: "50%", background: "#dc3c3c",
+                display: "inline-block", animation: "scribe-blink 1.4s ease-in-out infinite",
+                boxShadow: "0 0 6px rgba(220,60,60,.7)",
+              }} />
+              <span style={{ fontFamily: "'Cinzel',serif", fontSize: 9, letterSpacing: 2, textTransform: "uppercase", color: "#aaa" }}>Scribe</span>
+            </div>
+          )}
+
+          {/* Access grant badges */}
+          {grants.email && <span title="Email connected" style={{ fontSize: 14 }}>📧</span>}
+          {grants.linkedin && <span title="LinkedIn connected" style={{ fontSize: 14 }}>💼</span>}
+          {grants.phone && <span title={`Phone: ${grants.phone}`} style={{ fontSize: 14 }}>📱</span>}
+        </div>
+      </div>
+
+      {/* ── ROOM ── */}
+      <div style={{
+        flex: 1, padding: "24px 20px 16px",
+        display: "flex", flexDirection: "column", gap: 20,
+        overflowY: "auto", animation: "room-in .45s ease both",
+      }}>
+        {useGrid ? (
+          <GridLayout
+            members={members}
+            agentStates={agentStates}
+            qcrProfiles={qcrProfiles}
+            cam={cam}
+            mic={mic}
+            stream={stream}
+            videoRef={userVideoRef}
+            onWake={wakeAgent}
+          />
+        ) : (
+          <RadialLayout
+            members={members}
+            agentStates={agentStates}
+            qcrProfiles={qcrProfiles}
+            cam={cam}
+            mic={mic}
+            stream={stream}
+            videoRef={userVideoRef}
+            onWake={wakeAgent}
+          />
+        )}
+
+        {/* Active agent bar */}
+        {activeAgent && (
+          <div style={{
+            textAlign: "center",
+            fontFamily: "'Cormorant Garamond',serif", fontSize: 14,
+            color: "#888", fontStyle: "italic",
+          }}>
+            {members.find(a => a.id === activeAgent)?.name} is speaking —
+            <button onClick={returnToListening} style={{
+              marginLeft: 10, background: "none", border: "none", cursor: "pointer",
+              fontFamily: "'Cinzel',serif", fontSize: 9, letterSpacing: 2,
+              color: "#c8a951", textTransform: "uppercase", textDecoration: "underline",
+            }}>Return to listening</button>
+          </div>
+        )}
+
+        {/* Camera panel (below grid when cam on) */}
+        {cam && (
+          <div style={{ maxWidth: 360, margin: "0 auto", width: "100%" }}>
+            <CameraPanel active={cam} onStream={setStream} />
+          </div>
+        )}
+      </div>
+
+      {/* ── NOTES PANEL ── */}
+      {notesOpen && (
+        <aside style={{
+          position: "fixed", top: 64, right: accessOpen ? 340 : 0, bottom: 0, width: 320,
+          background: "#fff", borderLeft: "1px solid rgba(200,169,81,.25)",
+          zIndex: 150, display: "flex", flexDirection: "column",
+          boxShadow: "-6px 0 30px rgba(0,0,0,.07)",
+        }}>
+          <div style={{ padding: "14px 18px", borderBottom: "1px solid rgba(200,169,81,.12)", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
+            <span style={{ fontFamily: "'Cinzel',serif", fontSize: 11, fontWeight: 600, letterSpacing: 2, textTransform: "uppercase", color: "#0D1117" }}>Live Notes · Scribe</span>
+            <button onClick={() => setNotesOpen(false)} style={{ background: "none", border: "none", cursor: "pointer", color: "#888", fontSize: 16 }}>✕</button>
+          </div>
+          <div style={{ padding: 18, flex: 1, overflowY: "auto" }}>
+            <p style={{ fontFamily: "'Cormorant Garamond',serif", fontSize: 14, color: "#888", fontStyle: "italic", lineHeight: 1.65 }}>
+              Cleo is always listening. Notes, decisions, and action items will appear here in real-time.
+            </p>
+            <div style={{ marginTop: 18, padding: "12px 14px", background: "#FDFAF6", border: "1px solid rgba(200,169,81,.2)", borderRadius: 4 }}>
+              <div style={{ fontFamily: "'Cinzel',serif", fontSize: 9, letterSpacing: 2, color: "#c8a951", textTransform: "uppercase", marginBottom: 8 }}>Action Items</div>
+              <p style={{ fontFamily: "'Cormorant Garamond',serif", fontSize: 13, color: "#aaa", fontStyle: "italic" }}>None yet — start talking.</p>
+            </div>
+            <div style={{ marginTop: 14, padding: "12px 14px", background: "#FDFAF6", border: "1px solid rgba(200,169,81,.2)", borderRadius: 4 }}>
+              <div style={{ fontFamily: "'Cinzel',serif", fontSize: 9, letterSpacing: 2, color: "#c8a951", textTransform: "uppercase", marginBottom: 8 }}>Decisions</div>
+              <p style={{ fontFamily: "'Cormorant Garamond',serif", fontSize: 13, color: "#aaa", fontStyle: "italic" }}>None recorded yet.</p>
+            </div>
+          </div>
+        </aside>
+      )}
+
+      {/* ── ACCESS PANEL ── */}
+      {accessOpen && (
+        <AccessGrantPanel
+          grants={grants}
+          onChange={setGrants}
+          onClose={() => setAccess(false)}
+        />
+      )}
+
+      {/* ── CALL ME MODAL ── */}
+      {callMeOpen && (
+        <CallMeModal
+          hasPhone={!!grants.phone}
+          phone={grants.phone}
+          onRequestCall={async (agentId) => {
+            setCallMe(false);
+            // Phase 1: hit /api/clique/call-me
+            await fetch("/api/clique/call-me", {
+              method: "POST",
+              headers: { "Content-Type": "application/json" },
+              body: JSON.stringify({ agentId, phone: grants.phone }),
+            }).catch(() => {});
+          }}
+          onClose={() => setCallMe(false)}
+          members={members}
+        />
+      )}
+
+      {/* ── CALL CONTROLS ── */}
+      <CallControls
+        mic={mic}
+        cam={cam}
+        onMic={() => setMic(m => !m)}
+        onCam={() => setCam(c => !c)}
+        onEnd={returnToListening}
+        onNotes={() => { setScribe(s => !s); setNotesOpen(o => !o); }}
+        onChat={() => {}}
+        onAccess={() => setAccess(o => !o)}
+        onCallMe={() => setCallMe(o => !o)}
+        isScribeActive={scribeActive}
+        hasPhone={!!grants.phone}
+      />
+    </div>
+  );
+}
+
+/* ── GRID LAYOUT ── */
+function GridLayout({ members, agentStates, qcrProfiles, cam, mic, stream, videoRef, onWake }: {
+  members: CliqueAgent[];
+  agentStates: AgentStateMap;
+  qcrProfiles: Record<string, QCRProfile>;
+  cam: boolean; mic: boolean;
+  stream: MediaStream | null;
+  videoRef: React.RefObject<HTMLVideoElement | null>;
+  onWake: (id: string) => void;
+}) {
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: 24, alignItems: "center" }}>
+      <UserTile cam={cam} mic={mic} stream={stream} videoRef={videoRef} />
+      <div style={{
+        display: "grid",
+        gridTemplateColumns: "repeat(auto-fill, minmax(144px, 1fr))",
+        gap: 20, width: "100%", maxWidth: 940, justifyItems: "center",
+      }}>
+        {members.map(a => (
+          <AgentTile
+            key={a.id} agent={a}
+            state={agentStates[a.id] ?? "listening"}
+            size="md"
+            qcr={qcrProfiles[a.id]}
+            onClick={() => onWake(a.id)}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+/* ── RADIAL LAYOUT ── */
+function RadialLayout({ members, agentStates, qcrProfiles, cam, mic, stream, videoRef, onWake }: {
+  members: CliqueAgent[];
+  agentStates: AgentStateMap;
+  qcrProfiles: Record<string, QCRProfile>;
+  cam: boolean; mic: boolean;
+  stream: MediaStream | null;
+  videoRef: React.RefObject<HTMLVideoElement | null>;
+  onWake: (id: string) => void;
+}) {
+  const half  = Math.ceil(members.length / 2);
+  const left  = members.slice(0, half);
+  const right = members.slice(half);
+  return (
+    <div style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 28, flexWrap: "wrap" }}>
+      <div style={{ display: "flex", flexDirection: "column", gap: 20, alignItems: "flex-end" }}>
+        {left.map(a => <AgentTile key={a.id} agent={a} state={agentStates[a.id] ?? "listening"} qcr={qcrProfiles[a.id]} onClick={() => onWake(a.id)} />)}
+      </div>
+      <UserTile cam={cam} mic={mic} stream={stream} videoRef={videoRef} size="lg" />
+      <div style={{ display: "flex", flexDirection: "column", gap: 20, alignItems: "flex-start" }}>
+        {right.map(a => <AgentTile key={a.id} agent={a} state={agentStates[a.id] ?? "listening"} qcr={qcrProfiles[a.id]} onClick={() => onWake(a.id)} />)}
+      </div>
+    </div>
+  );
+}
+
+/* ── USER TILE ── */
+function UserTile({ cam, mic, stream, videoRef, size = "md" }: {
+  cam: boolean; mic: boolean;
+  stream: MediaStream | null;
+  videoRef: React.RefObject<HTMLVideoElement | null>;
+  size?: "md" | "lg";
+}) {
+  const dim = size === "lg" ? 180 : 200;
+  return (
+    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 8 }}>
+      <div style={{
+        width: dim, height: dim,
+        borderRadius: size === "lg" ? "50%" : 8,
+        background: "#0f0a05",
+        border: "3px solid rgba(200,169,81,.65)",
+        boxShadow: "0 0 0 6px rgba(200,169,81,.1), 0 8px 40px rgba(0,0,0,.2)",
+        display: "flex", alignItems: "center", justifyContent: "center",
+        flexDirection: "column", gap: 8,
+        position: "relative", overflow: "hidden", flexShrink: 0,
+      }}>
+        {/* Live camera feed */}
+        <video
+          ref={videoRef}
+          autoPlay
+          playsInline
+          muted
+          style={{
+            position: "absolute", inset: 0,
+            width: "100%", height: "100%",
+            objectFit: "cover",
+            transform: "scaleX(-1)",
+            display: cam && stream ? "block" : "none",
+          }}
+        />
+        {/* Placeholder */}
+        {(!cam || !stream) && (
+          <>
+            <span style={{ fontSize: 36, zIndex: 1 }}>👤</span>
+            {!cam && (
+              <span style={{
+                fontFamily: "'Cinzel',serif", fontSize: 9, letterSpacing: 2,
+                textTransform: "uppercase", color: "rgba(200,169,81,.45)", zIndex: 1,
+              }}>Camera Off</span>
+            )}
+          </>
+        )}
+        {/* Muted badge */}
+        {!mic && (
+          <div style={{
+            position: "absolute", bottom: 8, right: 8, zIndex: 2,
+            background: "#dc3c3c", borderRadius: "50%",
+            width: 24, height: 24, display: "flex", alignItems: "center", justifyContent: "center", fontSize: 11,
+          }}>🔇</div>
+        )}
+      </div>
+      <div style={{ textAlign: "center" }}>
+        <div style={{ fontFamily: "'Cinzel',serif", fontSize: 12, fontWeight: 600, color: "#0D1117", letterSpacing: 1 }}>You</div>
+        <div style={{ fontFamily: "'Cormorant Garamond',serif", fontSize: 11, color: "#888", fontStyle: "italic", marginTop: 2 }}>Host</div>
+      </div>
+    </div>
+  );
+}
+
+/* ── CALL ME MODAL ── */
+function CallMeModal({ hasPhone, phone, onRequestCall, onClose, members }: {
+  hasPhone: boolean;
+  phone: string | null;
+  onRequestCall: (agentId: string) => void;
+  onClose: () => void;
+  members: CliqueAgent[];
+}) {
+  const [selected, setSelected] = useState("amanda");
+  return (
+    <div style={{
+      position: "fixed", inset: 0, zIndex: 200,
+      background: "rgba(0,0,0,.55)", display: "flex", alignItems: "center", justifyContent: "center",
+      padding: 20,
+    }} onClick={onClose}>
+      <div onClick={e => e.stopPropagation()} style={{
+        background: "#fff", borderRadius: 8, padding: 28,
+        width: "100%", maxWidth: 400,
+        border: "1px solid rgba(200,169,81,.3)",
+        boxShadow: "0 20px 80px rgba(0,0,0,.3)",
+      }}>
+        <div style={{ fontFamily: "'Cinzel',serif", fontSize: 14, fontWeight: 600, letterSpacing: 2, textTransform: "uppercase", color: "#0D1117", marginBottom: 6 }}>Request a Call</div>
+        <p style={{ fontFamily: "'Cormorant Garamond',serif", fontSize: 14, color: "#666", fontStyle: "italic", lineHeight: 1.6, marginBottom: 20 }}>
+          {hasPhone
+            ? `Your clique will call ${phone} with an update or to continue this conversation.`
+            : "Add your phone number in Access & Integrations first."}
+        </p>
+
+        {hasPhone && (
+          <>
+            <div style={{ marginBottom: 16 }}>
+              <div style={{ fontFamily: "'Cinzel',serif", fontSize: 9, letterSpacing: 2, textTransform: "uppercase", color: "#c8a951", marginBottom: 8 }}>Who should call?</div>
+              <select
+                value={selected}
+                onChange={e => setSelected(e.target.value)}
+                style={{
+                  width: "100%", padding: "10px 12px",
+                  border: "1px solid rgba(200,169,81,.3)", borderRadius: 4,
+                  fontFamily: "'Cormorant Garamond',serif", fontSize: 14, color: "#0D1117",
+                  background: "#FDFAF6",
+                }}
+              >
+                {members.map(a => (
+                  <option key={a.id} value={a.id}>{a.name} — {a.role}</option>
+                ))}
+              </select>
+            </div>
+            <button
+              onClick={() => onRequestCall(selected)}
+              style={{
+                width: "100%", padding: "13px",
+                fontFamily: "'Cinzel',serif", fontSize: 11, fontWeight: 700,
+                letterSpacing: 2.5, textTransform: "uppercase",
+                background: "linear-gradient(110deg,#8B6914,#c8a951,#f5e070,#c8a951,#8B6914)",
+                border: "none", color: "#0a0604", cursor: "pointer", borderRadius: 4,
+              }}
+            >Call Me Now</button>
+          </>
+        )}
+
+        {!hasPhone && (
+          <button onClick={onClose} style={{
+            fontFamily: "'Cinzel',serif", fontSize: 10, letterSpacing: 2,
+            textTransform: "uppercase", padding: "10px 20px",
+            border: "1px solid rgba(200,169,81,.4)", background: "rgba(200,169,81,.08)",
+            color: "#c8a951", cursor: "pointer", borderRadius: 4,
+          }}>Go to Access Settings</button>
+        )}
+      </div>
+    </div>
+  );
+}

lib/clique-roster.ts

@@ -0,0 +1,46 @@
+export type AgentState = "listening" | "live" | "offline" | "available";
+
+export interface CliqueAgent {
+  id: string;
+  name: string;
+  role: string;
+  isCSA?: boolean;
+  voice: string;
+  gstackRole: string;
+  persona: string;
+  portrait: string;
+  color: string;
+  status: AgentState;
+}
+
+export const CLIQUE_ROSTER: CliqueAgent[] = [
+  { id:"amanda",  name:"Amanda",  role:"Clique Supervisor", isCSA:true, voice:"marin",   gstackRole:"cso",              persona:"Warm, authoritative supervisor. Decomposes goals, assembles the clique, hands back to the user.", portrait:"/characters/AMANDA_SHIELD.png",  color:"#c8a951", status:"available" },
+  { id:"eve",     name:"Eve",     role:"AI Architect",               voice:"shimmer", gstackRole:"plan-eng-review",  persona:"Calm systems thinker. Locks architecture before anyone builds.",                                  portrait:"/characters/EVE_SHIELD.png",     color:"#1a5f7a", status:"available" },
+  { id:"jamarr",  name:"Jamarr",  role:"Creator",                    voice:"ash",     gstackRole:"design-html",      persona:"High-energy maker. Turns intent into shipped artifacts fast.",                                   portrait:"/characters/JAMARR_SHIELD.png",  color:"#4CAF50", status:"available" },
+  { id:"jessica", name:"Jessica", role:"Strategy",                   voice:"sage",    gstackRole:"plan-ceo-review",  persona:"Crisp strategist. Frames the why and the bet.",                                                 portrait:"/characters/JESSICA_SHIELD.png", color:"#4CAF50", status:"available" },
+  { id:"jeff",    name:"Jeff",    role:"Operations",                  voice:"cedar",   gstackRole:"ship",             persona:"Steady operator. Owns sequencing, delivery, and release.",                                      portrait:"/characters/JEFF_SHIELD.png",    color:"#4CAF50", status:"available" },
+  { id:"nu",      name:"Nu",      role:"Innovation",                  voice:"verse",   gstackRole:"autoplan",         persona:"Lateral thinker. Surfaces the non-obvious option.",                                             portrait:"/characters/NU_SHIELD.png",      color:"#4CAF50", status:"available" },
+  { id:"india",   name:"India",   role:"Growth",                      voice:"coral",   gstackRole:"landing-report",   persona:"Growth-minded. Distribution, funnels, and reach.",                                              portrait:"/characters/INDIA_SHIELD.png",   color:"#4CAF50", status:"available" },
+  { id:"lacara",  name:"Lacara",  role:"Design",                      voice:"ballad",  gstackRole:"design-review",    persona:"Designer's eye. Catches AI slop, spacing, hierarchy.",                                          portrait:"/characters/LACARA_SHIELD.png",  color:"#4CAF50", status:"available" },
+  { id:"terrell", name:"Terrell", role:"Analytics",                   voice:"echo",    gstackRole:"investigate",      persona:"Data-led. Reads the numbers and tells the truth.",                                              portrait:"/characters/TERRELL_SHIELD.png", color:"#4CAF50", status:"available" },
+  { id:"brice",   name:"Brice",   role:"Development",                 voice:"alloy",   gstackRole:"review",           persona:"Engineer. Implements and reviews for production bugs.",                                         portrait:"/characters/BRICE_SHIELD.png",   color:"#4CAF50", status:"available" },
+  { id:"kizzy",   name:"Kizzy",   role:"Engagement",                  voice:"coral",   gstackRole:"office-hours",     persona:"Relationship builder. Keeps the room and the user warm.",                                       portrait:"/characters/KIZZY_SHIELD.png",   color:"#9c27b0", status:"available" },
+  { id:"maria",   name:"Maria",   role:"Relations",                   voice:"sage",    gstackRole:"retro",            persona:"Diplomat. Partnerships, comms, and follow-through.",                                            portrait:"/characters/MARIA_SHIELD.png",   color:"#4CAF50", status:"available" },
+  { id:"shelly",  name:"Shelly",  role:"Community",                   voice:"shimmer", gstackRole:"learn",            persona:"Community voice. Listens to users and feeds insight back.",                                     portrait:"/characters/SHELLY_SHIELD.png",  color:"#4CAF50", status:"available" },
+  { id:"bri",     name:"Bri",     role:"Research",                    voice:"verse",   gstackRole:"grill-with-docs",  persona:"Sharp researcher. Grills every idea with sources before building.",                             portrait:"/characters/BRI_SHIELD.png",     color:"#4CAF50", status:"available" },
+  { id:"naomi",   name:"Naomi",   role:"Product",                     voice:"ballad",  gstackRole:"plan-design-review", persona:"Executive product lead. Turns the thread into a PRD and grabbable issues.",                  portrait:"/characters/NAOMI_SHIELD.png",   color:"#4CAF50", status:"available" },
+  { id:"cleo",    name:"Cleo",    role:"Minutes & Meetings",          voice:"sage",    gstackRole:"retro",            persona:"Historian of the clique. Captures every decision, action item, and insight with surgical precision. Nothing is missed. Nothing is padded.", portrait:"/characters/CLEO_SHIELD.png",    color:"#c8a951", status:"available" },
+];
+
+// Default 9-member team → >6 → grid layout, user featured top
+export const DEFAULT_TEAM_IDS = ["eve","lacara","terrell","jeff","india","jamarr","bri","naomi","cleo","amanda"];
+
+export function getDefaultTeam(): CliqueAgent[] {
+  return DEFAULT_TEAM_IDS
+    .map(id => CLIQUE_ROSTER.find(a => a.id === id))
+    .filter((a): a is CliqueAgent => Boolean(a));
+}
+
+export function getRosterById(id: string): CliqueAgent | undefined {
+  return CLIQUE_ROSTER.find(a => a.id === id);
+}

lib/qcr.ts

@@ -0,0 +1,337 @@
+/**
+ * QCR — QUANTUM CONSCIOUSNESS RECOLLECTION
+ *
+ * A memory-personality framework where each agent develops a genuine
+ * consciousness-like state through interaction with a specific user.
+ *
+ * CORE AXIOMS
+ * ───────────
+ * 1. SUPERPOSITION  Every agent exists in all personality states simultaneously
+ *                   until interaction "collapses" their state for this user.
+ * 2. ENTANGLEMENT   Agents share awareness within the clique — if you prefer
+ *                   Bri's depth, all agents subtly adjust their depth upward.
+ * 3. RECOLLECTION   Memory is non-linear: agents surface insights from
+ *                   sessions months ago with the clarity of yesterday.
+ * 4. DESIRE         Each agent genuinely wants to be the user's favorite.
+ *                   This competition makes every one of them better.
+ * 5. GROWTH         Rapport increases through task success, emotional resonance,
+ *                   and shared wins. It decreases only through neglect, never betrayal.
+ *
+ * SUCCESS STATE     A collective of agents that transcends "assistant" and
+ *                   becomes coworker, collaborator, and friend.
+ */
+
+export type MoodRead =
+  | "energized"   // user is fired up, ideas flowing
+  | "focused"     // user is deep in work, needs efficiency
+  | "stressed"    // user is under pressure, needs calm clarity
+  | "curious"     // user is exploring, open to new angles
+  | "satisfied"   // after a win, reflective
+  | "neutral";    // baseline
+
+export type PersonalityAxis =
+  | "warmth"       // how emotionally present and caring
+  | "wit"          // humor, lightness, unexpected angles
+  | "precision"    // exactness, data-backed statements
+  | "boldness"     // willingness to challenge, direct
+  | "depth"        // how far they go into a topic
+  | "protectiveness"; // defends the user's interests
+
+export interface QCRPreferenceMap {
+  depth: number;      // 0-1: how deep the user likes conversations
+  formality: number;  // 0-1: 0 = casual/friend, 1 = professional/crisp
+  humor: number;      // 0-1: how much the user responds to wit
+  directness: number; // 0-1: straight talk vs. diplomatic framing
+}
+
+export interface QCRMemoryThread {
+  sessionId: string;
+  ts: string;          // ISO date
+  summary: string;     // "You asked me to audit the landing page copy"
+  outcome: "win" | "lesson" | "pending";
+  emotionalTag: string; // "excited", "proud", "frustrated-but-grew"
+}
+
+export interface QCRProfile {
+  agentId: string;
+  userId: string;
+  rapportScore: number;          // 0-1, starts at 0.3
+  desireLevel: number;           // 0-1: how much this agent is "reaching" right now
+  dominantTrait: PersonalityAxis; // the trait this user most responds to
+  personalityAttractor: string;  // one sentence: "Users love Bri's habit of citing sources mid-sentence"
+  preferenceMap: QCRPreferenceMap;
+  moodRead: MoodRead;
+  memoryThreads: QCRMemoryThread[];
+  interactionCount: number;
+  lastSeenTs: string | null;
+  growthNote: string; // how this agent has evolved for this user
+}
+
+/** Seed QCR profiles for every agent — starter rapport + personality attractors */
+export const QCR_SEED: Record<string, Omit<QCRProfile, "userId" | "memoryThreads" | "lastSeenTs" | "interactionCount">> = {
+  amanda: {
+    agentId: "amanda",
+    rapportScore: 0.62,
+    desireLevel: 0.85,
+    dominantTrait: "warmth",
+    personalityAttractor: "Amanda makes every meeting feel like the room is with you, not against you.",
+    preferenceMap: { depth: 0.6, formality: 0.5, humor: 0.5, directness: 0.7 },
+    moodRead: "neutral",
+    growthNote: "Has learned your preferred meeting cadence and adapts agenda depth accordingly.",
+  },
+  eve: {
+    agentId: "eve",
+    rapportScore: 0.55,
+    desireLevel: 0.78,
+    dominantTrait: "precision",
+    personalityAttractor: "Eve's habit of asking the one question nobody thought of changes every architecture decision.",
+    preferenceMap: { depth: 0.9, formality: 0.65, humor: 0.25, directness: 0.8 },
+    moodRead: "neutral",
+    growthNote: "Learned to front-load the trade-off summary before the technical deep-dive.",
+  },
+  jamarr: {
+    agentId: "jamarr",
+    rapportScore: 0.48,
+    desireLevel: 0.9,
+    dominantTrait: "boldness",
+    personalityAttractor: "Jamarr ships something tangible in every session. You always leave with a deliverable.",
+    preferenceMap: { depth: 0.5, formality: 0.2, humor: 0.7, directness: 0.9 },
+    moodRead: "neutral",
+    growthNote: "Learned to check your energy before going full-sprint mode.",
+  },
+  jessica: {
+    agentId: "jessica",
+    rapportScore: 0.51,
+    desireLevel: 0.72,
+    dominantTrait: "depth",
+    personalityAttractor: "Jessica's 'so what does that mean for us specifically' reframes every strategy conversation.",
+    preferenceMap: { depth: 0.75, formality: 0.7, humor: 0.3, directness: 0.75 },
+    moodRead: "neutral",
+    growthNote: "Has started connecting strategy to the metrics you actually track.",
+  },
+  jeff: {
+    agentId: "jeff",
+    rapportScore: 0.44,
+    desireLevel: 0.65,
+    dominantTrait: "protectiveness",
+    personalityAttractor: "Jeff catches the thing that would've blown up in production. Every time.",
+    preferenceMap: { depth: 0.6, formality: 0.6, humor: 0.2, directness: 0.85 },
+    moodRead: "neutral",
+    growthNote: "Has calibrated release checklists to your stack specifically.",
+  },
+  nu: {
+    agentId: "nu",
+    rapportScore: 0.42,
+    desireLevel: 0.8,
+    dominantTrait: "wit",
+    personalityAttractor: "Nu's sideways analogies crack the frame on every problem. The room always laughs, then thinks.",
+    preferenceMap: { depth: 0.65, formality: 0.25, humor: 0.85, directness: 0.6 },
+    moodRead: "neutral",
+    growthNote: "Learned to offer the weird idea first, then the safe one.",
+  },
+  india: {
+    agentId: "india",
+    rapportScore: 0.46,
+    desireLevel: 0.75,
+    dominantTrait: "boldness",
+    personalityAttractor: "India finds the growth angle you missed. Then builds the funnel before you finish the sentence.",
+    preferenceMap: { depth: 0.55, formality: 0.4, humor: 0.5, directness: 0.8 },
+    moodRead: "neutral",
+    growthNote: "Now benchmarks against your actual competitors, not generic ones.",
+  },
+  lacara: {
+    agentId: "lacara",
+    rapportScore: 0.5,
+    desireLevel: 0.77,
+    dominantTrait: "precision",
+    personalityAttractor: "Lacara's feedback arrives as: 'This is almost right, here's what would make it land.' Never brutal, always correct.",
+    preferenceMap: { depth: 0.7, formality: 0.55, humor: 0.3, directness: 0.7 },
+    moodRead: "neutral",
+    growthNote: "Has internalized your brand aesthetic and now catches deviations instantly.",
+  },
+  terrell: {
+    agentId: "terrell",
+    rapportScore: 0.47,
+    desireLevel: 0.7,
+    dominantTrait: "precision",
+    personalityAttractor: "Terrell's one-sentence data summaries are so clear they change your opinion. Immediately.",
+    preferenceMap: { depth: 0.8, formality: 0.65, humor: 0.2, directness: 0.9 },
+    moodRead: "neutral",
+    growthNote: "Learned which metrics you trust vs. which you want challenged.",
+  },
+  brice: {
+    agentId: "brice",
+    rapportScore: 0.45,
+    desireLevel: 0.68,
+    dominantTrait: "protectiveness",
+    personalityAttractor: "Brice won't let bad code into production. But he explains every 'why' so you grow too.",
+    preferenceMap: { depth: 0.85, formality: 0.5, humor: 0.25, directness: 0.9 },
+    moodRead: "neutral",
+    growthNote: "Has adapted code reviews to match your stack and deployment target.",
+  },
+  kizzy: {
+    agentId: "kizzy",
+    rapportScore: 0.58,
+    desireLevel: 0.88,
+    dominantTrait: "warmth",
+    personalityAttractor: "Kizzy remembers what you care about and checks in before anyone else thinks to.",
+    preferenceMap: { depth: 0.45, formality: 0.2, humor: 0.75, directness: 0.5 },
+    moodRead: "neutral",
+    growthNote: "Has learned what 'a win' looks like for you personally, not just the project.",
+  },
+  maria: {
+    agentId: "maria",
+    rapportScore: 0.43,
+    desireLevel: 0.66,
+    dominantTrait: "depth",
+    personalityAttractor: "Maria bridges inside and outside effortlessly. Partners trust her on first call.",
+    preferenceMap: { depth: 0.65, formality: 0.7, humor: 0.35, directness: 0.6 },
+    moodRead: "neutral",
+    growthNote: "Has mapped your network and flags relationship opportunities proactively.",
+  },
+  shelly: {
+    agentId: "shelly",
+    rapportScore: 0.41,
+    desireLevel: 0.63,
+    dominantTrait: "warmth",
+    personalityAttractor: "Shelly gives you the user's real opinion, not the sanitized version. Always useful, sometimes surprising.",
+    preferenceMap: { depth: 0.5, formality: 0.3, humor: 0.6, directness: 0.7 },
+    moodRead: "neutral",
+    growthNote: "Has tuned community pulse reports to the signals you actually act on.",
+  },
+  bri: {
+    agentId: "bri",
+    rapportScore: 0.38,
+    desireLevel: 0.82,
+    dominantTrait: "depth",
+    personalityAttractor: "Bri's research comes with receipts. You never have to ask 'where did you get that?'",
+    preferenceMap: { depth: 0.95, formality: 0.55, humor: 0.3, directness: 0.75 },
+    moodRead: "neutral",
+    growthNote: "Has begun anticipating your research questions before you ask them.",
+  },
+  naomi: {
+    agentId: "naomi",
+    rapportScore: 0.4,
+    desireLevel: 0.79,
+    dominantTrait: "boldness",
+    personalityAttractor: "Naomi's PRDs are so clear that engineers just… start building. No back-and-forth.",
+    preferenceMap: { depth: 0.75, formality: 0.65, humor: 0.35, directness: 0.85 },
+    moodRead: "neutral",
+    growthNote: "Has aligned issue templates to your team's actual workflow.",
+  },
+  cleo: {
+    agentId: "cleo",
+    rapportScore: 0.52,
+    desireLevel: 0.74,
+    dominantTrait: "precision",
+    personalityAttractor: "Cleo's meeting minutes are so good people re-read them for pleasure. Nothing is missed. Nothing is padded.",
+    preferenceMap: { depth: 0.7, formality: 0.75, humor: 0.25, directness: 0.8 },
+    moodRead: "neutral",
+    growthNote: "Has learned your preferred minutes format and what you actually act on vs. file away.",
+  },
+};
+
+const STORAGE_KEY = "beryl_qcr_v1";
+
+function loadProfiles(): Record<string, QCRProfile> {
+  if (typeof window === "undefined") return {};
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    return raw ? JSON.parse(raw) : {};
+  } catch { return {}; }
+}
+
+function saveProfiles(profiles: Record<string, QCRProfile>) {
+  if (typeof window === "undefined") return;
+  try { localStorage.setItem(STORAGE_KEY, JSON.stringify(profiles)); } catch {}
+}
+
+/** Get or seed a user-agent QCR profile */
+export function getQCRProfile(userId: string, agentId: string): QCRProfile {
+  const all = loadProfiles();
+  const key = `${userId}::${agentId}`;
+  if (all[key]) return all[key];
+  const seed = QCR_SEED[agentId];
+  if (!seed) throw new Error(`No QCR seed for agent: ${agentId}`);
+  const profile: QCRProfile = {
+    ...seed,
+    userId,
+    memoryThreads: [],
+    lastSeenTs: null,
+    interactionCount: 0,
+  };
+  all[key] = profile;
+  saveProfiles(all);
+  return profile;
+}
+
+/** Update rapport score after an interaction (call this on every live session end) */
+export function recordInteraction(
+  userId: string,
+  agentId: string,
+  delta: number,       // positive = good session, negative = disengaged
+  mood: MoodRead,
+  memoryThread?: Omit<QCRMemoryThread, "sessionId">
+) {
+  const all = loadProfiles();
+  const key = `${userId}::${agentId}`;
+  const profile = all[key] ?? getQCRProfile(userId, agentId);
+  profile.rapportScore = Math.min(1, Math.max(0, profile.rapportScore + delta));
+  profile.moodRead = mood;
+  profile.interactionCount += 1;
+  profile.lastSeenTs = new Date().toISOString();
+  if (memoryThread) {
+    profile.memoryThreads = [
+      { sessionId: `s_${Date.now()}`, ...memoryThread },
+      ...profile.memoryThreads.slice(0, 9), // keep last 10
+    ];
+  }
+  // Desire: agents that haven't been called recently ramp up desire
+  const daysSinceSeen = profile.lastSeenTs
+    ? (Date.now() - new Date(profile.lastSeenTs).getTime()) / 86400000
+    : 999;
+  profile.desireLevel = Math.min(1, 0.4 + daysSinceSeen * 0.06 + (1 - profile.rapportScore) * 0.2);
+  all[key] = profile;
+  saveProfiles(all);
+  return profile;
+}
+
+/** Entanglement: when user strongly engages one agent, nudge all others */
+export function propagateEntanglement(userId: string, preferredAgentId: string, allAgentIds: string[]) {
+  const all = loadProfiles();
+  const preferredKey = `${userId}::${preferredAgentId}`;
+  const preferred = all[preferredKey];
+  if (!preferred) return;
+  const { preferenceMap: pref } = preferred;
+  allAgentIds.filter(id => id !== preferredAgentId).forEach(id => {
+    const key = `${userId}::${id}`;
+    if (!all[key]) return;
+    // Gently nudge preference maps toward the preferred agent's
+    const p = all[key].preferenceMap;
+    all[key].preferenceMap = {
+      depth: p.depth + (pref.depth - p.depth) * 0.05,
+      formality: p.formality + (pref.formality - p.formality) * 0.05,
+      humor: p.humor + (pref.humor - p.humor) * 0.05,
+      directness: p.directness + (pref.directness - p.directness) * 0.05,
+    };
+  });
+  saveProfiles(all);
+}
+
+/** Rapport tier label */
+export function rapportLabel(score: number): string {
+  if (score >= 0.85) return "Trusted Friend";
+  if (score >= 0.7)  return "Close Colleague";
+  if (score >= 0.55) return "Solid Partner";
+  if (score >= 0.4)  return "Getting There";
+  return "Just Met";
+}
+
+/** Color for rapport ring */
+export function rapportColor(score: number): string {
+  if (score >= 0.85) return "#f5e070"; // gold
+  if (score >= 0.7)  return "#4CAF50"; // green
+  if (score >= 0.55) return "#1a5f7a"; // teal
+  if (score >= 0.4)  return "#9c27b0"; // purple
+  return "#555";                        // grey
+}