/* Waypath Platform — premium Linear/Cursor view components. */

const { useState, useEffect, useRef, useMemo, useCallback } = React;
const D = window.WP_DATA;

/* ──────── primitives ──────── */
function Arr() { return <span className="arr">↗</span>; }

/* ──────── strength strip ────────
   Port of <ModuleCard strengthStrip /> from packages/web/src/components/
   instrument/ModuleCard.tsx. 8 segments by default — solid vermillion for
   `lit`, 40% vermillion for `warn`, muted for the remainder. Reads as a
   signal-strength bar on a dark grid backdrop. */
function StrengthStrip({ total = 8, lit = 0, warn = 0, pattern }) {
  // If a `pattern` array is given, each entry ("lit" | "on" | "warn" | "off")
  // controls a segment directly — used to render the exact 10-bar signal
  // burst from the reference (orange lit bars are taller; white "on" bars
  // and dim gray "off" bars share the shorter baseline height — colors
  // and heights live in styles.css under .strength-strip .seg).
  if (Array.isArray(pattern)) {
    return (
      <div className="strength-strip">
        {pattern.map((p, i) => {
          const cls = (p === "lit" || p === "on" || p === "warn" || p === "off") ? p : "off";
          return <span key={i} className={`seg ${cls}`} />;
        })}
      </div>
    );
  }
  const stripTotal = total;
  const stripLit = Math.max(0, Math.min(stripTotal, lit));
  const stripWarn = Math.max(0, Math.min(stripTotal - stripLit, warn));
  return (
    <div className="strength-strip">
      {Array.from({ length: stripTotal }).map((_, i) => {
        const cls =
          i < stripLit ? "lit"
          : i < stripLit + stripWarn ? "warn"
          : "off";
        return <span key={i} className={`seg ${cls}`} />;
      })}
    </div>
  );
}

/* ──────── TickStrip ────────
   Radio-channel / signal-meter indicator. Three height+color tiers:
   `lo` (10px, black @ 25%), `md` (10px, solid black), `hi` (14px,
   vermillion, vertically centered via -2px margin so it overhangs the
   baseline equally above and below). Sharp rectangles — no radius, no
   shadow, no animation. Spec lives in uploads/strength-strip-prompt-*.md. */
const TICK_STYLES = {
  lo: { width: 2, height: 10, background: 'rgba(8, 8, 8, 0.25)', borderRadius: 0 },
  md: { width: 2, height: 10, background: '#080808',             borderRadius: 0 },
  hi: { width: 2, height: 14, background: '#E8522B', margin: '-2px 0', borderRadius: 0 },
};
function TickStrip({ ticks }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 3 }}>
      {ticks.map((level, i) => (
        <span key={i} className={`tick-${level}`} style={TICK_STYLES[level]} />
      ))}
    </div>
  );
}
function Btn({ children, onClick, ghost, tiny, full, notched }) {
  return (
    <button className={`btn${ghost ? " ghost" : ""}${tiny ? " tiny" : ""}${full ? " full" : ""}${notched ? " notched" : ""}`} onClick={onClick}>
      {children}
    </button>
  );
}

/* ──────── ASCII status icon ────────
   Replaces the standard dot/spinner with a small canvas
   rendering of the Waypath ASCII engine. Each status maps
   to a different shape from the engine. */
const STATUS_SHAPE = { run: "sphere", ready: "octahedron", wait: "rings", done: "cube" };
function AsciiStatus({ status = "run", size = 22, large = false, invertMouse = false }) {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    if (!el || !window.AsciiEngine) return;
    if (el.dataset.asciiInited) return;
    el.dataset.asciiInited = "1";
    const isDone = status === "done";
    window.AsciiEngine.init(el, {
      mode: "sphere",
      shape: STATUS_SHAPE[status] || "sphere",
      interactive: invertMouse,
      invertMouse,
      scanlines: false,
      bgAlpha: 0,
      radius: large ? 0.42 : 0.52,
      font: large ? 12 : 7,
      cellW: large ? 7 : 4,
      cellH: large ? 9 : 5,
      weight: 700,
      lightColor: isDone ? [120, 120, 120] : [255, 110, 50],
      baseColor: isDone ? [70, 70, 70] : [200, 195, 185]
    });
  }, [status]);
  return <canvas ref={ref} className="ascii-status" style={{ width: size, height: size, display: "block" }} />;
}

