{ if (e.target === e.currentTarget) onClose(); }}>

{submitted ? "Request received" : noFit ? "Request a custom search" : partners.length === 1 ? "Request an introduction" : "Request introductions"}

{submitted ? ( // Left-aligned, not centred: four stacked sentences of centred text are // harder to read than they are celebratory, and centring no longer // matches the left-aligned form this state replaces.

{noFit ? "NotedSource will be in touch about your search." : sentCount === 1 ? "NotedSource will be in touch to set up your introduction." : "NotedSource will be in touch to set up your introductions."}

{noFit ? `NotedSource will contact you at ${email} about additional partners for this report, including the fee.` : `NotedSource will contact you at ${email} with a brief on ${sentCount === 1 ? "your partner" : `each of your ${sentCount} partners`}, the fee, and next steps.`}

{SC_AVAILABILITY_PROMISE}

{/* The confirmation email is what makes this state survive a reload -- this panel forgets, the inbox does not. */}

A confirmation with a summary of this request is on its way to {email}.

) : (

{noFit ? "Tell NotedSource what you are looking for. They will source and vet additional partners for your report, send you a brief on why each one fits, and quote the fee before arranging any introduction. Nothing is committed by sending this request." : partners.length === 1 ? "NotedSource will send you a brief on why this partner fits and quote the fee before arranging the introduction. Nothing is committed by sending this request." : "NotedSource will send you a brief on why each partner fits and quote the fee before arranging the introductions. Nothing is committed by sending this request."} {" "} {SC_AVAILABILITY_PROMISE}

Report

{reportTitle || reportId}

{topic && topic !== reportTitle && (

Topic

{topic}

)} {!noFit && (

Partners ({partners.length})

{partners.map((p) => (

{p.name} {p.affiliation ? · {p.affiliation} : null}

))}

)}

Work email

{noFit ? "What you are looking for (optional)" : "What you're hoping to discuss (optional)"}

setNote(e.target.value)}
                  style={{ resize: "vertical", fontFamily: "inherit" }}
                />
              </div>

{error && <div style={{ color: "var(--rose)", fontSize: 13, marginBottom: 12 }}>{error}</div>}

<button type="submit" className="btn primary lg" disabled={submitting} style={{ width: "100%" }}>
                {submitting ? "Sending…" : noFit ? "Request a custom search" : partners.length === 1 ? "Request an introduction" : "Request introductions"}
              </button>
            </form>
          )}
        </div>
        {submitted && (
          <div className="modal-footer" style={{ justifyContent: "flex-end" }}>
            <button className="btn ghost" onClick={onClose}>Close</button>
          </div>
        )}
      </div>
    </div>
  );
}

const lastEventRef = useRefSc(Date.now());

const esRef = useRefSc(null);
  const reconnectRef = useRefSc(null);
  const reconnectAttemptsRef = useRefSc(0);
  const mountedRef = useRefSc(true);
  const startedRef = useRefSc(false);      // double-click guard
  const seenSourcesRef = useRefSc(null);
  const burstRef = useRefSc({ last: 0, n: 0 });
  const MAX_RECONNECT_ATTEMPTS = 5;

// Envelope fields that live OUTSIDE `results` (frozen schema — see server.py).
  const applyEnvelope = (d) => {
    if (Array.isArray(d.requested_partner_ids)) setRequestedIds(d.requested_partner_ids);
    setNoFitRequested(d.no_fit_requested === true);
    if (d.report_title) setReportTitle(d.report_title);
    if (d.topic) setTopic(d.topic);
  };

const toggleSelected = (id) =>
    setSelected((prev) => (prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]));

// Terminal render decision. PREFER `results` when present: a report scouted before
  // the status endpoints existed has top-level state "pending" with complete results.
  const applyResults = (results) => {
    const list = (results && results.partners) || [];
    setPartners(list);
    setGeneratedAt((results && results.generated_at) ?? null);
    setPhase(list.length > 0 && results.state === "complete" ? "ready" : "unavailable");
  };

// Re-read the server's view of this report and repaint. Used when an intro
  // request is refused because the list moved under the user (409 stale_results):
  // the selection they made no longer refers to anyone they saw, so it goes.
  const reloadResults = async () => {
    try {
      const r = await fetch(`/api/scouting/${reportId}`);
      if (!r.ok) return;
      const d = await r.json();
      if (!mountedRef.current) return;
      applyEnvelope(d);
      setSelected([]);
      if (d.results) applyResults(d.results);
    } catch (err) {}
  };

