fix(frontend): hide model activity execution noise

This commit is contained in:
User
2026-07-15 03:24:22 +02:00
parent e9cbc2b701
commit 72085990ef
3 changed files with 95 additions and 47 deletions
+19 -5
View File
@@ -2,10 +2,21 @@ import { useLayoutEffect, useRef } from "react";
import { X } from "lucide-react";
import ReactMarkdown from "react-markdown";
import remarkGfm from "remark-gfm";
import type { ActivityEntry } from "../api/types";
import type { ActivityEntry, ActivityKind } from "../api/types";
import { useSessionStore } from "../store/sessionStore";
import { Button } from "../components/ui/button";
const VISIBLE_MODEL_ACTIVITY_KINDS: ReadonlySet<ActivityKind> = new Set([
"prompt",
"thinking",
"status",
"gate",
]);
export function isVisibleModelActivity(entry: ActivityEntry): boolean {
return VISIBLE_MODEL_ACTIVITY_KINDS.has(entry.kind);
}
export function isNearBottom(
el: Pick<HTMLElement, "scrollHeight" | "clientHeight" | "scrollTop">,
threshold = 48,
@@ -85,16 +96,19 @@ function ActivityRow({ entry }: { entry: ActivityEntry }) {
);
}
/** Left drawer showing the complete in-memory model activity timeline. */
/** Left drawer showing the user-facing projection of the in-memory model activity timeline. */
export function ModelActivityPanel({ onClose }: { onClose: () => void }) {
const activityLog = useSessionStore((s) => s.activityLog);
const visibleActivity = activityLog.filter(isVisibleModelActivity);
const visibleCount = visibleActivity.length;
const visibleTail = visibleActivity.at(-1);
const scrollRef = useRef<HTMLDivElement>(null);
const followRef = useRef(true);
useLayoutEffect(() => {
const viewport = scrollRef.current;
if (viewport && followRef.current) viewport.scrollTop = viewport.scrollHeight;
}, [activityLog]);
}, [visibleCount, visibleTail]);
return (
<aside className="flex w-2/5 shrink-0 flex-col border-r border-border bg-sidebar">
@@ -114,10 +128,10 @@ export function ModelActivityPanel({ onClose }: { onClose: () => void }) {
followRef.current = isNearBottom(event.currentTarget);
}}
>
{activityLog.length === 0 ? (
{visibleActivity.length === 0 ? (
<p className="py-3 text-sm text-muted-foreground">No activity yet.</p>
) : (
activityLog.map((entry, index) => (
visibleActivity.map((entry, index) => (
<ActivityRow key={`${index}-${entry.toolCallId ?? entry.kind}`} entry={entry} />
))
)}