Add async-tasks UIWorker example

A UIWorker with a custom reply tool fans research out to three BaseWorker peers via start_user_job_group; their progress streams to the client as ui-task cards and the user can cancel a group mid-flight.
2026-05-21 17:21:08 -04:00
parent 6b0e204d66
commit 07725429b2
8 changed files with 2218 additions and 0 deletions
--- a/examples/multi-worker/ui-worker/async-tasks/client/index.html
+++ b/examples/multi-worker/ui-worker/async-tasks/client/index.html
@@ -0,0 +1,45 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Async tasks — UIAgent demo</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <header>
+      <h1>Research lab</h1>
+      <button id="connect" type="button">Connect</button>
+    </header>
+
+    <main>
+      <p class="hint">
+        Try: "research the Mariana Trench" — the agent fans out three
+        worker researchers (Wikipedia, news, scholarly papers) in
+        parallel. Each streams progress updates while it works. You
+        can cancel any group mid-flight.
+      </p>
+
+      <section aria-label="In-flight tasks">
+        <h2>In flight</h2>
+        <div id="tasks-empty" class="empty-state">
+          No tasks yet. Ask the assistant to research something.
+        </div>
+        <div id="tasks-list"></div>
+      </section>
+
+      <section aria-label="Completed results">
+        <h2>Results</h2>
+        <div id="results-empty" class="empty-state">
+          Completed research will appear here.
+        </div>
+        <div id="results-list"></div>
+      </section>
+    </main>
+
+    <div id="status" aria-live="polite"></div>
+    <audio id="bot-audio" autoplay data-a11y-exclude></audio>
+
+    <script type="module" src="./main.js"></script>
+  </body>
+</html>