fix(ui): fix rendering of auto-approved tool calls and add dynamic tool icons

- Added mapping for LIST_DIR tool call in local and WASM SDK layers.
- Added dynamic icon rendering in Leptos frontend for different tool names (directory, search, commands, file edit/creation).
- Fixed agent server SSE emission to emit synthetic tool_start for tool calls that skip the Active state (e.g. auto-approved LIST_DIR).
- Suppressed duplicate text token events for tool call steps in agent server.

Author: codeitlikemiley

examples/agent_server/src/main.rs

@@ -304,7 +304,7 @@ async fn build_session(
          NEVER use file:// or file:/// URI prefixes — they are not valid filesystem paths and \
          will cause tool failures. Always write paths as: /absolute/path/to/file, never as \
          file:///absolute/path/to/file. \
-         Use tools proactively: list directory contents, read files, search code, run commands. \
+         Only use filesystem tools (like listing directory contents, reading/searching files, and running commands) when relevant to the user request. Do not access the workspace filesystem or run directory listings for queries that only need web search or general information. \
          Think step-by-step and show your reasoning. \
          Use markdown formatting for all responses including code blocks."
     );
@@ -533,7 +533,12 @@ async fn chat_stream_handler(
                             }
 
                             // ── text token delta ───────────────────────────────────
