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

frontend/src/App.jsx

@@ -1,16 +1,24 @@
 import { useEffect, useMemo, useState } from "react";
-import {
-  callSkill,
-  loadAgentConfig,
-  loadSession,
-  sampleArgs,
-} from "./a2a.js";
+import { callSkill, loadAgentConfig, loadSession } from "./a2a.js";
+
+const sampleMessage = "Amanhã mandar uma fruta, uma garrafinha, camiseta branca e R$12 para a lembrancinha.";
+
+function todayInSaoPaulo() {
+  return new Intl.DateTimeFormat("en-CA", {
+    timeZone: "America/Sao_Paulo",
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit",
+  }).format(new Date());
+}
 
 export function App() {
   const [config, setConfig] = useState(null);
   const [session, setSession] = useState(null);
-  const [selectedSkillName, setSelectedSkillName] = useState("");
-  const [argsText, setArgsText] = useState("{}");
+  const [message, setMessage] = useState(sampleMessage);
+  const [childName, setChildName] = useState("");
+  const [referenceDate, setReferenceDate] = useState(todayInSaoPaulo());
+  const [question, setQuestion] = useState("What do I need to send this week?");
   const [result, setResult] = useState(null);
   const [error, setError] = useState(null);
   const [running, setRunning] = useState(false);
@@ -19,38 +27,38 @@ export function App() {
     loadAgentConfig()
       .then((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);
       })
       .then((sessionData) => setSession(sessionData))
       .catch((err) => setError(err.message || String(err)));
   }, []);
 
-  const selectedSkill = useMemo(
-    () => config?.skills?.find((skill) => skill.name === selectedSkillName),
-    [config, selectedSkillName],
+  const triageSkill = useMemo(
+    () => config?.skills?.find((skill) => skill.name === "triage_preschool_messages") || config?.skills?.[0],
+    [config],
   );
 
-  function selectSkill(skill) {
-    setSelectedSkillName(skill.name);
-    setArgsText(JSON.stringify(sampleArgs(skill), null, 2));
-    setResult(null);
-    setError(null);
-  }
-
-  async function runSkill(event) {
+  async function runTriage(event) {
     event.preventDefault();
-    if (!config || !selectedSkill) return;
+    if (!config || !triageSkill) return;
     setRunning(true);
     setError(null);
     setResult(null);
     try {
-      const args = JSON.parse(argsText || "{}");
-      const data = await callSkill(config, selectedSkill.name, args);
+      const messages = message
+        .split("\n")
+        .map((line) => line.trim())
+        .filter(Boolean);
+      const data = await callSkill(config, triageSkill.name, {
+        messages,
+        reference_date: referenceDate,
+        timezone: "America/Sao_Paulo",
+        child_name: childName || null,
+        question,
+        known_school_days: [],
+        already_paid_labels: [],
+        create_integration_previews: true,
+      });
       setResult(data);
     } catch (err) {
       setError(err.message || String(err));
@@ -62,7 +70,7 @@ export function App() {
   if (!config) {
     return (
       <main className="loading">
-        <p>{error || "Loading A2A agent contract..."}</p>
+        <p>{error || "Loading preschool buffer..."}</p>
       </main>
     );
   }
@@ -71,70 +79,95 @@ export function App() {
     <main className="app-shell">
       <aside className="sidebar">
         <div>
-          <p className="eyebrow">A2A packed app</p>
-          <h1>sits-between-parents-chaotic-19-aab317</h1>
+          <p className="eyebrow">A2A chat card</p>
+          <h1>Preschool WhatsApp Buffer</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" : "Local session"}</span>
-          <strong>{session?.user?.email || session?.org?.slug || "dev@example.local"}</strong>
+          <strong>{session?.user?.email || session?.org?.slug || "private agent"}</strong>
+        </div>
+        <div className="tips">
+          <h3>Try asking</h3>
+          <ul>
+            <li>Does my child have school tomorrow?</li>
+            <li>What do I need to send this week?</li>
+            <li>Did I already pay for Festa Junina?</li>
+          </ul>
         </div>
       </aside>
 
       <section className="workbench">
         <header className="toolbar">
           <div>
-            <p className="eyebrow">Skill runner</p>
-            <h2>{selectedSkill?.name || "No skills found"}</h2>
+            <p className="eyebrow">Chaotic group → calm plan</p>
+            <h2>Paste the school WhatsApp messages</h2>
           </div>
-          <a href={config.docs.base} rel="noreferrer" target="_blank">
-            Docs
-          </a>
+          <a href={config.docs.base} rel="noreferrer" target="_blank">Docs</a>
         </header>
 
-        {selectedSkill ? (
-          <form className="runner" onSubmit={runSkill}>
+        <form className="runner chat-runner" onSubmit={runTriage}>
+          <label>
+            WhatsApp messages
+            <textarea
+              className="message-box"
+              value={message}
+              onChange={(event) => setMessage(event.target.value)}
+            />
+          </label>
+          <div className="grid-fields">
             <label>
-              Arguments JSON
-              <textarea
-                spellCheck="false"
-                value={argsText}
-                onChange={(event) => setArgsText(event.target.value)}
-              />
+              Reference date
+              <input value={referenceDate} onChange={(event) => setReferenceDate(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>
-        )}
+            <label>
+              Child name
+              <input placeholder="Optional" value={childName} onChange={(event) => setChildName(event.target.value)} />
+            </label>
+          </div>
+          <label>
+            Question
+            <input value={question} onChange={(event) => setQuestion(event.target.value)} />
+          </label>
+          <button disabled={running} type="submit">
+            {running ? "Organizing..." : "Make my parent plan"}
+          </button>
+        </form>
 
-        <section className="panels">
-          <div className="panel">
-            <h3>Input schema</h3>
-            <pre>{JSON.stringify(selectedSkill?.input_schema || {}, null, 2)}</pre>
+        {error && <div className="error-card">{error}</div>}
+
+        <section className="panels result-panels">
+          <div className="panel result-card">
+            <h3>Answer</h3>
+            <p>{result?.answer || "No run yet."}</p>
+            {result?.school_tomorrow && <span className="pill">School tomorrow: {result.school_tomorrow}</span>}
           </div>
           <div className="panel">
-            <h3>Result</h3>
-            <pre>{error || JSON.stringify(result, null, 2) || "No run yet."}</pre>
+            <h3>Checklist</h3>
+            <ul className="clean-list">
+              {(result?.checklist || []).map((item, index) => (
+                <li key={`${item.title}-${index}`}>
+                  <strong>{item.title}</strong>
+                  <small>{item.category}{item.due_date ? ` · due ${item.due_date}` : ""}</small>
+                </li>
+              ))}
+              {!result?.checklist?.length && <li>No checklist yet.</li>}
+            </ul>
+          </div>
+          <div className="panel">
+            <h3>Reminders</h3>
+            <pre>{JSON.stringify({
+              calendar: result?.calendar_reminders || [],
+              backpack: result?.backpack_alerts || [],
+              morning: result?.morning_summaries || [],
+              payments: result?.payment_reminders || [],
+            }, null, 2)}</pre>
+          </div>
+          <div className="panel">
+            <h3>Integration previews</h3>
+            <pre>{JSON.stringify(result?.integration_previews || [], null, 2)}</pre>
           </div>
         </section>
       </section>