// The "checked N candidates" line comes from the verify-done event, which the
  // results file does not carry. Without this, the line only ever shows to the one
  // session that watched the run live — every later page load loses it. The stream
  // replays the log and terminates immediately for a finished run, so re-read it
  // once rather than adding an endpoint. Reports scouted before the log existed
  // simply yield nothing and the line stays hidden.
  const harvestStats = () => {
    const es = new EventSource(`/api/scouting/${reportId}/stream`);
    const stop = () => { try { es.close(); } catch (e) {} };
    es.onmessage = (e) => {
      try {
        const d = JSON.parse(e.data);
        // Keep reading past verify-done: a review-cycle removal supersedes those
        // totals on the review-done event (audit F13), and the later numbers are
        // the ones that match the cards on screen.
        if (d.considered !== undefined && mountedRef.current) {
          setStats({ verified: d.verified, considered: d.considered, dropped: d.dropped_count });
        }
        if (d.done || (d.phase === "review" && d.status === "done")) stop();
      } catch (err) {}
    };
    es.onerror = stop;
    setTimeout(stop, 15000);   // never leave a socket open on a stalled replay
  };

const attachStream = (isReconnect) => {
    if (esRef.current) esRef.current.close();
    if (!isReconnect) resetDerived();

const es = new EventSource(`/api/scouting/${reportId}/stream`);
    esRef.current = es;
    lastEventRef.current = Date.now();

es.onmessage = (e) => {
      try {
        if (reconnectAttemptsRef.current > 0) reconnectAttemptsRef.current = 0;
        const d = JSON.parse(e.data);

// A stuck frame is the server saying the run has gone silent. It must not
        // count as liveness and must not clear the stall notice — parse BEFORE
        // stamping, or the panel gets calmer the more certain the server is that
        // the run is dead (audit F12).
        if (d.stuck) {
          setServerStuck(true);
          return;
        }

// Any real event — heartbeats included — proves the run is alive.
        lastEventRef.current = Date.now();
        setStalled((prev) => (prev ? false : prev));
        setServerStuck((prev) => (prev ? false : prev));

// Heartbeats are liveness plumbing, never rendered. Drop after the
        // liveness stamp above.
        if (d.heartbeat !== undefined) return;

if (d.phase && d.status) {
          setPhaseState((prev) => ({ ...prev, [d.phase]: d.status }));
          // Counts ride on verify-done, and again on review-done when the review
          // gate removed entries after verification (audit F13). Read them
          // wherever they appear so the last word wins and the line always
          // matches the cards.
          if (d.considered !== undefined) {
            setStats({
              verified: d.verified,
              considered: d.considered,
              dropped: d.dropped_count,
            });
          }
        } else if (d.source) {
          // Bursts: consecutive events land within milliseconds of each other. Give
          // each item in a burst a +40ms delay so a batch reads as an arrival.
          const now = Date.now();
          const b = burstRef.current;
          b.n = now - b.last > 400 ? 0 : b.n + 1;
          b.last = now;
          const delay = Math.min(b.n * 40, 800);
          setSources((prev) => {
            if (seenSourcesRef.current.has(d.source)) return prev;
            seenSourcesRef.current.add(d.source);
            return [...prev, { domain: d.source, delay }];
          });
        } else if (d.partner && typeof d.partner === "object") {
          // Each partner is emitted twice — skeleton at verify, filled after profiling.
          // Dedupe by id and let the second event overwrite the first.
          setPartners((prev) => {
            const i = prev.findIndex((p) => p.id === d.partner.id);
            if (i === -1) return [...prev, d.partner];
            const next = prev.slice();
            next[i] = d.partner;
            return next;
          });
        } else if (d.done) {
          es.close();
          finishRun();
        } else if (d.text !== undefined) {
          setActionLine(d.text);   // one line, replaced not appended
        }
        // {"dropped": {…}} is deliberately not rendered — drop reasons are internal QA.
      } catch (err) {}
    };

es.onerror = () => {
      es.close();
      if (!mountedRef.current) return;
      reconnectAttemptsRef.current++;
      if (reconnectAttemptsRef.current >= MAX_RECONNECT_ATTEMPTS) {
        // Fall back to the status endpoint rather than stranding the panel mid-run.
        finishRun();
        return;
      }
      if (reconnectRef.current) clearTimeout(reconnectRef.current);
      reconnectRef.current = setTimeout(() => {
        if (mountedRef.current) attachStream(true);
      }, 3000);
    };
  };

