a2a-source-edit: write frontend/src/App.jsx
This commit is contained in:
a2a-cloud
@@ -1,156 +1,241 @@
|
|||||||
import { useEffect, useMemo, useState } from "react";
|
import { useEffect, useMemo, useState } from "react";
|
||||||
import {
|
import {
|
||||||
callSkill,
|
callSkill,
|
||||||
|
fileToBrowserDocument,
|
||||||
loadAgentConfig,
|
loadAgentConfig,
|
||||||
loadSession,
|
loadSession,
|
||||||
sampleArgs,
|
needsInvokeSession,
|
||||||
signInUrl,
|
signInUrl,
|
||||||
} from "./a2a.js";
|
} 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.";
|
||||||
|
|
||||||
|
function formatDeadline(deadline) {
|
||||||
|
return `${deadline.kind}: ${deadline.date}`;
|
||||||
|
}
|
||||||
|
|
||||||
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 [selectedSkillName, setSelectedSkillName] = useState("");
|
const [contractId, setContractId] = useState("studio-contract-v1");
|
||||||
const [argsText, setArgsText] = useState("{}");
|
const [title, setTitle] = useState("Studio Renewal Agreement");
|
||||||
|
const [text, setText] = useState(SUCCESS_FIXTURE);
|
||||||
|
const [file, setFile] = useState(null);
|
||||||
const [result, setResult] = useState(null);
|
const [result, setResult] = useState(null);
|
||||||
|
const [history, setHistory] = useState([]);
|
||||||
|
const [status, setStatus] = useState("Loading ContractClock...");
|
||||||
const [error, setError] = useState(null);
|
const [error, setError] = useState(null);
|
||||||
const [running, setRunning] = useState(false);
|
const [running, setRunning] = useState(false);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
let cancelled = false;
|
||||||
loadAgentConfig()
|
loadAgentConfig()
|
||||||
.then((data) => {
|
.then(async (cfg) => {
|
||||||
setConfig(data);
|
if (cancelled) return;
|
||||||
const firstSkill = data.skills?.[0];
|
setConfig(cfg);
|
||||||
if (firstSkill) {
|
try {
|
||||||
setSelectedSkillName(firstSkill.name);
|
const sessionData = await loadSession(cfg);
|
||||||
setArgsText(JSON.stringify(sampleArgs(firstSkill), null, 2));
|
if (!cancelled) setSession(sessionData);
|
||||||
|
} catch {
|
||||||
|
if (!cancelled) setSession({ authenticated: false });
|
||||||
}
|
}
|
||||||
return loadSession(data).catch(() => null);
|
if (!cancelled) setStatus("Ready");
|
||||||
})
|
})
|
||||||
.then((sessionData) => setSession(sessionData))
|
.catch((err) => {
|
||||||
.catch((err) => setError(err.message || String(err)));
|
if (!cancelled) {
|
||||||
|
setError(err.message || String(err));
|
||||||
|
setStatus("Unable to load app metadata");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return () => {
|
||||||
|
cancelled = true;
|
||||||
|
};
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
const selectedSkill = useMemo(
|
const signInHref = useMemo(() => (config ? signInUrl(config) : null), [config]);
|
||||||
() => config?.skills?.find((skill) => skill.name === selectedSkillName),
|
const needsSignIn = needsInvokeSession(config, session);
|
||||||
[config, selectedSkillName],
|
const skills = config?.skills || [];
|
||||||
);
|
const hasBase64Bridge = skills.some((skill) => skill.name === "analyze_contract_upload_base64");
|
||||||
|
const hasFileUploadBridge = skills.some((skill) => skill.name === "analyze_contract_file");
|
||||||
|
|
||||||
const needsSignIn = Boolean(
|
function rememberTimeline(data) {
|
||||||
config?.auth?.invokeRequiresSession && session && !session.authenticated,
|
if (!data?.ok) return;
|
||||||
);
|
setHistory((current) => {
|
||||||
const signInHref = useMemo(
|
const next = current.filter((item) => item.contract_id !== data.contract_id);
|
||||||
() => (config && needsSignIn ? signInUrl(config) : null),
|
return [{ contract_id: data.contract_id, title: data.title, deadlines: data.deadlines || [] }, ...next].slice(0, 8);
|
||||||
[config, needsSignIn],
|
});
|
||||||
);
|
|
||||||
|
|
||||||
function selectSkill(skill) {
|
|
||||||
setSelectedSkillName(skill.name);
|
|
||||||
setArgsText(JSON.stringify(sampleArgs(skill), null, 2));
|
|
||||||
setResult(null);
|
|
||||||
setError(null);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
async function runSkill(event) {
|
async function invoke(skill, args) {
|
||||||
event.preventDefault();
|
if (!config) return null;
|
||||||
if (!config || !selectedSkill) return;
|
|
||||||
setRunning(true);
|
setRunning(true);
|
||||||
setError(null);
|
setError(null);
|
||||||
setResult(null);
|
setStatus(`Running ${skill}...`);
|
||||||
try {
|
try {
|
||||||
const args = JSON.parse(argsText || "{}");
|
const data = await callSkill(config, skill, args);
|
||||||
const data = await callSkill(config, selectedSkill.name, args);
|
|
||||||
setResult(data);
|
setResult(data);
|
||||||
|
if (data?.ok) {
|
||||||
|
rememberTimeline(data);
|
||||||
|
setStatus("Timeline saved");
|
||||||
|
} else {
|
||||||
|
setStatus(data?.code ? `Stopped: ${data.code}` : "Stopped");
|
||||||
|
}
|
||||||
|
return data;
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
|
if (err.status === 401 && signInHref) {
|
||||||
|
setError("Your session expired. Sign in again to run ContractClock.");
|
||||||
|
} else {
|
||||||
setError(err.message || String(err));
|
setError(err.message || String(err));
|
||||||
|
}
|
||||||
|
setStatus("Request failed");
|
||||||
|
return null;
|
||||||
} finally {
|
} finally {
|
||||||
setRunning(false);
|
setRunning(false);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
async function analyzePaste(event) {
|
||||||
|
event.preventDefault();
|
||||||
|
await invoke("analyze_contract", { contract_id: contractId, title, text });
|
||||||
|
}
|
||||||
|
|
||||||
|
async function analyzeUpload() {
|
||||||
|
if (!file) {
|
||||||
|
setError("Choose a plain-text contract file first.");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
try {
|
||||||
|
const document = await fileToBrowserDocument(file);
|
||||||
|
await invoke("analyze_contract_upload_base64", { contract_id: contractId, title, document });
|
||||||
|
} catch (err) {
|
||||||
|
setError(err.message || String(err));
|
||||||
|
setStatus("Upload rejected");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function reloadTimeline(id = contractId) {
|
||||||
|
await invoke("get_contract_deadlines", { contract_id: id });
|
||||||
|
}
|
||||||
|
|
||||||
if (!config) {
|
if (!config) {
|
||||||
return (
|
return (
|
||||||
<main className="loading">
|
<main className="loading" aria-live="polite">
|
||||||
<p>{error || "Loading A2A agent contract..."}</p>
|
<p>{error || status}</p>
|
||||||
</main>
|
</main>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<main className="app-shell">
|
<main className="app-shell">
|
||||||
<aside className="sidebar">
|
<section className="hero">
|
||||||
<div>
|
<p className="eyebrow">ContractClock Studio</p>
|
||||||
<p className="eyebrow">A2A packed app</p>
|
<h1>Renewal deadlines without date guessing.</h1>
|
||||||
<h1>contract-clock-studio-v1</h1>
|
<p className="lede">
|
||||||
<p className="agent-meta">
|
Paste or upload a plain-text contract. ContractClock extracts only explicit ISO renewal dates,
|
||||||
{config.agent.name} v{config.agent.version}
|
derives clause-bound notice windows, saves the timeline to managed Postgres, and lets you reopen it later.
|
||||||
</p>
|
</p>
|
||||||
</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?.email || session?.org?.slug || "A2A Cloud session"}</strong>
|
||||||
{(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 ? (
|
{needsSignIn && signInHref ? (
|
||||||
<a className="signin" href={signInHref}>Sign in to run</a>
|
<a className="signin" href={signInHref}>Sign in to analyze and save</a>
|
||||||
) : null}
|
) : null}
|
||||||
</div>
|
</div>
|
||||||
</aside>
|
<div className="capabilities" aria-label="Backend capabilities">
|
||||||
|
<span>Managed Postgres</span>
|
||||||
<section className="workbench">
|
<span>Standard MCP: /mcp</span>
|
||||||
<header className="toolbar">
|
<span>Receipts persisted</span>
|
||||||
<div>
|
<span>{hasBase64Bridge ? "Browser upload bridge" : "Upload bridge missing"}</span>
|
||||||
<p className="eyebrow">Skill runner</p>
|
<span>{hasFileUploadBridge ? "Typed FileUpload bridge" : "FileUpload missing"}</span>
|
||||||
<h2>{selectedSkill?.name || "No skills found"}</h2>
|
|
||||||
</div>
|
</div>
|
||||||
<a href={config.docs.base} rel="noreferrer" target="_blank">
|
</section>
|
||||||
Docs
|
|
||||||
</a>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
{selectedSkill ? (
|
<section className="studio" aria-label="Contract deadline workflow">
|
||||||
<form className="runner" onSubmit={runSkill}>
|
<form className="panel form" onSubmit={analyzePaste}>
|
||||||
|
<div className="row two">
|
||||||
<label>
|
<label>
|
||||||
Arguments JSON
|
Contract ID
|
||||||
<textarea
|
<input value={contractId} onChange={(event) => setContractId(event.target.value)} required maxLength={120} />
|
||||||
spellCheck="false"
|
|
||||||
value={argsText}
|
|
||||||
onChange={(event) => setArgsText(event.target.value)}
|
|
||||||
/>
|
|
||||||
</label>
|
</label>
|
||||||
<button disabled={running} type="submit">
|
<label>
|
||||||
{running ? "Running..." : `Run ${selectedSkill.name}`}
|
Title
|
||||||
|
<input value={title} onChange={(event) => setTitle(event.target.value)} required maxLength={200} />
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<label>
|
||||||
|
Contract text
|
||||||
|
<textarea value={text} onChange={(event) => setText(event.target.value)} maxLength={80000} required />
|
||||||
|
</label>
|
||||||
|
<div className="actions">
|
||||||
|
<button disabled={running || needsSignIn} type="submit">
|
||||||
|
{running ? "Working..." : "Analyze pasted contract"}
|
||||||
</button>
|
</button>
|
||||||
|
<button disabled={running || needsSignIn} onClick={() => reloadTimeline()} type="button">
|
||||||
|
Reopen saved timeline
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
</form>
|
</form>
|
||||||
) : (
|
|
||||||
<p className="empty">Add a `@a2a.tool` to your agent to make it callable here.</p>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<section className="panels">
|
<div className="panel upload">
|
||||||
<div className="panel">
|
<h2>Upload bridge</h2>
|
||||||
<h3>Input schema</h3>
|
<p>
|
||||||
<pre>{JSON.stringify(selectedSkill?.input_schema || {}, null, 2)}</pre>
|
Browser uploads are converted to bounded base64 JSON for the packed app. External A2A clients can still
|
||||||
|
use the typed <code>FileUpload</code> tool advertised on the Agent Card.
|
||||||
|
</p>
|
||||||
|
<input
|
||||||
|
aria-label="Plain text contract upload"
|
||||||
|
type="file"
|
||||||
|
accept="text/plain,.txt"
|
||||||
|
onChange={(event) => setFile(event.target.files?.[0] || null)}
|
||||||
|
/>
|
||||||
|
<button disabled={running || needsSignIn || !file} onClick={analyzeUpload} type="button">
|
||||||
|
Analyze uploaded text
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div className="panel">
|
|
||||||
<h3>Result</h3>
|
<section className="panel result" aria-live="polite">
|
||||||
<pre>{error || JSON.stringify(result, null, 2) || "No run yet."}</pre>
|
<div className="result-header">
|
||||||
|
<div>
|
||||||
|
<p className="eyebrow">Status</p>
|
||||||
|
<h2>{status}</h2>
|
||||||
</div>
|
</div>
|
||||||
|
{result?.receipt_id ? <span className="receipt">Receipt {result.receipt_id}</span> : null}
|
||||||
|
</div>
|
||||||
|
{error ? <p className="error">{error}</p> : null}
|
||||||
|
{result?.ok ? (
|
||||||
|
<div className="timeline">
|
||||||
|
{(result.deadlines || []).map((deadline) => (
|
||||||
|
<article className="deadline" key={`${deadline.kind}-${deadline.date}`}>
|
||||||
|
<strong>{formatDeadline(deadline)}</strong>
|
||||||
|
<p>{deadline.rationale}</p>
|
||||||
|
<small>{deadline.source_text}</small>
|
||||||
|
</article>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
) : result ? (
|
||||||
|
<p className="error">{result.code}: {result.message}</p>
|
||||||
|
) : (
|
||||||
|
<p className="empty">No run yet. Use the success fixture or upload a plain-text agreement.</p>
|
||||||
|
)}
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section className="panel history">
|
||||||
|
<h2>Reload-safe history</h2>
|
||||||
|
{history.length ? (
|
||||||
|
<ul>
|
||||||
|
{history.map((item) => (
|
||||||
|
<li key={item.contract_id}>
|
||||||
|
<button disabled={running || needsSignIn} onClick={() => reloadTimeline(item.contract_id)} type="button">
|
||||||
|
{item.contract_id}
|
||||||
|
</button>
|
||||||
|
<span>{(item.deadlines || []).map(formatDeadline).join(" • ")}</span>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
) : (
|
||||||
|
<p className="empty">Saved timelines appear here after a successful analysis.</p>
|
||||||
|
)}
|
||||||
</section>
|
</section>
|
||||||
</section>
|
</section>
|
||||||
</main>
|
</main>
|
||||||
|
|||||||
Reference in New Issue
Block a user