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

frontend/src/App.jsx

@@ -44,6 +44,7 @@ export function App() {
     () => (config && needsSignIn ? signInUrl(config) : null),
     [config, needsSignIn],
   );
+  const resultState = running ? "loading" : error ? "error" : result?.status === "ok" ? "success" : result ? "error" : "idle";
 
   async function runTriage(event) {
     event.preventDefault();
@@ -58,6 +59,9 @@ export function App() {
         max_messages: Number(maxMessages),
       });
       setResult(data);
+      if (data?.status && data.status !== "ok") {
+        setError(data.summary || "The inbox could not be triaged. Check the pasted messages and try again.");
+      }
     } catch (err) {
       setError(err.message || String(err));
     } finally {
@@ -157,10 +161,13 @@ export function App() {
         </div>
       </form>
 
+      <section className="results" data-testid="agent-result" data-state={resultState} aria-live="polite">
+        {running ? <p>Triaging the shared inbox and drafting approval-ready replies...</p> : null}
         {error ? <section className="error">{error}</section> : null}
+        {!running && !error && !result ? <p className="empty-state">Run the prefilled fixture to generate a prioritized queue, drafts, receipt, and JSON download.</p> : null}
 
         {result ? (
-        <section className="results" data-testid="agent-result">
+          <>
             <div className="result-header">
               <div>
                 <p className="eyebrow">Structured result</p>
@@ -206,8 +213,9 @@ export function App() {
                 </article>
               ))}
             </div>
-        </section>
+          </>
         ) : null}
+      </section>
     </main>
   );
 }