// The real polling fallback behind the SSE stream. Reached on the `done` event
  // (where the results file can still race the GET, hence the short retries) and
  // when reconnects are exhausted mid-run. The one thing it must never do is call
  // a run the server still says is `running` unavailable — that puts a Try again
  // button over a live, paid-for run (audit F2). So: server says running → keep
  // the running UI, poll, and re-attempt the stream; server unreachable → keep
  // polling; unavailable only when the server actually says so.
  const SC_POLL_MS = 4000;
  const finishRun = async (attempt = 0) => {
    if (!mountedRef.current) return;
    try {
      const r = await fetch(`/api/scouting/${reportId}`);
      if (!r.ok) throw new Error(`status ${r.status}`);
      const d = await r.json();
      if (!mountedRef.current) return;
      applyEnvelope(d);
      if (d.results) return applyResults(d.results);
      if (d.state === "running") {
        setPhase("running");
        if (d.stuck) setServerStuck(true);
        reconnectAttemptsRef.current = 0;
        if (reconnectRef.current) clearTimeout(reconnectRef.current);
        reconnectRef.current = setTimeout(() => {
          if (mountedRef.current) attachStream(true);
        }, SC_POLL_MS);
        return;
      }
      // Terminal state with no results yet: brief retry covers the write race on a
      // fast `done`; after that the server has genuinely said the run is over.
      if (attempt < 3) return setTimeout(() => finishRun(attempt + 1), 700);
      setPhase("unavailable");
    } catch (err) {
      // Network outage or a 5xx. The run may well still be alive server-side, so
      // never land on unavailable from here — keep polling until the server answers.
      if (mountedRef.current) setTimeout(() => finishRun(attempt), SC_POLL_MS);
    }
  };

// Silence watchdog, only while a run is on screen. Checks the timestamp rather
  // than accumulating its own state, so an event resuming clears it within a tick.
  useEffectSc(() => {
    if (phase !== "running") { setStalled(false); setServerStuck(false); return; }
    const t = setInterval(() => {
      setStalled(Date.now() - lastEventRef.current > SC_STALL_MS);
    }, 5000);
    return () => clearInterval(t);
  }, [phase]);

// Mount: ask the status endpoint what world we are in before rendering anything.
  useEffectSc(() => {
    mountedRef.current = true;
    seenSourcesRef.current = new Set();
    if (!reportId) { setPhase("idle"); return; }

return () => {
      mountedRef.current = false;
      if (esRef.current) esRef.current.close();
      if (reconnectRef.current) clearTimeout(reconnectRef.current);
    };
  }, [reportId]);

if (phase === "loading") return null;

// Degraded state: the status endpoint is unreachable or erroring, so we cannot
  // tell idle from running. No "Find partners" (could pile onto a live run) and no
  // "Try again" (would reset one). The mount loader keeps retrying behind this.
  if (phase === "unknown") {
    return (
      <div className="sc-panel">
        <div className="eyebrow" style={{ marginBottom: 12 }}>Partners</div>
        <div className="sc-meta-line">
          We couldn't check the partner search status. Retrying automatically.
        </div>
      </div>
    );
  }

if (phase === "idle") {
    return (
      <div className="sc-panel sc-entry">
        {/* The attribution lockup replaces the generic "PARTNERS" eyebrow.
            NotedSource is a separate company, and this box is the one place in
            Atlas where that is the headline fact rather than a footnote — which is
            also why this state is a bounded box and not the next paragraph of the
            delivery screen. Two logo files, one visible per theme: see
            .sc-entry-logo in app/styles.css for why a CSS filter won't do. */}
        <div className="sc-entry-brand">
          <span className="eyebrow">Powered by</span>
          <img className="sc-entry-logo on-light" src="/static/notedsource-logo.svg" alt="NotedSource" />
          <img className="sc-entry-logo on-dark" src="/static/notedsource-logo-light.svg" alt="" aria-hidden="true" />
        </div>
        <h3 className="sc-h">Work with the partners behind this research</h3>
        {/* Two sentences, because one would overreach. Claiming NotedSource
            "searches its network of vetted experts" implies everyone on the
            shortlist is already in it -- and they are not, since the scout follows
            work wherever it leads. A partner who saw themselves listed
            under that claim would rightly find it strange. */}
        <p className="sc-sub">
          NotedSource identifies people working on the questions in this report,
          starting with its network of vetted experts and looking beyond it to
          whoever the work points to. Every partner is verified before it
          reaches your shortlist.
        </p>
        {/* Fee before the click, not after. No figure: engagements are scoped
            individually, so any number here would be wrong for someone. */}
        <p className="sc-entry-fee">
          <strong>Finding partners is free.</strong> Introductions and engagements
          are arranged by NotedSource for a fee, quoted before anything is committed.
        </p>
        <div className="sc-entry-cta">
          <button className="btn ns lg" onClick={startScouting}>Find partners</button>
          <span className="sc-meta-line">Takes 5-15 minutes.</span>
        </div>
      </div>
    );
  }

