Compact Chat Tool UI is implemented

assets/app.js

@@ -560,28 +560,121 @@ function appendToolLogSection(parent, label, value) {
   parent.appendChild(section);
 }
 
-async function renderToolMessage(node, message, metadata) {
+function appendToolRawLog(parent, metadata) {
+  const log = metadata.log || {};
+  const hasArguments = log.arguments !== undefined && log.arguments !== null;
+  const hasResult = log.result !== undefined && log.result !== null;
+  if (!hasArguments && !hasResult) {
+    return;
+  }
+
+  const rawDetails = document.createElement("details");
+  rawDetails.className = "tool-log-raw";
+  const rawSummary = document.createElement("summary");
+  rawSummary.textContent = "Technical details";
+  rawDetails.appendChild(rawSummary);
+
+  if (hasArguments) {
+    appendToolLogSection(rawDetails, "Arguments", log.arguments);
+  }
+  if (hasResult) {
+    appendToolLogSection(rawDetails, "Result", log.result);
+  }
+  parent.appendChild(rawDetails);
+}
+
+function toolSummarySuffix(metadata) {
+  if (metadata.status === "pending") {
+    return " (running…)";
+  }
+  if (metadata.duration) {
+    return ` (${metadata.duration.toFixed(1)}s)`;
+  }
+  return "";
+}
+
+function resolvePlanTodos(metadata) {
+  if (Array.isArray(metadata.plan_todos) && metadata.plan_todos.length) {
+    return metadata.plan_todos;
+  }
+  const legacy = metadata.log?.result;
+  return Array.isArray(legacy) ? legacy : [];
+}
+
+function renderPlanTodoList(parent, todos) {
+  const list = document.createElement("div");
+  list.className = "plan-todo-list";
+  for (const todo of todos) {
+    const item = document.createElement("div");
+    item.className = "plan-todo-item";
+
+    const country = document.createElement("div");
+    country.className = "plan-todo-country";
+    country.textContent = todo.country || todo.title || "Country";
+    item.appendChild(country);
+
+    const methods = document.createElement("div");
+    methods.className = "plan-todo-methods";
+    methods.textContent = todo.methods || todo.description || "";
+    if (methods.textContent) {
+      item.appendChild(methods);
+    }
+
+    list.appendChild(item);
+  }
+  parent.appendChild(list);
+}
+
+async function renderPlanMessage(node, message, metadata) {
+  const details = document.createElement("details");
+  details.className = "tool-log plan-message";
+  details.open = true;
+
+  const summary = document.createElement("summary");
+  summary.textContent = metadata.title || "Research plan";
+  details.appendChild(summary);
+
+  const todos = resolvePlanTodos(metadata);
+  if (todos.length) {
+    renderPlanTodoList(details, todos);
+  } else if (message.content) {
+    const fallback = document.createElement("div");
+    fallback.className = "tool-compact-detail";
+    fallback.textContent = message.content;
+    details.appendChild(fallback);
+  }
+
+  node.appendChild(details);
+}
+
+async function renderToolMessage(node, message, metadata, options = {}) {
   const isThinking = metadata.title === "Thinking";
   if (isThinking) {
     node.classList.add("thinking");
   }
 
-  if (metadata.log) {
+  if (metadata.display === "plan") {
+    await renderPlanMessage(node, message, metadata);
+    return;
+  }
+
+  const isCompact = Boolean(options.compact || metadata.compact);
+
+  if (metadata.log || isCompact) {
     const details = document.createElement("details");
-    details.className = "tool-log";
+    details.className = `tool-log${isCompact ? " tool-log-compact" : ""}`;
+    if (isCompact) {
+      details.open = true;
+    }
+
     const summary = document.createElement("summary");
-    const statusSuffix =
-      metadata.status === "pending"
-        ? " (running…)"
-        : metadata.duration
-          ? ` (${metadata.duration.toFixed(1)}s)`
-          : "";
-    summary.textContent = `${metadata.title || "Tool"}${statusSuffix}`;
+    summary.className = "tool-compact-summary";
+    summary.textContent = `${metadata.title || "Tool"}${toolSummarySuffix(metadata)}`;
     details.appendChild(summary);
 
     if (message.content) {
       const summaryText = document.createElement("div");
-      summaryText.className = "tool-summary-text";
+      summaryText.className = isCompact ? "tool-compact-detail" : "tool-summary-text";
       if (metadata.markdown) {
         summaryText.classList.add("markdown-body");
         await renderMarkdownInto(summaryText, message.content);
@@ -591,11 +684,17 @@ async function renderToolMessage(node, message, metadata) {
       details.appendChild(summaryText);
     }
 
-    if (metadata.log.arguments) {
-      appendToolLogSection(details, "Arguments", metadata.log.arguments);
-    }
-    if (metadata.log.result !== undefined) {
-      appendToolLogSection(details, "Result", metadata.log.result);
+    if (metadata.log) {
+      if (isCompact) {
+        appendToolRawLog(details, metadata);
+      } else {
+        if (metadata.log.arguments) {
+          appendToolLogSection(details, "Arguments", metadata.log.arguments);
+        }
+        if (metadata.log.result !== undefined) {
+          appendToolLogSection(details, "Result", metadata.log.result);
+        }
+      }
     }
 
     node.appendChild(details);
@@ -642,19 +741,6 @@ function researchTaskKey(task) {
   return researchTaskDisplay(task).country || "research";
 }
 
-function shortResearchEventTitle(title, task) {
-  const text = String(title || "").trim();
-  const { country } = researchTaskDisplay(task);
-  if (country && text.includes(` · ${country}`)) {
-    return text.split(` · ${country}`)[0].trim();
-  }
-  const separator = text.indexOf(" · ");
-  if (separator !== -1) {
-    return text.slice(0, separator).trim();
-  }
-  return text || "Research update";
-}
-
 function collectResearchMessages() {
   return state.history.filter(isResearchMessage);
 }
@@ -716,13 +802,8 @@ async function renderResearchMessage(parent, message, task) {
   const metadata = message.metadata || {};
   node.className = `research-event ${metadata.status === "pending" ? "pending" : ""}`;
 
-  const title = document.createElement("div");
-  title.className = "research-event-title";
-  title.textContent = shortResearchEventTitle(metadata.title, task);
-  node.appendChild(title);
-
   if (metadata.log) {
-    await renderToolMessage(node, message, metadata);
+    await renderToolMessage(node, message, metadata, { compact: true });
   } else {
     const body = document.createElement("div");
     await renderMessageBody(body, message, false);
@@ -878,7 +959,11 @@ async function renderMessages() {
     }
 
     if (isTool) {
-      await renderToolMessage(node, message, metadata);
+      if (metadata.display === "plan") {
+        await renderPlanMessage(node, message, metadata);
+      } else {
+        await renderToolMessage(node, message, metadata);
+      }
     } else {
       const body = document.createElement("div");
       await renderMessageBody(body, message, isTool);

assets/server.css

@@ -328,6 +328,62 @@ button:disabled {
   color: #e5e7eb;
 }
 
+.tool-log-compact > summary.tool-compact-summary {
+  color: #fbbf24;
+  font-weight: 600;
+}
+
+.tool-compact-detail {
+  margin-top: 4px;
+  font-size: 0.82rem;
+  line-height: 1.4;
+  color: #9ca3af;
+  white-space: pre-wrap;
+}
+
+details.tool-log-raw {
+  margin-top: 8px;
+}
+
+details.tool-log-raw > summary {
+  cursor: pointer;
+  font-size: 0.75rem;
+  color: #6b7280;
+}
+
+.plan-message > summary {
+  color: #fbbf24;
+  font-weight: 700;
+}
+
+.plan-todo-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-top: 8px;
+}
+
+.plan-todo-item {
+  padding: 8px 10px;
+  border-radius: 8px;
+  border: 1px solid rgba(148, 163, 184, 0.16);
+  background: rgba(15, 23, 42, 0.55);
+}
+
+.plan-todo-country {
+  font-weight: 700;
+  color: #f9fafb;
+  font-size: 0.9rem;
+  line-height: 1.3;
+}
+
+.plan-todo-methods {
+  margin-top: 3px;
+  font-size: 0.8rem;
+  line-height: 1.35;
+  color: #9ca3af;
+}
+
 .markdown-body > :first-child {
   margin-top: 0;
 }
@@ -581,17 +637,21 @@ button:disabled {
   opacity: 0.82;
 }
 
-.research-event-title {
-  margin-bottom: 6px;
+.research-event details.tool-log-compact > summary {
+  cursor: default;
   color: #fbbf24;
   font-weight: 600;
-  font-size: 0.9rem;
 }
 
-.research-event details.tool-log > summary {
+.research-event .tool-compact-detail {
+  color: #cbd5e1;
+}
+
+.research-event details.tool-log-raw > summary {
   cursor: pointer;
-  color: #e5e7eb;
-  font-weight: 600;
+  color: #6b7280;
+  font-weight: 500;
+  font-size: 0.75rem;
 }
 
 .research-event .tool-log-section {

ui/agent/graph/respond.py

@@ -21,11 +21,12 @@ from ..synthesis import build_structured_final_answer
 from .workflow import build_workflow
 
 
-def _format_plan_content(todos: list[dict[str, Any]]) -> str:
-    lines = ["Research to-dos:"]
-    for todo in todos:
-        lines.append(f"{todo['id']}. {todo['country']} — {todo['methods']}")
-    return "\n".join(lines)
+def _format_plan_summary(todos: list[dict[str, Any]]) -> str:
+    count = len(todos)
+    if count == 0:
+        return "No countries queued for research."
+    noun = "country" if count == 1 else "countries"
+    return f"{count} {noun} queued for parallel research."
 
 
 def _research_task_country_methods(
@@ -93,6 +94,7 @@ class _UiState:
                     metadata={
                         "title": "Destination discovery",
                         "status": "done",
+                        "compact": True,
                         "log": event.get("log") or {},
                     },
                 )
@@ -104,11 +106,12 @@ class _UiState:
             self.ui_messages.append(
                 ChatMessage(
                     role="assistant",
-                    content=_format_plan_content(todos),
+                    content=_format_plan_summary(todos),
                     metadata={
                         "title": "Research plan",
                         "status": "done",
-                        "log": {"tool": "plan_research", "result": todos},
+                        "display": "plan",
+                        "plan_todos": todos,
                     },
                 )
             )
@@ -148,6 +151,7 @@ class _UiState:
             return True
 
         if kind == "tool_start":
+            research_task = event.get("research_task")
             self.ui_messages.append(
                 ChatMessage(
                     role="assistant",
@@ -156,7 +160,8 @@ class _UiState:
                         "title": str(event.get("title") or "Tool"),
                         "status": "pending",
                         "log": event.get("log") or {},
-                        "research_task": event.get("research_task"),
+                        "research_task": research_task,
+                        "compact": bool(research_task),
                     },
                 )
             )
@@ -166,6 +171,7 @@ class _UiState:
 
         if kind == "tool_end":
             index = self._pending_by_id.pop(str(event.get("id")), None)
+            research_task = event.get("research_task")
             message = ChatMessage(
                 role="assistant",
                 content=str(event.get("message") or ""),
@@ -174,7 +180,8 @@ class _UiState:
                     "status": "done",
                     "duration": event.get("duration"),
                     "log": event.get("log") or {},
-                    "research_task": event.get("research_task"),
+                    "research_task": research_task,
+                    "compact": bool(research_task),
                 },
             )
             if index is not None and index < len(self.ui_messages):

ui/agent/tools.py

@@ -4,6 +4,7 @@ from __future__ import annotations
 import json
 import time
 from typing import Any
+from urllib.parse import urlparse
 
 from gradio import ChatMessage
 
@@ -122,21 +123,54 @@ def _join(items: list[str], fallback: str) -> str:
     return ", ".join(clean) if clean else fallback
 
 
+def _url_host_or_path(url: str, *, limit: int = 80) -> str:
+    raw = str(url or "").strip()
+    if not raw:
+        return "page"
+    try:
+        parsed = urlparse(raw if "://" in raw else f"https://{raw}")
+        host = parsed.netloc
+        path = parsed.path.strip("/")
+        if host and path:
+            return truncate(f"{host}/{path}", limit)
+        return truncate(host or path or raw, limit)
+    except Exception:
+        return truncate(raw, limit)
+
+
+def tool_display_title(tool_name: str, args: dict[str, Any]) -> str:
+    if tool_name == "get_country_profile":
+        countries = _join(args.get("countries") or [], "selected countries")
+        return f"Profiles · {countries}"
+    if tool_name == "search_immigration_info":
+        query = truncate(str(args.get("query") or "immigration sources"), 80)
+        return f"Search · {query}"
+    if tool_name == "scrape_web_page":
+        return f"Read · {_url_host_or_path(str(args.get("url") or ""))}"
+    if tool_name == "crawl_web_site":
+        return f"Crawl · {_url_host_or_path(str(args.get("url") or ""), limit=60)}"
+    if tool_name == "update_globe":
+        countries = _join(args.get("countries") or [], "selected countries")
+        return f"Globe · {countries}"
+    return f"Using {tool_name}"
+
+
 def _pending_tool_message(tool_name: str, args: dict[str, Any]) -> tuple[str, str]:
+    title = tool_display_title(tool_name, args)
     if tool_name == "get_country_profile":
         countries = _join(args.get("countries") or [], "selected countries")
-        return "Country profiles", f"Looking up country metadata for {countries}."
+        return title, f"Looking up country metadata for {countries}."
     if tool_name == "search_immigration_info":
         query = truncate(str(args.get("query") or "immigration sources"), 180)
-        return "Searching sources", f"Searching for official immigration information: {query}"
+        return title, f"Searching for official immigration information: {query}"
     if tool_name == "scrape_web_page":
-        return "Reading official page", f"Reading {args.get('url', 'the selected page')}."
+        return title, f"Reading {args.get('url', 'the selected page')}."
     if tool_name == "crawl_web_site":
-        return "Crawling source site", f"Crawling related pages from {args.get('url', 'the selected site')}."
+        return title, f"Crawling related pages from {args.get('url', 'the selected site')}."
     if tool_name == "update_globe":
         countries = _join(args.get("countries") or [], "the selected countries")
-        return "Updating globe", f"Showing {countries} on the globe."
-    return f"Using {tool_name}", f"Running `{tool_name}`."
+        return title, f"Showing {countries} on the globe."
+    return title, f"Running `{tool_name}`."
 
 
 def _format_log_result(result: str) -> Any: