bobseares-2/production-proof-v116-high-utili-7255-2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
a2a-cloud
2026-07-19 22:13:39 +00:00
parent 01ed304184
commit 337a137b0f
1 changed files with 54 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

100
frontend/src/App.jsx
View File

@@ -44,6 +44,7 @@ export function App() {
() => (config && needsSignIn ? signInUrl(config) : null),
[config, needsSignIn],
);
const resultState = running ? "loading" : error ? "error" : result?.status === "ok" ? "success" : result ? "error" : "idle";
async function runTriage(event) {
event.preventDefault();
@@ -58,6 +59,9 @@ export function App() {
max_messages: Number(maxMessages),
});
setResult(data);
if (data?.status && data.status !== "ok") {
setError(data.summary || "The inbox could not be triaged. Check the pasted messages and try again.");
}
} catch (err) {
setError(err.message || String(err));
} finally {
@@ -157,57 +161,61 @@ export function App() {
</div>
</form>
{error ? <section className="error">{error}</section> : null}
<section className="results" data-testid="agent-result" data-state={resultState} aria-live="polite">
{running ? <p>Triaging the shared inbox and drafting approval-ready replies...</p> : null}
{error ? <section className="error">{error}</section> : null}
{!running && !error && !result ? <p className="empty-state">Run the prefilled fixture to generate a prioritized queue, drafts, receipt, and JSON download.</p> : null}
{result ? (
<section className="results" data-testid="agent-result">
<div className="result-header">
<div>
<p className="eyebrow">Structured result</p>
<h2>{result.summary || result.status}</h2>
{result ? (
<>
<div className="result-header">
<div>
<p className="eyebrow">Structured result</p>
<h2>{result.summary || result.status}</h2>
</div>
{result.artifact ? (
<button data-testid="agent-download" type="button" onClick={downloadReport}>
Download {result.artifact.name}
</button>
) : null}
</div>
{result.artifact ? (
<button data-testid="agent-download" type="button" onClick={downloadReport}>
Download {result.artifact.name}
</button>
<p className="boundary">{result.approval_boundary}</p>
{result.receipt ? (
<p className={result.receipt.persisted ? "receipt ok" : "receipt warn"}>
Receipt {result.receipt.receipt_id}: {result.receipt.message}
</p>
) : null}
</div>
<p className="boundary">{result.approval_boundary}</p>
{result.receipt ? (
<p className={result.receipt.persisted ? "receipt ok" : "receipt warn"}>
Receipt {result.receipt.receipt_id}: {result.receipt.message}
</p>
) : null}
<div className="queue">
{(result.queue || []).map((item) => (
<article className={`queue-card ${item.priority}`} key={item.message_id}>
<div className="queue-top">
<span className="pill">{item.priority}</span>
<span>{item.category}</span>
</div>
<h3>{item.subject}</h3>
<p><strong>From:</strong> {item.sender}</p>
<p><strong>Why:</strong> {item.reason}</p>
<p><strong>Next:</strong> {item.next_action}</p>
<details open>
<summary>Approval-ready draft</summary>
<div className="draft">
<p><strong>To:</strong> {item.draft.to}</p>
<p><strong>Subject:</strong> {item.draft.subject}</p>
<pre>{item.draft.body}</pre>
<p><strong>Approval reason:</strong> {item.draft.approval_reason}</p>
<ul>
{(item.draft.policy_basis || []).map((basis) => <li key={basis}>{basis}</li>)}
</ul>
<div className="queue">
{(result.queue || []).map((item) => (
<article className={`queue-card ${item.priority}`} key={item.message_id}>
<div className="queue-top">
<span className="pill">{item.priority}</span>
<span>{item.category}</span>
</div>
</details>
</article>
))}
</div>
</section>
) : null}
<h3>{item.subject}</h3>
<p><strong>From:</strong> {item.sender}</p>
<p><strong>Why:</strong> {item.reason}</p>
<p><strong>Next:</strong> {item.next_action}</p>
<details open>
<summary>Approval-ready draft</summary>
<div className="draft">
<p><strong>To:</strong> {item.draft.to}</p>
<p><strong>Subject:</strong> {item.draft.subject}</p>
<pre>{item.draft.body}</pre>
<p><strong>Approval reason:</strong> {item.draft.approval_reason}</p>
<ul>
{(item.draft.policy_basis || []).map((basis) => <li key={basis}>{basis}</li>)}
</ul>
</div>
</details>
</article>
))}
</div>
</>
) : null}
</section>
</main>
);
}