diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index d23fea6..0994e2d 100644
--- a/frontend/src/App.jsx
+++ b/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,57 +161,61 @@ export function App() {
         </div>
       </form>
 
-      {error ? <section className="error">{error}</section> : null}
+      <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>
-              <h2>{result.summary || result.status}</h2>
+        {result ? (
+          <>
+            <div className="result-header">
+              <div>
+                <p className="eyebrow">Structured result</p>
+                <h2>{result.summary || result.status}</h2>
+              </div>
+              {result.artifact ? (
+                <button data-testid="agent-download" type="button" onClick={downloadReport}>
+                  Download {result.artifact.name}
+                </button>
+              ) : null}
             </div>
-            {result.artifact ? (
-              <button data-testid="agent-download" type="button" onClick={downloadReport}>
-                Download {result.artifact.name}
-              </button>
+
+            <p className="boundary">{result.approval_boundary}</p>
+            {result.receipt ? (
+              <p className={result.receipt.persisted ? "receipt ok" : "receipt warn"}>
+                Receipt {result.receipt.receipt_id}: {result.receipt.message}
+              </p>
             ) : null}
-          </div>
 
-          <p className="boundary">{result.approval_boundary}</p>
-          {result.receipt ? (
-            <p className={result.receipt.persisted ? "receipt ok" : "receipt warn"}>
-              Receipt {result.receipt.receipt_id}: {result.receipt.message}
-            </p>
-          ) : null}
-
-          <div className="queue">
-            {(result.queue || []).map((item) => (
-              <article className={`queue-card ${item.priority}`} key={item.message_id}>
-                <div className="queue-top">
-                  <span className="pill">{item.priority}</span>
-                  <span>{item.category}</span>
-                </div>
-                <h3>{item.subject}</h3>
-                <p><strong>From:</strong> {item.sender}</p>
-                <p><strong>Why:</strong> {item.reason}</p>
-                <p><strong>Next:</strong> {item.next_action}</p>
-                <details open>
-                  <summary>Approval-ready draft</summary>
-                  <div className="draft">
-                    <p><strong>To:</strong> {item.draft.to}</p>
-                    <p><strong>Subject:</strong> {item.draft.subject}</p>
-                    <pre>{item.draft.body}</pre>
-                    <p><strong>Approval reason:</strong> {item.draft.approval_reason}</p>
-                    <ul>
-                      {(item.draft.policy_basis || []).map((basis) => <li key={basis}>{basis}</li>)}
-                    </ul>
+            <div className="queue">
+              {(result.queue || []).map((item) => (
+                <article className={`queue-card ${item.priority}`} key={item.message_id}>
+                  <div className="queue-top">
+                    <span className="pill">{item.priority}</span>
+                    <span>{item.category}</span>
                   </div>
-                </details>
-              </article>
-            ))}
-          </div>
-        </section>
-      ) : null}
+                  <h3>{item.subject}</h3>
+                  <p><strong>From:</strong> {item.sender}</p>
+                  <p><strong>Why:</strong> {item.reason}</p>
+                  <p><strong>Next:</strong> {item.next_action}</p>
+                  <details open>
+                    <summary>Approval-ready draft</summary>
+                    <div className="draft">
+                      <p><strong>To:</strong> {item.draft.to}</p>
+                      <p><strong>Subject:</strong> {item.draft.subject}</p>
+                      <pre>{item.draft.body}</pre>
+                      <p><strong>Approval reason:</strong> {item.draft.approval_reason}</p>
+                      <ul>
+                        {(item.draft.policy_basis || []).map((basis) => <li key={basis}>{basis}</li>)}
+                      </ul>
+                    </div>
+                  </details>
+                </article>
+              ))}
+            </div>
+          </>
+        ) : null}
+      </section>
     </main>
   );
 }