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

frontend/src/App.jsx

@@ -1,66 +1,74 @@
 import { useEffect, useMemo, useState } from "react";
-import {
-  callSkill,
-  loadAgentConfig,
-  loadSession,
-  sampleArgs,
-  signInUrl,
-} from "./a2a.js";
+import { callSkill, loadAgentConfig, loadSession, signInUrl } from "./a2a.js";
+
+const DEFAULT_FORM = {
+  asset_type: "character",
+  theme: "forest knight",
+  palette: "#22c55e, #14532d, #facc15",
+  size: 128,
+  style: "pixel",
+  variant_count: 2,
+};
 
 export function App() {
   const [config, setConfig] = useState(null);
   const [session, setSession] = useState(null);
-  const [selectedSkillName, setSelectedSkillName] = useState("");
-  const [argsText, setArgsText] = useState("{}");
+  const [form, setForm] = useState(DEFAULT_FORM);
   const [result, setResult] = useState(null);
+  const [receipts, setReceipts] = useState([]);
   const [error, setError] = useState(null);
   const [running, setRunning] = useState(false);
+  const [loadingReceipts, setLoadingReceipts] = useState(false);
 
   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);
+        return loadSession(data).catch(() => ({ authenticated: false }));
       })
       .then((sessionData) => setSession(sessionData))
       .catch((err) => setError(err.message || String(err)));
   }, []);
 
