From 145a8c1021b1faaa581e380407f51b6c3e6e3a12 Mon Sep 17 00:00:00 2001
From: a2a-cloud <noreply@a2acloud.io>
Date: Sat, 18 Jul 2026 09:22:32 +0000
Subject: [PATCH] a2a-source-edit: write frontend/src/App.jsx

---
 frontend/src/App.jsx | 268 ++++++++++++++++++++++++++-----------------
 1 file changed, 160 insertions(+), 108 deletions(-)

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 5b15a4a..8b04a9d 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -1,66 +1,60 @@
 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_AUDIT_ID = "studio-launch-v1";
+const DEFAULT_URL = "https://example.com";
+
+function statusText(result) {
+  if (!result) return "No report yet";
+  if (!result.ok) return result.code || "Audit failed";
+  const score = result.report?.summary?.score;
+  return typeof score === "number" ? `${score}/100 readiness` : "Report ready";
+}
+
+function CheckRow({ label, value }) {
+  return (
+    <li className={value ? "check pass" : "check warn"}>
+      <span>{value ? "✓" : "!"}</span>
+      {label}
+    </li>
+  );
+}
 
 export function App() {
   const [config, setConfig] = useState(null);
   const [session, setSession] = useState(null);
-  const [selectedSkillName, setSelectedSkillName] = useState("");
-  const [argsText, setArgsText] = useState("{}");
+  const [auditId, setAuditId] = useState(DEFAULT_AUDIT_ID);
+  const [url, setUrl] = useState(DEFAULT_URL);
   const [result, setResult] = useState(null);
   const [error, setError] = useState(null);
   const [running, setRunning] = useState(false);
+  const [loadingReport, setLoadingReport] = 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));
-        }
-        return loadSession(data).catch(() => null);
+        const sessionData = await loadSession(data).catch(() => null);
+        setSession(sessionData);
       })
-      .then((sessionData) => setSession(sessionData))
       .catch((err) => setError(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 signInHref = useMemo(() => (config && needsSignIn ? signInUrl(config) : null), [config, needsSignIn]);
+  const report = result?.report;
+  const checks = report?.checks || {};
+  const evidence = report?.evidence || {};
 
-  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 runSkill(event) {
+  async function runAudit(event) {
     event.preventDefault();
-    if (!config || !selectedSkill) return;
+    if (!config) 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, "audit_url", { audit_id: auditId.trim(), url: url.trim() });
       setResult(data);
+      if (!data.ok) setError(data.message || data.code || "Audit rejected.");
     } catch (err) {
       setError(err.message || String(err));
     } finally {
@@ -68,90 +62,148 @@ export function App() {
     }
   }
 
+  async function reopenAudit() {
+    if (!config) return;
+    setLoadingReport(true);
+    setError(null);
+    try {
+      const data = await callSkill(config, "get_audit", { audit_id: auditId.trim() });
+      setResult(data);
+      if (!data.ok) setError(data.message || data.code || "No saved report found.");
+    } catch (err) {
+      setError(err.message || String(err));
+    } finally {
+      setLoadingReport(false);
+    }
+  }
+
   if (!config) {
     return (
       <main className="loading">
-        <p>{error || "Loading A2A agent contract..."}</p>
+        <p>{error || "Loading LaunchCheck..."}</p>
       </main>
     );
   }
 
   return (
-    <main className="app-shell">
-      <aside className="sidebar">
-        <div>
-          <p className="eyebrow">A2A packed app</p>
-          <h1>launch-check-studio-v1</h1>
-          <p className="agent-meta">
-            {config.agent.name} v{config.agent.version}
+    <main className="launch-app">
+      <section className="hero">
+        <div className="hero-copy">
+          <p className="eyebrow">LaunchCheck Studio</p>
+          <h1>Audit your launch page before customers do.</h1>
+          <p className="lede">
+            Submit a public HTTP(S) URL. LaunchCheck performs a deterministic, bounded, SSRF-safe audit for reachability,
+            HTTPS, page metadata, robots.txt, and key security headers, then saves the evidence for your account.
           </p>
+          <div className="trust-bar" aria-label="Safety guarantees">
+            <span>SSRF-safe DNS + redirects</span>
+            <span>User-scoped Postgres</span>
+            <span>No LLM or secrets in browser</span>
+          </div>
         </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>
+        <form className="audit-card" onSubmit={runAudit}>
+          <div className="session-row">
+            <span>{session?.authenticated ? "Signed in" : "Sign-in required to run"}</span>
+            {needsSignIn && signInHref ? <a href={signInHref}>Sign in</a> : null}
+          </div>
+          <label>
+            Public launch URL
+            <input
+              inputMode="url"
+              placeholder="https://example.com"
+              value={url}
+              onChange={(event) => setUrl(event.target.value)}
+              required
+            />
+          </label>
+          <label>
+            Report ID
+            <input
+              value={auditId}
+              onChange={(event) => setAuditId(event.target.value)}
+              pattern="[A-Za-z0-9][A-Za-z0-9_.:\-]{0,127}"
+              required
+            />
+          </label>
+          <div className="actions">
+            <button disabled={running || needsSignIn} type="submit">
+              {running ? "Auditing..." : "Run launch audit"}
             </button>
-          ))}
-        </nav>
+            <button disabled={loadingReport || needsSignIn} type="button" className="secondary" onClick={reopenAudit}>
+              {loadingReport ? "Opening..." : "Reopen saved report"}
+            </button>
+          </div>
+          {needsSignIn ? <p className="hint">Use the sign-in link to grant this app an origin-bound platform session.</p> : null}
+          {error ? <p className="error" role="alert">{error}</p> : null}
+        </form>
+      </section>
 
