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

frontend/src/App.jsx

@@ -1,41 +1,38 @@
 import { useEffect, useMemo, useState } from "react";
-import {
-  callSkill,
-  loadAgentConfig,
-  loadSession,
-  sampleArgs,
-  signInUrl,
-} from "./a2a.js";
+import { callSkill, loadAgentConfig, loadSession, signInUrl } from "./a2a.js";
+
+const FIXTURE_UPDATES = `2026-07-01 | Acme Portal | green | Sprint 18 shipped client dashboard, 3 blockers cleared, utilization 81%, margin 34%.
+2026-07-02 | Beacon CRM | yellow | API integration waiting on customer credentials; utilization 74%, margin 27%, risk: delayed approval.
+2026-07-03 | Cedar Mobile | red | Escalated crash fix is overdue; utilization 92%, margin 18%, blocker: App Store review.
+2026-07-04 | Delta RevOps | green | Retainer reporting automated; utilization 68%, margin 39%, next: expansion proposal.`;
 
 export function App() {
   const [config, setConfig] = useState(null);
   const [session, setSession] = useState(null);
-  const [selectedSkillName, setSelectedSkillName] = useState("");
-  const [argsText, setArgsText] = useState("{}");
+  const [updatesText, setUpdatesText] = useState(FIXTURE_UPDATES);
+  const [agencyName, setAgencyName] = useState("Proofline Software Agency");
+  const [windowLabel, setWindowLabel] = useState("This week");
+  const [minSeverity, setMinSeverity] = useState("all");
   const [result, setResult] = useState(null);
+  const [history, setHistory] = useState([]);
   const [error, setError] = useState(null);
   const [running, setRunning] = 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));
+        const sessionData = await loadSession(data).catch(() => null);
+        setSession(sessionData);
+        if (!data.auth?.invokeRequiresSession || sessionData?.authenticated) {
+          callSkill(data, "list_history", { limit: 6 })
+            .then((payload) => setHistory(payload?.history || []))
+            .catch(() => setHistory([]));
         }
-        return loadSession(data).catch(() => null);
       })
-      .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,
   );