-  const selectedSkill = useMemo(
-    () => config?.skills?.find((skill) => skill.name === selectedSkillName),
-    [config, selectedSkillName],
+  const generateSkill = useMemo(
+    () => config?.skills?.find((skill) => skill.name === "generate_svg_asset"),
+    [config],
   );
+  const listSkill = useMemo(
+    () => config?.skills?.find((skill) => skill.name === "list_recent_receipts"),
+    [config],
+  );
+  const needsSignIn = Boolean(config?.auth?.invokeRequiresSession && session && !session.authenticated);
+  const signInHref = useMemo(() => (config ? signInUrl(config) : null), [config]);
 
-  const needsSignIn = Boolean(
-    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 update(field, value) {
+    setForm((current) => ({ ...current, [field]: value }));
   }
 
-  async function runSkill(event) {
+  function requestPayload() {
+    return {
+      asset_type: form.asset_type,
+      theme: form.theme.trim(),
+      palette: form.palette.split(",").map((item) => item.trim()).filter(Boolean),
+      size: Number(form.size),
+      style: form.style,
+      variant_count: Number(form.variant_count),
+    };
+  }
+
+  async function generateAsset(event) {
     event.preventDefault();
-    if (!config || !selectedSkill) return;
+    if (!config || !generateSkill) return;
     setRunning(true);
     setError(null);
     setResult(null);
     try {
-      const args = JSON.parse(argsText || "{}");
-      const data = await callSkill(config, selectedSkill.name, args);
+      const data = await callSkill(config, "generate_svg_asset", requestPayload());
       setResult(data);
+      if (data?.status === "setup_required") {
+        setError(data.warning || "Setup is required before this skill can run.");
+      }
+      if (listSkill) loadReceipts();
     } catch (err) {
       setError(err.message || String(err));
     } finally {
@@ -68,90 +76,137 @@ export function App() {
     }
   }
 
+  async function loadReceipts() {
+    if (!config || !listSkill) return;
+    setLoadingReceipts(true);
+    try {
+      const data = await callSkill(config, "list_recent_receipts", { limit: 8 });
+      if (data.status === "ok") setReceipts(data.receipts || []);
+    } catch (err) {
+      if (!String(err.message || err).toLowerCase().includes("sign in")) {
+        setError(err.message || String(err));
+      }
+    } finally {
+      setLoadingReceipts(false);
+    }
+  }
+
   if (!config) {
-    return (
-      <main className="loading">
-        <p>{error || "Loading A2A agent contract..."}</p>
-      </main>
-    );
+    return <main className="loading"><p>{error || "Loading SVG asset studio..."}</p></main>;
   }
 
   return (
     <main className="app-shell">
-      <aside className="sidebar">
+      <section className="hero">
         <div>
-          <p className="eyebrow">A2A packed app</p>
-          <h1>generates-svg-video-game-9jg9vd-f0f510</h1>
-          <p className="agent-meta">
-            {config.agent.name} v{config.agent.version}
+          <p className="eyebrow">SVG game asset generator</p>
+          <h1>Generate production-ready SVG sprites for your game.</h1>
+          <p className="lede">
+            Choose an asset type, style, size, and palette. The backend returns inline SVG assets
+            and persists a signed-in execution receipt when deployed with managed Postgres.
           </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"
-            >
-              <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 className="session-card">
+          <span>{session?.authenticated ? "Signed in" : "Sign-in required to run"}</span>
+          <strong>{session?.user?.email || session?.email || config.agent?.name}</strong>
+          {needsSignIn && signInHref ? <a href={signInHref}>Sign in with A2A Cloud</a> : null}
         </div>
-      </aside>
+      </section>
 
-      <section className="workbench">
-        <header className="toolbar">
-          <div>
-            <p className="eyebrow">Skill runner</p>
-            <h2>{selectedSkill?.name || "No skills found"}</h2>
-          </div>
-          <a href={config.docs.base} rel="noreferrer" target="_blank">
-            Docs
-          </a>
-        </header>
-
-        {selectedSkill ? (
-          <form className="runner" onSubmit={runSkill}>
+      <section className="workspace">
+        <form className="generator-card" onSubmit={generateAsset}>
+          <div className="form-grid">
             <label>
-              Arguments JSON
-              <textarea
-                spellCheck="false"
-                value={argsText}
-                onChange={(event) => setArgsText(event.target.value)}
-              />
+              Asset type
+              <select value={form.asset_type} onChange={(event) => update("asset_type", event.target.value)}>
+                <option value="character">Character</option>
+                <option value="enemy">Enemy</option>
+                <option value="item">Item</option>
+                <option value="tile">Tile</option>
+                <option value="icon">Icon</option>
+                <option value="projectile">Projectile</option>
+              </select>
             </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>
-        )}
+            <label>
+              Style
+              <select value={form.style} onChange={(event) => update("style", event.target.value)}>
+                <option value="pixel">Pixel</option>
+                <option value="flat">Flat</option>
+                <option value="outline">Outline</option>
+                <option value="neon">Neon</option>
+              </select>
+            </label>
+            <label className="wide">
+              Theme prompt
+              <input maxLength={80} minLength={2} value={form.theme} onChange={(event) => update("theme", event.target.value)} />
+            </label>
+            <label className="wide">
+              Palette (#RRGGBB, comma-separated, max 5)
+              <input value={form.palette} onChange={(event) => update("palette", event.target.value)} />
+            </label>
+            <label>
+              Canvas size
+              <input max={512} min={32} type="number" value={form.size} onChange={(event) => update("size", event.target.value)} />
+            </label>
+            <label>
+              Variants
+              <input max={4} min={1} type="number" value={form.variant_count} onChange={(event) => update("variant_count", event.target.value)} />
+            </label>
+          </div>
+          <button disabled={running || needsSignIn} type="submit">
+            {running ? "Generating..." : "Generate SVG assets"}
+          </button>
+          {needsSignIn ? <p className="hint">Sign in to invoke backend tools and persist receipts.</p> : null}
+          {error ? <p className="error">{error}</p> : null}
+        </form>
 
-        <section className="panels">
-          <div className="panel">
-            <h3>Input schema</h3>
-            <pre>{JSON.stringify(selectedSkill?.input_schema || {}, null, 2)}</pre>
+        <aside className="receipt-card">
+          <div className="receipt-header">
+            <div>
+              <p className="eyebrow">Receipts</p>
+              <h2>Recent runs</h2>
+            </div>
+            <button disabled={loadingReceipts || needsSignIn} onClick={loadReceipts} type="button">
+              {loadingReceipts ? "Loading..." : "Refresh"}
+            </button>
           </div>
-          <div className="panel">
-            <h3>Result</h3>
-            <pre>{error || JSON.stringify(result, null, 2) || "No run yet."}</pre>
+          {receipts.length ? (
+            <ul className="receipts">
+              {receipts.map((item) => (
+                <li key={item.receipt_id}>
+                  <strong>{item.theme}</strong>
+                  <span>{item.asset_type} · {item.style} · {item.variant_count} variant(s)</span>
+                  <code>{item.receipt_id}</code>
+                </li>
+              ))}
+            </ul>
+          ) : (
+            <p className="empty">No persisted receipts loaded yet.</p>
+          )}
+        </aside>
+      </section>
+
+      <section className="results">
+        <div className="result-header">
+          <div>
+            <p className="eyebrow">Generated assets</p>
+            <h2>{result?.status === "ok" ? `${result.svg_assets?.length || 0} SVG asset(s)` : "Preview"}</h2>
           </div>
-        </section>
+          {result?.receipt_id ? <code>{result.receipt_id}</code> : null}
+        </div>
+        {result?.warnings?.length ? <p className="warning">{result.warnings.join(" · ")}</p> : null}
+        <div className="asset-grid">
+          {(result?.svg_assets || []).map((asset) => (
+            <article className="asset" key={asset.name}>
+              <div className="svg-preview" dangerouslySetInnerHTML={{ __html: asset.svg }} />
+              <div className="asset-meta">
+                <strong>{asset.name}</strong>
+                <button type="button" onClick={() => navigator.clipboard?.writeText(asset.svg)}>Copy SVG</button>
+              </div>
+            </article>
+          ))}
+          {!result ? <p className="empty">Submit the form to render SVG assets from the live backend.</p> : null}
+        </div>
       </section>
     </main>
   );