goto('today')} label="Mission" center={`Task ${taskIndex + 1} of ${TASKS.length}`} trailing={viewToggle}/> {/* Slide progress dots */}

{TASKS.map((_, i) => (

))}

{/* Main card */}

{cap(t.lead)} {t.taskType} {t.dueLabel}

{t.type}

{t.company}

{t.opportunity} · {t.city}

{/* Why row */}

Why now

{t.why}

{/* Goal */}

Goal

{t.goal}

{/* Contact route */}

Ask for {t.contactName}

{t.contactTitle} · {t.phone}

{/* Script (collapsible) */} {t.script && ( <> {scriptOpen && (

“{t.script}”

)} )} {/* Sync row */}

{/* Slide nav */}

{/* Sticky bottom actions */}

{telHref ? ( { event.preventDefault(); try { const data = await window.ShieldTechApi?.startCall?.(t.id); window.location.href = data?.telHref || telHref; setTimeout(() => goto('outcome', taskIndex), 80); } catch (error) { window.dispatchEvent(new CustomEvent('stw:api-error', { detail: { message: error.message, code: error.code || 'START_CALL_FAILED' } })); } }} full> Make call ) : ( { navigator.clipboard?.writeText(t.phone || ''); window.dispatchEvent(new CustomEvent('stw:api-error', { detail: { message: 'No valid phone number saved. Route text copied if available.', code: 'NO_VALID_PHONE' } })); }} full> No phone saved )} goto('outcome', taskIndex)} full> Email

goto('outcome', taskIndex)}>Snooze goto('outcome', taskIndex)}>Tomorrow goto('outcome', taskIndex)}>Not a fit

); } function ResultButton({ children, onClick, tone = 'default' }) { const map = { default: { bg: C.cardElev, fg: C.fg1, br: C.border }, warn: { bg: '#3B0D0D', fg: '#FCA5A5', br: '#7F1D1D' }, }[tone]; return ( ); } // ───────────────────────────────────────────────────────────── // OUTCOME — "what happened?" capture // ───────────────────────────────────────────────────────────── function ScreenOutcome({ goto, taskIndex = 0 }) { const t = TASKS[taskIndex]; const [outcome, setOutcome] = React.useState('completed'); const [note, setNote] = React.useState('Mike picked up. Confirmed Thu 10 AM walkthrough. He wants me to bring the Avigilon rep and the channel pricing.'); const [chips, setChips] = React.useState(['Got direct email', 'Active project mentioned']); const [saving, setSaving] = React.useState(false); const outcomes = [ { id: 'completed', label: 'Completed', tone: 'success' }, { id: 'voicemail', label: 'Left voicemail', tone: 'default' }, { id: 'noanswer', label: 'No answer', tone: 'default' }, { id: 'email', label: 'Asked for email', tone: 'default' }, { id: 'wrong', label: 'Wrong contact', tone: 'warn-soft' }, { id: 'unfit', label: 'Not a fit', tone: 'warn' }, { id: 'snooze', label: 'Snooze', tone: 'muted' }, { id: 'tomorrow', label: 'Tomorrow', tone: 'muted' }, ]; const quickChips = [ 'Got direct email', 'Left voicemail', 'Asked for capability statement', 'Call back later', 'Wrong contact', 'No current work', 'Active project mentioned', 'Vendor packet requested', 'Bid list contact found', ]; const toneMap = { success: { bg: '#052E16', fg: '#86EFAC', br: '#166534' }, 'warn-soft': { bg: '#3A2506', fg: '#FCD34D', br: '#92400E' }, warn: { bg: '#3B0D0D', fg: '#FCA5A5', br: '#7F1D1D' }, default: { bg: C.cardElev, fg: C.fg1, br: C.border }, muted: { bg: C.cardElev, fg: C.fgMuted, br: C.border }, }; const toggleChip = (c) => setChips(p => p.includes(c) ? p.filter(x => x !== c) : [...p, c]); return (

goto('task', taskIndex)} label="Back" center="Step 1 of 2"/>

{t.company}

What happened?

Tap the closest match. I’ll do the paperwork.

{/* Outcome buttons */}

{outcomes.map(o => { const m = toneMap[o.tone]; const on = outcome === o.id; return ( ); })}

{/* Assistant prompts — quick chips */}

Quick context

{quickChips.map(c => { const on = chips.includes(c); return ( ); })}

{/* Note */}

Note