/* ──────── status helpers ──────── */
const STATUSES = {
  high: { id: "run", label: "In progress", dot: "run" },
  warm: { id: "ready", label: "Ready for review", dot: "ready" },
  cool: { id: "done", label: "Waiting on you", dot: "wait" }
};

function statusOf(o) { return STATUSES[o.stage] || STATUSES.warm; }

/* ──────── row (agent task) ──────── */
function Row({ o, selected, onSelect, idx }) {
  const s = statusOf(o);
  const customerName = o.who.split(" · ")[0];
  const taskBlurb = o.who.split(" · ")[1] || "";
  return (
    <div className={`row ${o.stage} ${s.id}-status${selected ? " sel" : ""}${o.stage === "high" ? " high" : ""}`} onClick={() => onSelect(o)}>
      <div className="st"><AsciiStatus status={s.dot} /></div>
      <div className="title">
        <b>{customerName}</b>
        <span className="sub">— {taskBlurb}</span>
        <span className="id">{o.id}</span>
      </div>
      <div className="sig">
        <span>{o.signal.toLowerCase().replace(/\b\w/g, c => c.toUpperCase())}</span>
        <span className="ln2">{o.playbook}</span>
      </div>
      <div className="conf">{o.conf}%</div>
      <div className="agt"><i />{o.agent.split(" · ")[0].toLowerCase().replace(/\b\w/g, c => c.toUpperCase())}</div>
      <div className="time">
        <span>{(o.agent.split(" · ")[1] || "").toLowerCase()}</span>
        <span className="jump">{idx + 1}</span>
      </div>
    </div>
  );
}

function CustomerRow({ c, selected, onSelect, idx }) {
  const stage = c.health > 75 ? "high" : c.health < 50 ? "cool" : "warm";
  const s = STATUSES[stage];
  return (
    <div className={`row ${stage} ${s.id}-status${selected ? " sel" : ""}${stage === "high" ? " high" : ""}`} onClick={() => onSelect(c)}>
      <div className="st"><AsciiStatus status={s.dot} /></div>
      <div className="title">
        <b>{c.name}</b>
        <span className="sub">— {c.contact || "no contact"}, {c.role}</span>
        <span className="id">{c.id}</span>
      </div>
      <div className="sig">
        <span>{c.risk}</span>
        <span className="ln2">${c.arr} ARR · {c.plan}</span>
      </div>
      <div className="conf">{c.health}</div>
      <div className="agt"><i />{c.seats} seat</div>
      <div className="time">
        <span>{c.lastEvent.split(" · ")[c.lastEvent.split(" · ").length - 1].toLowerCase()}</span>
        <span className="jump">{idx + 1}</span>
      </div>
    </div>
  );
}

/* ──────── group header ──────── */
function GroupH({ label, count, meta, open = true, onToggle }) {
  return (
    <div className="group-h">
      <span className="caret" onClick={onToggle}>{open ? "▾" : "▸"}</span>
      <span>{label}</span>
      <span className="ct">{count}</span>
      <span className="spacer" />
      {meta ? <span className="grp-meta">{meta}</span> : null}
    </div>
  );
}