-        <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>
+      <section className="dashboard" aria-live="polite">
+        <article className="score-card">
+          <p className="eyebrow">Current report</p>
+          <h2>{statusText(result)}</h2>
+          <p>{result?.target_url || "Run or reopen a report to see categorized evidence and fixes."}</p>
+          {result?.receipt ? (
+            <div className="receipt">
+              <span>Receipt persisted</span>
+              <code>{result.receipt.receipt_id}</code>
+            </div>
           ) : null}
-        </div>
-      </aside>
+        </article>
 
-      <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>
+        <article className="panel checks-panel">
+          <h3>Readiness checks</h3>
+          {report ? (
+            <ul className="checks">
+              <CheckRow label="Reachable 2xx/3xx response" value={checks.reachable} />
+              <CheckRow label="HTTPS final URL" value={checks.https} />
+              <CheckRow label="Title tag" value={checks.has_title} />
+              <CheckRow label="Meta description" value={checks.has_description} />
+              <CheckRow label="Canonical link" value={checks.has_canonical} />
+              <CheckRow label="Responsive viewport" value={checks.has_viewport} />
+              <CheckRow label="robots.txt present" value={checks.robots_present} />
+            </ul>
+          ) : (
+            <p className="empty">No checks yet.</p>
+          )}
+        </article>
 
-        {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>
-        )}
+        <article className="panel evidence-panel">
+          <h3>Evidence</h3>
+          {report ? (
+            <dl className="evidence">
+              <dt>Status</dt><dd>{String(evidence.status_code || "n/a")}</dd>
+              <dt>Final URL</dt><dd>{evidence.final_url}</dd>
+              <dt>Title</dt><dd>{evidence.title || "Missing"}</dd>
+              <dt>Description</dt><dd>{evidence.description || "Missing"}</dd>
+              <dt>Canonical</dt><dd>{evidence.canonical || "Missing"}</dd>
+              <dt>Viewport</dt><dd>{evidence.viewport || "Missing"}</dd>
+              <dt>Bytes read</dt><dd>{evidence.bytes_read}</dd>
+            </dl>
+          ) : (
+            <p className="empty">Bounded audit evidence appears here after a run.</p>
+          )}
+        </article>
 
-        <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>
+        <article className="panel fixes-panel">
+          <h3>Recommended fixes</h3>
+          {report?.fixes?.length ? (
+            <ul className="fixes">
+              {report.fixes.slice(0, 8).map((fix, index) => (
+                <li key={`${fix.category}-${index}`}>
+                  <span className={`pill ${fix.priority}`}>{fix.priority}</span>
+                  <strong>{fix.category}</strong>
+                  <p>{fix.fix}</p>
+                </li>
+              ))}
+            </ul>
+          ) : report ? (
+            <p className="empty">No fixes recommended for the audited checklist.</p>
+          ) : (
+            <p className="empty">Actionable fixes will be grouped by metadata, SEO, mobile, and security.</p>
+          )}
+        </article>
       </section>
     </main>
   );