// Primate App Kit — Review Details (single PR's runs)
const { useState: useStateRD } = React;

const WF_BG = "#26262b";
const WF_LINE = "rgba(255,255,255,0.07)";
const WF_BAR = "rgba(255,255,255,0.09)";
const WF_BAR2 = "rgba(255,255,255,0.15)";
const WF_ACCENT = "rgba(184,184,214,0.40)";

const MOCKS = [
  { label: "/ — desktop (1920 × 1080)", variant: "desktop", finding: "Hero CTA renders above the fold; no overflow." },
  { label: "/app/wsp_1EUonYXYE.../logs — tablet (1024 × 768)", variant: "logs", finding: "Log rows wrap cleanly at tablet width." },
  { label: "/settings — desktop (1920 × 1080)", variant: "desktop", finding: "Settings form passes keyboard navigation." },
  { label: "/app/wsp_1EUonYXYE.../runs — tablet (1024 × 768)", variant: "logs", finding: "Pagination controls reachable on tablet." },
  { label: "/login — desktop (1920 × 1080)", variant: "desktop", finding: "Empty-field validation fires as expected." },
  { label: "/app/wsp_1EUonYXYE.../logs — tablet (1024 × 768)", variant: "logs", video: true, finding: "No layout shift during run playback." },
];

function WFChrome() {
  return (
    <div style={{ height: 26, flexShrink: 0, display: "flex", alignItems: "center", gap: 6, padding: "0 12px", borderBottom: `1px solid ${WF_LINE}` }}>
      <div style={{ display: "flex", gap: 5 }}>
        {[0, 1, 2].map(i => <span key={i} style={{ width: 7, height: 7, borderRadius: "50%", background: "rgba(255,255,255,0.14)" }} />)}
      </div>
      <div style={{ width: 70, height: 7, borderRadius: 999, background: WF_BAR, marginLeft: 6 }} />
      <div style={{ flex: 1 }} />
      <div style={{ display: "flex", flexDirection: "column", gap: 3 }}>
        {[0, 1, 2].map(i => <span key={i} style={{ width: 14, height: 1.5, background: WF_BAR2 }} />)}
      </div>
    </div>
  );
}

function WFRow({ w }) {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 10, height: 30, padding: "0 12px", borderRadius: 6, border: `1px solid ${WF_LINE}`, flexShrink: 0 }}>
      <span style={{ width: 54, height: 13, borderRadius: 5, background: WF_BAR2, flexShrink: 0 }} />
      <span style={{ width: w, height: 8, borderRadius: 999, background: WF_BAR }} />
      <span style={{ flex: 1 }} />
      <span style={{ width: 40, height: 8, borderRadius: 999, background: WF_BAR, flexShrink: 0 }} />
    </div>
  );
}

function Wireframe({ variant = "logs" }) {
  return (
    <div style={{ position: "absolute", inset: 0, display: "flex", flexDirection: "column", background: WF_BG, overflow: "hidden" }}>
      <WFChrome />
      {variant === "desktop" ? (
        <div style={{ flex: 1, minHeight: 0, display: "flex", flexDirection: "column", justifyContent: "space-between", gap: 12, padding: 14 }}>
          <div style={{ display: "flex", gap: 14, flex: 1, minHeight: 0 }}>
            <div style={{ width: "38%", borderRadius: 8, border: `1px solid ${WF_LINE}`, background: "rgba(255,255,255,0.03)", display: "flex", alignItems: "center", justifyContent: "center" }}>
              <Icon name="image" size={22} color="rgba(255,255,255,0.20)" />
            </div>
            <div style={{ flex: 1, display: "flex", flexDirection: "column", gap: 9, paddingTop: 6 }}>
              <span style={{ width: "72%", height: 11, borderRadius: 999, background: WF_ACCENT }} />
              <span style={{ width: "92%", height: 8, borderRadius: 999, background: WF_BAR }} />
              <span style={{ width: "78%", height: 8, borderRadius: 999, background: WF_BAR }} />
              <span style={{ width: 90, height: 18, borderRadius: 6, border: `1px solid ${WF_LINE}`, marginTop: 4 }} />
            </div>
          </div>
          <div style={{ display: "flex", gap: 10 }}>
            {[0, 1, 2].map(i => (
              <div key={i} style={{ flex: 1, display: "flex", alignItems: "center", gap: 7, padding: "8px 9px", borderRadius: 6, border: `1px solid ${WF_LINE}` }}>
                <span style={{ width: 13, height: 13, borderRadius: "50%", background: WF_BAR2, flexShrink: 0 }} />
                <span style={{ flex: 1, height: 7, borderRadius: 999, background: WF_BAR }} />
              </div>
            ))}
          </div>
        </div>
      ) : (
        <div style={{ flex: 1, minHeight: 0, display: "flex", flexDirection: "column", gap: 8, padding: 12 }}>
          {["46%", "32%", "40%", "28%", "44%"].map((w, i) => <WFRow key={i} w={w} />)}
        </div>
      )}
    </div>
  );
}