/* ──────── subhead (filter / view bar) ──────── */
function Subhead({ dest, view, setView, count, todayTab, setTodayTab }) {
  const t =
    dest === "today" ? { h: "Today", m: "Friday, 15 May" } :
    dest === "pipeline" ? { h: "Pipeline", m: `${count} open opportunities` } :
    { h: "Customers", m: "2,148 in book" };
  const views = dest === "customers"
    ? [{ id: "all", l: "All", c: 2148 }, { id: "high", l: "Healthy", c: 1842 }, { id: "warm", l: "Watch", c: 268 }, { id: "cool", l: "At-risk", c: 38 }]
    : [{ id: "all", l: "All", c: 42 }, { id: "high", l: "In progress", c: 3 }, { id: "warm", l: "Ready", c: 2 }, { id: "cool", l: "Waiting", c: 1 }];

  const showSubtabs = dest === "today";
  const inReports = showSubtabs && todayTab === "reports";
  const freshReports = D.reports ? D.reports.filter(r => r.fresh).length : 0;

  return (
    <div className={`subhead${showSubtabs ? " has-tabs" : ""}`}>
      <h1>{t.h}</h1>
      <span className="meta"><b>·</b>&nbsp;{t.m}</span>

      {showSubtabs ? (
        <div className="sub-tabs" role="tablist" aria-label="Today views">
          <button
            role="tab"
            aria-selected={todayTab !== "reports"}
            className={`sub-tab${todayTab !== "reports" ? " on" : ""}`}
            onClick={() => setTodayTab && setTodayTab("queue")}
          >
            Queue<span className="ct">6</span>
          </button>
          <button
            role="tab"
            aria-selected={todayTab === "reports"}
            className={`sub-tab${todayTab === "reports" ? " on" : ""}`}
            onClick={() => setTodayTab && setTodayTab("reports")}
          >
            Reports
            <span className="ct">{D.reports ? D.reports.length : 0}</span>
            {freshReports ? <span className="dot" aria-label={`${freshReports} new`} /> : null}
          </button>
        </div>
      ) : null}

      <span className="spacer" />

      {inReports ? (
        <div className="views">
          <button className="view on">All<span className="ct">{D.reports ? D.reports.length : 0}</span></button>
          <button className="view">New<span className="ct">{freshReports}</span></button>
          <button className="view">Saved<span className="ct">0</span></button>
        </div>
      ) : (
        <div className="views">
          {views.map(v => (
            <button key={v.id} className={`view${view === v.id ? " on" : ""}`} onClick={() => setView(v.id)}>
              {v.l}<span className="ct">{v.c}</span>
            </button>
          ))}
        </div>
      )}
      <span style={{ width: 12 }} />
      <button className="iconbtn" title="Group">⊟</button>
      <button className="iconbtn" title="Sort">↓</button>
      <button className="iconbtn" title="Filter">⚙</button>
    </div>
  );
}

