# BUILD: Elite Mobile Call UI

## Overview

Redesign LiveCopilot for elite mobile call experience. Focus on contextual assistance without cognitive overload. Transcript runs in background (not visible) - AI uses it to trigger contextual cards.

---

## Design Philosophy

1. **Zero scroll during calls** - Everything fits on screen
2. **Contextual, not constant** - AI cards slide in when relevant
3. **Glanceable** - Read in <1 second while talking
4. **Thumb-zone optimized** - Actions at bottom, reachable
5. **No transcript visible** - Runs silently, powers AI detection

---

## Visual Design

```
┌─────────────────────────────────────────┐
│ ● 2:34          John Smith          [−] │  HEADER (fixed top)
├─────────────────────────────────────────┤
│                                         │
│  ┌───────────────────────────────────┐  │
│  │ 💡 OPENER                         │  │  CURRENT SCRIPT STEP
│  │ "Hey John, it's [name] from       │  │  (one step at a time)
│  │  RateRight. How's it going?"      │  │
│  │                              [📋] │  │
│  └───────────────────────────────────┘  │
│                                         │
│  ┌───────────────────────────────────┐  │
│  │ 🏢 Smith Construction             │  │  QUICK INTEL
│  │ Residential • Sydney • 15 workers │  │  (one-liner, tap to expand)
│  └───────────────────────────────────┘  │
│                                         │
│           (contextual card area)        │
│                                         │
│  ┌───────────────────────────────────┐  │
│  │ 🔥 BUYING SIGNAL                  │  │  AI CONTEXT CARD
│  │ They said: "what's the next step" │  │  (slides in when detected)
│  │                                   │  │
│  │ "Perfect! I can get you set up    │  │
│  │  right now. What's your email?"   │  │
│  │                              [✓]  │  │
│  └───────────────────────────────────┘  │
│                                         │
├─────────────────────────────────────────┤
│                                         │
│   [🔇]    [🔥 HOT]    [📞 END CALL]    │  ACTION BAR (fixed bottom)
│   Mute    Mark Hot     End Call        │
│                                         │
└─────────────────────────────────────────┘
```

---

## Component Architecture

```
EliteCallUI/
├── CallHeader.jsx         # Timer, name, minimize
├── ScriptStep.jsx         # Current script step with copy
├── QuickIntel.jsx         # Collapsed intel bar
├── ContextCard.jsx        # AI suggestion (buying signal/objection)
├── CallActionBar.jsx      # Mute, Hot, End buttons
└── index.jsx              # Main orchestrator
```

---

## Implementation Plan

### File: `admin/src/components/EliteCallUI.jsx`

This replaces the render portion of LiveCopilot. Keep all the existing logic (transcript detection, AI suggestions, etc.) but redesign the UI.

### Structure:

```jsx
// Fixed full-screen layout
<div className="fixed inset-0 z-50 bg-slate-900 flex flex-col">

  {/* 1. HEADER - Fixed top */}
  <CallHeader
    duration={duration}
    leadName={lead?.first_name}
    isListening={isListening}
    onMinimize={() => setMinimized(true)}
  />

  {/* 2. MAIN CONTENT - Flex grow, no scroll */}
  <div className="flex-1 flex flex-col p-4 gap-3 overflow-hidden">

    {/* Current Script Step */}
    <ScriptStep
      stage={scriptStage}
      script={currentScript}
      onCopy={handleCopy}
    />

    {/* Quick Intel Bar */}
    <QuickIntel
      company={intel?.company}
      person={intel?.person}
      onExpand={() => setShowIntelModal(true)}
    />

    {/* Context Card Area - AI suggestions appear here */}
    <div className="flex-1 flex items-center justify-center">
      <AnimatePresence>
        {latestSuggestion && (
          <ContextCard
            type={latestSuggestion.type}
            trigger={latestSuggestion.trigger}
            suggestion={latestSuggestion.suggestion}
            onDismiss={dismissSuggestion}
            onFeedback={sendFeedback}
          />
        )}
      </AnimatePresence>
    </div>

  </div>

  {/* 3. ACTION BAR - Fixed bottom */}
  <CallActionBar
    isMuted={isMuted}
    onMute={toggleMute}
    onMarkHot={handleMarkHot}
    onEndCall={handleEndCall}
  />

</div>
```

---

## Component Details

### 1. CallHeader

```jsx
<div className="bg-slate-800 px-4 py-3 flex items-center justify-between">
  {/* Left: Recording indicator + timer */}
  <div className="flex items-center gap-3">
    <div className={`w-2.5 h-2.5 rounded-full ${isListening ? 'bg-red-500 animate-pulse' : 'bg-slate-500'}`} />
    <span className="text-white font-mono text-lg font-bold">{formatDuration(duration)}</span>
  </div>

  {/* Center: Lead name */}
  <span className="text-white font-medium">{leadName}</span>

  {/* Right: Minimize */}
  <button onClick={onMinimize} className="p-2 text-slate-400">
    <Minus className="w-5 h-5" />
  </button>
</div>
```

### 2. ScriptStep

Shows ONE script step at a time. Progress through stages automatically based on conversation.

```jsx
<div className="bg-slate-800/50 border border-slate-700 rounded-2xl p-4">
  {/* Stage indicator */}
  <div className="flex items-center gap-2 mb-2">
    <span className="text-xs font-bold text-violet-400 uppercase tracking-wide">
      {stageName}
    </span>
    <div className="flex-1 h-px bg-slate-700" />
    <span className="text-xs text-slate-500">{stageIndex + 1}/5</span>
  </div>

  {/* Script content */}
  <p className="text-white text-base leading-relaxed">
    "{scriptContent}"
  </p>

  {/* Copy button */}
  <button onClick={onCopy} className="absolute top-3 right-3 p-2 text-slate-400">
    <Copy className="w-4 h-4" />
  </button>
</div>
```

