feat(frontend): sessions list/create + steering + resume + selectors

- NavSessions: left nav listing sessions via listSessions (TanStack Query), clicking resumes via resumeSession and sets active; active item highlighted - NewSessionDialog: ShadCn dialog with question textarea, workspace native select (from listWorkspaces), graceful model field (dropdown when models list is non-empty, free-text input when empty per §9 degradation), optional thinking/provider fields; try/catch surfaces errors inline - SteerInput: text input + button POSTs to postSteer, clears on send, supports Enter key; only shown when a session is active - WorkflowBar: renders 8 phases (F1..F8) with data-active highlighting driven by useSessionStore.currentPhase (new store field + setPhase action) - AppShell: wires all four components; right artifact sidebar now collapsible via a toggle button (useState sidebarOpen); replaces old "Nuova domanda" button with NewSessionDialog trigger - f1-loop.test: updated to drive through the new dialog flow (open → fill question → submit → wait for SSE → respond) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-06-28 13:06:01 +02:00
parent 3ecfed5d3d
commit 544882f95b
9 changed files with 547 additions and 22 deletions
@@ -0,0 +1,81 @@
+// frontend/src/shell/NavSessions.test.tsx
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { http, HttpResponse } from "msw";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { server } from "../test/msw";
+import { NavSessions } from "./NavSessions";
+
+function makeClient() {
+  return new QueryClient({ defaultOptions: { queries: { retry: false } } });
+}
+
+function renderWithClient(ui: React.ReactElement) {
+  const client = makeClient();
+  return render(<QueryClientProvider client={client}>{ui}</QueryClientProvider>);
+}
+
+const SESSION_LIST = [
+  {
+    id: "s1",
+    status: "open",
+    question: "Come va?",
+    summary: null,
+    created_at: "2026-01-01T00:00:00Z",
+    updated_at: null,
+    author: null,
+  },
+  {
+    id: "s2",
+    status: "closed",
+    question: "Seconda domanda",
+    summary: "riassunto",
+    created_at: "2026-01-02T00:00:00Z",
+    updated_at: null,
+    author: null,
+  },
+];
+
+beforeEach(() => {
+  server.use(
+    http.get("http://localhost:8787/sessions", () =>
+      HttpResponse.json(SESSION_LIST),
+    ),
+    http.post("http://localhost:8787/sessions/:id/resume", () =>
+      new HttpResponse(null, { status: 204 }),
+    ),
+  );
+});
+
+test("lists sessions loaded from listSessions", async () => {
+  const onSelect = vi.fn();
+  renderWithClient(<NavSessions onSessionSelect={onSelect} activeSessionId={null} />);
+  await screen.findByText(/Come va\?/);
+  expect(screen.getByText(/Seconda domanda/)).toBeInTheDocument();
+});
+
+test("clicking a session calls resumeSession and onSessionSelect", async () => {
+  const onSelect = vi.fn();
+  let resumeCalledWith: string | null = null;
+  server.use(
+    http.post("http://localhost:8787/sessions/:id/resume", ({ params }) => {
+      resumeCalledWith = params.id as string;
+      return new HttpResponse(null, { status: 204 });
+    }),
+  );
+  renderWithClient(<NavSessions onSessionSelect={onSelect} activeSessionId={null} />);
+  await screen.findByText(/Come va\?/);
+  await userEvent.click(screen.getByText(/Come va\?/));
+  await waitFor(() => {
+    expect(resumeCalledWith).toBe("s1");
+    expect(onSelect).toHaveBeenCalledWith("s1");
+  });
+});
+
+test("active session is visually highlighted", async () => {
+  const onSelect = vi.fn();
+  renderWithClient(<NavSessions onSessionSelect={onSelect} activeSessionId="s2" />);
+  await screen.findByText(/Seconda domanda/);
+  const activeItem = screen.getByTestId("session-item-s2");
+  expect(activeItem).toHaveAttribute("data-active", "true");
+});