From 38d5752a95e22bac53b2930eac7c9793cffbec94 Mon Sep 17 00:00:00 2001 From: a2a-cloud Date: Sat, 18 Jul 2026 08:08:47 +0000 Subject: [PATCH] a2a-source-edit: write frontend/src/App.jsx --- frontend/src/App.jsx | 344 +++++++++++++------------------------------ 1 file changed, 99 insertions(+), 245 deletions(-) diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx index 2733bfd..c73da08 100644 --- a/frontend/src/App.jsx +++ b/frontend/src/App.jsx @@ -1,37 +1,41 @@ import { useEffect, useMemo, useState } from "react"; -import { callSkill, loadAgentConfig, loadSession, signInUrl } from "./a2a.js"; - -const SUCCESS_FIXTURE = - "This Agreement renews automatically on 2026-12-31 unless either party gives at least 60 days written notice. Invoices are due 30 days after receipt."; -const FAILURE_FIXTURE = "Agreement renews sometime next spring."; -const MAX_UPLOAD_BYTES = 512000; -const ACCEPTED_TYPES = ["text/plain", "text/markdown", "application/octet-stream", ""]; +import { + callSkill, + loadAgentConfig, + loadSession, + sampleArgs, + signInUrl, +} from "./a2a.js"; export function App() { const [config, setConfig] = useState(null); const [session, setSession] = useState(null); - const [contractId, setContractId] = useState("studio-contract-v1"); - const [title, setTitle] = useState("Studio Renewal Agreement"); - const [text, setText] = useState(SUCCESS_FIXTURE); - const [selectedFile, setSelectedFile] = useState(null); + const [selectedSkillName, setSelectedSkillName] = useState(""); + const [argsText, setArgsText] = useState("{}"); const [result, setResult] = useState(null); - const [reloadResult, setReloadResult] = useState(null); - const [historyId, setHistoryId] = useState("studio-contract-v1"); const [error, setError] = useState(null); const [running, setRunning] = useState(false); - const [loadingSession, setLoadingSession] = useState(true); useEffect(() => { loadAgentConfig() .then((data) => { setConfig(data); + const firstSkill = data.skills?.[0]; + if (firstSkill) { + setSelectedSkillName(firstSkill.name); + setArgsText(JSON.stringify(sampleArgs(firstSkill), null, 2)); + } return loadSession(data).catch(() => null); }) .then((sessionData) => setSession(sessionData)) - .catch((err) => setError(err.message || String(err))) - .finally(() => setLoadingSession(false)); + .catch((err) => setError(err.message || String(err))); }, []); + const selectedSkill = useMemo( + () => config?.skills?.find((skill) => skill.name === selectedSkillName), + [config, selectedSkillName], + ); + const needsSignIn = Boolean( config?.auth?.invokeRequiresSession && session && !session.authenticated, ); @@ -40,30 +44,23 @@ export function App() { [config, needsSignIn], ); - async function analyze(event) { + function selectSkill(skill) { + setSelectedSkillName(skill.name); + setArgsText(JSON.stringify(sampleArgs(skill), null, 2)); + setResult(null); + setError(null); + } + + async function runSkill(event) { event.preventDefault(); - if (!config || running) return; + if (!config || !selectedSkill) return; setRunning(true); setError(null); setResult(null); try { - let data; - if (selectedFile) { - const document = await fileToBrowserDocument(selectedFile); - data = await callSkill(config, "analyze_contract_upload", { - contract_id: contractId.trim(), - title: title.trim() || selectedFile.name, - document, - }); - } else { - data = await callSkill(config, "analyze_contract", { - contract_id: contractId.trim(), - title: title.trim(), - text, - }); - } + const args = JSON.parse(argsText || "{}"); + const data = await callSkill(config, selectedSkill.name, args); setResult(data); - if (data?.ok) setHistoryId(data.contract_id); } catch (err) { setError(err.message || String(err)); } finally { @@ -71,234 +68,91 @@ export function App() { } } - async function reloadTimeline(event) { - event.preventDefault(); - if (!config || running) return; - setRunning(true); - setError(null); - setReloadResult(null); - try { - const data = await callSkill(config, "get_contract_deadlines", { - contract_id: historyId.trim(), - }); - setReloadResult(data); - } catch (err) { - setError(err.message || String(err)); - } finally { - setRunning(false); - } - } - - function loadFailureFixture() { - setContractId("studio-contract-invalid"); - setTitle("Ambiguous Agreement"); - setText(FAILURE_FIXTURE); - setSelectedFile(null); - setResult(null); - } - - function loadSuccessFixture() { - setContractId("studio-contract-v1"); - setTitle("Studio Renewal Agreement"); - setText(SUCCESS_FIXTURE); - setSelectedFile(null); - setResult(null); - } - if (!config) { return (
-

{error || "Loading ContractClock Studio..."}

+

{error || "Loading A2A agent contract..."}

); } return ( -
-
+
+
+ + -
-
-
-
-

Workflow

-

Analyze contract

-
-
- - -
-
- - - -