// Chrome — Colleen × Sam
// Built for clarity. A large friendly state banner makes who's-talking
// unmistakable. Header has her name + Sam. Calm, warm, rounded.
// ── Header ──────────────────────────────────────────────────────────────
function ColleenHeader({ state }) {
const meta = CL_STATE_META[state];
const dim = 'rgba(245,238,226,0.6)';
const lbl = '#f6efe2';
return (
{/* Left — small status dot + soft time */}
Today
{/* Right — Colleen + Sam */}
Colleen
with Sam
);
}
// ── BIG STATE BANNER — the clarity centerpiece ─────────────────────────
// Sits just under the header. Large, warm, plain language. Color-coded:
// teal when Colleen talks, gold when Sam talks.
function StateBanner({ state }) {
const meta = CL_STATE_META[state];
const who = meta.who;
const accent = who === 'sam' ? COAST.goldHi : who === 'you' ? COAST.aqua : COAST.cream;
// A small leading icon clarifies direction: ear when listening, speech when Sam talks
const icon = who === 'you' ? (
// ear / listening
) : who === 'sam' ? (
// speech waves
) : (
// soft sun
);
return (
{/* Pill with icon + state word — light white-sand box, dark text */}
{icon}
{meta.label}
{/* Sub line — friendly guidance, larger */}
{meta.sub}
);
}
// ── Captions ────────────────────────────────────────────────────────────
// Sam's bubble is a fixed-height, scrollable "backup" panel — for sensitive
// info (a code/password he can't say aloud) or to double-check she heard him.
// It never grows tall enough to cover the orb; a chunky scrollbar + "scroll"
// hint let her read a long reply if she wants.
if (typeof document !== 'undefined' && !document.getElementById('sam-scroll-style')) {
const s = document.createElement('style');
s.id = 'sam-scroll-style';
s.textContent = `
.sam-scroll { scrollbar-width: thin; scrollbar-color: #12B8CE rgba(18,184,206,0.18); }
.sam-scroll::-webkit-scrollbar { width: 12px; }
.sam-scroll::-webkit-scrollbar-track { background: rgba(18,184,206,0.14); border-radius: 8px; margin: 4px 0; }
.sam-scroll::-webkit-scrollbar-thumb { background: #12B8CE; border-radius: 8px; border: 3px solid #F7F2E6; }
.sam-scroll::-webkit-scrollbar-thumb:hover { background: #0A7E98; }
`;
document.head.appendChild(s);
}
function TranscriptPanel({ lines, onReplay }) {
const ref = React.useRef(null);
const [overflow, setOverflow] = React.useState(false);
React.useEffect(() => {
const el = ref.current;
if (!el) return;
setOverflow(el.scrollHeight > el.clientHeight + 2);
el.scrollTop = 0;
}, [lines]);
return (
);
}
// ── Mic / turn status — the clearest turn-taking signal ────────────────
// Shows ONLY during a live conversation. Tells her plainly whose turn it is
// and whether her microphone is open, so no one talks over anyone.
function MicStatus({ state, muted }) {
const live = state === 'listening' || state === 'thinking' || state === 'speaking';
if (!live) return null;
const micOn = state === 'listening' && !muted;
const accent = micOn ? COAST.tealHi : COAST.gold;
const label = micOn ? 'Your turn' : 'Sam\u2019s turn';
const sub = micOn ? 'Your mic is on \u2014 go ahead' : 'Your mic is off \u2014 just listen';
return (
{micOn && (
)}
{label}{sub}
);
}
// ── Tagline + team nod ──────────────────────────────────────────────────
function ColleenTagline({ visible }) {
if (!visible) return null;
return (
Life is Good!
{/* Subtle team nod — three little hearts */}
{TEAM_NOD.map((tm, i) => (
))}
);
}
// ── Dock — the button doubles as the live status ───────────────────────
function ColleenDock({ state, onToggleState, muted, onMute }) {
const isLive = state !== 'offline' && state !== 'connecting' && state !== 'idle';
const primaryActive = state === 'offline' || state === 'idle';
// Status label when a channel is open — the button itself tells her what's
// happening and she can tap it to close.
const statusLabel =
state === 'listening' ? 'Sam is listening' :
state === 'thinking' ? 'Sam is thinking\u2026' :
state === 'speaking' ? 'Sam is speaking' :
state === 'muted' ? 'Microphone off' : null;
const primaryLabel =
state === 'offline' ? 'Open channel' :
state === 'connecting' ? 'Engaging\u2026' :
state === 'idle' ? 'Open channel' :
statusLabel;
// Whose turn dot: teal while she talks (Sam listening), gold while Sam talks
const turnDot = state === 'listening' ? COAST.tealHi : COAST.gold;
const ctrlBg = 'rgba(8,40,40,0.55)';
const iconColor = 'rgba(246,239,226,0.9)';
const ctrl = (icon, label, onClick, active, disabled) => (
);
return (
{/* Primary — gold "Open channel" when idle; live status (tap to close) when open */}
{/* Secondary — just two big clear options */}