/* ===========================================================================
   Azure Helper — Guide mode  (read-only tutor)
   Teaches every step three ways: Portal · Graph · PowerShell.
   Reads can run live; changes are instruction-only (the Helper never writes).
   =========================================================================== */

/* copy-to-clipboard button */
function CopyBtn({ text, label = "Copy" }) {
  const [done, setDone] = useState(false);
  function copy() {
    try { navigator.clipboard && navigator.clipboard.writeText(text); } catch (e) { }
    setDone(true); setTimeout(() => setDone(false), 1300);
  }
  return (
    <button className="btn btn-quiet btn-sm" onClick={copy} style={{ padding: "5px 10px" }}>
      <Icon name={done ? "check" : "copy"} size={12} color={done ? "var(--primary)" : "var(--text-dim)"} />
      {done ? "Copied" : label}
    </button>
  );
}

/* method toggle: Portal · Graph · PowerShell */
const METHODS = [
  { id: "portal", label: "Portal", icon: "eye" },
  { id: "graph", label: "Graph", icon: "graph" },
  { id: "powershell", label: "PowerShell", icon: "bolt" },
];
function MethodTabs({ value, onChange, avail }) {
  return (
    <div className="row" style={{ gap: 4, background: "var(--inset)", padding: 4, borderRadius: 8, border: "1px solid var(--border)" }}>
      {METHODS.filter(m => avail[m.id]).map(m => (
        <button key={m.id} onClick={() => onChange(m.id)} className="row mono" style={{
          gap: 6, padding: "6px 12px", borderRadius: 5, cursor: "pointer", fontSize: 12, fontWeight: 600,
          background: value === m.id ? "var(--surface-3)" : "transparent",
          color: value === m.id ? "var(--text)" : "var(--text-dim)",
          border: "1px solid " + (value === m.id ? "var(--border-2)" : "transparent")
        }}>
          <Icon name={m.icon} size={13} color={value === m.id ? "var(--primary)" : "var(--text-dim)"} /> {m.label}
        </button>
      ))}
    </div>
  );
}

/* the three "how" views */
function PortalGuide({ steps }) {
  return (
    <div className="code" style={{ padding: 0, overflow: "hidden" }}>
      <div className="row" style={{ gap: 8, padding: "9px 13px", borderBottom: "1px solid var(--border)", background: "var(--surface-2)" }}>
        <span className="dot" style={{ background: "#ec5c5c", width: 9, height: 9 }} />
        <span className="dot" style={{ background: "#e8c14e", width: 9, height: 9 }} />
        <span className="dot" style={{ background: "#5fc46a", width: 9, height: 9 }} />
        <span className="mono dim" style={{ fontSize: 11.5, marginLeft: 6 }}>entra.microsoft.com</span>
      </div>
      <ol style={{ margin: 0, padding: "12px 14px 12px 0", listStyle: "none", counterReset: "s" }}>
        {steps.map((s, i) => (
          <li key={i} className="row" style={{ gap: 11, padding: "5px 16px", alignItems: "flex-start" }}>
            <span className="mono" style={{ color: "var(--primary)", fontSize: 12, fontWeight: 700, minWidth: 16, textAlign: "right" }}>{i + 1}</span>
            <span style={{ fontSize: 13, color: "var(--text-2)", lineHeight: 1.55, fontFamily: "var(--sans)" }}>{s}</span>
          </li>
        ))}
      </ol>
    </div>
  );
}

function StepHow({ step, m }) {
  if (m === "portal") return <PortalGuide steps={step.gui} />;
  if (m === "powershell") {
    return <pre className="code" style={{ margin: 0 }}><span className="tok-cmd">{step.powershell}</span></pre>;
  }
  // graph
  return <CmdLine method={step.method} url={step.url} body={step.body} />;
}

