frontend/src/App.js

import React, { useState } from "react";
function App() {
  const [query, setQuery] = useState("");
  const [loading, setLoading] = useState(false);
  const [report, setReport] = useState("");
  const [sources, setSources] = useState([]);
  const [confidence, setConfidence] = useState(null);

  const handleSubmit = async (e) => {
    e.preventDefault();
    setLoading(true);
    setReport("");
    setSources([]);
    setConfidence(null);
    const res = await fetch("/investigate", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ query }),
    });
    const data = await res.json();
    setReport(data.report);
    setSources(data.sources || []);
    setConfidence(data.confidence);
    setLoading(false);
  };
  return (
    <div style={{ maxWidth: 900, margin: "auto", padding: 40, fontFamily: "sans-serif" }}>
      <h1>OSINT AI Agent Investigation Platform</h1>
      <form onSubmit={handleSubmit} style={{ marginBottom: 32 }}>
        <input
          value={query}
          onChange={(e) => setQuery(e.target.value)}
          placeholder="Enter investigation query (e.g. Ali Khaledi Nasab)"
          style={{ padding: 12, width: "80%" }}
        />
        <button type="submit" style={{ padding: 12, marginLeft: 10 }}>Investigate</button>
      </form>
      {loading && <div>Investigating... Please wait.</div>}
      {report && (
        <div>
          <h2>Intelligence Report</h2>
          <div style={{ whiteSpace: "pre-wrap", background: "#f8f8f8", padding: 24, borderRadius: 10 }}>{report}</div>
          <h3>Sources</h3>
          <ul>{sources.map((src, idx) => <li key={idx}>{src}</li>)}</ul>
          {confidence !== null && <div>Confidence: {confidence}</div>}
        </div>
      )}
    </div>
  );
}
export default App;