function Lightbox({ index, onClose, onPrev, onNext }) {
  const m = MOCKS[index];
  const ratio = m.variant === "desktop" ? 9 / 16 : 3 / 4;
  const baseW = 360, baseH = Math.round(baseW * ratio);
  const [scale, setScale] = useStateRD(2);
  React.useEffect(() => {
    const calc = () => {
      const maxW = Math.min(window.innerWidth * 0.86, 1080);
      const maxH = window.innerHeight * 0.66;
      setScale(Math.max(1, Math.min(maxW / baseW, maxH / baseH)));
    };
    calc();
    const onKey = (e) => { if (e.key === "Escape") onClose(); else if (e.key === "ArrowRight") onNext(); else if (e.key === "ArrowLeft") onPrev(); };
    window.addEventListener("resize", calc);
    window.addEventListener("keydown", onKey);
    return () => { window.removeEventListener("resize", calc); window.removeEventListener("keydown", onKey); };
  }, [index, baseW, baseH, onClose, onNext, onPrev]);
  const navBtn = (icon, handler, side) => (
    <button onClick={(e) => { e.stopPropagation(); handler(); }} style={{ position: "fixed", top: "50%", [side]: 20, transform: "translateY(-50%)", width: 44, height: 44, borderRadius: "50%", border: "1px solid var(--border)", background: "var(--bg-elevated)", color: "var(--fg)", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center", zIndex: 10001 }}>
      <Icon name={icon} size={20} color="var(--fg)" />
    </button>
  );
  return (
    <div onClick={onClose} style={{ position: "fixed", inset: 0, zIndex: 10000, background: "rgba(0,0,0,0.82)", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 16, padding: 24 }}>
      <button onClick={(e) => { e.stopPropagation(); onClose(); }} title="Close" style={{ position: "fixed", top: 20, right: 20, width: 40, height: 40, borderRadius: 8, border: "1px solid var(--border)", background: "var(--bg-elevated)", color: "var(--fg)", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center", zIndex: 10001 }}>
        <Icon name="x" size={18} color="var(--fg)" />
      </button>
      <div onClick={(e) => e.stopPropagation()} style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 14, maxWidth: "100%" }}>
        <span style={{ font: "var(--t-code)", color: "var(--fg-secondary)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", maxWidth: "86vw" }}>{m.label}</span>
        <div style={{ position: "relative", width: baseW * scale, height: baseH * scale }}>
          <div style={{ width: baseW, height: baseH, transform: `scale(${scale})`, transformOrigin: "top left", position: "relative", borderRadius: 8, overflow: "hidden", background: WF_BG, border: "1px solid var(--border)" }}>
            <Wireframe variant={m.variant} />
          </div>
          {m.video && (
            <span style={{ position: "absolute", top: "50%", left: "50%", transform: "translate(-50%,-50%)", width: 60, height: 60, borderRadius: "50%", background: "rgba(20,20,20,0.72)", display: "flex", alignItems: "center", justifyContent: "center" }}>
              <Icon name="play" size={24} color="#fff" />
            </span>
          )}
        </div>
        <span style={{ font: "var(--t-body-sm)", color: "var(--fg-secondary)", maxWidth: 520, textAlign: "center", textWrap: "pretty" }}>{m.finding}</span>
        <span style={{ font: "var(--t-caption)", color: "var(--fg-faint)" }}>{index + 1} / {MOCKS.length}</span>
      </div>
      {navBtn("chevron-left", onPrev, "left")}
      {navBtn("chevron-right", onNext, "right")}
    </div>
  );
}

function MediaFrame({ label, video, variant, finding, onOpen }) {
  const [hover, setHover] = useStateRD(false);
  const fw = variant === "desktop" ? 356 : 266;
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 8, width: fw, flexShrink: 0 }}>
      <span title={label} style={{ font: "var(--t-caption)", color: "var(--fg-secondary)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", maxWidth: "100%" }}>{label}</span>
      <div onClick={onOpen} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)} style={{ position: "relative", width: "100%", height: 200, borderRadius: "var(--r-sm)", overflow: "hidden", background: WF_BG, cursor: "pointer" }}>
        <Wireframe variant={variant} />
        <div style={{ position: "absolute", inset: 0, background: hover ? "rgba(0,0,0,0.16)" : "transparent", transition: "background .14s ease", pointerEvents: "none" }} />
        {video && (
          <span style={{ position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center", pointerEvents: "none" }}>
            <span style={{ width: 56, height: 56, borderRadius: "50%", background: hover ? "rgba(20,20,20,0.85)" : "rgba(20,20,20,0.65)", display: "flex", alignItems: "center", justifyContent: "center", backdropFilter: "blur(2px)", transform: hover ? "scale(1.06)" : "scale(1)", transition: "background .14s ease, transform .14s ease" }}>
              <Icon name="play" size={22} color="#fff" />
            </span>
          </span>
        )}
      </div>
      {finding && (
        <span style={{ font: "var(--t-caption)", color: "var(--fg-secondary)", textWrap: "pretty" }}>{finding}</span>
      )}
    </div>
  );
}

