Streamline tool-call header DOM

packages/ui/src/components/tool-call.tsx

@@ -1192,11 +1192,15 @@ export default function ToolCall(props: ToolCallProps) {
       }}
       class={`tool-call ${combinedStatusClass()}`}
     >
-      <button class="tool-call-header" onClick={toggle} aria-expanded={expanded()}>
+      <button
-        <span class="tool-call-icon">{expanded() ? "▼" : "▶"}</span>
+        class="tool-call-header"
-        <span class="tool-call-emoji">{getToolIcon(toolName())}</span>
+        onClick={toggle}
-        <span class="tool-call-summary">{renderToolTitle()}</span>
+        aria-expanded={expanded()}
-        <span class="tool-call-status">{statusIcon()}</span>
+        data-status-icon={statusIcon()}
+      >
+        <span class="tool-call-summary" data-tool-icon={getToolIcon(toolName())}>
+          {renderToolTitle()}
+        </span>
       </button>
 
       <Show when={expanded()}>

packages/ui/src/styles/messaging/tool-call.css

@@ -85,20 +85,46 @@
   border-radius: 0;
 }
 
+.tool-call-header::before {
+  content: "▶";
+  font-size: 11px;
+  margin-right: 0.35rem;
+  color: var(--text-muted);
+}
+
+.tool-call-header[aria-expanded="true"]::before {
+  content: "▼";
+}
+
+.tool-call-header::after {
+  content: attr(data-status-icon);
+  font-size: 0.95rem;
+  margin-left: 0.5rem;
+}
+
+.tool-call-header[data-status-icon=""]::after {
+  margin-left: 0;
+}
+
 .tool-call-header:hover {
   background-color: var(--surface-hover);
 }
 
-.tool-call-icon {
-  @apply text-xs;
-}
-
 .tool-call-summary {
-  @apply flex-1 text-left;
+  @apply flex-1 text-left inline-flex items-center gap-2;
 }
 
-.tool-call-status {
+.tool-call-summary::before {
-  @apply text-sm;
+  content: attr(data-tool-icon);
+}
+
+.tool-call-summary[data-tool-icon=""]::before {
+  margin-right: 0;
+  content: "";
+}
+
+.tool-call-summary[data-tool-icon]:not([data-tool-icon=""])::before {
+  margin-right: 0.35rem;
 }
 
 .tool-call-status-success {