if (phase === "running") {
    // The panel is at its emptiest before the first source chip lands — roughly the
    // first 90 seconds, during distill, which is also the moment of peak attention.
    // Until then the expectation-setting line is promoted into that empty area; once
    // chips start arriving it falls back to the small grey position at the bottom.
    const preChips = sources.length === 0;
    // Live counts on the active row. These are honest lengths of things that have
    // actually happened — never progress toward a total we cannot know.
    const stepCount = (key) => {
      if (key === "identify" && sources.length > 0) {
        return `${sources.length} source${sources.length === 1 ? "" : "s"}`;
      }
      if (key === "verify" && partners.length > 0) {
        return `${partners.length} verified`;
      }
      return null;
    };

return (
      <div className="sc-panel">
        <div className="eyebrow" style={{ marginBottom: 12 }}>Finding partners</div>
        <div className="sc-checklist">
          {SC_PHASES.map((p) => {
            const st = phaseState[p.key];
            const cls = st === "done" ? "done" : st === "start" ? "active" : "pending";
            const count = stepCount(p.key);
            return (
              <div key={p.key} className={`sc-step ${cls}`}>
                <span className="sc-dot" />
                <span className="sc-step-label">
                  {p.label}
                  {count && <span className="sc-step-count"> · {count}</span>}
                </span>
                {cls === "done" && <span className="pill green">done</span>}
              </div>
            );
          })}
        </div>

<div className="sc-action">{actionLine || "Starting…"}</div>

{/* One quiet line when the run has gone silent. Two triggers: the client
            noticing SSE silence (clears itself when events resume), and the
            server's own stuck frame after 30 minutes of real inactivity, which is
            firmer and persists until a real event arrives. */}
        {(stalled || serverStuck) && (
          <div className="sc-stall-note">
            {serverStuck
              ? "The search has gone quiet and may not finish. You can keep waiting, or come back later."
              : "Still working. This is taking longer than usual."}
          </div>
        )}

{preChips && (
          <div className="sc-early-note">
            This usually takes 5-15 minutes. You can leave this page and the search keeps running.
          </div>
        )}

{sources.length > 0 && (
          // A real run consults ~35 domains. Rendering all of them turns the panel
          // into a wall of chips on a narrow viewport, so cap the list and let the
          // trailing counter carry the sense of accumulation instead.
          <div className="sc-chips">
            {sources.slice(0, SC_MAX_CHIPS).map((s) => (
              <span key={s.domain} className="sc-chip" style={{ animationDelay: `${s.delay}ms` }}>
                {s.domain}
              </span>
            ))}
            {sources.length > SC_MAX_CHIPS && (
              <span className="sc-chip sc-chip-more">+{sources.length - SC_MAX_CHIPS} more</span>
            )}
          </div>
        )}

{/* The promoted note above already sets the time expectation; once chips
            land it falls back to this quieter line. Only one is ever on screen. */}
        {!preChips && (
          <div className="sc-meta-line">
            Typically 5-15 minutes. You can download your report or leave this page
            and the search keeps running.
          </div>
        )}

{/* Where NotedSource fits in. The wait is the moment of peak attention,
            so it carries the positioning story rather than a countdown. */}
        {/* Three labelled blocks. The wait is where there is time and attention to
            read, so the trust argument lives here, not on the results screen. The
            fee is named but never numbered, and there are still no expected partner
            counts and no animation. */}
        <div className="sc-ns-card">
          <div className="sc-ns-title">Searching the NotedSource partner network</div>
          <ScoutingNsBody />
        </div>
      </div>
    );
  }