function MetaCol({ label, value, tone }) {
  const dotColor = tone === "completed" ? "var(--success-fg)" : tone === "failed" ? "var(--danger)" : null;
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 6, minWidth: 0 }}>
      <span style={{ font: "var(--t-caption)", color: "var(--fg-secondary)", display: "inline-flex", alignItems: "center", gap: 6 }}>
        {dotColor && <span style={{ width: 8, height: 8, borderRadius: "50%", background: dotColor }} />}{label}
      </span>
      <span style={{ font: "var(--t-body-sm)", color: "var(--fg)" }}>{value}</span>
    </div>
  );
}

function RunSummary({ commit, status = "failed", nested = false, createdWhen = "Feb 28, 2026 at 1:56 pm", failedWhen = "Feb 28, 2026 at 1:57 pm", rawRowRef, rawBtnRef, rawOpen: rawOpenProp, onRawToggle }) {
  const [rawOpenLocal, setRawOpenLocal] = useStateRD(false);
  const rawOpen = rawOpenProp !== undefined ? rawOpenProp : rawOpenLocal;
  const toggleRaw = onRawToggle || (() => setRawOpenLocal(o => !o));
  const [hRerun, setHRerun] = useStateRD(false);
  const [hRaw, setHRaw] = useStateRD(false);
  const [lb, setLb] = useStateRD(null);
  const vp = useViewport();
  const compact = vp !== "desktop";
  const mobile = vp === "mobile";
  const failed = status !== "completed";
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 24 }}>
      {/* heading + error chip */}
      <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16, flexWrap: "nowrap" }}>
          <h2 style={{ font: "500 20px/28px var(--font-sans)", letterSpacing: "-0.45px", margin: 0, color: "var(--fg)", flexShrink: 0 }}>Summary</h2>
          <div style={{ display: "flex", alignItems: "center", gap: 6, flex: "0 1 auto", minWidth: 0, justifyContent: "flex-end" }}>
            {!failed ? (
              nested ? null : <Badge tone="success" icon="circle-check">Completed</Badge>
            ) : (
              <React.Fragment>
                <div style={{ display: "flex", alignItems: "center", gap: 6, minWidth: 0, background: "var(--danger-bg)", border: "1px solid var(--danger-border)", borderRadius: 4, padding: "10px 12px", color: "var(--danger)", font: "12px/16px var(--font-sans)" }}>
                  <Icon name="circle-alert" size={16} style={{ flexShrink: 0 }} /><span title="Build Failed: Sandbox failed to become ready within the timeout period." style={{ whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", minWidth: 0 }}>Build Failed: Sandbox failed to become ready within the timeout period.</span>
                </div>
                <div style={{ position: "relative", flexShrink: 0 }}>
                  <button onMouseEnter={() => setHRerun(true)} onMouseLeave={() => setHRerun(false)} style={{ width: 36, height: 36, borderRadius: 4, border: "none", background: hRerun ? "#4b4b52" : "var(--bg-elevated-2)", color: "var(--fg)", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center", transition: "background .14s ease" }}>
                    <Icon name="rotate-ccw" size={18} color="var(--fg)" />
                  </button>
                  {hRerun && (
                    <span style={{ position: "absolute", bottom: "calc(100% + 9px)", left: "50%", transform: "translateX(-50%)", padding: "6px 10px", borderRadius: 6, background: "var(--bg-elevated-2)", border: "1px solid var(--border)", color: "var(--fg)", font: "12px/16px var(--font-sans)", whiteSpace: "nowrap", boxShadow: "var(--shadow-md)", pointerEvents: "none" }}>Rerun build scripts</span>
                  )}
                </div>
              </React.Fragment>
            )}
          </div>
        </div>
        <span title={`${commit}125bfa601fa5aaa2542d6f3a883b4a35a`} style={{ font: "var(--t-code)", color: "var(--fg-secondary)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", maxWidth: "100%" }}>{commit}125bfa601fa5aaa2542d6f3a883b4a35a</span>
      </div>

      {/* meta row */}
      <div style={{ display: "grid", gridTemplateColumns: mobile ? "1fr" : "1fr 1fr 1fr", gap: mobile ? 16 : 32 }}>
        <MetaCol label="Created" value={createdWhen} />
        <MetaCol label={failed ? "Failed" : "Completed"} value={failedWhen} tone={failed ? "failed" : "completed"} />
        <MetaCol label="Duration" value="1m 0s" />
      </div>

      {/* media — only for completed runs (a failed build has no screenshots) */}
      {!failed && (
        <div style={{ display: "flex", gap: 16, overflowX: "auto", paddingBottom: 4 }}>
          {MOCKS.map((m, i) => <MediaFrame key={i} label={m.label} variant={m.variant} video={m.video} finding={m.finding} onOpen={() => setLb(i)} />)}
        </div>
      )}
      {lb !== null && <Lightbox index={lb} onClose={() => setLb(null)} onPrev={() => setLb((lb - 1 + MOCKS.length) % MOCKS.length)} onNext={() => setLb((lb + 1) % MOCKS.length)} />}

      {/* raw results */}
      <div ref={rawRowRef} style={{ borderTop: "1px solid var(--border)", paddingTop: 14 }}>
        <button ref={rawBtnRef} onClick={toggleRaw} onMouseEnter={() => setHRaw(true)} onMouseLeave={() => setHRaw(false)} style={{ display: "inline-flex", alignItems: "center", gap: 6, background: "transparent", border: "none", color: hRaw ? "var(--fg)" : "var(--fg-secondary)", font: "var(--t-body-sm)", cursor: "pointer", transition: "color .14s ease" }}>
          <Icon name={rawOpen ? "chevron-up" : "chevron-down"} size={16} color="var(--fg-secondary)" />Raw Results
        </button>
        {rawOpen && (
          <div style={{ position: "relative", marginTop: 12 }}>
            <pre style={{ margin: 0, font: "var(--t-code)", color: "var(--fg-secondary)", whiteSpace: "pre", overflowX: "auto" }}>{failed ? `{
  "status": "build_failed",
  "error": "sandbox_timeout",
  "steps_completed": 2,
  "flows_checked": [],
  "duration_ms": 60000
}` : `{
  "status": "passed",
  "flows_checked": 6,
  "issues_found": 0,
  "duration_ms": 60000
}`}</pre>
          </div>
        )}
      </div>
    </div>
  );
}

function PreviousRun({ run, open, onToggle, status = "failed", isFirst, isLast }) {
  const [hRow, setHRow] = useStateRD(false);
  const failed = status !== "completed";
  const mobile = useViewport() === "mobile";
  const containerRef = React.useRef(null);
  const headerRef = React.useRef(null);
  const rawRef = React.useRef(null);
  const rawBtnRef = React.useRef(null);
  const [rawOpen, setRawOpen] = useStateRD(false);
  const [d1, setD1] = useStateRD(21);
  const [d2, setD2] = useStateRD(0);
  React.useLayoutEffect(() => {
    const measure = () => {
      const c = containerRef.current;
      if (!c) return;
      const cr = c.getBoundingClientRect();
      // inside the scaled device frame, getBoundingClientRect is in scaled px while
      // `top` is applied unscaled — normalize deltas by the frame's scale factor
      const scale = c.offsetWidth ? cr.width / c.offsetWidth : 1;
      const rel = (px) => px / scale;
      if (headerRef.current) { const h = headerRef.current.getBoundingClientRect(); setD1(rel(h.top + h.height / 2 - cr.top)); }
      if (open && rawRef.current) {
        // collapsed raw results → center on the toggle row; expanded → drop to the bottom of the card
        if (rawOpen) { const r = rawRef.current.getBoundingClientRect(); setD2(rel(r.bottom - cr.top) - 6); }
        else if (rawBtnRef.current) { const b = rawBtnRef.current.getBoundingClientRect(); setD2(rel(b.top + b.height / 2 - cr.top)); }
      }
    };
    measure();
    const ro = new ResizeObserver(measure);
    if (containerRef.current) ro.observe(containerRef.current);
    return () => ro.disconnect();
  }, [open, rawOpen]);
  const goldDot = { position: "absolute", left: 0, width: 11, height: 11, borderRadius: "50%", background: "var(--gold)", filter: "blur(1.2px)", boxShadow: "0 0 16px rgba(235,187,54,0.75)" };
  const creamDot = { position: "absolute", left: 0, width: 11, height: 11, borderRadius: "50%", background: "#F6F6EE", filter: "blur(1.2px)", boxShadow: "0 4px 16px rgba(207,205,185,0.6)" };
  return (
    <div ref={containerRef} style={{ position: "relative", paddingLeft: mobile ? 0 : 28 }}>
      {/* timeline layer (line + dots) at 70% opacity — hidden on mobile */}
      {!mobile && (
      <div style={{ position: "absolute", inset: 0, opacity: 0.7, pointerEvents: "none" }}>
      {/* timeline connector — white where it bridges to neighbours, gold only between this run's own dots */}
      {!open ? (
        <span style={{ position: "absolute", left: 5, top: isFirst ? d1 : 0, bottom: isLast ? "auto" : -12, height: isLast ? d1 - (isFirst ? d1 : 0) : undefined, width: 1, background: "var(--border)" }} />
      ) : (
        <React.Fragment>
          {!isFirst && <span style={{ position: "absolute", left: 5, top: 0, height: d1, width: 1, background: "var(--border)" }} />}
          <span style={{ position: "absolute", left: 5, top: d1, height: Math.max(0, d2 - d1), width: 1, background: "linear-gradient(to bottom, rgba(235,187,54,0) 0%, rgba(235,187,54,0.7) 20%, rgba(235,187,54,0.7) 80%, rgba(235,187,54,0) 100%)" }} />
          {!isLast && <span style={{ position: "absolute", left: 5, top: d2, bottom: -12, width: 1, background: "var(--border)" }} />}
        </React.Fragment>
      )}
      <span style={{ ...(open ? goldDot : creamDot), top: d1 - 5.5 }} />
      {open && <span style={{ ...goldDot, top: d2 - 5.5 }} />}
      </div>
      )}
      <div style={{ border: "1px solid var(--border)", borderRadius: "var(--r-md)", background: "var(--bg-card)" }}>
        <div ref={headerRef} onClick={onToggle} onMouseEnter={() => setHRow(true)} onMouseLeave={() => setHRow(false)} style={{ display: "flex", alignItems: "center", gap: 12, padding: "12px 16px", cursor: "pointer", borderRadius: open ? "var(--r-md) var(--r-md) 0 0" : "var(--r-md)", background: hRow ? "rgba(255,255,255,0.04)" : "transparent", transition: "background .14s ease" }}>
          <Icon name={open ? "chevron-up" : "chevron-down"} size={16} color="var(--fg-faint)" />
          {failed
            ? <Badge tone="danger" icon="circle-alert">Build Failed</Badge>
            : <Badge tone="success" icon="circle-check">Completed</Badge>}
          <span style={{ font: "var(--t-code)", color: "var(--fg-secondary)" }}>{run.commit}</span>
          <div style={{ flex: 1 }} />
          <span style={{ font: "var(--t-caption)", color: "var(--fg-faint)" }}>{run.date} at 1:57 pm</span>
        </div>
        {open && <div style={{ padding: "0 16px 16px", borderTop: "1px solid var(--border)", paddingTop: 16 }}><RunSummary commit={run.commit} status={status} nested createdWhen={`${run.date}, 2026 at 1:56 pm`} failedWhen={`${run.date}, 2026 at 1:57 pm`} rawRowRef={rawRef} rawBtnRef={rawBtnRef} rawOpen={rawOpen} onRawToggle={() => setRawOpen(o => !o)} /></div>}
      </div>
    </div>
  );
}

function RunSearch({ mobile, tablet }) {
  const [h, setH] = useStateRD(false);
  const width = mobile ? "100%" : tablet ? "auto" : 300;
  return (
    <div onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)} style={{ display: "flex", alignItems: "center", gap: 8, height: 36, boxSizing: "border-box", padding: "0 14px", borderRadius: "var(--r-md)", background: "var(--bg-elevated)", border: `1px solid ${h ? "var(--border-hover)" : "var(--border-subtle)"}`, width, flex: tablet ? "1 1 0" : "none", minWidth: tablet ? 0 : undefined, maxWidth: tablet ? 320 : undefined, transition: "border-color .14s ease" }}>
      <Icon name="search" size={16} color="var(--fg-placeholder)" />
      <input placeholder="Search runs..." style={{ flex: 1, minWidth: 0, background: "transparent", border: "none", outline: "none", color: "var(--fg)", font: "var(--t-body-sm)" }} />
    </div>
  );
}