setNote(e.target.value)} rows={4}
            style={{ width: '100%', resize: 'none', background: 'transparent', border: 0, outline: 'none', color: C.fg1, font: '400 15px/22px Inter, system-ui, sans-serif' }}/>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 8 }}>
            <Caption>{note.split(' ').length} words · 8 sec</Caption>
            <button type="button" onClick={() => window.dispatchEvent(new CustomEvent('stw:api-error', { detail: { message: 'Voice capture is not configured in this browser build. Type the note here and it will still save to the backend.', code: 'VOICE_NOT_CONFIGURED' } }))} style={{
              display: 'inline-flex', alignItems: 'center', gap: 6, padding: '8px 12px', borderRadius: 999,
              background: 'rgba(168,85,247,0.12)', border: '1px solid rgba(168,85,247,0.32)', color: C.assistantSoft,
              font: '600 12px/1 Inter, system-ui, sans-serif', cursor: 'pointer',
            }}>
              <Icon name="mic" size={14} color={C.assistantSoft}/>Voice note
            </button>
          </div>
        </div>
      </div>

<div style={{ padding: '20px 20px 0' }}>
        <PrimaryButton full glow trailingIcon="arrowRight" disabled={saving} onClick={async () => {
          setSaving(true);
          try {
            await window.ShieldTechApi?.saveTaskOutcome?.(t.id, outcome, note, chips);
            goto('debrief', taskIndex);
          } catch (error) {
            window.dispatchEvent(new CustomEvent('stw:api-error', { detail: { message: error.message, code: error.code || 'OUTCOME_FAILED' } }));
          } finally {
            setSaving(false);
          }
        }}>
          {saving ? 'Saving…' : 'Send to assistant'}
        </PrimaryButton>
        <div style={{ textAlign: 'center', marginTop: 10 }}>
          <button onClick={() => goto('today')} type="button" style={{ background: 'transparent', border: 0, color: C.fgMuted, font: '500 13px/1 Inter, system-ui, sans-serif', cursor: 'pointer' }}>
            Skip — finish later
          </button>
        </div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// DEBRIEF — AI debrief result
