fix(frontend): show complete model activity from phase one
This commit is contained in:
User
@@ -1,80 +1,162 @@
|
||||
import { render, screen } from "@testing-library/react";
|
||||
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 { useSessionStore } from "../store/sessionStore";
|
||||
import { ModelActivityPanel } from "./ModelActivityPanel";
|
||||
import { isNearBottom, ModelActivityPanel } from "./ModelActivityPanel";
|
||||
|
||||
beforeEach(() => useSessionStore.getState().resetSession());
|
||||
|
||||
test("renders the streamed model activity", () => {
|
||||
useSessionStore.getState().applyEvent({ type: "activity_delta", text: "Promoting table dim_patient." });
|
||||
render(<ModelActivityPanel onClose={vi.fn()} />);
|
||||
expect(screen.getByText(/Promoting table dim_patient/)).toBeInTheDocument();
|
||||
});
|
||||
test("renders every row in a non-reasoning activity sequence", () => {
|
||||
const store = useSessionStore.getState();
|
||||
store.setPhase("F1");
|
||||
store.setLastUserEntry({ kind: "input", text: "How many patients?" });
|
||||
store.applyEvent({ type: "system_event", event: "agent_start" });
|
||||
store.applyEvent({
|
||||
type: "activity_event",
|
||||
activity: { kind: "tool", toolCallId: "tool-1", toolName: "bash", status: "running" },
|
||||
});
|
||||
store.applyEvent({
|
||||
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: "ui_request",
|
||||
ui_request: { id: "gate-1", widget: "select", phase: "F1_review", title: "Confirm cohort" },
|
||||
});
|
||||
|
||||
test("does not treat final assistant text as model reasoning", () => {
|
||||
useSessionStore.getState().applyEvent({ type: "text_delta", text: "Final answer" });
|
||||
render(<ModelActivityPanel onClose={vi.fn()} />);
|
||||
|
||||
expect(screen.queryByText("Final answer")).not.toBeInTheDocument();
|
||||
expect(screen.getByText("No activity yet.")).toBeInTheDocument();
|
||||
expect(screen.getAllByRole("article")).toHaveLength(5);
|
||||
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("Confirm cohort")).toBeInTheDocument();
|
||||
expect(screen.getAllByText("F1")).toHaveLength(5);
|
||||
});
|
||||
|
||||
test("renders markdown emphasis instead of literal asterisks", () => {
|
||||
useSessionStore.getState().applyEvent({ type: "activity_delta", text: "Chiarimento su **fibrillazione atriale**." });
|
||||
test("keeps all timeline entries visible without an expansion control", () => {
|
||||
const activityLog: ActivityEntry[] = Array.from({ length: 8 }, (_, index) => ({
|
||||
kind: "lifecycle",
|
||||
phase: `F${index + 1}`,
|
||||
text: `timeline-${index + 1}`,
|
||||
}));
|
||||
useSessionStore.setState({ activityLog });
|
||||
|
||||
render(<ModelActivityPanel onClose={vi.fn()} />);
|
||||
expect(screen.getByText("fibrillazione atriale").tagName).toBe("STRONG");
|
||||
|
||||
for (const entry of activityLog) expect(screen.getByText(entry.text)).toBeInTheDocument();
|
||||
expect(screen.queryByRole("button", { name: /show (more|less)/i })).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
test("close button calls onClose", async () => {
|
||||
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: [
|
||||
{ kind: "status", phase: "F3", text: "Retrying retrieval", level: "warning" },
|
||||
],
|
||||
});
|
||||
|
||||
render(<ModelActivityPanel onClose={vi.fn()} />);
|
||||
|
||||
const row = screen.getByText("Retrying retrieval").closest("article");
|
||||
expect(row).not.toBeNull();
|
||||
expect(within(row!).getByText("warning")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
test("renders assistant and thinking markdown as separate entries", () => {
|
||||
useSessionStore.setState({
|
||||
activityLog: [
|
||||
{ kind: "thinking", phase: "F2", text: "Considering **history**." },
|
||||
{ kind: "assistant", phase: "F2", text: "Use *current* records." },
|
||||
],
|
||||
});
|
||||
|
||||
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);
|
||||
});
|
||||
|
||||
test("close calls onClose without mutating the activity log", async () => {
|
||||
const onClose = vi.fn();
|
||||
const activityLog: ActivityEntry[] = [
|
||||
{ kind: "prompt", phase: "F1", text: "Keep this row" },
|
||||
];
|
||||
useSessionStore.setState({ activityLog });
|
||||
render(<ModelActivityPanel onClose={onClose} />);
|
||||
await userEvent.click(screen.getByRole("button", { name: /close/i }));
|
||||
expect(onClose).toHaveBeenCalled();
|
||||
|
||||
await userEvent.click(screen.getByRole("button", { name: /close model activity/i }));
|
||||
|
||||
expect(onClose).toHaveBeenCalledOnce();
|
||||
expect(useSessionStore.getState().activityLog).toEqual(activityLog);
|
||||
});
|
||||
|
||||
const EIGHT = ["para-01", "para-02", "para-03", "para-04", "para-05", "para-06", "para-07", "para-08"].join("\n\n");
|
||||
|
||||
test("collapsed shows only the last 5 paragraphs of the model-stream tail", () => {
|
||||
useSessionStore.getState().applyEvent({ type: "activity_delta", text: EIGHT });
|
||||
render(<ModelActivityPanel onClose={vi.fn()} />);
|
||||
expect(screen.getByText("para-08")).toBeInTheDocument();
|
||||
expect(screen.getByText("para-04")).toBeInTheDocument();
|
||||
expect(screen.queryByText("para-03")).not.toBeInTheDocument();
|
||||
expect(screen.queryByText("para-01")).not.toBeInTheDocument();
|
||||
test("isNearBottom includes the 48px boundary", () => {
|
||||
expect(isNearBottom({ scrollHeight: 500, clientHeight: 100, scrollTop: 352 })).toBe(true);
|
||||
expect(isNearBottom({ scrollHeight: 500, clientHeight: 100, scrollTop: 351 })).toBe(false);
|
||||
expect(isNearBottom({ scrollHeight: 500, clientHeight: 100, scrollTop: 400 })).toBe(true);
|
||||
});
|
||||
|
||||
test("expanding reveals the full stream", async () => {
|
||||
useSessionStore.getState().applyEvent({ type: "activity_delta", text: EIGHT });
|
||||
render(<ModelActivityPanel onClose={vi.fn()} />);
|
||||
await userEvent.click(screen.getByRole("button", { name: /show more/i }));
|
||||
expect(screen.getByText("para-01")).toBeInTheDocument();
|
||||
});
|
||||
function setScrollGeometry(
|
||||
element: HTMLElement,
|
||||
values: { scrollHeight: number; clientHeight: number; scrollTop: number },
|
||||
) {
|
||||
Object.defineProperties(element, {
|
||||
scrollHeight: { configurable: true, value: values.scrollHeight },
|
||||
clientHeight: { configurable: true, value: values.clientHeight },
|
||||
scrollTop: { configurable: true, writable: true, value: values.scrollTop },
|
||||
});
|
||||
}
|
||||
|
||||
test("paragraphs stay separated as distinct blocks", () => {
|
||||
useSessionStore
|
||||
.getState()
|
||||
.applyEvent({ type: "activity_delta", text: "Primo paragrafo.\n\nSecondo paragrafo." });
|
||||
render(<ModelActivityPanel onClose={vi.fn()} />);
|
||||
const first = screen.getByText("Primo paragrafo.");
|
||||
const second = screen.getByText("Secondo paragrafo.");
|
||||
expect(first.tagName).toBe("P");
|
||||
expect(second.tagName).toBe("P");
|
||||
expect(first).not.toBe(second);
|
||||
});
|
||||
|
||||
|
||||
test("separates activity updates concatenated after sentence punctuation", () => {
|
||||
useSessionStore.getState().applyEvent({
|
||||
type: "activity_delta",
|
||||
text: "Ambiguità principale risolta.Finestra temporale risolta.Terza ambiguità risolta.",
|
||||
test("follows appended activity while the viewport is near the bottom", () => {
|
||||
useSessionStore.setState({
|
||||
activityLog: [{ kind: "lifecycle", phase: "F1", text: "First" }],
|
||||
});
|
||||
render(<ModelActivityPanel onClose={vi.fn()} />);
|
||||
const viewport = screen.getByTestId("activity-scroll");
|
||||
setScrollGeometry(viewport, { scrollHeight: 400, clientHeight: 100, scrollTop: 300 });
|
||||
|
||||
const first = screen.getByText("Ambiguità principale risolta.");
|
||||
const second = screen.getByText("Finestra temporale risolta.");
|
||||
const third = screen.getByText("Terza ambiguità risolta.");
|
||||
expect(first.tagName).toBe("P");
|
||||
expect(second.tagName).toBe("P");
|
||||
expect(third.tagName).toBe("P");
|
||||
act(() => useSessionStore.getState().recordLifecycle("Second"));
|
||||
|
||||
expect(viewport.scrollTop).toBe(400);
|
||||
expect(viewport).toHaveAttribute("tabindex", "0");
|
||||
});
|
||||
|
||||
test("preserves manual scroll position when appended activity arrives", () => {
|
||||
useSessionStore.setState({
|
||||
activityLog: [{ kind: "lifecycle", 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"));
|
||||
|
||||
expect(viewport.scrollTop).toBe(100);
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user