function ReviewDetails({ run, onBack }) {
  const [openRun, setOpenRun] = useStateRD(-1);
  const [hTitle, setHTitle] = useStateRD(false);
  const vp = useViewport();
  const mobile = vp === "mobile";
  const tablet = vp === "tablet";
  const prev = [
    { commit: "1ff4c8c", date: "Feb 28" },
    { commit: "00b6721", date: "Feb 28" },
    { commit: "4554c8c", date: "Feb 25" },
    { commit: "4fg4c8c", date: "Feb 24" },
    { commit: "5jg4c8c", date: "Feb 23" },
  ];
  const repo = run ? run.repo : "primate-sh/primate";
  const pr = run ? run.pr : "#35";
  const status = run && run.status ? run.status : "failed";
  const commit = (run && run.commit) ? run.commit : ((Number((run && run.id) || 0) * 2654435761) >>> 0).toString(16).padStart(7, "0").slice(0, 7);
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: mobile ? 24 : 32 }}>
      {/* breadcrumb + title */}
      <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 8, font: "var(--t-body-sm)" }}>
          <Icon name="logs" size={14} color="var(--fg-faint)" />
          <span onClick={onBack} onMouseEnter={e => e.currentTarget.style.color = "var(--fg)"} onMouseLeave={e => e.currentTarget.style.color = "var(--fg-secondary)"} style={{ color: "var(--fg-secondary)", cursor: "pointer", transition: "color .14s ease" }}>Review Logs</span>
          <Icon name="chevron-right" size={14} color="var(--fg-faint)" />
          <span style={{ color: "var(--fg)" }}>Review Details</span>
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
          <div onMouseEnter={() => setHTitle(true)} onMouseLeave={() => setHTitle(false)} style={{ display: "inline-flex", alignItems: "center", gap: 12, cursor: "pointer", alignSelf: "flex-start" }}>
            <h1 style={{ font: mobile ? "600 22px/1.2 var(--font-sans)" : "600 30px/36px var(--font-sans)", letterSpacing: "0.4px", margin: 0, color: "var(--fg)", wordBreak: "break-word", textDecoration: hTitle ? "underline" : "none", textUnderlineOffset: 4 }}>{repo} {pr}</h1>
            <Icon name="external-link" size={24} color={hTitle ? "var(--fg)" : "var(--fg-faint)"} />
          </div>
          <span style={{ font: "var(--t-body-sm)", color: "var(--fg-secondary)" }}>{prev.length + 1} runs</span>
        </div>
      </div>

      {/* current run panel */}
      <div style={{ border: "1px solid var(--border)", borderRadius: "var(--r-md)", background: "var(--bg-card)", padding: mobile ? 16 : 24 }}>
        <RunSummary commit={commit} status={status} />
      </div>

      {/* previous runs */}
      <div style={{ display: "flex", flexDirection: "column", gap: 20 }}>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16, flexWrap: mobile ? "wrap" : "nowrap" }}>
          <h2 style={{ font: "600 24px/32px var(--font-sans)", letterSpacing: "0.07px", margin: 0, color: "var(--fg)", flexShrink: 0 }}>Previous runs ({prev.length})</h2>
          <RunSearch mobile={mobile} tablet={tablet} />
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
          {prev.map((r, i) => <PreviousRun key={i} run={r} status={status} open={openRun === i} onToggle={() => setOpenRun(openRun === i ? -1 : i)} isFirst={i === 0} isLast={i === prev.length - 1} />)}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { ReviewDetails });