a2a-source-edit: write frontend/src/App.jsx
This commit is contained in:
a2a-cloud
@@ -1,161 +1,68 @@
|
|||||||
import { useEffect, useMemo, useState } from "react";
|
import { useEffect, useMemo, useState } from "react";
|
||||||
import { callSkill, loadAgentConfig, loadSession, signInUrl } from "./a2a.js";
|
import {
|
||||||
|
callSkill,
|
||||||
const MAX_UPLOAD_BYTES = 64 * 1024;
|
loadAgentConfig,
|
||||||
const MAX_UPLOAD_FILES = 2;
|
loadSession,
|
||||||
|
sampleArgs,
|
||||||
const sampleQuotes = [
|
signInUrl,
|
||||||
{ vendor: "Acme Bearings", unit_price: 10.75, quantity: 500, delivery_days: 12, warranty_months: 12 },
|
} from "./a2a.js";
|
||||||
{ 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 };
|
|
||||||
}
|
|
||||||
|
|
||||||
export function App() {
|
export function App() {
|
||||||
const [config, setConfig] = useState(null);
|
const [config, setConfig] = useState(null);
|
||||||
const [session, setSession] = useState(null);
|
const [session, setSession] = useState(null);
|
||||||
const [comparisonId, setComparisonId] = useState("studio-quote-v1");
|
const [selectedSkillName, setSelectedSkillName] = useState("");
|
||||||
const [quotes, setQuotes] = useState(sampleQuotes);
|
const [argsText, setArgsText] = useState("{}");
|
||||||
const [weights, setWeights] = useState({ price: 50, delivery: 30, warranty: 20 });
|
|
||||||
const [result, setResult] = useState(null);
|
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 [error, setError] = useState(null);
|
||||||
const [running, setRunning] = useState(false);
|
const [running, setRunning] = useState(false);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
loadAgentConfig()
|
loadAgentConfig()
|
||||||
.then(async (data) => {
|
.then((data) => {
|
||||||
setConfig(data);
|
setConfig(data);
|
||||||
setStatus("Ready to compare vendor quotes.");
|
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);
|
||||||
})
|
})
|
||||||
.catch((err) => {
|
.then((sessionData) => setSession(sessionData))
|
||||||
setError(err.message || String(err));
|
.catch((err) => setError(err.message || String(err)));
|
||||||
setStatus("The app could not load its A2A runtime metadata.");
|
|
||||||
});
|
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
const needsSignIn = Boolean(config?.auth?.invokeRequiresSession && session && !session.authenticated);
|
const selectedSkill = useMemo(
|
||||||
const signInHref = useMemo(() => (config ? signInUrl(config) : null), [config]);
|
() => config?.skills?.find((skill) => skill.name === selectedSkillName),
|
||||||
const skills = useMemo(() => new Set((config?.skills || []).map((skill) => skill.name)), [config]);
|
[config, selectedSkillName],
|
||||||
|
);
|
||||||
|
|
||||||
function updateQuote(index, field, value) {
|
const needsSignIn = Boolean(
|
||||||
setQuotes((items) => items.map((item, idx) => (idx === index ? { ...item, [field]: value } : item)));
|
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) {
|
async function runSkill(event) {
|
||||||
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) {
|
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
const problem = validateForm();
|
if (!config || !selectedSkill) return;
|
||||||
if (problem) {
|
|
||||||
setError(problem);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
setRunning(true);
|
setRunning(true);
|
||||||
setError(null);
|
setError(null);
|
||||||
setStatus("Scoring quotes and saving the result…");
|
setResult(null);
|
||||||
try {
|
try {
|
||||||
const data = await callSkill(config, "compare_quotes", {
|
const args = JSON.parse(argsText || "{}");
|
||||||
comparison_id: comparisonId.trim(),
|
const data = await callSkill(config, selectedSkill.name, args);
|
||||||
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),
|
|
||||||
},
|
|
||||||
});
|
|
||||||
setResult(data);
|
setResult(data);
|
||||||
setHistoryId(comparisonId.trim());
|
|
||||||
setStatus(data.ok ? `Recommended vendor: ${data.recommendation.vendor}` : data.message || "Validation failed.");
|
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
setError(err.message || String(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 {
|
} finally {
|
||||||
setRunning(false);
|
setRunning(false);
|
||||||
}
|
}
|
||||||
@@ -164,141 +71,88 @@ export function App() {
|
|||||||
if (!config) {
|
if (!config) {
|
||||||
return (
|
return (
|
||||||
<main className="loading">
|
<main className="loading">
|
||||||
<p>{error || status}</p>
|
<p>{error || "Loading A2A agent contract..."}</p>
|
||||||
</main>
|
</main>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<main className="studio-shell">
|
<main className="app-shell">
|
||||||
<header className="hero">
|
<aside className="sidebar">
|
||||||
<div>
|
<div>
|
||||||
<p className="eyebrow">QuoteJudge Studio</p>
|
<p className="eyebrow">A2A packed app</p>
|
||||||
<h1>Compare vendor quotes with weighted evidence.</h1>
|
<h1>quote-judge-studio-v1</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="agent-meta">
|
||||||
|
{config.agent.name} v{config.agent.version}
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="session-card">
|
|
||||||
<span>{session?.authenticated ? "Signed in" : "Signed out"}</span>
|
<nav className="skill-list" aria-label="Agent skills">
|
||||||
<strong>{session?.user?.email || session?.org?.slug || "A2A Cloud session"}</strong>
|
{(config.skills || []).map((skill) => (
|
||||||
{needsSignIn && signInHref ? <a href={signInHref}>Sign in to run</a> : null}
|
<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>
|
</div>
|
||||||
</header>
|
</aside>
|
||||||
|
|
||||||
<section className="notice" aria-live="polite">
|
<section className="workbench">
|
||||||
<span>{status}</span>
|
<header className="toolbar">
|
||||||
{error ? <strong>{error}</strong> : null}
|
<div>
|
||||||
</section>
|
<p className="eyebrow">Skill runner</p>
|
||||||
|
<h2>{selectedSkill?.name || "No skills found"}</h2>
|
||||||
<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>
|
|
||||||
</div>
|
</div>
|
||||||
|
<a href={config.docs.base} rel="noreferrer" target="_blank">
|
||||||
|
Docs
|
||||||
|
</a>
|
||||||
|
</header>
|
||||||
|
|
||||||
<label>
|
{selectedSkill ? (
|
||||||
Comparison ID
|
<form className="runner" onSubmit={runSkill}>
|
||||||
<input value={comparisonId} onChange={(event) => setComparisonId(event.target.value)} placeholder="studio-quote-v1" />
|
<label>
|
||||||
</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">
|
<section className="panels">
|
||||||
{Object.entries(weights).map(([key, value]) => (
|
<div className="panel">
|
||||||
<label key={key}>
|
<h3>Input schema</h3>
|
||||||
{key}
|
<pre>{JSON.stringify(selectedSkill?.input_schema || {}, null, 2)}</pre>
|
||||||
<input type="number" min="0" max="1000" value={value} onChange={(event) => setWeights((items) => ({ ...items, [key]: Number(event.target.value) }))} />
|
|
||||||
</label>
|
|
||||||
))}
|
|
||||||
</div>
|
</div>
|
||||||
|
<div className="panel">
|
||||||
<div className="quotes">
|
<h3>Result</h3>
|
||||||
{quotes.map((quote, index) => (
|
<pre>{error || JSON.stringify(result, null, 2) || "No run yet."}</pre>
|
||||||
<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>
|
</div>
|
||||||
|
</section>
|
||||||
<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>
|
</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);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|||||||
Reference in New Issue
Block a user