@@ -44,23 +41,20 @@ export function App() {
     [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 runDashboard(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);
-      setResult(data);
+      const payload = await callSkill(config, "build_dashboard", {
+        updates_text: updatesText,
+        agency_name: agencyName,
+        window_label: windowLabel,
+        min_severity: minSeverity,
+      });
+      setResult(payload);
+      setHistory(payload?.history || history);
     } catch (err) {
       setError(err.message || String(err));
     } finally {
@@ -68,91 +62,203 @@ export function App() {
     }
   }
 
-  if (!config) {
-    return (
-      <main className="loading">
-        <p>{error || "Loading A2A agent contract..."}</p>
-      </main>
-    );
+  function downloadArtifact() {
+    if (!result?.artifact?.content) return;
+    const blob = new Blob([result.artifact.content], {
+      type: result.artifact.media_type || "text/csv",
+    });
+    const url = URL.createObjectURL(blob);
+    const anchor = document.createElement("a");
+    anchor.href = url;
+    anchor.download = result.artifact.name || "agency-ops-dashboard.csv";
+    document.body.appendChild(anchor);
+    anchor.click();
+    anchor.remove();
+    URL.revokeObjectURL(url);
   }
 
+  if (!config) {
+    return <main className="loading">{error || "Loading dashboard..."}</main>;
+  }
+
+  const rows = result?.dashboard_data || [];
+  const trends = result?.trends || {};
+  const exceptions = result?.exceptions || [];
+
   return (
-    <main className="app-shell">
-      <aside className="sidebar">
+    <main className="dashboard-app" data-testid="agent-app">
+      <section className="hero-card">
         <div>
-          <p className="eyebrow">A2A packed app</p>
-          <h1>production-proof-v116-high-utili-7255-1</h1>
-          <p className="agent-meta">
-            {config.agent.name} v{config.agent.version}
+          <p className="eyebrow">Production proof v116</p>
+          <h1>Agency ops dashboard in under two minutes</h1>
+          <p className="hero-copy">
+            Paste recurring client updates and get filters, trend cards,
+            exceptions, durable history, a persisted execution receipt, and a
+            downloadable CSV output. The same tools are callable over A2A CLI and MCP.
           </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. */}
+        <div className="session-card">
+          <span>{session?.authenticated ? "Signed in" : needsSignIn ? "Sign-in required" : "Ready"}</span>
+          <strong>{session?.user?.email || session?.org?.slug || config.agent?.name}</strong>
           {needsSignIn && signInHref ? (
             <a className="signin" href={signInHref}>Sign in to run</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}>
-            <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>
-        )}
-
-        <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>
+      <form className="workflow-grid" onSubmit={runDashboard}>
+        <section className="input-panel">
+          <div className="panel-heading">
+            <p className="eyebrow">1. Paste updates</p>
+            <h2>Recurring operations feed</h2>
           </div>
+          <label>
+            Agency name
+            <input
+              data-testid="agency-name"
+              maxLength={80}
+              value={agencyName}
+              onChange={(event) => setAgencyName(event.target.value)}
+            />
+          </label>
+          <label>
+            Reporting window
+            <input
+              data-testid="window-label"
+              maxLength={60}
+              value={windowLabel}
+              onChange={(event) => setWindowLabel(event.target.value)}
+            />
+          </label>
+          <label>
+            Minimum severity
+            <select value={minSeverity} onChange={(event) => setMinSeverity(event.target.value)}>
+              <option value="all">All updates</option>
+              <option value="yellow">Yellow + red</option>
+              <option value="red">Red only</option>
+            </select>
+          </label>
+          <label>
+            Updates text
+            <textarea
+              data-testid="agent-input"
+              maxLength={6000}
+              value={updatesText}
+              onChange={(event) => setUpdatesText(event.target.value)}
+            />
+          </label>
+          <button data-testid="agent-submit" disabled={running || needsSignIn} type="submit">
+            {running ? "Building dashboard..." : "Build dashboard"}
+          </button>
+          {needsSignIn ? <p className="notice">Sign in with your A2A account to use the 3 funded trial calls.</p> : null}
+          {error ? <p className="error" role="alert">{error}</p> : null}
         </section>
+
+        <section className="result-panel" data-testid="agent-result" aria-live="polite">
+          <div className="panel-heading">
+            <p className="eyebrow">2. Live dashboard</p>
+            <h2>{result ? result.summary : "Ready for the first run"}</h2>
+          </div>
+
+          <div className="metric-grid">
+            <Metric label="Updates" value={trends.total_updates ?? "—"} />
+            <Metric label="Exceptions" value={exceptions.length || "—"} />
+            <Metric label="Avg utilization" value={trends.average_utilization ? `${trends.average_utilization}%` : "—"} />
+            <Metric label="Avg margin" value={trends.average_margin ? `${trends.average_margin}%` : "—"} />
+          </div>
+
+          {result ? (
+            <>
+              <div className="filters">
+                <strong>Filters:</strong>
+                {(result.filters?.status || []).map((status) => <span key={status}>{status}</span>)}
+                <span>{result.filters?.active_min_severity}</span>
+              </div>
+
+              <div className="table-wrap">
+                <table>
+                  <thead>
+                    <tr>
+                      <th>Date</th>
+                      <th>Client</th>
+                      <th>Status</th>
+                      <th>Util.</th>
+                      <th>Margin</th>
+                      <th>Update</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {rows.map((row, index) => (
+                      <tr key={`${row.client}-${index}`}>
+                        <td>{row.date}</td>
+                        <td>{row.client}</td>
+                        <td><span className={`pill ${row.status}`}>{row.status}</span></td>
+                        <td>{row.utilization ?? "—"}</td>
+                        <td>{row.margin ?? "—"}</td>
+                        <td>{row.update}</td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+
+              <div className="exceptions">
+                <h3>Exceptions</h3>
+                {exceptions.length ? exceptions.map((item, index) => (
+                  <article key={`${item.client}-${index}`}>
+                    <strong>{item.client}</strong>
+                    <span>{item.reason}</span>
+                    <p>{item.update}</p>
+                  </article>
+                )) : <p>No exceptions in the selected view.</p>}
+              </div>
+
+              <div className="receipt">
+                <span>Run receipt persisted</span>
+                <code>{result.receipt_id}</code>
+              </div>
+
+              <button className="download" data-testid="agent-download" type="button" onClick={downloadArtifact}>
+                Download {result.artifact?.name || "CSV"}
+              </button>
+            </>
+          ) : (
+            <div className="empty-state">
+              The deterministic fixture is prefilled. Click Build dashboard to
+              create your first durable run and CSV output.
+            </div>
+          )}
+        </section>
+      </form>
+
+      <section className="history-panel">
+        <div className="panel-heading">
+          <p className="eyebrow">3. Durable history</p>
+          <h2>Recent dashboard runs</h2>
+        </div>
+        {history.length ? (
+          <div className="history-list">
+            {history.map((item) => (
+              <article key={item.run_id}>
+                <strong>{item.agency_name}</strong>
+                <span>{item.window_label} · {item.row_count} rows · {item.exception_count} exceptions</span>
+                <p>{item.summary}</p>
+              </article>
+            ))}
+          </div>
+        ) : (
+          <p className="empty-state">History appears after the first persisted run.</p>
+        )}
       </section>
     </main>
   );
 }
+
+function Metric({ label, value }) {
+  return (
+    <div className="metric">
+      <span>{label}</span>
+      <strong>{value}</strong>
+    </div>
+  );
+}