marcopanandClaude Opus 4.8
d67409ff16
- Center ThothII logo + tagline; break "Human In The Loop" onto a second line - Rename "New question" → "New session"; the button now clears the screen and focuses the sticky bottom composer instead of opening a dialog - Composer is always rendered and pinned at the bottom; typing the first message there creates the session (no modal) - Add inline stop control (square + inner circle) that interrupts and saves the session via /close - Always-present send affordance (CornerDownLeft ↵) on the right of the box - Status footer under the box: mic (inert), model name, thinking level, and a context-usage gauge (placeholder) - Brand-tinted spinner beside the logo while the harness/backend holds the ball; hidden once a widget needs human input Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
57 lines
2.3 KiB
TypeScript
57 lines
2.3 KiB
TypeScript
// frontend/src/shell/f1-loop.test.tsx
|
|
import { render, screen, waitFor } from "@testing-library/react";
|
|
import userEvent from "@testing-library/user-event";
|
|
import { http, HttpResponse } from "msw";
|
|
import { act } from "react";
|
|
import { server } from "../test/msw";
|
|
import { FakeEventSource } from "../test/fakeEventSource";
|
|
import { App } from "../App";
|
|
import { useSessionStore } from "../store/sessionStore";
|
|
|
|
beforeEach(() => {
|
|
FakeEventSource.instances = [];
|
|
(globalThis as any).EventSource = FakeEventSource;
|
|
useSessionStore.getState().resetSession();
|
|
});
|
|
|
|
test("F1: create session -> widget via SSE -> respond -> POST /response", async () => {
|
|
let responded: any = null;
|
|
server.use(
|
|
http.post("http://localhost:8787/sessions", () => HttpResponse.json({ id: "s1" })),
|
|
http.get("http://localhost:8787/sessions", () => HttpResponse.json([])),
|
|
http.get("http://localhost:8787/workspaces", () =>
|
|
HttpResponse.json([{ name: "default", file: "default.db" }]),
|
|
),
|
|
http.get("http://localhost:8787/models", () => HttpResponse.json({ models: [] })),
|
|
http.post("http://localhost:8787/sessions/s1/response", async ({ request }) => {
|
|
responded = await request.json();
|
|
return new HttpResponse(null, { status: 204 });
|
|
}),
|
|
);
|
|
render(<App />);
|
|
|
|
// Type the first question directly in the sticky composer and send it
|
|
const composer = screen.getByRole("textbox", { name: /new question/i });
|
|
await userEvent.type(composer, "Quante vendite?");
|
|
await userEvent.click(screen.getByRole("button", { name: /send/i }));
|
|
|
|
// Wait for the session to be created and SSE to connect
|
|
await waitFor(() => expect(FakeEventSource.instances).toHaveLength(1));
|
|
|
|
// Simulate the backend emitting the F1 widget via a NAMED SSE event
|
|
// (`event: ui_request`) — the same addEventListener path production uses.
|
|
act(() =>
|
|
FakeEventSource.instances[0].emitNamed("ui_request", {
|
|
type: "ui_request",
|
|
ui_request: {
|
|
id: "u1",
|
|
widget: "select",
|
|
title: "Disambigua",
|
|
options: [{ id: "a", label: "interpretazione A" }],
|
|
},
|
|
})
|
|
);
|
|
await userEvent.click(await screen.findByRole("button", { name: /interpretazione A/ }));
|
|
expect(responded).toEqual({ ui_response: { id: "u1", kind: "select", choices: ["a"] } });
|
|
});
|