web: hide tool entries in Sybil Agent transcript

This commit is contained in:
2026-10-14 15:29:50 -07:00
parent 153aa5d2fa
commit 56279fba7f
4 changed files with 100 additions and 111 deletions
@@ -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>
);
});