if (phase === "ready") {
    const isRequested = (p) => requestedIds.includes(p.id);
    const selectable = partners.filter((p) => p.id && !isRequested(p));
    const allSelected = selectable.length > 0 && selected.length === selectable.length;
    const selectedPartners = partners.filter((p) => selected.includes(p.id));

return (
      <div className="sc-panel">
        <div className="eyebrow" style={{ marginBottom: 12 }}>Partners</div>
        <h3 className="sc-h">
          {partners.length} partner{partners.length === 1 ? "" : "s"} identified
        </h3>
        {stats && stats.considered ? (
          <p className="sc-sub">
            NotedSource reviewed {stats.considered} candidate
            {stats.considered === 1 ? "" : "s"}; {stats.verified} met the evidence bar.
          </p>
        ) : null}
        {/* The offer, in one sentence. Approved copy — verbatim. This is an action
            screen: the sales argument lives on the wait screen, not here. */}
        <p className="sc-offer">
          Select anyone you would like to meet. NotedSource will send you a brief on
          why they fit and arrange the introduction. {SC_AVAILABILITY_PROMISE}
        </p>

{selectable.length > 1 && (
          <div className="sc-selectall">
            <button
              type="button"
              className="sc-linkbtn"
              onClick={() => setSelected(allSelected ? [] : selectable.map((p) => p.id))}
            >
              {allSelected ? "Clear selection" : "Select all"}
            </button>
          </div>
        )}

<div className="sc-partners">
          {partners.map((p) => (
            <ScoutingPartnerCard
              key={p.id || p.name}
              partner={p}
              requested={isRequested(p)}
              selected={selected.includes(p.id)}
              onToggle={toggleSelected}
            />
          ))}
        </div>

{/* The CTA is visible from the start, disabled until a selection exists —
            the button itself teaches the interaction. Hidden only when every
            partner is already requested and there is nothing left to select. */}
        {selectable.length > 0 && (
          <div className="sc-footer">
            <div className="sc-footer-count">
              {selected.length > 0
                ? `${selected.length} selected`
                : "Select partners to request introductions"}
            </div>
            <button
              className="btn primary"
              disabled={selected.length === 0}
              onClick={() => setShowIntroModal("partners")}
            >
              {selected.length === 1 ? "Request an introduction" : "Request introductions"}
            </button>
          </div>
        )}

{/* Fallback path for users who want an expert but not one of these — same
            modal and write path as a partner request, flagged no_fit so the team
            can tell "shortlist missed" from "shortlist hit". */}
        <div className="sc-ns-card sc-beyond">
          <div>
            {/* Opportunity framing, not deficit framing. "Not the right partners?"
                invited the user to read the shortlist they just received as a
                failure; this offers a larger service instead. */}
            <div className="sc-ns-h">Want to go further?</div>
            <p>
              NotedSource can source and vet additional partners for your report,
              beyond the ones this search surfaced, and will quote the fee before
              starting.
            </p>
          </div>
          {/* One custom search per shortlist. Repeat clicks used to write a fresh
              row into the fulfilment queue every time, with nothing on screen
              saying the first had landed. */}
          {noFitRequested ? (
            <div className="sc-beyond-btn">
              <span className="pill green">Custom search requested</span>
            </div>
          ) : (
            <button
              type="button"
              className="btn primary sc-beyond-btn"
              onClick={() => setShowIntroModal("nofit")}
            >
              Request a custom search
            </button>
          )}
        </div>

{showIntroModal && (
          <ScoutingIntroModal
            reportId={reportId}
            reportTitle={reportTitle}
            topic={topic}
            partners={showIntroModal === "nofit" ? [] : selectedPartners}
            user={user}
            noFit={showIntroModal === "nofit"}
            resultsGeneratedAt={generatedAt}
            onClose={() => setShowIntroModal(false)}
            onSubmitted={(data) => {
              // Server is authoritative on what has been requested; it returns the
              // full set, so a second request cannot drop the first one's ids.
              if (Array.isArray(data.requested_partner_ids)) setRequestedIds(data.requested_partner_ids);
              if (data.no_fit_requested === true) setNoFitRequested(true);
              setSelected([]);
            }}
            // 409. stale_results means the list moved under this user, so repaint
            // from the server and drop the selection; already_requested just needs
            // the CTA to catch up. Either way the modal shows the server's message.
            onStale={(code) => {
              if (code === "already_requested") setNoFitRequested(true);
              else reloadResults();
            }}
          />
        )}
      </div>
    );
  }

// Unavailable. Quiet, not alarming — the report itself is complete and unaffected.
  return (
    <div className="sc-panel">
      <div className="eyebrow" style={{ marginBottom: 12 }}>Partners</div>
      <div className="sc-meta-line" style={{ marginBottom: 14 }}>
        We couldn't identify partners for this report.
      </div>
      {resetNote && (
        <div className="sc-stall-note" style={{ marginBottom: 14 }}>{resetNote}</div>
      )}
      <button className="btn ghost" onClick={tryAgain}>Try again</button>
    </div>
  );
}

window.ScoutingPanel = ScoutingPanel;