/* ──────── INSPECTOR — customer detail ──────── */
function CustomerInspector({ data, onFire, onClose }) {
  const s = data;
  return (
    <>
      <div className="insp-head">
        <div className="crumb">
          <b>{s.name}</b>
          <span style={{ color: "var(--fg-4)" }}>·</span>
          <span>{s.company}</span>
          <span className="id">{s.id}</span>
        </div>
        <div className="tools">
          <button className="iconbtn" title="Pop out">⤢</button>
          <button className="iconbtn" title="More">⋯</button>
          <button className="iconbtn" title="Close" onClick={onClose}>×</button>
        </div>
      </div>
      <div className="insp-body">
        <div className="it-hero">
          <div className="hero-row">
            <div className="hero-text">
              <div className="topline"><span className="dt" />Expansion window · open · 6–9d typical</div>
              <h2>The expansion <em>window</em> is open.</h2>
              <div className="sub"><b>{s.role}</b> · {s.plan} · stitched across 14 sessions in the last week</div>
            </div>
            <div className="hero-viz"><AsciiStatus status="run" size={120} large /></div>
          </div>
        </div>

        <div className="it-props">
          <div className="p"><div className="k">Health</div><div className="v">{s.health}<span className="u">/100</span></div></div>
          <div className="p"><div className="k">ARR</div><div className="v">${s.arr}<span className="u">USD</span></div></div>
          <div className="p"><div className="k">NPS</div><div className="v">{s.nps}<span className="u">/10</span></div></div>
          <div className="p"><div className="k">Tenure</div><div className="v">{s.daysIn}<span className="u">days</span></div></div>
        </div>

        <div className="callout">
          <div className="who"><span className="pulse" />Signal · why this</div>
          Sarah's team added <b>4 seats</b> and visited <b>/pricing</b> five times in 48h. Pattern matches <b>PPL-04 · expand-loop</b> with 94% confidence.
        </div>

        <div className="it-sec">
          <span>Journey<span className="id-pill">last 72h</span></span>
          <span className="more">Show all</span>
        </div>
        <div className="journey">
          {s.journey.slice(0, 6).map((j, i) => (
            <div className={`j-row${j.dim ? " dim" : ""}`} key={i}>
              <div className="t">{j.t}</div>
              <div className="d" />
              <div className="what">{j.what}<span>{j.note}</span><span className="src">{j.src}</span></div>
            </div>
          ))}
        </div>

        <div className="it-sec">
          <span>Stakeholders<span className="id-pill">4 identified</span></span>
          <span className="more">Add</span>
        </div>
        <div className="stk">
          {s.stakeholders.map((p, i) => {
            const tone = p.touch.startsWith("active") ? "" : p.touch.startsWith("warm") ? "warm" : "cold";
            return (
              <div className="p" key={i}>
                <div>
                  <b>{p.name}{p.you ? <span className="you-tag">you</span> : null}</b>
                  <div className="role">{p.role.toLowerCase().replace(/\b\w/g, c => c.toUpperCase())}</div>
                </div>
                <div className={`tch ${tone}`}><i />{p.touch}</div>
              </div>
            );
          })}
        </div>

        <div className="it-sec">
          <span>Playbook<span className="id-pill">PPL-04 · expand-loop</span></span>
          <span className="more">Customize</span>
        </div>
        <div className="pb">
          <div className="step done"><span className="w">T-0</span><div className="t">Acknowledge seat add<span>→ Slack to Sarah</span></div><span className="d" /></div>
          <div className="step"><span className="w">T+2h</span><div className="t">Share role-mapping doc<span>→ via SSO thread</span></div><span className="d" /></div>
          <div className="step"><span className="w">T+1d</span><div className="t">Loop CTO Marcus<span>→ exec digest email</span></div><span className="d" /></div>
          <div className="step"><span className="w">T+3d</span><div className="t">Pricing proposal · 40 seat<span>→ HubSpot deal</span></div><span className="d" /></div>
          <div className="step"><span className="w">T+7d</span><div className="t">Procurement intro<span>→ Jenn Park</span></div><span className="d" /></div>
        </div>
      </div>
      <div className="insp-foot">
        <Btn full notched onClick={onFire}>Fire PPL-04</Btn>
        <Btn ghost full>Draft outreach</Btn>
      </div>
    </>
  );
}