### 3. QuickIntel

Collapsed one-liner with key intel. Tap to expand modal.

```jsx
<button
  onClick={onExpand}
  className="bg-slate-800/30 border border-slate-700/50 rounded-xl px-4 py-2 flex items-center gap-3"
>
  <span className="text-lg">🏢</span>
  <span className="text-sm text-slate-300 truncate flex-1">
    {company?.name} • {company?.industry} • {company?.size || 'Size unknown'}
  </span>
  <ChevronRight className="w-4 h-4 text-slate-500" />
</button>
```

### 4. ContextCard

The star of the show. Slides in from bottom when AI detects something.

**Buying Signal (Green)**
```jsx
<motion.div
  initial={{ y: 100, opacity: 0 }}
  animate={{ y: 0, opacity: 1 }}
  exit={{ y: 100, opacity: 0 }}
  className="w-full bg-gradient-to-br from-emerald-500/20 to-green-500/10 border border-emerald-500/50 rounded-2xl overflow-hidden"
>
  {/* Header */}
  <div className="bg-emerald-500/30 px-4 py-2 flex items-center gap-2">
    <span className="text-lg">🔥</span>
    <span className="text-emerald-300 font-bold text-sm">BUYING SIGNAL</span>
  </div>

  {/* What they said */}
  <div className="px-4 pt-3 pb-2">
    <p className="text-slate-400 text-xs italic">"{trigger}"</p>
  </div>

  {/* Your response */}
  <div className="px-4 pb-3">
    <p className="text-white text-lg font-medium leading-snug">
      "{suggestion.response}"
    </p>
  </div>

  {/* Follow up */}
  <div className="px-4 pb-4 flex items-center gap-2">
    <span className="text-emerald-400 text-xs font-bold">THEN:</span>
    <span className="text-slate-300 text-sm">"{suggestion.follow_up}"</span>
  </div>

  {/* Dismiss */}
  <button
    onClick={onDismiss}
    className="absolute top-3 right-3 p-1 text-slate-400"
  >
    <X className="w-4 h-4" />
  </button>
</motion.div>
```

**Objection (Amber)**
Same structure but amber colors and different header.

### 5. CallActionBar

Fixed at bottom. Three big thumb-friendly buttons.

```jsx
<div className="bg-slate-800 border-t border-slate-700 px-4 py-4 pb-safe">
  <div className="flex items-center justify-center gap-4">

    {/* Mute */}
    <button
      onClick={onMute}
      className={`w-14 h-14 rounded-full flex items-center justify-center ${
        isMuted ? 'bg-red-500 text-white' : 'bg-slate-700 text-slate-300'
      }`}
    >
      {isMuted ? <MicOff className="w-6 h-6" /> : <Mic className="w-6 h-6" />}
    </button>

    {/* Mark Hot */}
    <button
      onClick={onMarkHot}
      className="w-14 h-14 rounded-full bg-amber-500/20 border border-amber-500/50 text-amber-400 flex items-center justify-center"
    >
      <Flame className="w-6 h-6" />
    </button>

    {/* End Call */}
    <button
      onClick={onEndCall}
      className="px-8 py-4 rounded-full bg-red-500 text-white font-bold flex items-center gap-2"
    >
      <PhoneOff className="w-5 h-5" />
      End Call
    </button>

  </div>
</div>
```

---

## State Management

Keep existing LiveCopilot state but add:

```jsx
// Show only latest suggestion (not a list)
const [latestSuggestion, setLatestSuggestion] = useState(null);

// Auto-dismiss after 10 seconds
useEffect(() => {
  if (latestSuggestion) {
    const timer = setTimeout(() => {
      setLatestSuggestion(null);
    }, 10000);
    return () => clearTimeout(timer);
  }
}, [latestSuggestion]);

// When new suggestion comes in, replace the old one
const handleNewSuggestion = (suggestion) => {
  setLatestSuggestion(suggestion);
  // Still save to full list for post-call summary
  setSuggestions(prev => [...prev, suggestion]);
};
```

---

## Animations

Use framer-motion for smooth transitions:

```jsx
// Context card slide in
initial={{ y: 100, opacity: 0, scale: 0.95 }}
animate={{ y: 0, opacity: 1, scale: 1 }}
exit={{ y: 100, opacity: 0, scale: 0.95 }}
transition={{ type: "spring", damping: 25, stiffness: 300 }}
```

---

## Build Steps

1. **Create new component**: `admin/src/components/EliteCallUI.jsx`
2. **Update LiveCopilot**: Replace render with EliteCallUI, keep all logic
3. **Add animations**: Import framer-motion for card transitions
4. **Test on mobile**: Verify thumb zones and readability
5. **Deploy**: Build and push to Railway

---

## Files to Modify

| File | Action |
|------|--------|
| `admin/src/components/EliteCallUI.jsx` | CREATE - New elite UI component |
| `admin/src/components/LiveCopilot.jsx` | MODIFY - Use EliteCallUI for render |

---

## Success Criteria

- [ ] No visible transcript
- [ ] Single script step visible (not full script panel)
- [ ] Intel compressed to one-liner
- [ ] AI cards slide in contextually
- [ ] Auto-dismiss after 10 seconds
- [ ] Mute, Hot, End buttons at bottom
- [ ] Works on iPhone SE (smallest common screen)
- [ ] No scrolling needed during call