-                            if step.source == StepSource::Model && !step.content_delta.is_empty() {
+                            // Skip token emission for ToolCall steps — their content_delta
+                            // is the tool label (e.g. "Workspace directory listing"), not
+                            // assistant prose. The label is passed via tool_start instead.
+                            if step.source == StepSource::Model && !step.content_delta.is_empty()
+                                && step.r#type != StepType::ToolCall
+                            {
                                 let _ = tx.send(Ok(sse_event("token", serde_json::json!({
                                     "step_index": step_index,
                                     "text": step.content_delta,
@@ -565,6 +570,24 @@ async fn chat_stream_handler(
                                     } else if step.status == StepStatus::Done
                                         || step.status == StepStatus::Error
                                     {
+                                        // If this tool was never seen as Active (e.g. auto-approved
+                                        // non-WRITE_TOOLS like LIST_DIR that go straight from
+                                        // WaitingForUser → Done), emit a synthetic tool_start first
+                                        // so the frontend creates a proper ToolCallView card.
+                                        if seen_tool_ids.insert(call.id.clone()) {
+                                            tracing::info!(
+                                                tool = %call.name, id = %call.id,
+                                                "stream-handler: synthetic tool_start (skipped Active)"
+                                            );
+                                            let _ = tx.send(Ok(sse_event("tool_start", serde_json::json!({
+                                                "id":             call.id,
+                                                "name":           call.name,
+                                                "args":           call.args,
+                                                "canonical_path": call.canonical_path,
+                                                "label":          step.content,
+                                                "trajectory_id":  &trajectory_id,
+                                            })))).await;
+                                        }
                                         tracing::info!(
                                             tool   = %call.name,
                                             status = ?step.status,

examples/leptos_ssr_axum/src/app.rs

@@ -130,9 +130,20 @@ fn ThinkingView(content: String, is_streaming: bool) -> impl IntoView {
         >
             <summary class="flex items-center justify-between px-4 py-2.5 cursor-pointer font-medium text-xs text-amber-600 dark:text-amber-400 bg-amber-50/40 dark:bg-amber-950/10 hover:bg-amber-100/50 dark:hover:bg-amber-950/20 transition-colors select-none">
                 <div class="flex items-center gap-2">
-                    <span class=format!("thinking-icon text-sm {}", if is_streaming { "animate-spin" } else { "" })>
-                        "\u{1F9E0}"
-                    </span>
+                    {if is_streaming {
+                        view! {
+                            <svg class="w-3.5 h-3.5 flex-shrink-0 animate-spin text-amber-600 dark:text-amber-400" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="3"></circle>
+                                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                            </svg>
+                        }.into_any()
+                    } else {
+                        view! {
+                            <span class="thinking-icon text-sm select-none">
+                                "\u{1F9E0}"
+                            </span>
+                        }.into_any()
+                    }}
                     <span class="tracking-wide uppercase font-semibold text-[10px]">
                         {if is_streaming { "Thinking process..." } else { "Thought process" }}
                     </span>
@@ -201,6 +212,49 @@ fn ToolCallView(
         .unwrap_or(&name)
         .to_string();
 
+    let tool_icon = match name.as_str() {
+        "LIST_DIR" => view! {
+            <svg class="w-3.5 h-3.5 flex-shrink-0 opacity-60" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12.75V12A2.25 2.25 0 014.5 9.75h15A2.25 2.25 0 0121.75 12v.75m-8.69-6.44l-2.12-2.12a1.5 1.5 0 00-1.061-.44H4.5A2.25 2.25 0 002.25 6v12a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9a2.25 2.25 0 00-2.25-2.25h-5.379a1.5 1.5 0 01-1.06-.44z" />
+            </svg>
+        }.into_any(),
+        "FIND_FILE" | "SEARCH_DIR" => view! {
+            <svg class="w-3.5 h-3.5 flex-shrink-0 opacity-60" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
+            </svg>
+        }.into_any(),
+        "RUN_COMMAND" => view! {
+            <svg class="w-3.5 h-3.5 flex-shrink-0 opacity-60" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.348a1.125 1.125 0 010 1.971l-11.54 6.347a1.125 1.125 0 01-1.667-.985V5.653z" />
+            </svg>
+        }.into_any(),
+        "VIEW_FILE" => view! {
+            <svg class="w-3.5 h-3.5 flex-shrink-0 opacity-60" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" />
+            </svg>
+        }.into_any(),
+        "EDIT_FILE" | "CREATE_FILE" => view! {
+            <svg class="w-3.5 h-3.5 flex-shrink-0 opacity-60" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L6.832 19.82a4.5 4.5 0 01-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 011.13-1.897L16.863 4.487zm0 0L19.5 7.125" />
+            </svg>
+        }.into_any(),
+        "START_SUBAGENT" => view! {
+            <svg class="w-3.5 h-3.5 flex-shrink-0 opacity-60" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 3v1.5M12 3v1.5m3.75-1.5v1.5M19.5 8.25h-1.5M19.5 12h-1.5m1.5 3.75h-1.5m-14.25-3.75h-1.5m1.5-3.75h-1.5m1.5 7.5h-1.5m3 3V21M12 19.5V21m3.75-1.5V21m-9-15h10.5a1.5 1.5 0 011.5 1.5v10.5a1.5 1.5 0 01-1.5 1.5H6.75a1.5 1.5 0 01-1.5-1.5V6.75a1.5 1.5 0 011.5-1.5zm2.25 4.5h4.5v4.5h-4.5v-4.5z" />
+            </svg>
+        }.into_any(),
+        "GENERATE_IMAGE" => view! {
+            <svg class="w-3.5 h-3.5 flex-shrink-0 opacity-60" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 001.5-1.5V6a1.5 1.5 0 00-1.5-1.5H3.75A1.5 1.5 0 002.25 6v12a1.5 1.5 0 001.5 1.5zm10.5-11.25h.008v.008h-.008V8.25zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z" />
+            </svg>
+        }.into_any(),
+        _ => view! {
+            <svg class="w-3.5 h-3.5 flex-shrink-0 opacity-60" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75a4.5 4.5 0 01-4.884 4.484c-1.076-.091-2.264.071-2.95.904l-7.152 8.684a2.548 2.548 0 11-3.586-3.586l8.684-7.152c.833-.686.995-1.874.904-2.95a4.5 4.5 0 016.336-4.486l-3.276 3.276a3.004 3.004 0 002.25 2.25l3.276-3.276c.256.565.398 1.192.398 1.852z" />
+            </svg>
+        }.into_any(),
+    };
+
     // `<details>` is open while the tool is actively running so the user can
     // watch the arguments in real time; it collapses automatically when done.
     let is_open = matches!(status, ToolCallStatus::Running);    // Theme tokens per status
@@ -286,8 +340,10 @@ fn ToolCallView(
                 "flex items-center justify-between px-3 py-2 cursor-pointer text-xs select-none transition-colors {}",
                 summary_cls
             )>
-                // Left: icon + human-readable title + raw tool chip + subtitle
+                // Left: wrench icon + status icon + human-readable title + raw tool chip + subtitle
                 <div class="flex items-center gap-2 flex-1 min-w-0">
+                    // Dynamic tool call icon
+                    {tool_icon}
                     {status_icon}
                     // Primary: intent label ("Change Directory") not raw name
                     <span class="font-semibold truncate">{display_title}</span>
@@ -2563,18 +2619,15 @@ fn ChatPage() -> impl IntoView {
                     let stream_completed_nat = stream_completed.clone();
                     let do_finalize_nat = do_finalize.clone();
                     let native_err_closure = Closure::<dyn FnMut(_)>::new(move |_event: web_sys::Event| {
-                        // Only show an error if the stream was NOT completed intentionally.
+                        // Finalize if the stream wasn't already completed.
+                        // We intentionally do NOT push an Error block here — the native
+                        // onerror fires on transport-level disconnects AND when we call
+                        // es.close() ourselves after a normal idle/done sequence. Any
+                        // server-sent errors already arrive via the named "error" SSE
+                        // event handler above.  Pushing "Connection to agent lost" from
+                        // here causes false positives after every normal completion.
                         if !stream_completed_nat.get() {
-                            // Finalise first: collapses thinking block, saves accumulated
-                            // blocks to KV so we don't lose partial responses on error.
                             do_finalize_nat();
-
-                            let err_id = next_id();
-                            set_blocks.update(|bs| bs.push(MessageBlock::Error {
-                                id: err_id,
-                                message: "Connection to agent lost".to_string(),
-                                http_code: None,
-                            }));
                         }
                         active_es_native_err.update_value(|opt_es| {
                             if let Some(es) = opt_es.take() {
@@ -3165,7 +3218,22 @@ fn ChatPage() -> impl IntoView {
                         // and as the step.content for the ToolCall — we use it as the
                         // card title and suppress the redundant standalone bubble).
                         {move || {
-                            let all_blocks = blocks.get();
+                            let mut all_blocks = blocks.get();
+                            // Reorder: ensure Thinking blocks appear before adjacent
+                            // AssistantMessage blocks.  The server may emit text tokens
+                            // before thinking deltas for the same step, causing
+                            // AssistantMessage to be pushed before Thinking in the vec.
+                            {
+                                let mut i = 1;
+                                while i < all_blocks.len() {
+                                    if matches!(all_blocks[i], MessageBlock::Thinking { .. })
+                                        && matches!(all_blocks[i - 1], MessageBlock::AssistantMessage { .. })
+                                    {
+                                        all_blocks.swap(i - 1, i);
+                                    }
+                                    i += 1;
+                                }
+                            }
                             // Collect all non-empty short labels from ToolCall blocks
                             let tool_labels: std::collections::HashSet<String> = all_blocks.iter()
                                 .filter_map(|b| match b {

src/local.rs

@@ -1345,6 +1345,16 @@ fn extract_builtin_tool_call(
             canonical_path: search.directory_path.clone(),
         });
     }
+    if let Some(ref list) = step_update.list_directory {
+        return Some(ToolCall {
+            id,
+            name: "LIST_DIR".to_string(),
+            args: serde_json::json!({
+                "directory_path": list.directory_path,
+            }),
+            canonical_path: list.directory_path.clone(),
+        });
+    }
     None
 }
 

src/wasm.rs

@@ -1235,6 +1235,16 @@ fn extract_builtin_tool_call(step_update: &StepUpdate) -> Option<ToolCall> {
             canonical_path: search.directory_path.clone(),
         });
     }
+    if let Some(ref list) = step_update.list_directory {
+        return Some(ToolCall {
+            id,
+            name: "LIST_DIR".to_string(),
+            args: serde_json::json!({
+                "directory_path": list.directory_path,
+            }),
+            canonical_path: list.directory_path.clone(),
+        });
+    }
     None
 }
 
@@ -1260,8 +1270,8 @@ fn extract_tool_result(step_update: &StepUpdate) -> Option<ToolResult> {
 mod tests {
     use super::*;
     use crate::proto::localharness::{
-        ActionCreateFile, ActionEditFile, ActionFindFile, ActionRunCommand, ActionViewFile,
-        StepUpdate,
+        ActionCreateFile, ActionEditFile, ActionFindFile, ActionListDirectory, ActionRunCommand,
+        ActionViewFile, StepUpdate,
     };
     use crate::types::{CapabilitiesConfig, GeminiConfig};
     use futures_util::{SinkExt, StreamExt};
@@ -1445,6 +1455,27 @@ mod tests {
             })
         );
 
+        // 5.6 ListDirectory
+        let step_update_list = StepUpdate {
+            trajectory_id: Some("traj_1".to_string()),
+            step_index: Some(8),
+            list_directory: Some(ActionListDirectory {
+                directory_path: Some("list_path".to_string()),
+                results: vec![],
+            }),
+            ..Default::default()
+        };
+        let tc = extract_builtin_tool_call(&step_update_list).unwrap();
+        assert_eq!(tc.id, "traj_1_8");
+        assert_eq!(tc.name, "LIST_DIR");
+        assert_eq!(tc.canonical_path, Some("list_path".to_string()));
+        assert_eq!(
+            tc.args,
+            serde_json::json!({
+                "directory_path": "list_path"
+            })
+        );
+
         // 6. None
         let step_update_none = StepUpdate {
             trajectory_id: Some("traj_1".to_string()),