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

frontend/src/App.jsx

@@ -1,158 +1,254 @@
 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_SCHEMA = JSON.stringify(
+  {
+    type: "object",
+    properties: {
+      name: { type: "string" },
+      email: { type: "string", format: "email" },
+      age: { type: "integer" },
+    },
+    required: ["name", "email"],
+    additionalProperties: false,
+  },
+  null,
+  2,
+);
+
+const MAX_UPLOAD_BYTES = 2 * 1024 * 1024;
 
 export function App() {
   const [config, setConfig] = useState(null);
   const [session, setSession] = useState(null);
-  const [selectedSkillName, setSelectedSkillName] = useState("");
-  const [argsText, setArgsText] = useState("{}");
+  const [loadError, setLoadError] = useState(null);
+  const [file, setFile] = useState(null);
+  const [schemaText, setSchemaText] = useState(DEFAULT_SCHEMA);
+  const [workflowName, setWorkflowName] = useState("customer-normalizer");
   const [result, setResult] = useState(null);
+  const [history, setHistory] = useState([]);
   const [error, setError] = useState(null);
   const [running, setRunning] = useState(false);
+  const [loadingHistory, setLoadingHistory] = useState(false);
 
   useEffect(() => {
     loadAgentConfig()
-      .then((data) => {
+      .then(async (data) => {
         setConfig(data);
-        const firstSkill = data.skills?.[0];
-        if (firstSkill) {
-          setSelectedSkillName(firstSkill.name);
-          setArgsText(JSON.stringify(sampleArgs(firstSkill), null, 2));
+        try {
+          const sessionData = await loadSession(data);
+          setSession(sessionData);
+        } catch {
+          setSession({ authenticated: false });
         }
-        return loadSession(data).catch(() => null);
       })
-      .then((sessionData) => setSession(sessionData))
-      .catch((err) => setError(err.message || String(err)));
+      .catch((err) => setLoadError(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);
+  const signin = 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);
+  async function refreshHistory() {
+    if (!config || needsSignIn) return;
+    setLoadingHistory(true);
+    try {
+      const data = await callSkill(config, "list_workflow_receipts", { limit: 10 });
+      setHistory(data.receipts || []);
+    } catch (err) {
+      if ((err.message || "").includes("401")) setSession({ authenticated: false });
+    } finally {
+      setLoadingHistory(false);
+    }
   }
 
-  async function runSkill(event) {
+  useEffect(() => {
+    if (config && session?.authenticated) refreshHistory();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [config, session?.authenticated]);
+
+  async function submitWorkflow(event) {
     event.preventDefault();
-    if (!config || !selectedSkill) return;
-    setRunning(true);
     setError(null);
     setResult(null);
+
+    if (needsSignIn) {
+      setError("Sign in to run this workflow builder.");
+      return;
+    }
+    if (!file) {
+      setError("Choose a CSV, Excel, JSON, JSON-LD, or text file first.");
+      return;
+    }
+    if (file.size > MAX_UPLOAD_BYTES) {
+      setError(`File is too large. The browser bridge limit is ${Math.round(MAX_UPLOAD_BYTES / 1024 / 1024)} MB.`);
+      return;
+    }
+
+    let outputSchema;
     try {
-      const args = JSON.parse(argsText || "{}");
-      const data = await callSkill(config, selectedSkill.name, args);
-      setResult(data);
+      outputSchema = JSON.parse(schemaText);
     } catch (err) {
-      setError(err.message || String(err));
+      setError(`Output schema is not valid JSON: ${err.message}`);
+      return;
+    }
+
+    setRunning(true);
+    try {
+      const dataBase64 = await fileToBase64(file);
+      const data = await callSkill(config, "create_workflow_from_browser_upload", {
+        source_file: {
+          filename: file.name,
+          media_type: file.type || "application/octet-stream",
+          data_base64: dataBase64,
+        },
+        output_schema: outputSchema,
+        workflow_name: workflowName || "data-transform-workflow",
+      });
+      setResult(data);
+      await refreshHistory();
+    } catch (err) {
+      const message = err.message || String(err);
+      if (message.includes("401")) setSession({ authenticated: false });
+      setError(message);
     } finally {
       setRunning(false);
     }
   }
 
+  if (loadError) {
+    return <main className="loading"><p>{loadError}</p></main>;
+  }
   if (!config) {
-    return (
-      <main className="loading">
-        <p>{error || "Loading A2A agent contract..."}</p>
-      </main>
-    );
+    return <main className="loading"><p>Loading workflow builder…</p></main>;
   }
 
   return (
-    <main className="app-shell">
-      <aside className="sidebar">
+    <main className="product-shell">
+      <section className="hero">
         <div>
-          <p className="eyebrow">A2A packed app</p>
-          <h1>type-data-csv-excel-7rh4pz-057e66</h1>
-          <p className="agent-meta">
-            {config.agent.name} v{config.agent.version}
+          <p className="eyebrow">A2A data workflow builder</p>
+          <h1>Turn uploaded data into a reusable extraction workflow</h1>
+          <p>
+            Upload CSV, Excel, JSON, JSON-LD, or delimited data, paste the JSON Schema you want out,
+            and this agent saves a workflow spec with mappings, transformations, validation gates, and a receipt.
           </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 && signin ? <a href={signin}>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>
+      <section className="grid">
+        <form className="builder-card" onSubmit={submitWorkflow}>
+          <div className="field">
+            <label htmlFor="workflowName">Workflow name</label>
+            <input
+              id="workflowName"
+              value={workflowName}
+              onChange={(event) => setWorkflowName(event.target.value)}
+              placeholder="customer-normalizer"
+            />
           </div>
-          <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}`}
+          <div className="field">
+            <label htmlFor="dataFile">Source data file</label>
+            <input
+              id="dataFile"
+              type="file"
+              accept=".csv,.json,.jsonld,.xlsx,.xls,.txt,text/csv,application/json,application/ld+json"
+              onChange={(event) => setFile(event.target.files?.[0] || null)}
+            />
+            <small>{file ? `${file.name} · ${Math.ceil(file.size / 1024)} KB` : "Max 2 MB through the browser bridge."}</small>
+          </div>
+
+          <div className="field">
+            <label htmlFor="schema">Target output JSON Schema</label>
+            <textarea
+              id="schema"
+              className="schema-input"
+              value={schemaText}
+              onChange={(event) => setSchemaText(event.target.value)}
+              spellCheck="false"
+            />
+          </div>
+
+          {error ? <div className="alert error">{error}</div> : null}
+          {needsSignIn ? <div className="alert">Sign in before invoking the backend tool.</div> : null}
+
+          <button type="submit" disabled={running || needsSignIn}>
+            {running ? "Creating workflow…" : "Create and save workflow"}
+          </button>
+        </form>
+
+        <section className="result-card">
+          <div className="card-header">
+            <div>
+              <p className="eyebrow">Generated workflow</p>
+              <h2>{result?.workflow_name || "No workflow yet"}</h2>
+            </div>
+            <button type="button" onClick={refreshHistory} disabled={loadingHistory || needsSignIn}>
+              {loadingHistory ? "Refreshing…" : "Refresh receipts"}
             </button>
-          </form>
-        ) : (
-          <p className="empty">Add a `@a2a.tool` to your agent to make it callable here.</p>
-        )}
+          </div>
 
-        <section className="panels">
-          <div className="panel">
-            <h3>Input schema</h3>
-            <pre>{JSON.stringify(selectedSkill?.input_schema || {}, null, 2)}</pre>
-          </div>
-          <div className="panel">
-            <h3>Result</h3>
-            <pre>{error || JSON.stringify(result, null, 2) || "No run yet."}</pre>
-          </div>
+          {result ? (
+            <div className="result-body">
+              <dl>
+                <div><dt>Status</dt><dd>{result.status}</dd></div>
+                <div><dt>Source format</dt><dd>{result.source_format}</dd></div>
+                <div><dt>Workflow path</dt><dd>{result.workflow_path}</dd></div>
+                <div><dt>Receipt</dt><dd>{result.receipt_id || "not persisted"}</dd></div>
+              </dl>
+              <h3>Mapped fields</h3>
+              <ul className="mapping-list">
+                {(result.mapped_fields || []).map((item) => (
+                  <li key={item.target_field}>
+                    <strong>{item.target_field}</strong>
+                    <span>{item.source_field || "needs review"}</span>
+                  </li>
+                ))}
+              </ul>
+              {result.unmapped_required_fields?.length ? (
+                <div className="alert error">Unmapped required fields: {result.unmapped_required_fields.join(", ")}</div>
+              ) : null}
+              {result.warnings?.length ? <div className="alert">{result.warnings.join(" ")}</div> : null}
+            </div>
+          ) : (
+            <p className="empty">Run the builder to see mappings, saved path, artifact URI, and receipt status.</p>
+          )}
         </section>
       </section>
+
+      <section className="history-card">
+        <h2>Recent execution receipts</h2>
+        {history.length ? (
+          <div className="receipt-list">
+            {history.map((item) => (
+              <article key={item.receipt_id}>
+                <strong>{item.receipt_id}</strong>
+                <span>{item.workflow_id} · {item.status}</span>
+                <small>{item.created_at}</small>
+              </article>
+            ))}
+          </div>
+        ) : (
+          <p className="empty">Receipts appear here after a production call with managed Postgres available.</p>
+        )}
+      </section>
     </main>
   );
 }
+
+function fileToBase64(file) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onerror = () => reject(new Error("Could not read file"));
+    reader.onload = () => {
+      const value = String(reader.result || "");
+      resolve(value.includes(",") ? value.split(",").pop() : value);
+    };
+    reader.readAsDataURL(file);
+  });
+}