web: hide tool entries in Sybil Agent transcript

web/src/components/agent/agent-conversation.css

@@ -194,83 +194,6 @@
   color:hsl(189 79% 75%);
 }
 
-.agent-room__tool {
-  margin:0 0 0 35px;
-  max-width:calc(89% - 35px);
-  border:1px solid hsl(256 35% 47%/.23);
-  border-radius:11px;
-  background:hsl(246 32% 12%/.56);
-  color:hsl(255 26% 75%);
-  font-size:11px;
-}
-
-.agent-room__tool summary {
-  display:flex;
-  align-items:center;
-  gap:9px;
-  min-height:37px;
-  padding:8px 11px;
-  cursor:pointer;
-  list-style:none;
-}
-
-.agent-room__tool summary::-webkit-details-marker {
-  display:none;
-}
-
-.agent-room__tool-icon {
-  display:grid;
-  place-items:center;
-  color:hsl(267 69% 76%);
-}
-
-.agent-room__tool-title {
-  min-width:0;
-  flex:1;
-  overflow:hidden;
-  text-overflow:ellipsis;
-  white-space:nowrap;
-  text-transform:capitalize;
-}
-
-.agent-room__tool-state {
-  color:hsl(254 18% 51%);
-  font-size:9px;
-}
-
-.agent-room__tool.is-running .agent-room__tool-state {
-  color:hsl(184 54% 72%);
-}
-
-.agent-room__tool.is-failed .agent-room__tool-state {
-  color:hsl(351 71% 76%);
-}
-
-.agent-room__tool-chevron {
-  color:hsl(255 20% 52%);
-  transition:transform .15s;
-}
-
-.agent-room__tool[open] .agent-room__tool-chevron {
-  transform:rotate(180deg);
-}
-
-.agent-room__tool-body {
-  padding:0 11px 11px;
-}
-
-.agent-room__tool-body pre {
-  max-height:210px;
-  overflow:auto;
-  white-space:pre-wrap;
-  overflow-wrap:anywhere;
-  font:10px/1.6 ui-monospace,monospace;
-  margin:8px 0 0;
-  padding:9px;
-  border-radius:6px;
-  background:hsl(239 42% 6%/.7);
-}
-
 .agent-room__typing,.agent-room__waiting {
   display:flex;
   align-items:center;
@@ -503,10 +426,6 @@
     height:23px;
     border-radius:8px;
   }
-  .agent-room__tool {
-    margin-left:30px;
-    max-width:calc(96% - 30px);
-  }
   .agent-room__typing,.agent-room__waiting {
     margin-left:30px;
     font-size:10px;

web/src/components/agent/agent-conversation.tsx

@@ -1,7 +1,8 @@
 import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "preact/hooks";
-import { ArrowDown, ChevronDown, Clock3, LoaderCircle, Menu, RefreshCw, SendHorizontal, WifiOff, Wrench } from "lucide-preact";
+import { ArrowDown, Clock3, LoaderCircle, Menu, RefreshCw, SendHorizontal, WifiOff } from "lucide-preact";
 import type { Message } from "@/lib/api";
 import type { AgentRoomHookResult } from "@/hooks/use-agent-room";
+import { agentTranscriptMessages } from "@/lib/agent-room-presentation";
 import { MarkdownContent } from "@/components/markdown/markdown-content";
 import { Button } from "@/components/ui/button";
 import "./agent-conversation.css";
@@ -46,29 +47,6 @@ function toolName(value: unknown) {
   return typeof value === "string" ? value.replace(/_/g, " ") : "Tool";
 }
 
-function AgentToolCard({ message }: { message: Message }) {
-  const info = metadata(message);
-  const active = info.status === "initiated";
-  const failed = info.status === "failed";
-  const title = toolName(info.toolName || message.name);
-  const preview = typeof info.resultPreview === "string" ? info.resultPreview : typeof info.error === "string" ? info.error : "";
-  return (
-    <details className={`agent-room__tool${active ? " is-running" : ""}${failed ? " is-failed" : ""}`} data-agent-message-id={message.id}>
-      <summary>
-        <span className="agent-room__tool-icon"><Wrench size={14} aria-hidden="true" /></span>
-        <span className="agent-room__tool-title">{title}</span>
-        <span className="agent-room__tool-state">{active ? "Running" : failed ? "Failed" : "Done"}</span>
-        <ChevronDown className="agent-room__tool-chevron" size={14} aria-hidden="true" />
-      </summary>
-      <div className="agent-room__tool-body">
-        {info.args && typeof info.args === "object" ? <pre aria-label="Tool input">{JSON.stringify(info.args, null, 2)}</pre> : null}
-        {preview ? <pre aria-label={failed ? "Tool error" : "Tool result"}>{preview}</pre> : null}
-        {!info.args && !preview ? <p>{active ? "This tool is still running." : "No additional details."}</p> : null}
-      </div>
-    </details>
-  );
-}
-
 function AgentBubble({ message, animate, onRetry }: { message: Message; animate: boolean; onRetry: (id: string) => void }) {
   const own = message.role === "user";
   const info = metadata(message);
@@ -254,21 +232,22 @@ export function AgentConversation({ room, onOpenSidebar, isVisible = true }: Pro
   };
 
   const messages = useMemo(() => {
+    const transcript = agentTranscriptMessages(room.messages);
     let previousDay = "";
-    for (const message of room.messages) {
-      if (!seenMessageIdsRef.current.has(message.id) && historyReadyRef.current && !room.isLoading && message.role !== "tool") {
+    for (const message of transcript) {
+      if (!seenMessageIdsRef.current.has(message.id) && historyReadyRef.current && !room.isLoading) {
         enteringMessageIdsRef.current.add(message.id);
       }
       seenMessageIdsRef.current.add(message.id);
     }
     if (!room.isLoading) historyReadyRef.current = true;
-    return room.messages.filter(message => message.role !== "system").map(message => {
+    return transcript.map(message => {
       const date = dateOf(message.createdAt), day = dayKey(date), separator = previousDay !== day;
       previousDay = day;
       return (
         <div className="agent-room__entry" key={message.id} data-agent-entry-id={message.id}>
           {separator ? <div className="agent-room__day"><span>{dayLabel(date)}</span></div> : null}
-          {message.role === "tool" ? <AgentToolCard message={message} /> : <AgentBubble message={message} animate={enteringMessageIdsRef.current.has(message.id)} onRetry={retryMessage} />}
+          <AgentBubble message={message} animate={enteringMessageIdsRef.current.has(message.id)} onRetry={retryMessage} />
         </div>
       );
     });

web/src/lib/agent-room-presentation.ts

@@ -1,6 +1,11 @@
 import type { AgentRoomEvent, AgentRoomState } from './agent-room';
 import type { Message } from './api';
 
+/** Select transcript rows only; keep tool entries in room state for replay and activity. */
+export function agentTranscriptMessages(messages: readonly Message[]): Message[] {
+  return messages.filter(message => message.role !== 'system' && message.role !== 'tool');
+}
+
 type Scheduler = {
   now(): number;
   schedule(callback: () => void, delay: number): unknown;