parallel research carousel UI

assets/app.js

@@ -32,6 +32,7 @@ const state = {
   choices: null,
   busy: false,
   view: "form",
+  activeResearchTaskId: null,
 };
 
 const els = {
@@ -477,9 +478,158 @@ async function renderToolMessage(node, message, metadata) {
   node.appendChild(body);
 }
 
+function isResearchMessage(message) {
+  return Boolean(message?.metadata?.research_task);
+}
+
+function researchTaskKey(task) {
+  const id = task?.id;
+  return id === undefined || id === null ? String(task?.title || "research") : String(id);
+}
+
+function groupResearchMessages(messages) {
+  const groups = new Map();
+  for (const message of messages) {
+    const task = message.metadata?.research_task || {};
+    const key = researchTaskKey(task);
+    if (!groups.has(key)) {
+      groups.set(key, {
+        key,
+        task,
+        messages: [],
+        hasFinding: false,
+        hasPending: false,
+      });
+    }
+    const group = groups.get(key);
+    group.messages.push(message);
+    group.hasFinding = group.hasFinding || Boolean(message.metadata?.research_finding);
+    group.hasPending = group.hasPending || message.metadata?.status === "pending";
+  }
+  return Array.from(groups.values()).sort((left, right) => {
+    const leftId = Number(left.task?.id);
+    const rightId = Number(right.task?.id);
+    if (Number.isFinite(leftId) && Number.isFinite(rightId)) {
+      return leftId - rightId;
+    }
+    return String(left.task?.title || "").localeCompare(String(right.task?.title || ""));
+  });
+}
+
+function researchGroupStatus(group) {
+  if (group.hasFinding) {
+    return "done";
+  }
+  if (group.hasPending) {
+    return "running";
+  }
+  return "working";
+}
+
+function defaultResearchTask(groups) {
+  const active = groups.find((group) => group.key === state.activeResearchTaskId);
+  if (active) {
+    return active;
+  }
+  return (
+    groups.find((group) => researchGroupStatus(group) !== "done") ||
+    groups[0]
+  );
+}
+
+async function renderResearchMessage(parent, message) {
+  const node = document.createElement("div");
+  const metadata = message.metadata || {};
+  node.className = `research-event ${metadata.status === "pending" ? "pending" : ""}`;
+
+  const title = document.createElement("div");
+  title.className = "research-event-title";
+  title.textContent = metadata.title || "Research update";
+  node.appendChild(title);
+
+  if (metadata.log) {
+    await renderToolMessage(node, message, metadata);
+  } else {
+    const body = document.createElement("div");
+    await renderMessageBody(body, message, false);
+    node.appendChild(body);
+  }
+
+  parent.appendChild(node);
+}
+
+async function renderResearchCarousel(messages) {
+  const groups = groupResearchMessages(messages);
+  const active = defaultResearchTask(groups);
+  if (!active) {
+    return null;
+  }
+
+  const panel = document.createElement("div");
+  panel.className = "chat-message assistant research-carousel";
+
+  const header = document.createElement("div");
+  header.className = "research-carousel-header";
+  const title = document.createElement("div");
+  title.className = "research-carousel-title";
+  title.textContent = "Parallel country research";
+  const progress = document.createElement("div");
+  progress.className = "research-carousel-progress";
+  const doneCount = groups.filter((group) => researchGroupStatus(group) === "done").length;
+  progress.textContent = `${doneCount}/${groups.length} complete`;
+  header.appendChild(title);
+  header.appendChild(progress);
+  panel.appendChild(header);
+
+  const tabs = document.createElement("div");
+  tabs.className = "research-carousel-tabs";
+  for (const group of groups) {
+    const status = researchGroupStatus(group);
+    const button = document.createElement("button");
+    button.type = "button";
+    button.className = `research-carousel-tab ${group.key === active.key ? "is-active" : ""}`;
+    button.dataset.status = status;
+    button.textContent = group.task?.title || `Research ${group.key}`;
+    button.addEventListener("click", () => {
+      state.activeResearchTaskId = group.key;
+      renderMessages();
+    });
+    tabs.appendChild(button);
+  }
+  panel.appendChild(tabs);
+
+  const body = document.createElement("div");
+  body.className = "research-carousel-body";
+  const activeStatus = document.createElement("div");
+  activeStatus.className = "research-carousel-active-status";
+  activeStatus.textContent = `${active.task?.title || "Research"} · ${researchGroupStatus(active)}`;
+  body.appendChild(activeStatus);
+
+  for (const message of active.messages) {
+    await renderResearchMessage(body, message);
+  }
+  panel.appendChild(body);
+  return panel;
+}
+
 async function renderMessages() {
   els.chatMessages.innerHTML = "";
-  for (const message of state.history) {
+  for (let index = 0; index < state.history.length; index += 1) {
+    const message = state.history[index];
+    if (isResearchMessage(message)) {
+      const researchMessages = [];
+      while (index < state.history.length && isResearchMessage(state.history[index])) {
+        researchMessages.push(state.history[index]);
+        index += 1;
+      }
+      index -= 1;
+      const carousel = await renderResearchCarousel(researchMessages);
+      if (carousel) {
+        els.chatMessages.appendChild(carousel);
+      }
+      continue;
+    }
+
     const node = document.createElement("div");
     const metadata = message.metadata || {};
     const isTool = Boolean(metadata.title || metadata.status);

assets/index.html

@@ -155,7 +155,7 @@
     </div>
 
     <script src="https://unpkg.com/maplibre-gl@5.24.0/dist/maplibre-gl.js"></script>
-    <script type="module" src="/assets/globe.js?v=2"></script>
-    <script type="module" src="/assets/app.js?v=2"></script>
+    <script type="module" src="/assets/globe.js"></script>
+    <script type="module" src="/assets/app.js"></script>
   </body>
 </html>

assets/server.css

@@ -454,6 +454,153 @@ button:disabled {
   margin: 0.45em 0;
 }
 
+.research-carousel {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  background: rgba(17, 24, 39, 0.94);
+  border: 1px solid rgba(245, 158, 11, 0.28);
+}
+
+.research-carousel-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.research-carousel-title {
+  font-weight: 700;
+  color: #fbbf24;
+}
+
+.research-carousel-progress {
+  flex: 0 0 auto;
+  border-radius: 999px;
+  border: 1px solid rgba(148, 163, 184, 0.22);
+  background: rgba(15, 23, 42, 0.75);
+  color: #d1d5db;
+  padding: 3px 8px;
+  font-size: 0.75rem;
+}
+
+.research-carousel-tabs {
+  display: flex;
+  gap: 8px;
+  overflow-x: auto;
+  padding-bottom: 2px;
+}
+
+.research-carousel-tab {
+  flex: 0 0 min(240px, 78%);
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 10px;
+  border-radius: 10px;
+  border-color: rgba(148, 163, 184, 0.24);
+  background: rgba(15, 23, 42, 0.82);
+  color: #e5e7eb;
+  text-align: left;
+  line-height: 1.25;
+}
+
+.research-carousel-tab::before {
+  content: "";
+  width: 8px;
+  height: 8px;
+  flex: 0 0 auto;
+  border-radius: 999px;
+  background: #fbbf24;
+  box-shadow: 0 0 12px rgba(251, 191, 36, 0.35);
+}
+
+.research-carousel-tab[data-status="done"]::before {
+  background: #34d399;
+  box-shadow: 0 0 12px rgba(52, 211, 153, 0.35);
+}
+
+.research-carousel-tab[data-status="running"]::before {
+  background: #60a5fa;
+  box-shadow: 0 0 12px rgba(96, 165, 250, 0.35);
+}
+
+.research-carousel-tab.is-active {
+  border-color: #f59e0b;
+  background: rgba(245, 158, 11, 0.16);
+  color: #f9fafb;
+}
+
+.research-carousel-body {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  border-radius: 10px;
+  border: 1px solid rgba(148, 163, 184, 0.16);
+  background: rgba(2, 6, 23, 0.28);
+  padding: 10px;
+}
+
+.research-carousel-active-status {
+  color: #9ca3af;
+  font-size: 0.8rem;
+}
+
+.research-event {
+  border-radius: 9px;
+  border: 1px solid rgba(148, 163, 184, 0.14);
+  background: rgba(15, 23, 42, 0.62);
+  padding: 8px 10px;
+}
+
+.research-event.pending {
+  opacity: 0.82;
+}
+
+.research-event-title {
+  margin-bottom: 6px;
+  color: #fbbf24;
+  font-weight: 600;
+  font-size: 0.9rem;
+}
+
+.research-event details.tool-log > summary {
+  cursor: pointer;
+  color: #e5e7eb;
+  font-weight: 600;
+}
+
+.research-event .tool-log-section {
+  margin-top: 8px;
+}
+
+.research-event .tool-log-section strong {
+  display: block;
+  margin-bottom: 4px;
+  color: #9ca3af;
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.research-event .tool-log-section pre {
+  margin: 0;
+  padding: 8px;
+  max-height: 220px;
+  overflow: auto;
+  border-radius: 8px;
+  border: 1px solid rgba(148, 163, 184, 0.16);
+  background: rgba(2, 6, 23, 0.5);
+  color: #e5e7eb;
+  white-space: pre-wrap;
+  word-break: break-word;
+  font-size: 0.78rem;
+}
+
+.research-event .chat-message-body {
+  white-space: normal;
+}
+
 .chat-input-row {
   display: flex;
   gap: 8px;

ui/agent/graph/nodes/researcher.py

@@ -32,6 +32,7 @@ from .prompts import RESEARCHER_SYSTEM_PROMPT
 
 def execute_tool_call(
     writer: Any,
+    todo_id: int,
     todo_title: str,
     tool_name: str,
     args: dict[str, Any],
@@ -45,6 +46,7 @@ def execute_tool_call(
             "title": f"{title} · {todo_title}",
             "message": pending_message,
             "log": {"tool": tool_name, "arguments": args},
+            "research_task": {"id": todo_id, "title": todo_title},
         }
     )
 
@@ -66,6 +68,7 @@ def execute_tool_call(
             "message": _done_tool_message(tool_name, args, result),
             "duration": duration,
             "log": _tool_log_metadata(tool_name, args, result),
+            "research_task": {"id": todo_id, "title": todo_title},
         }
     )
     return result
@@ -101,7 +104,13 @@ def researcher_node(task: ResearchTask, config: RunnableConfig) -> dict[str, Any
             messages.append(AIMessage(content=""))
 
         for tool_name, tool_args, tool_call_id in tool_calls:
-            result = execute_tool_call(writer, todo["title"], tool_name, tool_args)
+            result = execute_tool_call(
+                writer,
+                todo["id"],
+                todo["title"],
+                tool_name,
+                tool_args,
+            )
             messages.append(
                 ToolMessage(
                     content=truncate(result, TOOL_RESULT_LIMIT),
@@ -132,5 +141,13 @@ def researcher_node(task: ResearchTask, config: RunnableConfig) -> dict[str, Any
         "todo_title": todo["title"],
         "summary": summary,
     }
-    writer({"type": "finding", "todo_title": todo["title"], "summary": summary})
+    writer(
+        {
+            "type": "finding",
+            "todo_id": todo["id"],
+            "todo_title": todo["title"],
+            "summary": summary,
+            "research_task": {"id": todo["id"], "title": todo["title"]},
+        }
+    )
     return {"findings": [finding]}

ui/agent/graph/respond.py

@@ -119,6 +119,7 @@ class _UiState:
                         "title": str(event.get("title") or "Tool"),
                         "status": "pending",
                         "log": event.get("log") or {},
+                        "research_task": event.get("research_task"),
                     },
                 )
             )
@@ -135,6 +136,7 @@ class _UiState:
                     "status": "done",
                     "duration": event.get("duration"),
                     "log": event.get("log") or {},
+                    "research_task": event.get("research_task"),
                 },
             )
             if index is not None and index < len(self.ui_messages):
@@ -159,6 +161,12 @@ class _UiState:
                         "title": f"Findings · {todo_title}",
                         "status": "done",
                         "markdown": True,
+                        "research_task": event.get("research_task")
+                        or {
+                            "id": event.get("todo_id"),
+                            "title": todo_title,
+                        },
+                        "research_finding": True,
                     },
                 )
             )