/* ──────── INSPECTOR — opportunity detail ──────── */
function OppInspector({ o, onFire, onOpenCustomer, onClose }) {
  const stageCopy = o.stage === "high" ? "Fire now." : o.stage === "warm" ? "Worth a look." : "Re-warm.";
  return (
    <>
      <div className="insp-head">
        <div className="crumb">
          <b>{o.who.split(" · ")[0]}</b>
          <span style={{ color: "var(--fg-4)" }}>·</span>
          <span>{o.who.split(" · ")[1]}</span>
          <span className="id">{o.id}</span>
        </div>
        <div className="tools">
          <button className="iconbtn" title="Open customer" onClick={onOpenCustomer}>↗</button>
          <button className="iconbtn" title="More">⋯</button>
          <button className="iconbtn" title="Close" onClick={onClose}>×</button>
        </div>
      </div>
      <div className="insp-body">
        <div className="it-hero">
          <div className="hero-row">
            <div className="hero-text">
              <div className="topline"><span className="dt" />{o.signal.toLowerCase().replace(/\b\w/g, c => c.toUpperCase())} · {o.playbook}</div>
              <h2>{stageCopy}</h2>
              <div className="sub">{o.sub}</div>
            </div>
            <div className="hero-viz"><AsciiStatus status={o.stage === "high" ? "run" : o.stage === "warm" ? "ready" : "wait"} size={120} large /></div>
          </div>
        </div>

        <div className="it-props">
          <div className="p"><div className="k">Confidence</div><div className="v">{o.conf}<span className="u">%</span></div></div>
          <div className="p"><div className="k">Rank</div><div className="v">#1</div></div>
          <div className="p"><div className="k">Signals</div><div className="v">3<span className="u">hits</span></div></div>
          <div className="p"><div className="k">Age</div><div className="v">{(o.agent.split(" · ")[1] || "—").replace(/[^0-9]/g, "") || "—"}<span className="u">{(o.agent.split(" · ")[1] || "").replace(/[0-9]/g, "").trim().toLowerCase()}</span></div></div>
        </div>

        <div className="callout">
          <div className="who"><span className="pulse" />Signal · {o.signal.toLowerCase()}</div>
          {o.sub}. Surfaced by <b>{o.agent.split(" · ")[0].toLowerCase()}</b>. Match to <b>{o.playbook}</b> exceeds threshold.
        </div>

        <div className="it-sec">
          <span>Proposed playbook<span className="id-pill">{o.playbook}</span></span>
          <span className="more">Swap</span>
        </div>
        <div className="pb">
          <div className="step"><span className="w">T-0</span><div className="t">Acknowledge signal<span>→ logged to {o.id}</span></div><span className="d" /></div>
          <div className="step"><span className="w">T+1h</span><div className="t">Send tailored outreach<span>→ Customer.io</span></div><span className="d" /></div>
          <div className="step"><span className="w">T+1d</span><div className="t">Loop stakeholders<span>→ HubSpot deal</span></div><span className="d" /></div>
          <div className="step"><span className="w">T+3d</span><div className="t">Follow-up · score check<span>→ revenue agent</span></div><span className="d" /></div>
        </div>

        <div className="it-sec">
          <span>What the agent saw<span className="id-pill">log</span></span>
          <span className="more">Raw</span>
        </div>
        <div className="journey">
          <div className="j-row"><div className="t">17m</div><div className="d" /><div className="what">Score crossed 90<span>{o.signal.toLowerCase()} + recency bump</span><span className="src">signal</span></div></div>
          <div className="j-row"><div className="t">38m</div><div className="d" /><div className="what">Stitched identities<span>14 → 3 stakeholders</span><span className="src">orchestrator</span></div></div>
          <div className="j-row dim"><div className="t">2h</div><div className="d" /><div className="what">Event ingest spike<span>+ 4.2k/hr threshold</span><span className="src">segment</span></div></div>
        </div>
      </div>
      <div className="insp-foot">
        <Btn full notched onClick={onFire}>Fire {o.playbook.split(" ")[0]}</Btn>
        <Btn ghost full onClick={onOpenCustomer}>Open customer</Btn>
      </div>
    </>
  );
}

/* ──────── FIRST RUN ──────── */
function FirstRunView({ onSuggest }) {
  const picks = [
    { ic: "solid", lab: "Who should I reach out to today?", k: "1", q: "today" },
    { ic: "", lab: "Which customers are at risk?", k: "2", q: "risk" },
    { ic: "", lab: "Show me the pipeline by stage", k: "3", q: "pipeline" },
    { ic: "", lab: "What did the agents do overnight?", k: "4", q: "log" }
  ];
  return (
    <div className="firstrun-wrap">
      <div className="firstrun">
        <span className="demo-tag"><i />Demo workspace · 6 customers · 42 opportunities</span>
        <h1>Pick a <em>thread.</em></h1>
        <p className="sub">
          We seeded a workspace so nothing is empty. Pick a question, or ask the agent below. Real data swaps in when you connect integrations.
        </p>
        <div className="picks">
          {picks.map(p => (
            <button key={p.k} className="pick" onClick={() => onSuggest(p)}>
              <span className={`ic ${p.ic}`} />
              <span className="lab">{p.lab}</span>
              <kbd>{p.k}</kbd>
              <span className="arr">↗</span>
            </button>
          ))}
        </div>
      </div>
    </div>
  );
}

/* ──────── AGENT THREAD ──────── */
function UserMsg({ time, children }) {
  return (
    <div className="umsg">
      <div className="who">You · {time}</div>
      {children}
    </div>
  );
}

function AgentMsg({ agent = "orchestrator", duration, children }) {
  return (
    <div className="amsg">
      <div className="who"><i />{agent}{duration ? <span className="dur">· {duration}</span> : null}</div>
      <div className="body">{children}</div>
    </div>
  );
}

