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

frontend/src/App.jsx

@@ -1,161 +1,68 @@
 import { useEffect, useMemo, useState } from "react";
-import { callSkill, loadAgentConfig, loadSession, signInUrl } from "./a2a.js";
-
-const MAX_UPLOAD_BYTES = 64 * 1024;
-const MAX_UPLOAD_FILES = 2;
-
-const sampleQuotes = [
-  { vendor: "Acme Bearings", unit_price: 10.75, quantity: 500, delivery_days: 12, warranty_months: 12 },
-  { vendor: "Beta Industrial", unit_price: 9.1, quantity: 500, delivery_days: 8, warranty_months: 18 },
-];
-
-function blankQuote() {
-  return { vendor: "", unit_price: 0, quantity: 1, delivery_days: 0, warranty_months: 0 };
-}
+import {
+  callSkill,
+  loadAgentConfig,
+  loadSession,
+  sampleArgs,
+  signInUrl,
+} from "./a2a.js";
 
 export function App() {
   const [config, setConfig] = useState(null);
   const [session, setSession] = useState(null);
-  const [comparisonId, setComparisonId] = useState("studio-quote-v1");
-  const [quotes, setQuotes] = useState(sampleQuotes);
-  const [weights, setWeights] = useState({ price: 50, delivery: 30, warranty: 20 });
+  const [selectedSkillName, setSelectedSkillName] = useState("");
+  const [argsText, setArgsText] = useState("{}");
   const [result, setResult] = useState(null);
-  const [historyId, setHistoryId] = useState("studio-quote-v1");
-  const [uploadMessage, setUploadMessage] = useState("");
-  const [status, setStatus] = useState("Loading QuoteJudge Studio…");
   const [error, setError] = useState(null);
   const [running, setRunning] = useState(false);
 
   useEffect(() => {
     loadAgentConfig()
-      .then(async (data) => {
+      .then((data) => {
         setConfig(data);
-        setStatus("Ready to compare vendor quotes.");
-        try {
-          setSession(await loadSession(data));
-        } catch {
-          setSession({ authenticated: false });
+        const firstSkill = data.skills?.[0];
+        if (firstSkill) {
+          setSelectedSkillName(firstSkill.name);
+          setArgsText(JSON.stringify(sampleArgs(firstSkill), null, 2));
         }
+        return loadSession(data).catch(() => null);
       })
-      .catch((err) => {
-        setError(err.message || String(err));
-        setStatus("The app could not load its A2A runtime metadata.");
-      });
+      .then((sessionData) => setSession(sessionData))
+      .catch((err) => setError(err.message || String(err)));
   }, []);
 
-  const needsSignIn = Boolean(config?.auth?.invokeRequiresSession && session && !session.authenticated);
-  const signInHref = useMemo(() => (config ? signInUrl(config) : null), [config]);
-  const skills = useMemo(() => new Set((config?.skills || []).map((skill) => skill.name)), [config]);
+  const selectedSkill = useMemo(
+    () => config?.skills?.find((skill) => skill.name === selectedSkillName),
+    [config, selectedSkillName],
+  );
 
-  function updateQuote(index, field, value) {
-    setQuotes((items) => items.map((item, idx) => (idx === index ? { ...item, [field]: value } : item)));
+  const needsSignIn = Boolean(
+    config?.auth?.invokeRequiresSession && session && !session.authenticated,
+  );
+  const signInHref = useMemo(
+    () => (config && needsSignIn ? signInUrl(config) : null),
+    [config, needsSignIn],
+  );
+
+  function selectSkill(skill) {
+    setSelectedSkillName(skill.name);
+    setArgsText(JSON.stringify(sampleArgs(skill), null, 2));
+    setResult(null);
+    setError(null);
   }
 
-  function removeQuote(index) {
-    setQuotes((items) => items.filter((_, idx) => idx !== index));
-  }
-
-  function validateForm() {
-    if (!comparisonId.trim()) return "Comparison id is required.";
-    if (quotes.length < 2) return "Add at least two vendor quotes.";
-    if (weights.price + weights.delivery + weights.warranty <= 0) return "At least one weight must be greater than zero.";
-    for (const quote of quotes) {
-      if (!quote.vendor.trim()) return "Every quote needs a vendor name.";
-      if (Number(quote.unit_price) <= 0 || Number(quote.quantity) <= 0) return "Unit price and quantity must be positive.";
-    }
-    return null;
-  }
-
-  async function compare(event) {
+  async function runSkill(event) {
     event.preventDefault();
-    const problem = validateForm();
-    if (problem) {
-      setError(problem);
-      return;
-    }
+    if (!config || !selectedSkill) return;
     setRunning(true);
     setError(null);
-    setStatus("Scoring quotes and saving the result…");
+    setResult(null);
     try {
-      const data = await callSkill(config, "compare_quotes", {
-        comparison_id: comparisonId.trim(),
-        quotes: quotes.map((quote) => ({
-          vendor: quote.vendor.trim(),
-          unit_price: Number(quote.unit_price),
-          quantity: Number(quote.quantity),
-          delivery_days: Number(quote.delivery_days),
-          warranty_months: Number(quote.warranty_months),
-        })),
-        weights: {
-          price: Number(weights.price),
-          delivery: Number(weights.delivery),
-          warranty: Number(weights.warranty),
-        },
-      });
+      const args = JSON.parse(argsText || "{}");
+      const data = await callSkill(config, selectedSkill.name, args);
       setResult(data);
-      setHistoryId(comparisonId.trim());
-      setStatus(data.ok ? `Recommended vendor: ${data.recommendation.vendor}` : data.message || "Validation failed.");
     } catch (err) {
       setError(err.message || String(err));
-      setStatus("The comparison could not run.");
-    } finally {
-      setRunning(false);
-    }
-  }
-
-  async function reopen() {
-    setRunning(true);
-    setError(null);
-    setStatus("Reopening saved comparison…");
-    try {
-      const data = await callSkill(config, "get_comparison", { comparison_id: historyId.trim() });
-      setResult(data);
-      setStatus(data.ok ? `Reopened ${data.comparison_id}` : data.message || "No saved result found.");
-    } catch (err) {
-      setError(err.message || String(err));
-      setStatus("The saved comparison could not be reopened.");
-    } finally {
-      setRunning(false);
-    }
-  }
-
-  async function uploadFiles(event) {
-    const files = Array.from(event.target.files || []);
-    event.target.value = "";
-    setUploadMessage("");
-    if (!files.length) return;
-    if (files.length > MAX_UPLOAD_FILES) {
-      setError(`Select at most ${MAX_UPLOAD_FILES} files.`);
-      return;
-    }
-    const documents = [];
-    for (const file of files) {
-      if (file.size > MAX_UPLOAD_BYTES) {
-        setError(`${file.name} is ${file.size} bytes; maximum is ${MAX_UPLOAD_BYTES} bytes.`);
-        return;
-      }
-      const data_base64 = await fileToBase64(file);
-      documents.push({ filename: file.name, media_type: file.type || "text/plain", data_base64 });
-    }
-    setRunning(true);
-    setError(null);
-    setStatus("Parsing uploaded quote file…");
-    try {
-      const data = await callSkill(config, "upload_quotes", {
-        comparison_id: comparisonId.trim(),
-        documents,
-        weights: {
-          price: Number(weights.price),
-          delivery: Number(weights.delivery),
-          warranty: Number(weights.warranty),
-        },
-      });
-      setResult(data);
-      setUploadMessage(data.ok ? "Upload parsed and comparison saved." : data.message || "Upload validation failed.");
-      setStatus(data.ok ? `Recommended vendor: ${data.recommendation.vendor}` : data.message || "Upload validation failed.");
-    } catch (err) {
-      setError(err.message || String(err));
-      setStatus("Upload comparison failed.");
     } finally {
       setRunning(false);
     }
@@ -164,141 +71,88 @@ export function App() {
   if (!config) {
     return (
       <main className="loading">
-        <p>{error || status}</p>
+        <p>{error || "Loading A2A agent contract..."}</p>
       </main>
     );
   }
 
   return (
-    <main className="studio-shell">
-      <header className="hero">
+    <main className="app-shell">
+      <aside className="sidebar">
         <div>
-          <p className="eyebrow">QuoteJudge Studio</p>
-          <h1>Compare vendor quotes with weighted evidence.</h1>
-          <p className="lede">Paste or upload quotes, tune price/delivery/warranty weights, persist a receipt-backed decision, then reopen it later.</p>
+          <p className="eyebrow">A2A packed app</p>
+          <h1>quote-judge-studio-v1</h1>
+          <p className="agent-meta">
+            {config.agent.name} v{config.agent.version}
+          </p>
         </div>
-        <div className="session-card">
-          <span>{session?.authenticated ? "Signed in" : "Signed out"}</span>
-          <strong>{session?.user?.email || session?.org?.slug || "A2A Cloud session"}</strong>
-          {needsSignIn && signInHref ? <a href={signInHref}>Sign in to run</a> : null}
+
+        <nav className="skill-list" aria-label="Agent skills">
+          {(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>
-      </header>
+      </aside>
 
-      <section className="notice" aria-live="polite">
-        <span>{status}</span>
-        {error ? <strong>{error}</strong> : null}
-      </section>
-
-      <section className="grid">
-        <form className="card workflow" onSubmit={compare}>
-          <div className="section-heading">
-            <div>
-              <p className="eyebrow">Workflow</p>
-              <h2>Quote comparison</h2>
-            </div>
-            <button type="button" onClick={() => setQuotes(sampleQuotes)}>Load fixture</button>
+      <section className="workbench">
+        <header className="toolbar">
+          <div>
+            <p className="eyebrow">Skill runner</p>
+            <h2>{selectedSkill?.name || "No skills found"}</h2>
           </div>
+          <a href={config.docs.base} rel="noreferrer" target="_blank">
+            Docs
+          </a>
+        </header>
 
-          <label>
-            Comparison ID
-            <input value={comparisonId} onChange={(event) => setComparisonId(event.target.value)} placeholder="studio-quote-v1" />
-          </label>
+        {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>
+        )}
 
-          <div className="weights" aria-label="Scoring weights">
-            {Object.entries(weights).map(([key, value]) => (
-              <label key={key}>
-                {key}
-                <input type="number" min="0" max="1000" value={value} onChange={(event) => setWeights((items) => ({ ...items, [key]: Number(event.target.value) }))} />
-              </label>
-            ))}
+        <section className="panels">
+          <div className="panel">
+            <h3>Input schema</h3>
+            <pre>{JSON.stringify(selectedSkill?.input_schema || {}, null, 2)}</pre>
           </div>
-
-          <div className="quotes">
-            {quotes.map((quote, index) => (
-              <fieldset key={index}>
-                <legend>Quote {index + 1}</legend>
-                <label>Vendor<input value={quote.vendor} onChange={(event) => updateQuote(index, "vendor", event.target.value)} /></label>
-                <label>Unit price<input type="number" step="0.01" min="0" value={quote.unit_price} onChange={(event) => updateQuote(index, "unit_price", event.target.value)} /></label>
-                <label>Quantity<input type="number" min="1" value={quote.quantity} onChange={(event) => updateQuote(index, "quantity", event.target.value)} /></label>
-                <label>Delivery days<input type="number" min="0" value={quote.delivery_days} onChange={(event) => updateQuote(index, "delivery_days", event.target.value)} /></label>
-                <label>Warranty months<input type="number" min="0" value={quote.warranty_months} onChange={(event) => updateQuote(index, "warranty_months", event.target.value)} /></label>
-                <button type="button" className="subtle" onClick={() => removeQuote(index)} disabled={quotes.length <= 1}>Remove</button>
-              </fieldset>
-            ))}
+          <div className="panel">
+            <h3>Result</h3>
+            <pre>{error || JSON.stringify(result, null, 2) || "No run yet."}</pre>
           </div>
-
-          <div className="button-row">
-            <button type="button" onClick={() => setQuotes((items) => [...items, blankQuote()])}>Add quote</button>
-            <button type="submit" disabled={running || needsSignIn || !skills.has("compare_quotes")}>{running ? "Working…" : "Compare & save"}</button>
-          </div>
-
-          <label className="upload-box">
-            Upload JSON or CSV quotes (bounded to 64 KB each)
-            <input type="file" accept=".json,.csv,text/csv,application/json,text/plain" multiple onChange={uploadFiles} disabled={running || needsSignIn || !skills.has("upload_quotes")} />
-            {uploadMessage ? <small>{uploadMessage}</small> : null}
-          </label>
-        </form>
-
-        <aside className="card result-card">
-          <div className="section-heading">
-            <div>
-              <p className="eyebrow">Persistence</p>
-              <h2>Saved result</h2>
-            </div>
-          </div>
-          <div className="reopen-row">
-            <input value={historyId} onChange={(event) => setHistoryId(event.target.value)} aria-label="Comparison id to reopen" />
-            <button type="button" onClick={reopen} disabled={running || needsSignIn || !skills.has("get_comparison")}>Reopen</button>
-          </div>
-
-          {result?.ok ? <Recommendation result={result} /> : <EmptyOrError result={result} />}
-        </aside>
+        </section>
       </section>
     </main>
   );
 }
-
-function Recommendation({ result }) {
-  return (
-    <div className="recommendation">
-      <p className="eyebrow">Recommendation</p>
-      <h3>{result.recommendation.vendor}</h3>
-      <p>{result.recommendation.reason}</p>
-      <dl>
-        <div><dt>Score</dt><dd>{result.recommendation.score}</dd></div>
-        <div><dt>Quotes</dt><dd>{result.quote_count}</dd></div>
-        <div><dt>Receipt</dt><dd>{result.receipt?.receipt_id || "persisted by gateway"}</dd></div>
-      </dl>
-      <table>
-        <thead><tr><th>Vendor</th><th>Total</th><th>Days</th><th>Warranty</th><th>Score</th></tr></thead>
-        <tbody>
-          {result.quotes?.map((quote) => (
-            <tr key={quote.vendor}>
-              <td>{quote.vendor}</td>
-              <td>{quote.total_price}</td>
-              <td>{quote.delivery_days}</td>
-              <td>{quote.warranty_months}</td>
-              <td>{quote.scores.weighted_total}</td>
-            </tr>
-          ))}
-        </tbody>
-      </table>
-    </div>
-  );
-}
-
-function EmptyOrError({ result }) {
-  if (result && result.ok === false) {
-    return <div className="empty-state"><h3>{result.code}</h3><p>{result.message}</p><small>{result.action}</small></div>;
-  }
-  return <div className="empty-state"><h3>No comparison opened yet.</h3><p>Run the success fixture or reopen a saved comparison to see ranked vendors and receipt details.</p></div>;
-}
-
-function fileToBase64(file) {
-  return new Promise((resolve, reject) => {
-    const reader = new FileReader();
-    reader.onload = () => resolve(String(reader.result || "").split(",").pop() || "");
-    reader.onerror = () => reject(reader.error || new Error("file read failed"));
-    reader.readAsDataURL(file);
-  });
-}