/* teach-as-you-go block (tolerant of missing fields) */
function TeachBlock({ step, coaching }) {
  if (coaching === "light") return null;
  const article = AH.articles[step.concept];
  if (!step.learn && !step.tip && !article) return null;
  return (
    <div style={{ background: "var(--violet-dim)", border: "1px solid rgba(167,139,250,.22)", borderRadius: 6, padding: "12px 13px" }}>
      {step.learn && (
        <>
          <div className="row" style={{ gap: 7, marginBottom: 6 }}>
            <Icon name="book" size={14} color="var(--violet)" />
            <span className="mono" style={{ fontSize: 11, letterSpacing: ".5px", color: "var(--violet)", fontWeight: 700, textTransform: "uppercase" }}>Learn</span>
            {step.concept && <span className="chip vi" style={{ marginLeft: "auto" }}>{step.concept}</span>}
          </div>
          <div style={{ fontSize: 13, color: "var(--text-2)", lineHeight: 1.6 }}>{step.learn}</div>
        </>
      )}
      {step.tip && (
        <div style={{ display: "flex", gap: 8, marginTop: step.learn ? 11 : 0, paddingTop: step.learn ? 11 : 0, borderTop: step.learn ? "1px solid rgba(167,139,250,.18)" : "none" }}>
          <Icon name="spark" size={14} color="var(--gold)" style={{ flexShrink: 0, marginTop: 2 }} />
          <div style={{ fontSize: 12.5, color: "var(--text-2)", lineHeight: 1.55 }}>
            <span className="mono" style={{ color: "var(--gold)", fontWeight: 700, fontSize: 11 }}>PRO TIP&nbsp;&nbsp;</span>{step.tip}
          </div>
        </div>
      )}
      {article && (
        <a href={article.url} target="_blank" rel="noopener" className="between" style={{ marginTop: 11, padding: "9px 11px", borderRadius: 6, textDecoration: "none", background: "var(--inset)", border: "1px solid var(--border)" }}>
          <span className="row" style={{ gap: 9, minWidth: 0 }}>
            <Icon name="book" size={14} color="var(--primary)" />
            <span style={{ minWidth: 0 }}>
              <span className="mono" style={{ fontSize: 12.5, color: "var(--text)", display: "block", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{article.title}</span>
              <span className="mono" style={{ fontSize: 10.5, color: "var(--text-dim)" }}>learn.cloudpartner.fi · {article.read} read</span>
            </span>
          </span>
          <Icon name="arrow" size={14} color="var(--primary)" />
        </a>
      )}
    </div>
  );
}

/* one teaching step */
function StepRow({ step, idx, open, onToggle, done, onDone, coaching, defaultMethod }) {
  const avail = { portal: !!step.gui, graph: !!step.url, powershell: !!step.powershell };
  const firstAvail = avail[defaultMethod] ? defaultMethod : (avail.portal ? "portal" : avail.graph ? "graph" : "powershell");
  const [m, setM] = useState(firstAvail);
  const [ran, setRan] = useState(false);
  const [running, setRunning] = useState(false);
  const [resultData, setResultData] = useState(step.result || null);
  const [runError, setRunError] = useState("");
  const isRead = step.risk === "read";

  async function runRead() {
    setRunning(true);
    setRunError("");

    try {
      if (window.AHRuntime && step.url) {
        const response = await window.AHRuntime.queryGraph({
          method: step.method,
          url: step.url,
          body: step.body || undefined,
        });
        setResultData(response.data);
      } else {
        await new Promise((resolve) => setTimeout(resolve, 850));
        setResultData(step.result || null);
      }
      setRan(true);
    } catch (error) {
      setRunError(error.message || "Read operation failed");
      setResultData({ error: error.message || "Read operation failed" });
      setRan(true);
    } finally {
      setRunning(false);
    }
  }
  const copyText = m === "portal" ? step.gui.map((g, i) => `${i + 1}. ${g}`).join("\n")
    : m === "powershell" ? step.powershell
      : `${step.method} https://graph.microsoft.com${step.url}` + (step.body ? "\n\n" + JSON.stringify(step.body, null, 2) : "");

  return (
    <div className="card" style={{ padding: 0, overflow: "hidden", borderColor: done ? "var(--border-2)" : "var(--border)" }}>
      <div className="between" style={{ padding: "13px 15px", cursor: "pointer" }} onClick={onToggle}>
        <div className="row" style={{ gap: 12, minWidth: 0 }}>
          <div style={{
            width: 26, height: 26, borderRadius: 6, flexShrink: 0, display: "flex", alignItems: "center", justifyContent: "center",
            fontFamily: "var(--mono)", fontWeight: 700, fontSize: 12.5,
            background: done ? "var(--primary)" : "var(--inset)", color: done ? "#04221d" : "var(--text-dim)",
            border: "1px solid " + (done ? "var(--primary)" : "var(--border)")
          }}>{done ? <Icon name="check" size={15} color="#04221d" /> : idx + 1}</div>
          <div style={{ minWidth: 0 }}>
            <div className="mono" style={{ fontWeight: 600, fontSize: 13.5, color: "var(--text)" }}>{step.title}</div>
            <div className="row" style={{ gap: 8, marginTop: 4 }}>
              {isRead
                ? <span className="chip cy">○ safe read · I can run this</span>
                : <span className="chip gold">▸ you run this · Helper never writes</span>}
              {step.concept && coaching !== "light" && <span className="chip vi" style={{ display: window.innerWidth < 640 ? "none" : "inline-flex" }}>{step.concept}</span>}
            </div>
          </div>
        </div>
        <Icon name="chevron" size={15} color="var(--text-dim)" style={{ transform: open ? "rotate(90deg)" : "none", transition: "transform .15s", flexShrink: 0 }} />
      </div>

      {open && (
        <div style={{ padding: "2px 15px 16px", borderTop: "1px solid var(--border)" }}>
          <div className="col" style={{ gap: 14, marginTop: 14 }}>
            <div style={{ fontSize: 13.5, color: "var(--text-2)", lineHeight: 1.6 }}>{step.why}</div>

            {/* how-to with three ways */}
            <div className="col" style={{ gap: 10 }}>
              <div className="between wrap" style={{ gap: 10 }}>
                <MethodTabs value={m} onChange={setM} avail={avail} />
                <CopyBtn text={copyText} label={m === "portal" ? "Copy steps" : "Copy"} />
              </div>
              <StepHow step={step} m={m} />
            </div>

            {/* read: run live; change: instruction-only banner */}
            {isRead ? (
              <div>
                {!ran ? (
                  <button className="btn btn-ghost btn-sm" onClick={runRead} disabled={running}>
                    {running ? <><Icon name="refresh" size={13} color="var(--primary)" className="spin" /> Reading your tenant…</> : <><Icon name="play" size={13} color="var(--primary)" /> Run this read (safe)</>}
                  </button>
                ) : (
                  <div className="fade">
                    <div className="row" style={{ gap: 7, marginBottom: 7 }}>
                      <span className="live"><span className="dot on" /> live from {AH.tenant.domain}</span>
                    </div>
                    {runError && (
                      <div className="chip" style={{ color: "var(--rose)", borderColor: "rgba(244,117,127,.4)", marginBottom: 8 }}>
                        {runError}
                      </div>
                    )}
                    <JsonView data={resultData} style={{ margin: 0 }} />
                  </div>
                )}
              </div>
            ) : (
              <div className="row" style={{ gap: 9, padding: "10px 12px", background: "var(--gold-dim)", border: "1px solid rgba(231,210,78,.22)", borderRadius: 6 }}>
                <Icon name="shield" size={15} color="var(--gold)" />
                <span className="t2" style={{ fontSize: 12.5, lineHeight: 1.5 }}>
                  This step <b>changes your tenant</b>, so the Helper won't run it. Copy the method you prefer above and run it yourself — then tick it off.
                </span>
              </div>
            )}

            <TeachBlock step={step} coaching={coaching} />

            {/* mark done */}
            <button className="row" onClick={() => onDone(!done)} style={{
              gap: 9, alignSelf: "flex-start", cursor: "pointer", background: "transparent", border: "none", padding: 0, fontFamily: "var(--sans)"
            }}>
              <span style={{
                width: 20, height: 20, borderRadius: 5, display: "flex", alignItems: "center", justifyContent: "center",
                border: "1px solid " + (done ? "var(--primary)" : "var(--border-2)"), background: done ? "var(--primary)" : "transparent"
              }}>{done && <Icon name="check" size={13} color="#04221d" />}</span>
              <span style={{ fontSize: 13, color: done ? "var(--text-2)" : "var(--text)" }}>{done ? "Done" : "Mark this step done"}</span>
            </button>
          </div>
        </div>
      )}
    </div>
  );
}

/* a full walkthrough for one scenario */
function GuideRun({ scenario, coaching, defaultMethod, onOpenLearn }) {
  const steps = scenario.steps;
  const [phase, setPhase] = useState("understanding");   // understanding | guide
  const [open, setOpen] = useState(new Set(coaching === "heavy" ? steps.map((_, i) => i) : [0]));
  const [doneSet, setDoneSet] = useState(new Set());
  const [showFollow, setShowFollow] = useState(false);
  useEffect(() => { const t = setTimeout(() => setPhase("guide"), 950); return () => clearTimeout(t); }, []);

  const toggle = (i) => setOpen(s => { const n = new Set(s); n.has(i) ? n.delete(i) : n.add(i); return n; });
  const setDone = (i, v) => setDoneSet(s => { const n = new Set(s); v ? n.add(i) : n.delete(i); return n; });
  const allDone = doneSet.size >= steps.length;

  return (
    <div className="col" style={{ gap: 14 }}>
      {/* understanding */}
      <div className="card tint fade">
        <div className="row" style={{ gap: 9, marginBottom: 10 }}>
          <div style={{ width: 24, height: 24, borderRadius: 6, background: "var(--violet-dim)", border: "1px solid rgba(167,139,250,.3)", display: "flex", alignItems: "center", justifyContent: "center" }}>
            <Icon name="book" size={14} color="var(--violet)" />
          </div>
          <span className="mono" style={{ fontSize: 12, fontWeight: 700, color: "var(--violet)" }}>Helper coach</span>
          <span className="chip vi">{scenario.intent}</span>
          <span className="chip cy" style={{ marginLeft: "auto" }}>read-only</span>
        </div>
        {phase === "understanding"
          ? <Thinking label="reading your tenant & preparing the walkthrough" />
          : <div style={{ fontSize: 14.5, color: "var(--text)", lineHeight: 1.6 }}>{scenario.summary}</div>}
        {phase !== "understanding" && (
          <div className="row wrap" style={{ gap: 8, marginTop: 13 }}>
            {scenario.entities.map((e, i) => (
              <span key={i} className="chip"><span className="dim">{e.k}:</span>&nbsp;<span style={{ color: "var(--text)" }}>{e.v}</span></span>
            ))}
          </div>
        )}
      </div>

      {phase === "guide" && (
        <div className="card fade" style={{ padding: 0 }}>
          <div className="between" style={{ padding: "13px 16px", borderBottom: "1px solid var(--border)" }}>
            <PS path="Helper" cmd={"Show-HowTo -Steps " + steps.length} />
            <span className="mono dim" style={{ fontSize: 12 }}>{doneSet.size}/{steps.length} done</span>
          </div>
          <div className="col" style={{ gap: 10, padding: 14 }}>
            {steps.map((s, i) => (
              <StepRow key={i} step={s} idx={i} open={open.has(i)} onToggle={() => toggle(i)}
                done={doneSet.has(i)} onDone={(v) => setDone(i, v)} coaching={coaching} defaultMethod={defaultMethod} />
            ))}
          </div>

          {/* follow-up "your turn" + recap */}
          <div style={{ padding: "0 16px 16px" }}>
            {scenario.followUp && (
              <div className="col" style={{ gap: 10 }}>
                <button className="btn btn-quiet btn-sm" style={{ alignSelf: "flex-start" }} onClick={() => setShowFollow(s => !s)}>
                  <Icon name={showFollow ? "chevron" : "arrow"} size={13} color="var(--primary)" style={showFollow ? { transform: "rotate(90deg)" } : null} /> {scenario.followUp.label}
                </button>
                {showFollow && (
                  <div className="fade">
                    <StepRow step={scenario.followUp} idx={steps.length} open={true} onToggle={() => { }}
                      done={doneSet.has(99)} onDone={(v) => setDone(99, v)} coaching={coaching} defaultMethod={defaultMethod} />
                  </div>
                )}
              </div>
            )}
          </div>

          {allDone && coaching !== "light" && scenario.learned && (
            <div className="fade" style={{ padding: "14px 16px", borderTop: "1px solid var(--border)", background: "linear-gradient(180deg, rgba(167,139,250,.08), transparent)" }}>
              <div className="row" style={{ gap: 8, marginBottom: 8 }}>
                <Icon name="check" size={16} color="var(--primary)" />
                <span className="mono" style={{ fontWeight: 700, color: "var(--primary)", fontSize: 13.5 }}>Walkthrough complete — nice work</span>
              </div>
              <div className="mono dim" style={{ fontSize: 11.5, marginBottom: 8, textTransform: "uppercase", letterSpacing: ".5px" }}>// what you learned</div>
              <div className="row wrap" style={{ gap: 7 }}>
                {scenario.learned.map((c, i) => <span key={i} className="chip vi">✓ {c}</span>)}
              </div>
              <button className="btn btn-quiet btn-sm" style={{ marginTop: 13 }} onClick={onOpenLearn}>
                <Icon name="arrow" size={13} color="var(--primary)" /> Go deeper in the Learning hub
              </button>
            </div>
          )}
        </div>
      )}
    </div>
  );
}

/* whole guide surface */
function getAiDiagnostic(error) {
  const details = error?.details || error?.payload?.details || {};
  const status = Number(error?.status || details?.status || 0);
  const code = String(error?.code || error?.payload?.code || "");
  const message = String(error?.message || "").toLowerCase();
  const raw = JSON.stringify(details || {}).toLowerCase();

  if (code === "AZURE_OPENAI_NOT_CONFIGURED") {
    return "Tutor status: not configured";
  }
  if (status === 401 || status === 403 || /unauthorized|permission|access denied|forbidden/.test(`${message} ${raw}`)) {
    return "Tutor status: unauthorized";
  }
  if (status === 404 || /deploymentnotfound|deployment not found/.test(raw)) {
    return "Tutor status: deployment not found";
  }
  return "Tutor status: request failed";
}

function AgentView({ coaching, defaultMethod, seed, onConsumeSeed, onOpenLearn }) {
  const extensionSurface = new URLSearchParams(window.location.search).get("surface") === "extension";
  const [runs, setRuns] = useState([]);
  const [text, setText] = useState("");
  const [aiBusy, setAiBusy] = useState(false);
  const [aiMessage, setAiMessage] = useState("");
  const [aiError, setAiError] = useState("");
  const [aiDiagnostic, setAiDiagnostic] = useState("");
  const scrollRef = useRef(null);

  function launch(prompt, scenarioId) {
    const sid = scenarioId || AH.routePrompt(prompt);
    setRuns(r => [...r, { prompt, scenarioId: sid, key: Date.now() + Math.random() }]);
    setText("");
  }
  useEffect(() => { if (seed) { launch(seed.prompt, seed.scenarioId); onConsumeSeed && onConsumeSeed(); } }, [seed]);
  useEffect(() => { const el = scrollRef.current; if (el) el.scrollTop = el.scrollHeight; }, [runs.length]);

  function submit(e) { e && e.preventDefault(); const t = text.trim(); if (t) launch(t); }
  async function askAiTutor() {
    const latest = text.trim() || (runs[runs.length - 1] ? runs[runs.length - 1].prompt : "How should I proceed with this task?");
    setAiBusy(true);
    setAiError("");
    setAiDiagnostic("");
    try {
      if (!window.AHRuntime) {
        throw new Error("Runtime API not available");
      }
      const response = await window.AHRuntime.tutor(latest, "Guide mode coach");
      setAiMessage(response.message || "No AI message returned");
    } catch (e) {
      setAiError(e.message || "AI tutor request failed");
      setAiDiagnostic(getAiDiagnostic(e));
      setAiMessage("");
    } finally {
      setAiBusy(false);
    }
  }
  const empty = runs.length === 0;

  return (
    <div className="col" style={{ height: "100%", minHeight: 0 }}>
      <div ref={scrollRef} className="grow" style={{ overflowY: "auto", padding: "26px 0" }}>
        <div style={{ maxWidth: 880, margin: "0 auto", padding: "0 26px" }}>
          {empty ? (
            <div className="fade">
              <Crumbs items={[{ label: "Guide", on: true }, { label: "your real tenant" }, { label: "I show, you run" }]} />
              <h1 className="h1" style={{ marginTop: 18, fontSize: 33 }}>
                Ask how to do anything.<br />I'll <span className="gold">show you</span> — without touching a thing.
              </h1>
              <p style={{ color: "var(--text-2)", fontSize: 15, maxWidth: 600, marginTop: 14 }}>
                Every task, explained three ways — the <b>Portal</b>, <b>Microsoft Graph</b>, and <b>PowerShell</b> — using your real data from <span className="mono cy">{AH.tenant.domain}</span>. The Helper reads to teach, and <b>never changes your tenant</b>. You run the steps.
              </p>
              <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(250px, 1fr))", gap: 10, marginTop: 18 }}>
                {[
                  {
                    title: "Onboard a new employee",
                    blurb: "Create user, assign license, group and team membership, then verify handoff.",
                    sid: "onboard",
                    prompt: AH.scenarios.onboard.prompt,
                  },
                  {
                    title: "Audit stale guest accounts",
                    blurb: "Run safe guest reads and identify external users inactive for 90+ days.",
                    sid: "guests",
                    prompt: AH.scenarios.guests.prompt,
                  },
                  {
                    title: "Verify admin MFA coverage",
                    blurb: "Cross-check privileged roles against Conditional Access MFA protections.",
                    sid: "mfa",
                    prompt: AH.scenarios.mfa.prompt,
                  },
                ].map((m, i) => (
                  <button
                    key={i}
                    className="card hover"
                    onClick={() => launch(m.prompt, m.sid)}
                    style={{ textAlign: "left", cursor: "pointer", padding: "12px 13px", display: "block" }}
                  >
                    <div className="row" style={{ gap: 8 }}>
                      <Icon name="spark" size={14} color="var(--primary)" />
                      <span className="mono" style={{ fontWeight: 700, fontSize: 12.5, color: "var(--text)" }}>{m.title}</span>
                    </div>
                    <p style={{ color: "var(--text-2)", fontSize: 12.5, lineHeight: 1.55, marginTop: 8 }}>{m.blurb}</p>
                    <div className="row" style={{ gap: 7, marginTop: 8 }}>
                      <span className="chip cy">Guide</span>
                      <span className="chip">Portal + Graph + PowerShell</span>
                    </div>
                  </button>
                ))}
              </div>
              <div className="col" style={{ gap: 9, marginTop: 26 }}>
                <SecLabel>ask me how to…</SecLabel>
                {AH.suggestions.slice(0, 6).map((s, i) => (
                  <button key={i} className="card hover" onClick={() => launch(s)} style={{
                    textAlign: "left", cursor: "pointer", padding: "13px 15px", display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12,
                    fontFamily: "var(--sans)", color: "var(--text)", fontSize: 14
                  }}>
                    <span className="row" style={{ gap: 11 }}><Icon name="spark" size={15} color="var(--primary)" /> {s}</span>
                    <Icon name="arrow" size={15} color="var(--text-dim)" />
                  </button>
                ))}
              </div>
            </div>
          ) : (
            <div className="col" style={{ gap: 30 }}>
              {runs.map((r) => (
                <div key={r.key} className="col" style={{ gap: 14 }}>
                  <div style={{ alignSelf: "flex-end", maxWidth: "82%" }}>
                    <div className="card" style={{ background: "var(--surface-3)", borderColor: "var(--border-2)", padding: "12px 15px" }}>
                      <div className="row" style={{ gap: 8, marginBottom: 5 }}>
                        <Icon name="user" size={13} color="var(--text-dim)" />
                        <span className="mono dim" style={{ fontSize: 11 }}>you</span>
                      </div>
                      <div style={{ fontSize: 14, color: "var(--text)", lineHeight: 1.55 }}>{r.prompt}</div>
                    </div>
                  </div>
                  <GuideRun scenario={AH.scenarios[r.scenarioId]} coaching={coaching} defaultMethod={defaultMethod} onOpenLearn={onOpenLearn} />
                </div>
              ))}
            </div>
          )}
        </div>
      </div>

      <div style={{ borderTop: "1px solid var(--border)", background: "var(--bg)", padding: extensionSurface ? "10px 14px" : "14px 26px" }}>
        <form onSubmit={submit} style={{ maxWidth: 880, margin: "0 auto" }}>
          <div style={{ position: "relative" }}>
            <div className="ps" style={{ position: "absolute", top: -22, left: 2 }}>
              <span className="ps-user">PS jamie@contoso</span><span style={{ color: "var(--text-faint)" }}>:~/Helper&gt;</span>
            </div>
            <input className="inp" value={text} onChange={e => setText(e.target.value)}
              placeholder="Ask how to do something — e.g. 'how do I block legacy auth?'"
              style={{ paddingRight: 46, fontFamily: "var(--mono)" }} />
            <button type="submit" className="btn btn-primary" style={{ position: "absolute", right: 5, top: 5, padding: "6px 9px" }}>
              <Icon name="send" size={15} color="#04221d" />
            </button>
          </div>
          <div className="between wrap" style={{ gap: 10, marginTop: 11, alignItems: "center" }}>
            {!extensionSurface ? (
              <div className="row wrap" style={{ gap: 7, flex: "1 1 520px" }}>
                {AH.suggestions.slice(0, 4).map((s, i) => (
                  <button key={i} type="button" className="chip click" onClick={() => launch(s)}>
                    {s.length > 42 ? s.slice(0, 40) + "…" : s}
                  </button>
                ))}
              </div>
            ) : <div className="grow" />}
            <button type="button" className="btn btn-quiet btn-sm" onClick={askAiTutor} disabled={aiBusy} style={{ marginLeft: "auto", flexShrink: 0 }}>
              <Icon name="spark" size={13} color="var(--violet)" /> {aiBusy ? "AI thinking…" : "Ask AI tutor"}
            </button>
          </div>
          {aiMessage && (
            <div className="card" style={{ marginTop: 10, background: "var(--violet-dim)", borderColor: "rgba(167,139,250,.25)", padding: "10px 12px" }}>
              <div className="mono" style={{ fontSize: 11, color: "var(--violet)", marginBottom: 6 }}>AI tutor response</div>
              <div style={{ whiteSpace: "pre-wrap", fontSize: 13.5, color: "var(--text-2)", lineHeight: 1.55 }}>{aiMessage}</div>
            </div>
          )}
          {aiError && (
            <div className="col" style={{ gap: 7, marginTop: 10 }}>
              {aiDiagnostic && (
                <div className="mono" style={{ fontSize: 11.5, color: "var(--gold)" }}>
                  {aiDiagnostic}
                </div>
              )}
              <div className="chip" style={{ color: "var(--rose)", borderColor: "rgba(244,117,127,.5)" }}>
                {aiError}
              </div>
            </div>
          )}
        </form>
      </div>
    </div>
  );
}

Object.assign(window, { AgentView });