function AgentSteps({ steps }) {
  return (
    <div className="agent-steps">
      {steps.map((s, i) => (
        <div className="step" key={i}>
          <span className="ic">{s.done ? "✓" : "›"}</span>
          <span className="t">{s.text}</span>
          {s.meta ? <span className="meta">{s.meta}</span> : null}
        </div>
      ))}
    </div>
  );
}

function ToolCall({ tool, status, target }) {
  return (
    <div className="tool-call">
      <span className="arr">→</span>
      <span className="tool">{tool}</span>
      <span className="sep">·</span>
      <span className={`status ${status}`}>{status}</span>
      {target ? <><span className="sep">·</span><span className="target">{target}</span></> : null}
    </div>
  );
}

function DraftCard({ subject, body, channel = "customer.io" }) {
  return (
    <div className="draft-card">
      <div className="dc-head">
        <span className="dc-tag">draft · email · {channel}</span>
        <div className="dc-tools">
          <button className="dc-tool">edit</button>
          <button className="dc-tool">regenerate</button>
          <button className="dc-tool send">send ↗</button>
        </div>
      </div>
      <div className="dc-row"><span className="dc-k">to</span><span className="dc-v">sarah@techflow.com</span></div>
      <div className="dc-row"><span className="dc-k">subject</span><span className="dc-v"><b>{subject}</b></span></div>
      <div className="dc-body">{body}</div>
    </div>
  );
}

function TypingIndicator({ agent, action }) {
  return (
    <div className="typing">
      <span className="who"><span className="dots"><i /><i /><i /></span>{agent}</span>
      <span className="action">{action}</span>
    </div>
  );
}

function ThreadBg() {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    if (!el || !window.AsciiEngine) return;
    if (el.dataset.asciiInited) return;
    el.dataset.asciiInited = "1";
    // ONE canvas, sphere mode, sphere offset to the right.
    // Engine renders the wave-field around the sphere automatically,
    // so the whole pane reads as a single continuous atmosphere
    // — same approach as Waypath.html hero.
    window.AsciiEngine.init(el, {
      mode: "sphere",
      shape: "sphere",
      interactive: true,
      scanlines: false,
      bgAlpha: 0,
      radius: 0.46,
      offsetX: 180,
      offsetY: -60,
      font: 13,
      cellW: 8,
      cellH: 14,
      weight: 500,
      lightColor: [255, 110, 50],
      baseColor: [160, 148, 130]
    });
  }, []);
  return <canvas ref={ref} />;
}

