a2a-source-edit: write frontend/src/App.jsx

frontend/src/App.jsx

@@ -1,157 +1,339 @@
 import { useEffect, useMemo, useState } from "react";
-import {
+import { callSkill, fileToBrowserDocument, loadAgentConfig, loadSession, signInUrl } from "./a2a.js";
-  callSkill,
+
-  loadAgentConfig,
+const DEFAULT_QUOTES = [
-  loadSession,
+  { vendor: "Acme Bearings", quantity: 500, unit_price: 10.75, delivery_days: 12, warranty_months: 12 },
-  sampleArgs,
+  { vendor: "Beta Industrial", quantity: 500, unit_price: 9.1, delivery_days: 8, warranty_months: 18 },
-  signInUrl,
+];
-} from "./a2a.js";
+const DEFAULT_WEIGHTS = { price: 50, delivery: 30, warranty: 20 };
+
+function blankQuote() {
+  return { vendor: "", quantity: 1, unit_price: 0, delivery_days: 0, warranty_months: 0 };
+}
+
+function normalizeQuote(quote) {
+  return {
+    vendor: String(quote.vendor || "").trim(),
+    quantity: Number(quote.quantity),
+    unit_price: Number(quote.unit_price),
+    delivery_days: Number(quote.delivery_days),
+    warranty_months: Number(quote.warranty_months),
+  };
+}
+
+function parsePastedQuotes(text) {
+  const trimmed = text.trim();
+  if (!trimmed) return [];
+  try {
+    const parsed = JSON.parse(trimmed);
+    const rows = Array.isArray(parsed) ? parsed : parsed.quotes;
+    if (Array.isArray(rows)) return rows.map(normalizeQuote);
+  } catch {
+    // Fall through to CSV-ish parsing.
+  }
+  const lines = trimmed.split(/\r?\n/).filter(Boolean);
+  const hasHeader = /vendor|supplier/i.test(lines[0] || "");
+  const rows = hasHeader ? lines.slice(1) : lines;
+  return rows.map((line) => {
+    const parts = line.split(/[,;|\t]/).map((part) => part.trim());
+    return normalizeQuote({
+      vendor: parts[0],
+      quantity: parts[1],
+      unit_price: parts[2],
+      delivery_days: parts[3],
+      warranty_months: parts[4],
+    });
+  });
+}
+
+function validateQuotes(quotes, weights) {
+  const complete = quotes.map(normalizeQuote).filter((quote) => quote.vendor);
+  if (complete.length < 2) return "Add at least two vendor quotes before comparing.";
+  for (const quote of complete) {
+    if (!Number.isFinite(quote.quantity) || quote.quantity <= 0) return `${quote.vendor}: quantity must be greater than 0.`;
+    if (!Number.isFinite(quote.unit_price) || quote.unit_price < 0) return `${quote.vendor}: unit price must be 0 or greater.`;
+    if (!Number.isFinite(quote.delivery_days) || quote.delivery_days < 0) return `${quote.vendor}: delivery days must be 0 or greater.`;
+    if (!Number.isFinite(quote.warranty_months) || quote.warranty_months < 0) return `${quote.vendor}: warranty must be 0 or greater.`;
+  }
+  const totalWeight = Number(weights.price) + Number(weights.delivery) + Number(weights.warranty);
+  if (!Number.isFinite(totalWeight) || totalWeight <= 0) return "Set at least one positive weight.";
+  return null;
+}
 
 export function App() {
   const [config, setConfig] = useState(null);
   const [session, setSession] = useState(null);
-  const [selectedSkillName, setSelectedSkillName] = useState("");
+  const [loadError, setLoadError] = useState(null);
-  const [argsText, setArgsText] = useState("{}");
+  const [comparisonId, setComparisonId] = useState("studio-quote-v1");
+  const [quotes, setQuotes] = useState(DEFAULT_QUOTES);
+  const [weights, setWeights] = useState(DEFAULT_WEIGHTS);
+  const [pasteText, setPasteText] = useState("");
   const [result, setResult] = useState(null);
-  const [error, setError] = useState(null);
+  const [history, setHistory] = useState([]);
+  const [status, setStatus] = useState("");
+  const [error, setError] = useState("");
   const [running, setRunning] = useState(false);
 
   useEffect(() => {
     loadAgentConfig()
-      .then((data) => {
+      .then(async (data) => {
         setConfig(data);
-        const firstSkill = data.skills?.[0];
+        try {
-        if (firstSkill) {
+          setSession(await loadSession(data));
-          setSelectedSkillName(firstSkill.name);
+        } catch {
-          setArgsText(JSON.stringify(sampleArgs(firstSkill), null, 2));
+          setSession({ authenticated: false });
         }
-        return loadSession(data).catch(() => null);
       })
-      .then((sessionData) => setSession(sessionData))
+      .catch((err) => setLoadError(err.message || String(err)));
-      .catch((err) => setError(err.message || String(err)));
   }, []);
 
-  const selectedSkill = useMemo(
+  useEffect(() => {
-    () => config?.skills?.find((skill) => skill.name === selectedSkillName),
+    try {
-    [config, selectedSkillName],
+      const saved = JSON.parse(window.localStorage.getItem("quotejudge.history") || "[]");
-  );
+      if (Array.isArray(saved)) setHistory(saved.slice(0, 8));
+    } catch {
+      setHistory([]);
+    }
+  }, []);
 
-  const needsSignIn = Boolean(
+  const needsSignIn = Boolean(config?.auth?.invokeRequiresSession && session && !session.authenticated);
-    config?.auth?.invokeRequiresSession && session && !session.authenticated,
+  const authHref = useMemo(() => (config ? signInUrl(config) : null), [config]);
-  );
+  const validation = validateQuotes(quotes, weights);
-  const signInHref = useMemo(
+  const totalWeight = Number(weights.price) + Number(weights.delivery) + Number(weights.warranty);
-    () => (config && needsSignIn ? signInUrl(config) : null),
-    [config, needsSignIn],
-  );
 
-  function selectSkill(skill) {
+  function updateQuote(index, field, value) {
-    setSelectedSkillName(skill.name);
+    setQuotes((current) => current.map((quote, i) => (i === index ? { ...quote, [field]: value } : quote)));
-    setArgsText(JSON.stringify(sampleArgs(skill), null, 2));
-    setResult(null);
-    setError(null);
   }
 
-  async function runSkill(event) {
+  function remember(id) {
-    event.preventDefault();
+    const next = [id, ...history.filter((item) => item !== id)].slice(0, 8);
-    if (!config || !selectedSkill) return;
+    setHistory(next);
-    setRunning(true);
+    window.localStorage.setItem("quotejudge.history", JSON.stringify(next));
-    setError(null);
+  }
-    setResult(null);
+
+  function applyPastedQuotes() {
+    setError("");
     try {
-      const args = JSON.parse(argsText || "{}");
+      const parsed = parsePastedQuotes(pasteText);
-      const data = await callSkill(config, selectedSkill.name, args);
+      if (parsed.length < 2) {
-      setResult(data);
+        setError("Paste JSON, CSV, or pipe-separated text with at least two quotes.");
+        return;
+      }
+      setQuotes(parsed);
+      setStatus(`Loaded ${parsed.length} pasted quotes.`);
     } catch (err) {
-      setError(err.message || String(err));
+      setError(err.message || "Could not parse pasted quotes.");
+    }
+  }
+
+  async function compare(event) {
+    event.preventDefault();
+    if (!config) return;
+    setError("");
+    setStatus("");
+    const message = validateQuotes(quotes, weights);
+    if (message) {
+      setError(message);
+      return;
+    }
+    setRunning(true);
+    try {
+      const data = await callSkill(config, "compare_quotes", {
+        comparison_id: comparisonId,
+        quotes: quotes.map(normalizeQuote).filter((quote) => quote.vendor),
+        weights: {
+          price: Number(weights.price),
+          delivery: Number(weights.delivery),
+          warranty: Number(weights.warranty),
+        },
+      });
+      setResult(data);
+      if (data.ok) {
+        remember(data.comparison_id);
+        setStatus("Comparison saved. You can refresh and reopen it by ID.");
+      } else {
+        setError(data.message || data.code || "Comparison failed.");
+      }
+    } catch (err) {
+      if (err.status === 401 && authHref) setError("Session expired. Sign in again to run QuoteJudge.");
+      else setError(err.message || String(err));
     } finally {
       setRunning(false);
     }
   }
 
+  async function reopen(id = comparisonId) {
+    if (!config || !id) return;
+    setRunning(true);
+    setError("");
+    setStatus("");
+    try {
+      const data = await callSkill(config, "get_comparison", { comparison_id: id });
+      setResult(data);
+      setComparisonId(id);
+      if (data.ok) {
+        remember(id);
+        setStatus("Saved comparison reopened from managed Postgres.");
+      } else {
+        setError(data.message || "No saved comparison found for this ID.");
+      }
+    } catch (err) {
+      if (err.status === 401 && authHref) setError("Session expired. Sign in again to reopen comparisons.");
+      else setError(err.message || String(err));
+    } finally {
+      setRunning(false);
+    }
+  }
+
+  async function handleFiles(event) {
+    if (!config) return;
+    const files = Array.from(event.target.files || []);
+    if (!files.length) return;
+    setRunning(true);
+    setError("");
+    setStatus("");
+    try {
+      const documents = await Promise.all(files.map((file) => fileToBrowserDocument(file)));
+      const data = await callSkill(config, "compare_uploaded_quotes_browser", {
+        comparison_id: comparisonId,
+        documents,
+        weights: {
+          price: Number(weights.price),
+          delivery: Number(weights.delivery),
+          warranty: Number(weights.warranty),
+        },
+      });
+      setResult(data);
+      if (data.ok) {
+        setQuotes(data.quotes.map(({ vendor, quantity, unit_price, delivery_days, warranty_months }) => ({ vendor, quantity, unit_price, delivery_days, warranty_months })));
+        remember(data.comparison_id);
+        setStatus("Uploaded quotes parsed, compared, and saved.");
+      } else {
+        setError(data.message || data.code || "Upload comparison failed.");
+      }
+    } catch (err) {
+      setError(err.message || String(err));
+    } finally {
+      event.target.value = "";
+      setRunning(false);
+    }
+  }
+
   if (!config) {
-    return (
+    return <main className="loading"><p>{loadError || "Loading QuoteJudge…"}</p></main>;
-      <main className="loading">
-        <p>{error || "Loading A2A agent contract..."}</p>
-      </main>
-    );
   }
 
   return (
     <main className="app-shell">
-      <aside className="sidebar">
+      <section className="hero card">
         <div>
-          <p className="eyebrow">A2A packed app</p>
+          <p className="eyebrow">QuoteJudge Studio</p>
-          <h1>quote-judge-studio-v1</h1>
+          <h1>Pick the best vendor quote with weighted, auditable scoring.</h1>
-          <p className="agent-meta">
+          <p className="lede">Upload or paste quotes, tune price/delivery/warranty importance, save the comparison, and reopen it after refresh. Results are calculated by typed A2A backend tools and stored per signed-in user.</p>
-            {config.agent.name} v{config.agent.version}
-          </p>
         </div>
-
+        <div className="session-box">
-        <nav className="skill-list" aria-label="Agent skills">
+          <span className={session?.authenticated ? "dot ok" : "dot warn"} />
-          {(config.skills || []).map((skill) => (
-            <button
-              className={skill.name === selectedSkillName ? "skill active" : "skill"}
-              key={skill.name}
-              onClick={() => selectSkill(skill)}
-              type="button"
-            >
-              <span>{skill.name}</span>
-              <small>{skill.stream ? "streaming" : "request"}</small>
-            </button>
-          ))}
-        </nav>
-
-        <div className="session">
-          <span>{session?.authenticated ? "Signed in" : needsSignIn ? "Signed out" : "Local session"}</span>
-          <strong>{session?.user?.email || session?.org?.slug || "dev@example.local"}</strong>
-          {/* Skills that spend the caller's LLM budget need a signed-in
-              visitor even when the page itself is public, so offer the way in
-              rather than failing at the first click. */}
-          {needsSignIn && signInHref ? (
-            <a className="signin" href={signInHref}>Sign in to run</a>
-          ) : null}
-        </div>
-      </aside>
-
-      <section className="workbench">
-        <header className="toolbar">
           <div>
-            <p className="eyebrow">Skill runner</p>
+            <strong>{session?.authenticated ? "Signed in" : "Sign-in required to run"}</strong>
-            <h2>{selectedSkill?.name || "No skills found"}</h2>
+            <p>{session?.user?.email || session?.org?.slug || "Platform auth protects saved comparisons."}</p>
           </div>
-          <a href={config.docs.base} rel="noreferrer" target="_blank">
+          {needsSignIn && authHref ? <a className="button secondary" href={authHref}>Sign in</a> : null}
-            Docs
-          </a>
-        </header>
-
-        {selectedSkill ? (
-          <form className="runner" onSubmit={runSkill}>
-            <label>
-              Arguments JSON
-              <textarea
-                spellCheck="false"
-                value={argsText}
-                onChange={(event) => setArgsText(event.target.value)}
-              />
-            </label>
-            <button disabled={running} type="submit">
-              {running ? "Running..." : `Run ${selectedSkill.name}`}
-            </button>
-          </form>
-        ) : (
-          <p className="empty">Add a `@a2a.tool` to your agent to make it callable here.</p>
-        )}
-
-        <section className="panels">
-          <div className="panel">
-            <h3>Input schema</h3>
-            <pre>{JSON.stringify(selectedSkill?.input_schema || {}, null, 2)}</pre>
-          </div>
-          <div className="panel">
-            <h3>Result</h3>
-            <pre>{error || JSON.stringify(result, null, 2) || "No run yet."}</pre>
         </div>
       </section>
+
+      <form className="grid" onSubmit={compare}>
+        <section className="card editor">
+          <div className="section-head">
+            <div>
+              <p className="eyebrow">Inputs</p>
+              <h2>Vendor quotes</h2>
+            </div>
+            <button type="button" className="button ghost" onClick={() => setQuotes((rows) => [...rows, blankQuote()])}>Add quote</button>
+          </div>
+
+          <label className="field id-field">Comparison ID
+            <input value={comparisonId} onChange={(e) => setComparisonId(e.target.value)} placeholder="studio-quote-v1" />
+          </label>
+
+          <div className="quote-list">
+            {quotes.map((quote, index) => (
+              <article className="quote-row" key={index}>
+                <label>Vendor<input value={quote.vendor} onChange={(e) => updateQuote(index, "vendor", e.target.value)} /></label>
+                <label>Qty<input type="number" min="1" value={quote.quantity} onChange={(e) => updateQuote(index, "quantity", e.target.value)} /></label>
+                <label>Unit price<input type="number" min="0" step="0.01" value={quote.unit_price} onChange={(e) => updateQuote(index, "unit_price", e.target.value)} /></label>
+                <label>Delivery days<input type="number" min="0" value={quote.delivery_days} onChange={(e) => updateQuote(index, "delivery_days", e.target.value)} /></label>
+                <label>Warranty months<input type="number" min="0" value={quote.warranty_months} onChange={(e) => updateQuote(index, "warranty_months", e.target.value)} /></label>
+                <button type="button" aria-label={`Remove quote ${index + 1}`} onClick={() => setQuotes((rows) => rows.filter((_, i) => i !== index))}>×</button>
+              </article>
+            ))}
+          </div>
+
+          <div className="paste-upload">
+            <label>Paste JSON, CSV, or vendor|qty|price|delivery|warranty text
+              <textarea value={pasteText} onChange={(e) => setPasteText(e.target.value)} placeholder="vendor,quantity,unit_price,delivery_days,warranty_months…" />
+            </label>
+            <div className="actions">
+              <button type="button" className="button secondary" onClick={applyPastedQuotes}>Use pasted quotes</button>
+              <label className="button secondary upload">Upload CSV/JSON/TXT
+                <input type="file" multiple accept=".csv,.json,.txt,text/csv,text/plain,application/json" onChange={handleFiles} />
+              </label>
+            </div>
+          </div>
+        </section>
+
+        <aside className="card controls">
+          <p className="eyebrow">Scoring</p>
+          <h2>Weights</h2>
+          {Object.entries(weights).map(([key, value]) => (
+            <label className="slider" key={key}>{key}<strong>{value}</strong>
+              <input type="range" min="0" max="100" value={value} onChange={(e) => setWeights((w) => ({ ...w, [key]: Number(e.target.value) }))} />
+            </label>
+          ))}
+          <p className="hint">Total weight: {totalWeight}. Scores normalize each dimension from 0 to 1, then apply these weights.</p>
+          {validation ? <p className="validation">{validation}</p> : null}
+          {error ? <p className="error">{error}</p> : null}
+          {status ? <p className="status">{status}</p> : null}
+          <button className="button primary" disabled={running || needsSignIn || Boolean(validation)} type="submit">{running ? "Running…" : "Compare & save"}</button>
+          <button className="button secondary" disabled={running || needsSignIn} type="button" onClick={() => reopen()}>Reopen by ID</button>
+          {needsSignIn && authHref ? <a className="signin-note" href={authHref}>Sign in with A2A Cloud to call backend tools.</a> : null}
+          <div className="history">
+            <h3>Recent IDs</h3>
+            {history.length ? history.map((id) => <button key={id} type="button" onClick={() => reopen(id)}>{id}</button>) : <p>No saved comparisons opened in this browser yet.</p>}
+          </div>
+        </aside>
+      </form>
+
+      <section className="card result-card">
+        <div className="section-head">
+          <div>
+            <p className="eyebrow">Backend result</p>
+            <h2>{result?.ok ? `Recommended: ${result.recommendation.vendor}` : "No recommendation yet"}</h2>
+          </div>
+          {result?.ok ? <span className="score">Score {result.recommendation.score.toFixed(2)}</span> : null}
+        </div>
+        {result?.ok ? (
+          <>
+            <p className="rationale">{result.recommendation.rationale}</p>
+            <div className="table-wrap">
+              <table>
+                <thead><tr><th>Vendor</th><th>Total</th><th>Delivery</th><th>Warranty</th><th>Weighted score</th></tr></thead>
+                <tbody>
+                  {result.quotes.map((quote) => (
+                    <tr key={quote.vendor} className={quote.vendor === result.recommendation.vendor ? "winner" : ""}>
+                      <td>{quote.vendor}</td>
+                      <td>{quote.subtotal.toLocaleString(undefined, { style: "currency", currency: "BRL" })}</td>
+                      <td>{quote.delivery_days} days</td>
+                      <td>{quote.warranty_months} months</td>
+                      <td>{quote.scores.weighted_total.toFixed(2)}</td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </>
+        ) : (
+          <p className="empty">Run a comparison or reopen a saved ID. Fewer than two quotes are blocked before calling the backend and also rejected by the typed tool.</p>
+        )}
       </section>
     </main>
   );