// ─────────────────────────────────────────────────────────────
function ScreenDebrief({ goto, taskIndex = 0 }) {
  const t = TASKS[taskIndex];
  const [score, setScore] = React.useState(t.score);
  const [thinking, setThinking] = React.useState(true);
  const [debrief, setDebrief] = React.useState(() => window.ShieldTechApi?.state?.lastDebrief || null);

React.useEffect(() => {
    const id = setTimeout(() => {
      setDebrief(window.ShieldTechApi?.state?.lastDebrief || null);
      setThinking(false);
    }, 900);
    return () => clearTimeout(id);
  }, []);

return (
    <div className="slide-up" style={{ padding: '0 0 140px', color: C.fg1 }}>
      <BackRow onBack={() => goto('today')} label="Done" center="AI debrief"/>

<div style={{ padding: '8px 20px 0' }}>
        <Card glow="purple" style={{ padding: 22, overflow: 'hidden' }}>
          {thinking && <span className="scan-line"/>}

{/* Avatar row */}
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <div className="glow-purple" style={{
              width: 36, height: 36, borderRadius: 12,
              background: 'rgba(168,85,247,0.14)', border: '1px solid rgba(168,85,247,0.40)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}>
              <Icon name="sparkles" size={18} color={C.assistantSoft}/>
            </div>
            <Caption color={C.assistantSoft}>Assistant · {thinking ? 'thinking…' : 'just now'}</Caption>
            {thinking && <TypingDots/>}
          </div>

{thinking ? (
            <div style={{ marginTop: 14 }}>
              <div className="ai-shimmer" style={{ font: '700 24px/1.15 Rajdhani, "Inter", system-ui, sans-serif', letterSpacing: '-0.015em' }}>
                Reading your note and the lead history…
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginTop: 14 }}>
                <LoadingShimmer height={24}/>
                <LoadingShimmer height={24} style={{ width: '80%' }}/>
                <LoadingShimmer height={48}/>
              </div>
            </div>
          ) : (
            <>
              {debrief?.error ? (
                <div className="fade-in" style={{ marginTop: 14, padding: 14, background: '#1A1306', border: '1px solid #92400E', borderRadius: 14 }}>
                  <div style={{ font: '700 18px/1.2 Rajdhani, "Inter", system-ui, sans-serif', color: '#FCD34D' }}>Debrief setup required</div>
                  <div style={{ font: '400 14px/20px Inter, system-ui, sans-serif', color: C.fg2, marginTop: 6 }}>{debrief.error.message}</div>
                </div>
              ) : (
              <>
              <div className="fade-in" style={{ font: '700 26px/1.15 Rajdhani, "Inter", system-ui, sans-serif', letterSpacing: '-0.015em', marginTop: 14 }}>
                {debrief?.outcome_summary || 'Debrief result saved.'}
              </div>
              <div className="fade-in" style={{ font: '400 15px/22px Inter, system-ui, sans-serif', color: C.fg2, marginTop: 8 }}>
                {debrief?.recommended_improvement || 'No external Google, calendar, or email action is claimed here unless its backend route actually completed.'}
              </div>

<div className="fade-in" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8, marginTop: 16 }}>
                <DebriefStat label="Lead status" valueNode={<StatusPill kind={(debrief?.lead_status_after || 'Warm').toLowerCase()}>{debrief?.lead_status_after || 'Warm'}</StatusPill>}/>
                <DebriefStat label="Lead score" valueNode={
                  <span style={{ font: '700 22px/1 Rajdhani, "Inter", system-ui, sans-serif', fontVariantNumeric: 'tabular-nums' }}>
                    {debrief?.lead_score_after ?? score}
                  </span>
                }/>
                <DebriefStat label="Next action" value={debrief?.next_action || 'Review saved outcome'}/>
                <DebriefStat label="Next follow-up" value={debrief?.next_follow_up_at ? new Date(debrief.next_follow_up_at).toLocaleString([], { month: 'short', day: 'numeric', hour: 'numeric', minute: '2-digit' }) : 'None set'}/>
              </div>

<div className="fade-in" style={{ display: 'flex', flexDirection: 'column', gap: 8, marginTop: 16 }}>
                <CheckRow pending>Google Task request prepared only if Google route succeeds.</CheckRow>
                <CheckRow pending>Calendar reminder request prepared only if Google route succeeds.</CheckRow>
                <CheckRow pending>{debrief?.email_draft?.needed ? 'Email draft prepared for approval.' : 'No email draft requested.'}</CheckRow>
              </div>

<div className="fade-in" style={{ marginTop: 16, padding: '14px 16px', background: 'rgba(0,163,255,0.06)', border: '1px solid rgba(0,163,255,0.18)', borderRadius: 14 }}>
                <Caption color={C.blue}>Lesson learned</Caption>
                <div style={{ font: '500 14px/20px Inter, system-ui, sans-serif', color: C.fg1, marginTop: 4 }}>
                  {debrief?.lesson_learned || 'Outcome was saved; AI lesson will appear after OpenRouter is configured.'}
                </div>
              </div>
              </>
              )}
            </>
          )}
        </Card>
      </div>

<div style={{ padding: '14px 20px 0', display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 8 }}>
        <SecondaryButton full leadingIcon="edit" onClick={() => goto('outcome', taskIndex)}>Edit</SecondaryButton>
        <SecondaryButton full leadingIcon="inbox" onClick={() => goto('approvals')}>Review</SecondaryButton>
        <PrimaryButton full trailingIcon="arrowRight" onClick={() => {
          const next = (taskIndex + 1) % TASKS.length;
          goto('task', next);
        }}>Next</PrimaryButton>
      </div>
    </div>
  );
}

function DebriefStat({ label, value, valueNode }) {
  return (
    <div style={{ padding: '12px 14px', background: C.cardElev, border: `1px solid ${C.border}`, borderRadius: 16 }}>
      <Caption>{label}</Caption>
      <div style={{ marginTop: 6, font: '600 15px/1.3 Inter, system-ui, sans-serif', color: C.fg1 }}>
        {valueNode || value}
      </div>
    </div>
  );
}

function CheckRow({ ok, pending, children }) {
  const color = ok ? '#86EFAC' : pending ? '#FCD34D' : C.fgMuted;
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 10, font: '500 14px/20px Inter, system-ui, sans-serif', color: C.fg2 }}>
      <span style={{ width: 20, height: 20, borderRadius: 999, background: `${color}1A`, border: `1px solid ${color}40`, display: 'flex', alignItems: 'center', justifyContent: 'center', flex: 'none' }}>
        <Icon name={ok ? 'check' : 'clock'} size={11} color={color} strokeWidth={2.5}/>
      </span>
      <span>{children}</span>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// TASK CALENDAR — week strip + day agenda timeline