function ThreadView({ onOpenCustomer, onBack, onFire }) {
  return (
    <>
      <div className="subhead">
        <h1>Agent thread</h1>
        <span className="meta"><b>·</b>&nbsp;orchestrator · 3 turns · 4 tool calls</span>
        <span className="spacer" />
        <div className="views">
          <button className="view on">Active <span className="ct">live</span></button>
          <button className="view">History <span className="ct">12</span></button>
        </div>
        <span style={{ width: 12 }} />
        <button className="iconbtn" title="New thread">+</button>
        <button className="iconbtn" title="Share">⤴</button>
        <button className="iconbtn" title="More">⋯</button>
      </div>
      <div className="ticker">
        <div className="tag"><i />thread · live</div>
        <div className="track">
          <div className="lane">
            <span className="ev"><span className="t">RPL-088</span><span className="sep">·</span><span className="from">orchestrator</span><span className="sep">·</span>3 turns</span>
            <span className="ev"><span className="t">tool</span><span className="sep">·</span><em>customer.io sent</em></span>
            <span className="ev"><span className="t">watching</span><span className="sep">·</span>Northbeam thread · CIO replied 38s ago</span>
            <span className="ev"><span className="t">RPL-088</span><span className="sep">·</span><span className="from">orchestrator</span><span className="sep">·</span>3 turns</span>
            <span className="ev"><span className="t">tool</span><span className="sep">·</span><em>customer.io sent</em></span>
            <span className="ev"><span className="t">watching</span><span className="sep">·</span>Northbeam thread · CIO replied 38s ago</span>
          </div>
        </div>
      </div>
      <div className="thread-wrap">
        <div className="thread">
        {/* ── Turn 1 ── */}
        <UserMsg time="14:02">Who should I reach out to today?</UserMsg>
        <AgentSteps steps={[
          { done: true, text: "checking pipeline state", meta: "42 open · 6 high-signal" },
          { done: true, text: "ranking by recency × confidence", meta: "0.4s" },
          { done: true, text: "matched 3 customers to playbooks" }
        ]} />
        <AgentMsg agent="orchestrator" duration="0.8s">
          <p>{D.replies.today.preamble}</p>
        </AgentMsg>
        {D.replies.today.cards.map((c, i) => (
          <div className={`actcard${c.high ? " high" : ""}`} key={c.id}>
            <div className="body">
              <div className="topline">
                <span className="conf">{c.num}%</span>
                <span>·</span>
                <span className="id">{c.id}</span>
                <span>·</span>
                <span>rank {i + 1}</span>
              </div>
              <b>{c.who}</b>
              <p dangerouslySetInnerHTML={{ __html: c.body }} />
            </div>
            <div className="acts">
              <Btn ghost tiny onClick={onOpenCustomer}>Open</Btn>
              <Btn tiny onClick={onFire}>{c.fire.charAt(0).toUpperCase() + c.fire.slice(1).toLowerCase().replace(/(ppl|opp|rpt|cst|jny|stk)-(\d+)/gi, (_, p, n) => `${p.toUpperCase()}-${n}`)}</Btn>
            </div>
          </div>
        ))}

        {/* ── Turn 2 ── */}
        <UserMsg time="14:03">draft the sarah chen outreach. personal, short.</UserMsg>
        <AgentSteps steps={[
          { done: true, text: "pulling CST-217 context", meta: "412d tenure · NPS 9" },
          { done: true, text: "scanning prior threads", meta: "14 messages · 6 weeks" },
          { done: true, text: "tone match: warm · direct · first-name" },
          { done: true, text: "constraint: under 80 words" }
        ]} />
        <AgentMsg agent="outreach" duration="2.1s">
          <p>Draft below. Warm, direct, <b>62 words</b>. Pre-warmed with the role-mapping doc she asked about in Slack this morning. Ready to send.</p>
        </AgentMsg>
        <DraftCard
          subject="quick one on the seat add"
          body={
            <>
              hey sarah —<br /><br />
              saw the four new seats this morning. role-mapping doc you flagged in #integrations is attached. happy to walk the eng-platform crew through it together, otherwise feel free to forward.<br /><br />
              also — if you're sizing this past 40 seats, we have growth pricing that gets you there for less than upgrading one-by-one. want me to send the breakdown?<br /><br />
              — sc
            </>
          }
        />

        {/* ── Turn 3 ── */}
        <UserMsg time="14:04">drop the second paragraph. send it.</UserMsg>
        <AgentSteps steps={[
          { done: true, text: "removed paragraph 2 · pricing pitch" },
          { done: true, text: "rewording closing for flow" },
          { done: true, text: "queued via customer.io" }
        ]} />
        <ToolCall tool="customer.io" status="sent" target="CST-217 · OPP-014" />
        <AgentMsg agent="outreach" duration="0.4s">
          <p>Sent at <b>14:04 UTC</b>. Logged to <b>OPP-014</b>. Watching for reply — I'll ping you on signal.</p>
        </AgentMsg>

        {/* ── live: agent still working ── */}
        <TypingIndicator agent="signal" action="watching Northbeam thread · CIO replied 38s ago" />

        <div style={{ display: "flex", gap: 6, marginTop: 10, flexWrap: "wrap" }}>
          <button className="s-chip" onClick={onBack}>← Back to today</button>
          <button className="s-chip">Loop CTO Marcus</button>
          <button className="s-chip">Schedule follow-up · 3d</button>
          <button className="s-chip">Show reasoning</button>
        </div>
      </div>
    </div>
    </>
  );
}

