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

frontend/src/App.jsx

@@ -1,156 +1,241 @@
 import { useEffect, useMemo, useState } from "react";
 import {
   callSkill,
+  fileToBrowserDocument,
   loadAgentConfig,
   loadSession,
-  sampleArgs,
+  needsInvokeSession,
   signInUrl,
 } from "./a2a.js";
 
+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 formatDeadline(deadline) {
+  return `${deadline.kind}: ${deadline.date}`;
+}
+
 export function App() {
   const [config, setConfig] = useState(null);
   const [session, setSession] = useState(null);
-  const [selectedSkillName, setSelectedSkillName] = useState("");
-  const [argsText, setArgsText] = useState("{}");
+  const [contractId, setContractId] = useState("studio-contract-v1");
+  const [title, setTitle] = useState("Studio Renewal Agreement");
+  const [text, setText] = useState(SUCCESS_FIXTURE);
+  const [file, setFile] = useState(null);
   const [result, setResult] = useState(null);
+  const [history, setHistory] = useState([]);
+  const [status, setStatus] = useState("Loading ContractClock...");
   const [error, setError] = useState(null);
   const [running, setRunning] = useState(false);
 
   useEffect(() => {
+    let cancelled = false;
     loadAgentConfig()
-      .then((data) => {
-        setConfig(data);
-        const firstSkill = data.skills?.[0];
-        if (firstSkill) {
-          setSelectedSkillName(firstSkill.name);
-          setArgsText(JSON.stringify(sampleArgs(firstSkill), null, 2));
+      .then(async (cfg) => {
+        if (cancelled) return;
+        setConfig(cfg);
+        try {
+          const sessionData = await loadSession(cfg);
+          if (!cancelled) setSession(sessionData);
+        } catch {
+          if (!cancelled) setSession({ authenticated: false });
         }
-        return loadSession(data).catch(() => null);
+        if (!cancelled) setStatus("Ready");
       })
-      .then((sessionData) => setSession(sessionData))
-      .catch((err) => setError(err.message || String(err)));
+      .catch((err) => {
+        if (!cancelled) {
+          setError(err.message || String(err));
+          setStatus("Unable to load app metadata");
+        }
+      });
+    return () => {
+      cancelled = true;
+    };
   }, []);
 
-  const selectedSkill = useMemo(
-    () => config?.skills?.find((skill) => skill.name === selectedSkillName),
-    [config, selectedSkillName],
-  );
+  const signInHref = useMemo(() => (config ? signInUrl(config) : null), [config]);
+  const needsSignIn = needsInvokeSession(config, session);
+  const skills = config?.skills || [];
+  const hasBase64Bridge = skills.some((skill) => skill.name === "analyze_contract_upload_base64");
+  const hasFileUploadBridge = skills.some((skill) => skill.name === "analyze_contract_file");
 
-  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 rememberTimeline(data) {
+    if (!data?.ok) return;
+    setHistory((current) => {
+      const next = current.filter((item) => item.contract_id !== data.contract_id);
+      return [{ contract_id: data.contract_id, title: data.title, deadlines: data.deadlines || [] }, ...next].slice(0, 8);
+    });
   }
 
-  async function runSkill(event) {
-    event.preventDefault();
-    if (!config || !selectedSkill) return;
+  async function invoke(skill, args) {
+    if (!config) return null;
     setRunning(true);
     setError(null);
-    setResult(null);
+    setStatus(`Running ${skill}...`);
     try {
-      const args = JSON.parse(argsText || "{}");
-      const data = await callSkill(config, selectedSkill.name, args);
+      const data = await callSkill(config, skill, args);
       setResult(data);
+      if (data?.ok) {
+        rememberTimeline(data);
+        setStatus("Timeline saved");
+      } else {
+        setStatus(data?.code ? `Stopped: ${data.code}` : "Stopped");
+      }
+      return data;
     } catch (err) {
-      setError(err.message || String(err));
+      if (err.status === 401 && signInHref) {
+        setError("Your session expired. Sign in again to run ContractClock.");
+      } else {
+        setError(err.message || String(err));
+      }
+      setStatus("Request failed");
+      return null;
     } finally {
       setRunning(false);
     }
   }
 
+  async function analyzePaste(event) {
+    event.preventDefault();
+    await invoke("analyze_contract", { contract_id: contractId, title, text });
+  }
+
+  async function analyzeUpload() {
+    if (!file) {
+      setError("Choose a plain-text contract file first.");
+      return;
+    }
+    try {
+      const document = await fileToBrowserDocument(file);
+      await invoke("analyze_contract_upload_base64", { contract_id: contractId, title, document });
+    } catch (err) {
+      setError(err.message || String(err));
+      setStatus("Upload rejected");
+    }
+  }
+
+  async function reloadTimeline(id = contractId) {
+    await invoke("get_contract_deadlines", { contract_id: id });
+  }
+
   if (!config) {
     return (
-      <main className="loading">
-        <p>{error || "Loading A2A agent contract..."}</p>
+      <main className="loading" aria-live="polite">
+        <p>{error || status}</p>
       </main>
     );
   }
 
   return (
     <main className="app-shell">
-      <aside className="sidebar">
-        <div>
-          <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>
-
-        <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. */}
+      <section className="hero">
+        <p className="eyebrow">ContractClock Studio</p>
+        <h1>Renewal deadlines without date guessing.</h1>
+        <p className="lede">
+          Paste or upload a plain-text contract. ContractClock extracts only explicit ISO renewal dates,
+          derives clause-bound notice windows, saves the timeline to managed Postgres, and lets you reopen it later.
+        </p>
+        <div className="session-card">
+          <span>{session?.authenticated ? "Signed in" : "Signed out"}</span>
+          <strong>{session?.user?.email || session?.email || session?.org?.slug || "A2A Cloud session"}</strong>
           {needsSignIn && signInHref ? (
-            <a className="signin" href={signInHref}>Sign in to run</a>
+            <a className="signin" href={signInHref}>Sign in to analyze and save</a>
           ) : null}
         </div>
-      </aside>
+        <div className="capabilities" aria-label="Backend capabilities">
+          <span>Managed Postgres</span>
+          <span>Standard MCP: /mcp</span>
+          <span>Receipts persisted</span>
+          <span>{hasBase64Bridge ? "Browser upload bridge" : "Upload bridge missing"}</span>
+          <span>{hasFileUploadBridge ? "Typed FileUpload bridge" : "FileUpload missing"}</span>
+        </div>
+      </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="studio" aria-label="Contract deadline workflow">
+        <form className="panel form" onSubmit={analyzePaste}>
+          <div className="row two">
             <label>
-              Arguments JSON
-              <textarea
-                spellCheck="false"
-                value={argsText}
-                onChange={(event) => setArgsText(event.target.value)}
-              />
+              Contract ID
+              <input value={contractId} onChange={(event) => setContractId(event.target.value)} required maxLength={120} />
             </label>
-            <button disabled={running} type="submit">
-              {running ? "Running..." : `Run ${selectedSkill.name}`}
+            <label>
+              Title
+              <input value={title} onChange={(event) => setTitle(event.target.value)} required maxLength={200} />
+            </label>
+          </div>
+          <label>
+            Contract text
+            <textarea value={text} onChange={(event) => setText(event.target.value)} maxLength={80000} required />
+          </label>
+          <div className="actions">
+            <button disabled={running || needsSignIn} type="submit">
+              {running ? "Working..." : "Analyze pasted contract"}
             </button>
-          </form>
-        ) : (
-          <p className="empty">Add a `@a2a.tool` to your agent to make it callable here.</p>
-        )}
+            <button disabled={running || needsSignIn} onClick={() => reloadTimeline()} type="button">
+              Reopen saved timeline
+            </button>
+          </div>
+        </form>
 
-        <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 className="panel upload">
+          <h2>Upload bridge</h2>
+          <p>
+            Browser uploads are converted to bounded base64 JSON for the packed app. External A2A clients can still
+            use the typed <code>FileUpload</code> tool advertised on the Agent Card.
+          </p>
+          <input
+            aria-label="Plain text contract upload"
+            type="file"
+            accept="text/plain,.txt"
+            onChange={(event) => setFile(event.target.files?.[0] || null)}
+          />
+          <button disabled={running || needsSignIn || !file} onClick={analyzeUpload} type="button">
+            Analyze uploaded text
+          </button>
+        </div>
+
+        <section className="panel result" aria-live="polite">
+          <div className="result-header">
+            <div>
+              <p className="eyebrow">Status</p>
+              <h2>{status}</h2>
+            </div>
+            {result?.receipt_id ? <span className="receipt">Receipt {result.receipt_id}</span> : null}
           </div>
+          {error ? <p className="error">{error}</p> : null}
+          {result?.ok ? (
+            <div className="timeline">
+              {(result.deadlines || []).map((deadline) => (
+                <article className="deadline" key={`${deadline.kind}-${deadline.date}`}>
+                  <strong>{formatDeadline(deadline)}</strong>
+                  <p>{deadline.rationale}</p>
+                  <small>{deadline.source_text}</small>
+                </article>
+              ))}
+            </div>
+          ) : result ? (
+            <p className="error">{result.code}: {result.message}</p>
+          ) : (
+            <p className="empty">No run yet. Use the success fixture or upload a plain-text agreement.</p>
+          )}
+        </section>
+
+        <section className="panel history">
+          <h2>Reload-safe history</h2>
+          {history.length ? (
+            <ul>
+              {history.map((item) => (
+                <li key={item.contract_id}>
+                  <button disabled={running || needsSignIn} onClick={() => reloadTimeline(item.contract_id)} type="button">
+                    {item.contract_id}
+                  </button>
+                  <span>{(item.deadlines || []).map(formatDeadline).join(" • ")}</span>
+                </li>
+              ))}
+            </ul>
+          ) : (
+            <p className="empty">Saved timelines appear here after a successful analysis.</p>
+          )}
         </section>
       </section>
     </main>