mptyl/ThothII
1
0
Fork 0
Code Issues 25 Pull Requests Actions Packages Projects Releases 1 Wiki Activity

fix(frontend): hide model activity execution noise

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/shell/AppShell.session-mgmt.test.tsx
+5 -4
View File
@@ -714,8 +714,8 @@ test("closing and reopening Model activity preserves the complete activity log",
const panel = (await screen.findByRole("heading", { name: /model activity/i })).closest("aside");
expect(panel).not.toBeNull();
expect(within(panel!).getByText("Inspect patient cohort")).toBeInTheDocument();
expect(within(panel!).getByText("bash")).toBeInTheDocument();
expect(within(panel!).getByText("Cohort ready")).toBeInTheDocument();
expect(within(panel!).queryByText("bash")).not.toBeInTheDocument();
expect(within(panel!).queryByText("Cohort ready")).not.toBeInTheDocument();
await userEvent.click(screen.getByRole("button", { name: /close model activity/i }));
expect(screen.queryByRole("heading", { name: /model activity/i })).not.toBeInTheDocument();
@@ -725,8 +725,9 @@ test("closing and reopening Model activity preserves the complete activity log",
const reopened = (await screen.findByRole("heading", { name: /model activity/i })).closest("aside");
expect(reopened).not.toBeNull();
expect(within(reopened!).getByText("Inspect patient cohort")).toBeInTheDocument();
expect(within(reopened!).getByText("bash")).toBeInTheDocument();
expect(within(reopened!).getByText("Cohort ready")).toBeInTheDocument();
expect(within(reopened!).queryByText("bash")).not.toBeInTheDocument();
expect(within(reopened!).queryByText("Cohort ready")).not.toBeInTheDocument();
expect(useSessionStore.getState().activityLog).toEqual(beforeClose);
});
test("session finalization shows the completion banner and returns to landing", async () => {
frontend/src/shell/ModelActivityPanel.test.tsx
+71 -38
View File
@@ -1,13 +1,14 @@
import { act, fireEvent, render, screen, within } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { beforeEach, vi } from "vitest";
import type { ActivityEntry } from "../api/types";
import type { ActivityEntry, ActivityKind } from "../api/types";
import { useSessionStore } from "../store/sessionStore";
import * as activityPanelModule from "./ModelActivityPanel";
import { isNearBottom, ModelActivityPanel } from "./ModelActivityPanel";
beforeEach(() => useSessionStore.getState().resetSession());
test("renders every row in a non-reasoning activity sequence", () => {
test("renders only prompt, thinking, status, and gate from a mixed F1 sequence", () => {
const store = useSessionStore.getState();
store.setPhase("F1");
store.setLastUserEntry({ kind: "input", text: "How many patients?" });
@@ -20,7 +21,9 @@ test("renders every row in a non-reasoning activity sequence", () => {
type: "activity_event",
activity: { kind: "tool", toolCallId: "tool-1", toolName: "bash", status: "completed" },
});
store.applyEvent({ type: "text_delta", text: "Found **42 patients**." });
store.applyEvent({ type: "text_delta", text: "Let me run another bash search." });
store.applyEvent({ type: "activity_delta", text: "Inspecting **schema**." });
store.applyEvent({ type: "info", level: "warning", text: "Retrying schema lookup" });
store.applyEvent({
type: "ui_request",
ui_request: { id: "gate-1", widget: "select", phase: "F1_review", title: "Confirm cohort" },
@@ -28,18 +31,54 @@ test("renders every row in a non-reasoning activity sequence", () => {
render(<ModelActivityPanel onClose={vi.fn()} />);
expect(screen.getAllByRole("article")).toHaveLength(5);
expect(screen.getAllByRole("article")).toHaveLength(4);
expect(screen.getByText("How many patients?")).toBeInTheDocument();
expect(screen.getByText("Agent started")).toBeInTheDocument();
expect(screen.getByText("bash")).toBeInTheDocument();
expect(screen.getByText("42 patients").tagName).toBe("STRONG");
expect(screen.getByText("schema").tagName).toBe("STRONG");
expect(screen.getByText("Retrying schema lookup")).toBeInTheDocument();
expect(screen.getByText("Confirm cohort")).toBeInTheDocument();
expect(screen.getAllByText("F1")).toHaveLength(5);
expect(screen.queryByText("Agent started")).not.toBeInTheDocument();
expect(screen.queryByText("bash")).not.toBeInTheDocument();
expect(screen.queryByText("completed")).not.toBeInTheDocument();
expect(screen.queryByText("Let me run another bash search.")).not.toBeInTheDocument();
expect(useSessionStore.getState().transcript).toEqual([
{ role: "assistant", text: "Let me run another bash search." },
]);
});
test("uses an explicit default-deny activity-kind allowlist", () => {
const predicate = (activityPanelModule as unknown as {
isVisibleModelActivity?: (entry: ActivityEntry) => boolean;
}).isVisibleModelActivity;
expect(predicate).toBeTypeOf("function");
if (!predicate) return;
for (const kind of ["prompt", "thinking", "status", "gate"] satisfies ActivityKind[]) {
expect(predicate({ kind, phase: "F1", text: kind })).toBe(true);
}
for (const kind of ["assistant", "tool", "lifecycle"] satisfies ActivityKind[]) {
expect(predicate({ kind, phase: "F1", text: kind })).toBe(false);
}
expect(predicate({ kind: "future-kind" as ActivityKind, phase: "F1", text: "future" })).toBe(false);
});
test("shows the empty state when the raw log contains only hidden entries", () => {
useSessionStore.setState({
activityLog: [
{ kind: "assistant", phase: "F1", text: "Let me try another command." },
{ kind: "tool", phase: "F1", text: "bash", toolCallId: "tool-1", status: "completed" },
{ kind: "lifecycle", phase: "F1", text: "Turn end" },
],
});
render(<ModelActivityPanel onClose={vi.fn()} />);
expect(screen.getByText("No activity yet.")).toBeInTheDocument();
expect(screen.queryAllByRole("article")).toHaveLength(0);
});
test("keeps all timeline entries visible without an expansion control", () => {
const activityLog: ActivityEntry[] = Array.from({ length: 8 }, (_, index) => ({
kind: "lifecycle",
kind: "status",
phase: `F${index + 1}`,
text: `timeline-${index + 1}`,
}));
@@ -51,28 +90,6 @@ test("keeps all timeline entries visible without an expansion control", () => {
expect(screen.queryByRole("button", { name: /show (more|less)/i })).not.toBeInTheDocument();
});
test("shows only the tool name and completion status", () => {
useSessionStore.setState({
activityLog: [
{
kind: "tool",
phase: "F4",
text: "bash",
toolCallId: "tool-1",
status: "completed",
},
],
});
render(<ModelActivityPanel onClose={vi.fn()} />);
const row = screen.getByText("bash").closest("article");
expect(row).not.toBeNull();
expect(within(row!).getByText("completed")).toBeInTheDocument();
expect(within(row!).queryByRole("button")).not.toBeInTheDocument();
expect(screen.queryByText(/raw details/i)).not.toBeInTheDocument();
});
test("labels a warning in text instead of relying on its semantic color", () => {
useSessionStore.setState({
activityLog: [
@@ -87,7 +104,7 @@ test("labels a warning in text instead of relying on its semantic color", () =>
expect(within(row!).getByText("warning")).toBeInTheDocument();
});
test("renders assistant and thinking markdown as separate entries", () => {
test("renders thinking markdown without assistant narration", () => {
useSessionStore.setState({
activityLog: [
{ kind: "thinking", phase: "F2", text: "Considering **history**." },
@@ -98,8 +115,8 @@ test("renders assistant and thinking markdown as separate entries", () => {
render(<ModelActivityPanel onClose={vi.fn()} />);
expect(screen.getByText("history").tagName).toBe("STRONG");
expect(screen.getByText("current").tagName).toBe("EM");
expect(screen.getAllByRole("article")).toHaveLength(2);
expect(screen.queryByText("current")).not.toBeInTheDocument();
expect(screen.getAllByRole("article")).toHaveLength(1);
});
test("close calls onClose without mutating the activity log", async () => {
@@ -136,13 +153,13 @@ function setScrollGeometry(
test("follows appended activity while the viewport is near the bottom", () => {
useSessionStore.setState({
activityLog: [{ kind: "lifecycle", phase: "F1", text: "First" }],
activityLog: [{ kind: "prompt", phase: "F1", text: "First" }],
});
render(<ModelActivityPanel onClose={vi.fn()} />);
const viewport = screen.getByTestId("activity-scroll");
setScrollGeometry(viewport, { scrollHeight: 400, clientHeight: 100, scrollTop: 300 });
act(() => useSessionStore.getState().recordLifecycle("Second"));
act(() => useSessionStore.getState().applyEvent({ type: "info", text: "Second" }));
expect(viewport.scrollTop).toBe(400);
expect(viewport).toHaveAttribute("tabindex", "0");
@@ -150,14 +167,30 @@ test("follows appended activity while the viewport is near the bottom", () => {
test("preserves manual scroll position when appended activity arrives", () => {
useSessionStore.setState({
activityLog: [{ kind: "lifecycle", phase: "F1", text: "First" }],
activityLog: [{ kind: "prompt", phase: "F1", text: "First" }],
});
render(<ModelActivityPanel onClose={vi.fn()} />);
const viewport = screen.getByTestId("activity-scroll");
setScrollGeometry(viewport, { scrollHeight: 400, clientHeight: 100, scrollTop: 100 });
fireEvent.scroll(viewport);
act(() => useSessionStore.getState().recordLifecycle("Second"));
act(() => useSessionStore.getState().applyEvent({ type: "info", text: "Second" }));
expect(viewport.scrollTop).toBe(100);
});
test("does not bottom-follow when only a hidden event arrives", () => {
useSessionStore.setState({
activityLog: [{ kind: "prompt", phase: "F1", text: "Visible prompt" }],
});
render(<ModelActivityPanel onClose={vi.fn()} />);
const viewport = screen.getByTestId("activity-scroll");
setScrollGeometry(viewport, { scrollHeight: 400, clientHeight: 100, scrollTop: 300 });
act(() => useSessionStore.getState().applyEvent({
type: "activity_event",
activity: { kind: "tool", toolCallId: "tool-2", toolName: "bash", status: "running" },
}));
expect(viewport.scrollTop).toBe(300);
});
frontend/src/shell/ModelActivityPanel.tsx
+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} />
))
)}