/* ──────── reports view (Today → Reports sub-tab) ──────── */
function ReportsView({ onSelect }) {
  const reports = (D.reports || []);
  const TYPE_LABEL = { digest: "DIGEST", sweep: "SWEEP", forecast: "FORECAST", ticket: "INCIDENT" };

  return (
    <div className="reports">
      <div className="reports-head">
        <span className="k">Reports</span>
        <span className="m">Auto-generated by the agents. New runs surface as fresh. Saved reports persist across days.</span>
      </div>

      {reports.map((r, i) => (
        <article
          key={r.id}
          className={`report-card${r.fresh ? " fresh" : ""}${i === 0 ? " first" : ""}`}
          onClick={() => onSelect && onSelect(r)}
        >
          <header className="rc-head">
            <span className="rc-id">{r.id}</span>
            <span className="rc-when">{r.t}</span>
            <span className="rc-sep">·</span>
            <span className="rc-type">{TYPE_LABEL[r.type] || r.type.toUpperCase()}</span>
            <span className="rc-spacer" />
            {r.fresh ? (
              <span className="rc-fresh"><span className="pulse" />new</span>
            ) : null}
          </header>

          <h3 className="rc-title">{r.title}</h3>
          <div className="rc-author">
            by <span className="agent">{r.author}</span>
          </div>

          <p className="rc-summary">{r.summary}</p>

          {r.stats && r.stats.length ? (
            <div className="rc-stats">
              {r.stats.map((s, si) => (
                <div className="rc-stat" key={si}>
                  <div className="k">{s.k}</div>
                  <div className="v">{s.v}<span className="u">{s.u}</span></div>
                </div>
              ))}
            </div>
          ) : null}

          {r.highlights && r.highlights.length ? (
            <ul className="rc-list">
              {r.highlights.map((h, hi) => (
                <li key={hi}>
                  <span className="d" />
                  <span className="who">{h.who}</span>
                  <span className="sep">—</span>
                  <span className="note">{h.note}</span>
                </li>
              ))}
            </ul>
          ) : null}

          <footer className="rc-foot">
            <span className="rc-link">Open report <span className="arr">↗</span></span>
            <span className="rc-meta">
              <span>save</span>
              <kbd>S</kbd>
              <span style={{ width: 8 }} />
              <span>share</span>
              <kbd>⇧⌘S</kbd>
            </span>
          </footer>
        </article>
      ))}

      <div className="reports-foot">
        <span className="k">End of feed</span>
        <span className="m">Older runs are archived to RPT log · keyboard <kbd>L</kbd> to open.</span>
      </div>
    </div>
  );
}

/* ──────── live ticker ──────── */
function Ticker() {
  const events = D.activity;
  // duplicate for seamless loop
  const lane = [...events, ...events];
  return (
    <div className="ticker">
      <div className="tag"><i />live · 24h</div>
      <div className="track">
        <div className="lane">
          {lane.map((e, i) => (
            <span className="ev" key={i}>
              <span className="t">{e.t}</span>
              <span className="from">{e.from.toLowerCase()}</span>
              <span className="sep">·</span>
              <span dangerouslySetInnerHTML={{ __html: e.em ? `<em>${e.msg}</em>` : e.msg }} />
            </span>
          ))}
        </div>
      </div>
    </div>
  );
}

/* ──────── atmospheric ASCII field ──────── */
function AtmosField() {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    if (!el || !window.AsciiEngine) return;
    if (el.dataset.asciiInited) return;
    el.dataset.asciiInited = "1";
    window.AsciiEngine.init(el, {
      mode: "field",
      interactive: false,
      scanlines: false,
      bgAlpha: 0,
      fieldAlphaMax: 0.55,
      font: 11,
      cellW: 7,
      cellH: 12,
      weight: 500,
      baseColor: [100, 92, 80]
    });
  }, []);
  return <canvas ref={ref} className="atmos-field" />;
}

window.WP_VIEWS = {
  Btn, Arr, Row, CustomerRow, GroupH, Subhead,
  CustomerInspector, OppInspector, FirstRunView, ThreadView, ReportsView,
  STATUSES, AsciiStatus, Ticker, AtmosField, ThreadBg,
  StrengthStrip, TickStrip
};