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

frontend/src/App.jsx

@@ -1,211 +1,157 @@
 import { useEffect, useMemo, useState } from "react";
-import { callSkill, loadAgentConfig, loadSession, signInUrl } from "./a2a.js";
-
-const MAX_UPLOAD_BYTES = 256 * 1024;
-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 emptyForm() {
-  return {
-    contract_id: "studio-contract-v1",
-    title: "Studio Renewal Agreement",
-    text: SUCCESS_FIXTURE,
-    file: null,
-  };
-}
+import {
+  callSkill,
+  loadAgentConfig,
+  loadSession,
+  sampleArgs,
+  signInUrl,
+} from "./a2a.js";
 
 export function App() {
   const [config, setConfig] = useState(null);
   const [session, setSession] = useState(null);
-  const [form, setForm] = useState(emptyForm);
-  const [timeline, setTimeline] = useState(null);
-  const [contracts, setContracts] = useState([]);
-  const [status, setStatus] = useState({ type: "idle", message: "Paste or upload a contract to begin." });
+  const [selectedSkillName, setSelectedSkillName] = useState("");
+  const [argsText, setArgsText] = useState("{}");
+  const [result, setResult] = useState(null);
+  const [error, setError] = useState(null);
   const [running, setRunning] = useState(false);
 
   useEffect(() => {
     loadAgentConfig()
-      .then(async (data) => {
+      .then((data) => {
         setConfig(data);
-        const sessionData = await loadSession(data).catch(() => null);
-        setSession(sessionData);
-        if (!data.auth?.invokeRequiresSession || sessionData?.authenticated) {
-          await refreshContracts(data);
+        const firstSkill = data.skills?.[0];
+        if (firstSkill) {
+          setSelectedSkillName(firstSkill.name);
+          setArgsText(JSON.stringify(sampleArgs(firstSkill), null, 2));
         }
+        return loadSession(data).catch(() => null);
       })
-      .catch((err) => setStatus({ type: "error", message: err.message || String(err) }));
+      .then((sessionData) => setSession(sessionData))
+      .catch((err) => setError(err.message || String(err)));
   }, []);
 
-  const needsSignIn = Boolean(config?.auth?.invokeRequiresSession && session && !session.authenticated);
-  const signInHref = useMemo(() => (config && needsSignIn ? signInUrl(config) : null), [config, needsSignIn]);
+  const selectedSkill = useMemo(
+    () => config?.skills?.find((skill) => skill.name === selectedSkillName),
+    [config, selectedSkillName],
+  );
 
-  async function refreshContracts(activeConfig = config) {
-    if (!activeConfig) return;
-    const result = await callSkill(activeConfig, "list_contracts", { limit: 20 });
-    if (result?.ok) setContracts(result.contracts || []);
+  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 updateField(name, value) {
-    setForm((current) => ({ ...current, [name]: value }));
-  }
-
-  async function fileToBrowserDocument(file) {
-    if (!file) return null;
-    if (file.size > MAX_UPLOAD_BYTES) {
-      throw new Error("Upload is larger than 256 KiB. Paste a shorter text excerpt or choose a smaller file.");
-    }
-    const buffer = await file.arrayBuffer();
-    let binary = "";
-    for (const byte of new Uint8Array(buffer)) binary += String.fromCharCode(byte);
-    return {
-      filename: file.name || "contract.txt",
-      media_type: file.type || "text/plain",
-      data_base64: btoa(binary),
-    };
-  }
-
-  async function analyze(event) {
+  async function runSkill(event) {
     event.preventDefault();
-    if (!config || running) return;
+    if (!config || !selectedSkill) return;
     setRunning(true);
-    setStatus({ type: "loading", message: "Extracting explicit dated obligations…" });
-    setTimeline(null);
+    setError(null);
+    setResult(null);
     try {
-      const base = { contract_id: form.contract_id.trim(), title: form.title.trim() };
-      const result = form.file
-        ? await callSkill(config, "analyze_contract_browser_upload", {
-            ...base,
-            document: await fileToBrowserDocument(form.file),
-          })
-        : await callSkill(config, "analyze_contract", { ...base, text: form.text });
-      setTimeline(result);
-      if (result.ok) {
-        setStatus({ type: "success", message: `Saved ${result.deadlines?.length || 0} deadlines with receipt ${result.receipt_id}.` });
-        await refreshContracts();
-      } else {
-        setStatus({ type: "error", message: result.message || result.code || "Contract could not be analyzed." });
-      }
+      const args = JSON.parse(argsText || "{}");
+      const data = await callSkill(config, selectedSkill.name, args);
+      setResult(data);
     } catch (err) {
-      setStatus({ type: "error", message: err.message || String(err) });
-    } finally {
-      setRunning(false);
-    }
-  }
-
-  async function reopen(contractId) {
-    if (!config) return;
-    setRunning(true);
-    setStatus({ type: "loading", message: `Reopening ${contractId}…` });
-    try {
-      const result = await callSkill(config, "get_contract_deadlines", { contract_id: contractId });
-      setTimeline(result);
-      setStatus({ type: result.ok ? "success" : "error", message: result.ok ? "Timeline reopened from managed Postgres." : result.message });
-    } catch (err) {
-      setStatus({ type: "error", message: err.message || String(err) });
+      setError(err.message || String(err));
     } finally {
       setRunning(false);
     }
   }
 
   if (!config) {
-    return <main className="loading"><p>{status.message || "Loading ContractClock…"}</p></main>;
+    return (
+      <main className="loading">
+        <p>{error || "Loading A2A agent contract..."}</p>
+      </main>
+    );
   }
 
   return (
-    <main className="shell">
-      <section className="hero">
+    <main className="app-shell">
+      <aside className="sidebar">
         <div>
-          <p className="eyebrow">Private A2A Cloud startup</p>
-          <h1>ContractClock</h1>
-          <p className="lede">
-            Extract explicit renewal dates and notice windows from contract text, save a user-scoped timeline,
-            and reopen it later. Ambiguous dates fail closed instead of being invented.
+          <p className="eyebrow">A2A packed app</p>
+          <h1>contract-clock-studio-v1</h1>
+          <p className="agent-meta">
+            {config.agent.name} v{config.agent.version}
           </p>
         </div>
-        <div className="session-card" aria-live="polite">
-          <span>{session?.authenticated ? "Signed in" : "Session required"}</span>
-          <strong>{session?.user?.email || session?.org?.slug || "A2A Cloud user"}</strong>
-          {needsSignIn && signInHref ? <a className="primary-link" href={signInHref}>Sign in to run ContractClock</a> : null}
-        </div>
-      </section>
 
-      <section className="grid">
-        <form className="card form" onSubmit={analyze}>
-          <div className="card-title">
-            <p className="eyebrow">Analyze</p>
-            <h2>Paste or upload a contract</h2>
-          </div>
-          <label>
-            Contract ID
-            <input value={form.contract_id} onChange={(event) => updateField("contract_id", event.target.value)} placeholder="studio-contract-v1" />
-          </label>
-          <label>
-            Title
-            <input value={form.title} onChange={(event) => updateField("title", event.target.value)} placeholder="Studio Renewal Agreement" />
-          </label>
-          <label>
-            Contract text
-            <textarea value={form.text} onChange={(event) => updateField("text", event.target.value)} disabled={Boolean(form.file)} />
-          </label>
-          <label className="upload">
-            Optional text upload (max 256 KiB)
-            <input
-              type="file"
-              accept="text/plain,text/markdown,application/octet-stream"
-              onChange={(event) => updateField("file", event.target.files?.[0] || null)}
-            />
-            {form.file ? <small>{form.file.name} · {Math.round(form.file.size / 1024)} KiB · browser base64 bridge</small> : null}
-          </label>
-          <div className="actions">
-            <button disabled={running || needsSignIn} type="submit">{running ? "Working…" : "Analyze and save"}</button>
-            <button type="button" onClick={() => setForm(emptyForm())}>Load fixture</button>
-            <button type="button" onClick={() => setForm({ ...emptyForm(), contract_id: "studio-contract-invalid", title: "Ambiguous Agreement", text: "This Agreement renews sometime next spring unless notice is given well in advance." })}>Try failure fixture</button>
-          </div>
-          <p className={`status ${status.type}`}>{status.message}</p>
-        </form>
-
-        <section className="card timeline" aria-live="polite">
-          <div className="card-title">
-            <p className="eyebrow">Timeline</p>
-            <h2>{timeline?.title || timeline?.contract_id || "No timeline yet"}</h2>
-          </div>
-          {timeline?.ok ? (
-            <>
-              <ol className="deadline-list">
-                {(timeline.deadlines || []).map((deadline) => (
-                  <li key={`${deadline.kind}-${deadline.date}`}>
-                    <time>{deadline.date}</time>
-                    <div><strong>{deadline.kind}</strong><p>{deadline.summary}</p><small>{deadline.source_text}</small></div>
-                  </li>
-                ))}
-              </ol>
-              <div className="receipt">Production receipt: <code>{timeline.receipt_id}</code></div>
-            </>
-          ) : timeline ? (
-            <div className="empty error-box"><strong>{timeline.code}</strong><p>{timeline.message}</p></div>
-          ) : (
-            <p className="empty">Results appear here after analysis. Only explicit ISO dates such as 2026-12-31 are accepted.</p>
-          )}
-        </section>
-      </section>
-
-      <section className="card history">
-        <div className="card-title row">
-          <div><p className="eyebrow">Managed Postgres</p><h2>Saved timelines</h2></div>
-          <button disabled={running || needsSignIn} onClick={() => refreshContracts()} type="button">Refresh</button>
-        </div>
-        {contracts.length ? (
-          <div className="history-list">
-            {contracts.map((contract) => (
-              <button key={contract.contract_id} onClick={() => reopen(contract.contract_id)} type="button">
-                <strong>{contract.title}</strong>
-                <span>{contract.contract_id} · {contract.deadline_count} deadlines · {new Date(contract.updated_at).toLocaleString()}</span>
+        <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>
+      </aside>
+
+      <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}>
+            <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">No saved timelines for this signed-in user yet. Tenant isolation is enforced on the backend.</p>
+          <p className="empty">Add a `@a2a.tool` to your agent to make it callable here.</p>
         )}
+
+        <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>
+        </section>
       </section>
     </main>
   );