// ─────────────────────────────────────────────────────────────
function TaskCalendar({ goto, setTaskIndex, setView }) {
  // Demo "today" = Tue May 28, 2026 (matches TASKS dueIso)
  const week = [
    { dow: 'MON', d: 26, count: 1 },
    { dow: 'TUE', d: 27, count: 2 },
    { dow: 'WED', d: 28, count: TASKS.length, today: true },
    { dow: 'THU', d: 29, count: 3 },
    { dow: 'FRI', d: 30, count: 1 },
  ];
  const [sel, setSel] = React.useState(28);

// Parse tasks into {hour, min, idx}
  const parsed = TASKS.map((t, idx) => {
    const m = (t.dueIso || '').match(/T(\d{2}):(\d{2})/);
    const h = m ? parseInt(m[1], 10) : 9;
    const min = m ? parseInt(m[2], 10) : 0;
    return { ...t, idx, h, min, mins: h * 60 + min };
  }).sort((a, b) => a.mins - b.mins);

const START = 8, END = 17;            // 8 AM → 5 PM
  const PXH = 64;                       // px per hour
  const hours = [];
  for (let h = START; h <= END; h++) hours.push(h);
  const topFor = mins => ((mins - START * 60) / 60) * PXH;
  const fmtH = h => `${((h + 11) % 12) + 1} ${h < 12 ? 'AM' : 'PM'}`;
  const nowMins = 10 * 60 + 42;         // 10:42 AM marker

const leadDot = { hot: C.danger, warm: C.warning, nurture: C.blue, dead: C.fgMuted };
  const kindIcon = { Call: 'phone', Email: 'mail', Bid: 'gavel', Vendor: 'inbox', Bid_: 'gavel' };

const onSel = sel === 28;

return (
    <div>
      {/* Month + week strip */}
      <div style={{ padding: '6px 20px 4px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <div style={{ font: '700 20px/1.1 Rajdhani, "Inter", system-ui, sans-serif', letterSpacing: '0.01em', whiteSpace: 'nowrap' }}>May 2026</div>
        <div style={{ display: 'flex', gap: 6 }}>
          <IconButton icon="chevronLeft" size={30} color={C.fgMuted}/>
          <IconButton icon="chevron" size={30} color={C.fgMuted}/>
        </div>
      </div>

<div style={{ padding: '8px 16px 4px', display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 6 }}>
        {week.map(d => {
          const on = sel === d.d;
          return (
            <button key={d.d} onClick={() => setSel(d.d)} type="button" style={{
              display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6, padding: '10px 0',
              borderRadius: 14, cursor: 'pointer',
              background: on ? 'linear-gradient(135deg, rgba(0,163,255,0.16), rgba(0,163,255,0.04))' : C.card,
              border: `1px solid ${on ? 'rgba(0,163,255,0.4)' : C.border}`,
              boxShadow: on ? '0 0 16px rgba(0,163,255,0.2)' : 'none',
            }}>
              <span style={{ font: '600 10px/1 Inter, system-ui, sans-serif', letterSpacing: '0.08em', color: on ? C.blueElectric : C.fgMuted }}>{d.dow}</span>
              <span className="tabular" style={{ font: '700 18px/1 Rajdhani, "Inter", system-ui, sans-serif', color: on ? C.fg1 : C.fg2 }}>{d.d}</span>
              <span style={{ display: 'flex', gap: 3, height: 5, alignItems: 'center' }}>
                {d.count > 0 ? Array.from({ length: Math.min(d.count, 3) }).map((_, i) => (
                  <span key={i} style={{ width: 4, height: 4, borderRadius: 999, background: on ? C.blueElectric : C.fgMuted }}/>
                )) : <span style={{ width: 4, height: 4 }}/>}
              </span>
            </button>
          );
        })}
      </div>

{/* Day header */}
      <div style={{ padding: '14px 20px 6px', display: 'flex', alignItems: 'center', gap: 10 }}>
        <div style={{ flex: 1, minWidth: 0 }}>
          <Caption>{onSel ? 'Tuesday · May 28' : `May ${sel}`}</Caption>
          <div style={{ font: '700 18px/1.15 Rajdhani, "Inter", system-ui, sans-serif', marginTop: 4, whiteSpace: 'nowrap' }}>
            {onSel ? `${TASKS.length} tasks · 2h 40m` : 'No scheduled tasks'}
          </div>
        </div>
        <div style={{ flex: 'none', display: 'flex', gap: 6 }}>
          <SyncChip state="connected" label="Calendar" size="sm"/>
        </div>
      </div>

{!onSel ? (
        <div style={{ padding: '8px 20px' }}>
          <EmptyState icon="calendar" title="Nothing booked"
            body={`Tap a task on a busy day, or run today's mission to schedule follow-ups for May ${sel}.`}/>
        </div>
      ) : (
        /* Agenda timeline */
        <div style={{ padding: '4px 20px 0' }}>
          <div style={{ position: 'relative', paddingLeft: 56 }}>
            {/* Hour grid */}
            {hours.map((h, i) => (
              <div key={h} style={{ position: 'relative', height: PXH }}>
                <span style={{ position: 'absolute', left: -56, top: -7, width: 48, textAlign: 'right', font: '500 10px/1 JetBrains Mono, monospace', color: C.fgMuted }}>{fmtH(h)}</span>
                <div style={{ position: 'absolute', left: 0, right: 0, top: 0, height: 1, background: C.border }}/>
              </div>
            ))}

{/* Now line */}
            <div style={{ position: 'absolute', left: 0, right: 0, top: topFor(nowMins), zIndex: 3, display: 'flex', alignItems: 'center', gap: 0 }}>
              <span style={{ position: 'absolute', left: -56, top: -6, width: 48, textAlign: 'right', font: '700 9px/1 JetBrains Mono, monospace', color: C.blueElectric }}>NOW</span>
              <span style={{ width: 8, height: 8, borderRadius: 999, background: C.blueElectric, boxShadow: '0 0 8px rgba(41,199,255,0.8)', marginLeft: -4 }}/>
              <span style={{ flex: 1, height: 1.5, background: 'linear-gradient(90deg, #29C7FF, transparent)' }}/>
            </div>

{/* Task blocks */}
            {parsed.map(t => {
              const top = topFor(t.mins);
              const dur = 45; // assume 45-min blocks
              const height = (dur / 60) * PXH - 6;
              const dot = leadDot[t.lead] || C.blue;
              return (
                <button key={t.id} onClick={() => { setTaskIndex(t.idx); setView && setView('deck'); localStorage.setItem('stw:taskview', 'deck'); goto('task', t.idx); }} type="button" style={{
                  position: 'absolute', left: 4, right: 0, top, height: Math.max(height, 50),
                  textAlign: 'left', cursor: 'pointer', zIndex: 2,
                  background: C.cardElev, border: `1px solid ${C.border}`, borderLeft: `3px solid ${dot}`,
                  borderRadius: 12, padding: '8px 10px', overflow: 'hidden',
                  boxShadow: '0 6px 18px rgba(0,0,0,0.3)',
                }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                    <Icon name={kindIcon[t.taskType] || 'phone'} size={12} color={dot}/>
                    <span style={{ font: '700 12px/1.1 Inter, system-ui, sans-serif', color: C.fg1, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', flex: 1 }}>{t.company}</span>
                    <span className="tabular" style={{ font: '500 10px/1 JetBrains Mono, monospace', color: C.fgMuted, flex: 'none' }}>{String(t.h % 12 === 0 ? 12 : t.h % 12).padStart(2, '0')}:{String(t.min).padStart(2, '0')}</span>
                  </div>
                  <div style={{ font: '400 11px/1.3 Inter, system-ui, sans-serif', color: C.fg2, marginTop: 3, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
                    {t.type} · {t.opportunity}
                  </div>
                </button>
              );
            })}
          </div>

{/* Agenda footer summary */}
          <div style={{ marginTop: 16, display: 'flex', gap: 6, flexWrap: 'wrap' }}>
            <StatusPill kind="hot" size="sm">{TASKS.filter(t => t.lead === 'hot').length} Hot</StatusPill>
            <StatusPill kind="warm" size="sm">{TASKS.filter(t => t.lead === 'warm').length} Warm</StatusPill>
            <StatusPill kind="nurture" size="sm">{TASKS.filter(t => t.lead === 'nurture').length} Nurture</StatusPill>
          </div>
          <div style={{ marginTop: 12 }}>
            <PrimaryButton full glow leadingIcon="play" onClick={() => { setView && setView('deck'); localStorage.setItem('stw:taskview', 'deck'); goto('task', 0); }}>
              Start from the top
            </PrimaryButton>
          </div>
        </div>
      )}
    </div>
  );
}

Object.assign(window, { ScreenLogin, ScreenToday, ScreenTask, ScreenOutcome, ScreenDebrief, MiniStat, TaskCalendar });