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

frontend/src/App.jsx

@@ -1,16 +1,22 @@
 import { useEffect, useMemo, useState } from "react";
-import {
-  callSkill,
-  loadAgentConfig,
-  loadSession,
-  sampleArgs,
-} from "./a2a.js";
+import { callSkill, loadAgentConfig, loadSession } from "./a2a.js";
+
+const SAMPLE_EMAIL = {
+  sender_email: "Customer Example <customer@example.com>",
+  subject: "Refund request for pi_test123",
+  body: "Please refund 25.00 USD for payment pi_test123.",
+  message_id: "<sample-support-email@example.com>",
+  stripe_payment_intent_id: "pi_test123",
+  requested_refund_amount_cents: 2500,
+  currency: "usd",
+  customer_name: "Customer",
+};
 
 export function App() {
   const [config, setConfig] = useState(null);
   const [session, setSession] = useState(null);
-  const [selectedSkillName, setSelectedSkillName] = useState("");
-  const [argsText, setArgsText] = useState("{}");
+  const [selectedSkillName, setSelectedSkillName] = useState("process_support_email");
+  const [argsText, setArgsText] = useState(JSON.stringify(SAMPLE_EMAIL, null, 2));
   const [result, setResult] = useState(null);
   const [error, setError] = useState(null);
   const [running, setRunning] = useState(false);
@@ -19,11 +25,6 @@ export function App() {
     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))
@@ -35,11 +36,22 @@ export function App() {
     [config, selectedSkillName],
   );
 
-  function selectSkill(skill) {
-    setSelectedSkillName(skill.name);
-    setArgsText(JSON.stringify(sampleArgs(skill), null, 2));
+  function selectSkill(name) {
+    setSelectedSkillName(name);
     setResult(null);
     setError(null);
+    if (name === "process_support_email") setArgsText(JSON.stringify(SAMPLE_EMAIL, null, 2));
+    if (name === "execute_approved_refund") {
+      setArgsText(JSON.stringify({
+        action_digest: "paste_action_digest_from_preview",
+        approval_token: "APPROVE-REFUND-first16digest",
+        stripe_payment_intent_id: "pi_test123",
+        amount_cents: 2500,
+        currency: "usd",
+        customer_email: "customer@example.com",
+        reason: "requested_by_customer",
+      }, null, 2));
+    }
   }
 
   async function runSkill(event) {
@@ -60,34 +72,30 @@ export function App() {
   }
 
   if (!config) {
-    return (
-      <main className="loading">
-        <p>{error || "Loading A2A agent contract..."}</p>
-      </main>
-    );
+    return <main className="loading"><p>{error || "Loading support refund agent..."}</p></main>;
   }
 
+  const skills = config.skills || [];
+
   return (
     <main className="app-shell">
       <aside className="sidebar">
         <div>
-          <p className="eyebrow">A2A packed app</p>
-          <h1>receives-support-email-checks-1-919313</h1>
-          <p className="agent-meta">
-            {config.agent.name} v{config.agent.version}
-          </p>
+          <p className="eyebrow">Support refund workflow</p>
+          <h1>Refund approval card</h1>
+          <p className="agent-meta">{config.agent.name} v{config.agent.version}</p>
+        </div>
+
+        <div className="panel compact">
+          <h3>Safety model</h3>
+          <p>Inbound email can only create a proposal and draft. Stripe refunds require a separate approval token bound to the action digest.</p>
         </div>
 
         <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"
-            >
+          {skills.map((skill) => (
+            <button className={skill.name === selectedSkillName ? "skill active" : "skill"} key={skill.name} onClick={() => selectSkill(skill.name)} type="button">
               <span>{skill.name}</span>
-              <small>{skill.stream ? "streaming" : "request"}</small>
+              <small>{skill.tags?.includes("a2a:email-handler") ? "email" : "tool"}</small>
             </button>
           ))}
         </nav>
@@ -101,40 +109,28 @@ export function App() {
       <section className="workbench">
         <header className="toolbar">
           <div>
-            <p className="eyebrow">Skill runner</p>
+            <p className="eyebrow">Chat-style runner</p>
             <h2>{selectedSkill?.name || "No skills found"}</h2>
           </div>
-          <a href={config.docs.base} rel="noreferrer" target="_blank">
-            Docs
-          </a>
+          <a href={config.docs.base} rel="noreferrer" target="_blank">Docs</a>
         </header>
 
-        {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>
-        )}
+        <form className="runner" onSubmit={runSkill}>
+          <label>
+            Message / approval JSON
+            <textarea spellCheck="false" value={argsText} onChange={(event) => setArgsText(event.target.value)} />
+          </label>
+          <button disabled={running || !selectedSkill} type="submit">{running ? "Running..." : "Send to agent"}</button>
+        </form>
 
         <section className="panels">
           <div className="panel">
-            <h3>Input schema</h3>
-            <pre>{JSON.stringify(selectedSkill?.input_schema || {}, null, 2)}</pre>
+            <h3>Agent reply</h3>
+            <pre>{error || JSON.stringify(result, null, 2) || "No run yet."}</pre>
           </div>
           <div className="panel">
-            <h3>Result</h3>
-            <pre>{error || JSON.stringify(result, null, 2) || "No run yet."}</pre>
+            <h3>Published input schema</h3>
+            <pre>{JSON.stringify(selectedSkill?.input_schema || {}, null, 2)}</pre>
           </div>
         </section>
       </section>