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>

frontend/src/shell/AppShell.tsx

@@ -1,46 +1,62 @@
 import { useState } from "react";
-import { createSession } from "../api/sessions";
 import { useSessionStream } from "../stream/useSessionStream";
 import { WidgetHost } from "./WidgetHost";
+import { NavSessions } from "./NavSessions";
+import { NewSessionDialog } from "./NewSessionDialog";
+import { SteerInput } from "./SteerInput";
+import { WorkflowBar } from "./WorkflowBar";
 
 export function AppShell() {
   const [activeSessionId, setActiveSessionId] = useState<string | null>(null);
+  const [sidebarOpen, setSidebarOpen] = useState(true);
 
   useSessionStream(activeSessionId);
 
-  async function handleNuovaDomanda() {
+  function handleSessionSelect(id: string) {
-    const { id } = await createSession({ workspace: "default", question: "" });
+    setActiveSessionId(id);
+  }
+
+  function handleCreated(id: string) {
     setActiveSessionId(id);
   }
 
   return (
     <div className="flex h-screen">
-      {/* Left nav / session list */}
+      {/* Left nav: new session button + sessions list */}
       <aside className="w-48 border-r p-2 flex flex-col gap-2">
-        <button
+        <NewSessionDialog onCreated={handleCreated} />
-          className="border rounded px-2 py-1 text-sm hover:bg-accent"
+        <NavSessions
-          onClick={handleNuovaDomanda}
+          activeSessionId={activeSessionId}
-        >
+          onSessionSelect={handleSessionSelect}
-          Nuova domanda
+        />
-        </button>
       </aside>
 
-      <div className="flex flex-col flex-1">
+      <div className="flex flex-col flex-1 min-w-0">
         {/* Top workflow bar */}
-        <header className="border-b px-4 py-2 text-sm text-muted-foreground">
+        <header className="border-b px-4 py-2 flex items-center gap-4">
-          Workflow
+          <WorkflowBar />
+          <button
+            className="ml-auto text-xs text-muted-foreground hover:text-foreground border rounded px-2 py-0.5"
+            onClick={() => setSidebarOpen((v) => !v)}
+            aria-label={sidebarOpen ? "Chiudi sidebar" : "Apri sidebar"}
+          >
+            {sidebarOpen ? "←" : "→"}
+          </button>
         </header>
 
-        {/* Center: chat + input */}
+        {/* Center: chat + steer input */}
-        <main className="flex-1 overflow-auto p-4">
+        <main className="flex-1 overflow-auto p-4 flex flex-col gap-2">
           <WidgetHost sessionId={activeSessionId} />
+          {activeSessionId && <SteerInput sessionId={activeSessionId} />}
         </main>
       </div>
 
-      {/* Right artifact sidebar */}
+      {/* Right artifact sidebar — collapsible */}
-      <aside className="w-64 border-l p-2">
+      {sidebarOpen && (
-        <p className="text-xs text-muted-foreground">Artefatti</p>
+        <aside className="w-64 border-l p-2 flex flex-col">
-      </aside>
+          <p className="text-xs text-muted-foreground">Artefatti</p>
+        </aside>
+      )}
     </div>
   );
 }

frontend/src/shell/NavSessions.test.tsx

@@ -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");
+});

frontend/src/shell/NavSessions.tsx

@@ -0,0 +1,44 @@
+// frontend/src/shell/NavSessions.tsx
+import { useQuery } from "@tanstack/react-query";
+import { listSessions } from "../api/sessions";
+import { resumeSession } from "../api/sessions";
+import type { SessionSummary } from "../api/types";
+
+interface Props {
+  activeSessionId: string | null;
+  onSessionSelect: (id: string) => void;
+}
+
+export function NavSessions({ activeSessionId, onSessionSelect }: Props) {
+  const { data: sessions = [] } = useQuery<SessionSummary[]>({
+    queryKey: ["sessions"],
+    queryFn: listSessions,
+    refetchInterval: 10_000,
+  });
+
+  async function handleClick(id: string) {
+    await resumeSession(id);
+    onSessionSelect(id);
+  }
+
+  return (
+    <ul className="flex flex-col gap-1">
+      {sessions.map((s) => (
+        <li key={s.id}>
+          <button
+            data-testid={`session-item-${s.id}`}
+            data-active={s.id === activeSessionId ? "true" : "false"}
+            onClick={() => handleClick(s.id)}
+            className={[
+              "w-full text-left rounded px-2 py-1 text-xs hover:bg-accent truncate",
+              s.id === activeSessionId ? "bg-accent font-semibold" : "",
+            ].join(" ")}
+          >
+            <span className="block truncate">{s.question || s.id}</span>
+            <span className="block text-muted-foreground text-[10px]">{s.status}</span>
+          </button>
+        </li>
+      ))}
+    </ul>
+  );
+}

frontend/src/shell/NewSessionDialog.tsx

@@ -0,0 +1,212 @@
+// frontend/src/shell/NewSessionDialog.tsx
+import { useState } from "react";
+import { useQuery } from "@tanstack/react-query";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "../components/ui/dialog";
+import { Button } from "../components/ui/button";
+import { createSession } from "../api/sessions";
+import { listWorkspaces } from "../api/workspaces";
+import { listModels } from "../api/models";
+
+interface Props {
+  onCreated: (id: string) => void;
+}
+
+export function NewSessionDialog({ onCreated }: Props) {
+  const [open, setOpen] = useState(false);
+  const [question, setQuestion] = useState("");
+  const [workspace, setWorkspace] = useState("");
+  const [model, setModel] = useState("");
+  const [thinking, setThinking] = useState("");
+  const [provider, setProvider] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const [busy, setBusy] = useState(false);
+
+  const { data: workspaces = [] } = useQuery({
+    queryKey: ["workspaces"],
+    queryFn: listWorkspaces,
+    enabled: open,
+  });
+
+  const { data: modelsData } = useQuery({
+    queryKey: ["models"],
+    queryFn: listModels,
+    enabled: open,
+  });
+
+  const modelList: string[] = Array.isArray(modelsData?.models)
+    ? (modelsData.models as string[])
+    : [];
+
+  // When workspace list loads, pre-select the first one if nothing chosen yet
+  const effectiveWorkspace =
+    workspace || (workspaces.length > 0 ? workspaces[0].name : "default");
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setError(null);
+    if (!question.trim()) {
+      setError("La domanda non può essere vuota.");
+      return;
+    }
+    setBusy(true);
+    try {
+      const { id } = await createSession({
+        workspace: effectiveWorkspace,
+        question: question.trim(),
+        ...(model ? { model } : {}),
+        ...(thinking ? { thinking } : {}),
+        ...(provider ? { provider } : {}),
+      });
+      setOpen(false);
+      setQuestion("");
+      setModel("");
+      setThinking("");
+      setProvider("");
+      onCreated(id);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Errore nella creazione della sessione.");
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <Button
+        variant="default"
+        size="sm"
+        className="w-full"
+        onClick={() => setOpen(true)}
+      >
+        Nuova domanda
+      </Button>
+      <DialogContent showCloseButton={false}>
+        <DialogHeader>
+          <DialogTitle>Nuova sessione</DialogTitle>
+        </DialogHeader>
+        <form onSubmit={handleSubmit} className="flex flex-col gap-3">
+          <div>
+            <label className="block text-xs font-medium mb-1" htmlFor="nsd-question">
+              Domanda
+            </label>
+            <textarea
+              id="nsd-question"
+              value={question}
+              onChange={(e) => setQuestion(e.target.value)}
+              rows={3}
+              className="w-full border rounded px-2 py-1 text-sm focus:outline-none focus:ring-1 resize-none"
+              placeholder="Inserisci la tua domanda…"
+            />
+          </div>
+
+          <div>
+            <label className="block text-xs font-medium mb-1" htmlFor="nsd-workspace">
+              Workspace
+            </label>
+            <select
+              id="nsd-workspace"
+              value={workspace}
+              onChange={(e) => setWorkspace(e.target.value)}
+              className="w-full border rounded px-2 py-1 text-sm"
+            >
+              {workspaces.length === 0 ? (
+                <option value="default">default</option>
+              ) : (
+                workspaces.map((w) => (
+                  <option key={w.name} value={w.name}>
+                    {w.name}
+                  </option>
+                ))
+              )}
+            </select>
+          </div>
+
+          {/* Model field — graceful degradation (§9): free text when models list is empty */}
+          <div>
+            <label className="block text-xs font-medium mb-1" htmlFor="nsd-model">
+              Modello (opzionale)
+            </label>
+            {modelList.length > 0 ? (
+              <select
+                id="nsd-model"
+                value={model}
+                onChange={(e) => setModel(e.target.value)}
+                className="w-full border rounded px-2 py-1 text-sm"
+              >
+                <option value="">— default —</option>
+                {modelList.map((m) => (
+                  <option key={m} value={m}>
+                    {m}
+                  </option>
+                ))}
+              </select>
+            ) : (
+              <input
+                id="nsd-model"
+                type="text"
+                value={model}
+                onChange={(e) => setModel(e.target.value)}
+                placeholder="es. claude-sonnet-4-5"
+                className="w-full border rounded px-2 py-1 text-sm focus:outline-none focus:ring-1"
+                data-testid="model-freetext"
+              />
+            )}
+          </div>
+
+          <div>
+            <label className="block text-xs font-medium mb-1" htmlFor="nsd-thinking">
+              Thinking (opzionale)
+            </label>
+            <input
+              id="nsd-thinking"
+              type="text"
+              value={thinking}
+              onChange={(e) => setThinking(e.target.value)}
+              placeholder="enabled / disabled"
+              className="w-full border rounded px-2 py-1 text-sm focus:outline-none focus:ring-1"
+            />
+          </div>
+
+          <div>
+            <label className="block text-xs font-medium mb-1" htmlFor="nsd-provider">
+              Provider (opzionale)
+            </label>
+            <input
+              id="nsd-provider"
+              type="text"
+              value={provider}
+              onChange={(e) => setProvider(e.target.value)}
+              placeholder="es. anthropic"
+              className="w-full border rounded px-2 py-1 text-sm focus:outline-none focus:ring-1"
+            />
+          </div>
+
+          {error && (
+            <p className="text-xs text-destructive" role="alert">
+              {error}
+            </p>
+          )}
+
+          <div className="flex justify-end gap-2 pt-1">
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              onClick={() => setOpen(false)}
+            >
+              Annulla
+            </Button>
+            <Button type="submit" size="sm" disabled={busy}>
+              {busy ? "Creazione…" : "Crea"}
+            </Button>
+          </div>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}

frontend/src/shell/SteerInput.test.tsx

@@ -0,0 +1,69 @@
+// frontend/src/shell/SteerInput.test.tsx
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { http, HttpResponse } from "msw";
+import { server } from "../test/msw";
+import { SteerInput } from "./SteerInput";
+
+beforeEach(() => {
+  server.use(
+    http.post("http://localhost:8787/sessions/:id/steer", () =>
+      new HttpResponse(null, { status: 204 }),
+    ),
+  );
+});
+
+test("renders a text input and submit button", () => {
+  render(<SteerInput sessionId="s1" />);
+  expect(screen.getByRole("textbox")).toBeInTheDocument();
+  expect(screen.getByRole("button", { name: /invia|send|steer/i })).toBeInTheDocument();
+});
+
+test("submitting typed text POSTs to /steer and clears the input", async () => {
+  let captured: unknown = null;
+  server.use(
+    http.post("http://localhost:8787/sessions/:id/steer", async ({ request, params }) => {
+      captured = { id: params.id, body: await request.json() };
+      return new HttpResponse(null, { status: 204 });
+    }),
+  );
+  render(<SteerInput sessionId="s1" />);
+  const input = screen.getByRole("textbox");
+  await userEvent.type(input, "redirect to plan B");
+  await userEvent.click(screen.getByRole("button", { name: /invia|send|steer/i }));
+  await waitFor(() => {
+    expect(captured).toEqual({ id: "s1", body: { text: "redirect to plan B" } });
+  });
+  expect(input).toHaveValue("");
+});
+
+test("pressing Enter in the input submits the steer", async () => {
+  let captured: unknown = null;
+  server.use(
+    http.post("http://localhost:8787/sessions/:id/steer", async ({ request }) => {
+      captured = await request.json();
+      return new HttpResponse(null, { status: 204 });
+    }),
+  );
+  render(<SteerInput sessionId="s1" />);
+  const input = screen.getByRole("textbox");
+  await userEvent.type(input, "use approach X{Enter}");
+  await waitFor(() => {
+    expect(captured).toEqual({ text: "use approach X" });
+  });
+});
+
+test("does not POST when input is empty", async () => {
+  let called = false;
+  server.use(
+    http.post("http://localhost:8787/sessions/:id/steer", () => {
+      called = true;
+      return new HttpResponse(null, { status: 204 });
+    }),
+  );
+  render(<SteerInput sessionId="s1" />);
+  await userEvent.click(screen.getByRole("button", { name: /invia|send|steer/i }));
+  // small wait to ensure the call didn't go through
+  await new Promise((r) => setTimeout(r, 50));
+  expect(called).toBe(false);
+});

frontend/src/shell/SteerInput.tsx

@@ -0,0 +1,44 @@
+// frontend/src/shell/SteerInput.tsx
+import { useState } from "react";
+import { postSteer } from "../api/sessions";
+
+interface Props {
+  sessionId: string;
+}
+
+export function SteerInput({ sessionId }: Props) {
+  const [text, setText] = useState("");
+
+  async function submit() {
+    const trimmed = text.trim();
+    if (!trimmed) return;
+    await postSteer(sessionId, trimmed);
+    setText("");
+  }
+
+  function handleKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      submit();
+    }
+  }
+
+  return (
+    <div className="flex gap-2 items-center border-t pt-2">
+      <input
+        type="text"
+        value={text}
+        onChange={(e) => setText(e.target.value)}
+        onKeyDown={handleKeyDown}
+        placeholder="Steering libero (!)…"
+        className="flex-1 border rounded px-2 py-1 text-sm focus:outline-none focus:ring-1"
+      />
+      <button
+        onClick={submit}
+        className="border rounded px-3 py-1 text-sm hover:bg-accent"
+      >
+        Invia
+      </button>
+    </div>
+  );
+}

frontend/src/shell/WorkflowBar.tsx

@@ -0,0 +1,40 @@
+// frontend/src/shell/WorkflowBar.tsx
+import { useSessionStore } from "../store/sessionStore";
+
+const PHASES = [
+  { id: "F1", name: "Disambiguazione" },
+  { id: "F2", name: "Schema linking" },
+  { id: "F3", name: "Esplorazione" },
+  { id: "F4", name: "Piano SQL" },
+  { id: "F5", name: "Generazione SQL" },
+  { id: "F6", name: "Validazione" },
+  { id: "F7", name: "Revisione" },
+  { id: "F8", name: "Risultati" },
+];
+
+export function WorkflowBar() {
+  const currentPhase = useSessionStore((s) => s.currentPhase);
+
+  return (
+    <nav className="flex gap-1 overflow-x-auto">
+      {PHASES.map((p) => {
+        const isActive = currentPhase === p.id;
+        return (
+          <span
+            key={p.id}
+            data-testid={`phase-${p.id}`}
+            data-active={isActive ? "true" : "false"}
+            className={[
+              "px-2 py-0.5 rounded text-xs whitespace-nowrap",
+              isActive
+                ? "bg-primary text-primary-foreground font-bold"
+                : "text-muted-foreground border",
+            ].join(" ")}
+          >
+            {p.id}: {p.name}
+          </span>
+        );
+      })}
+    </nav>
+  );
+}

frontend/src/shell/f1-loop.test.tsx

@@ -1,5 +1,5 @@
 // frontend/src/shell/f1-loop.test.tsx
-import { render, screen } from "@testing-library/react";
+import { render, screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { http, HttpResponse } from "msw";
 import { act } from "react";
@@ -19,14 +19,29 @@ test("F1: create session -> widget via SSE -> respond -> POST /response", async
   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 />);
-  await userEvent.click(screen.getByRole("button", { name: /nuova/i }));         // start a session (UI affordance)
+
-  // simulate the backend emitting the F1 widget
+  // Open the "Nuova domanda" dialog
+  await userEvent.click(screen.getByRole("button", { name: /nuova/i }));
+
+  // Fill in the question and submit
+  const textarea = await screen.findByLabelText(/domanda/i);
+  await userEvent.type(textarea, "Quante vendite?");
+  await userEvent.click(screen.getByRole("button", { name: /^crea$/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
   act(() =>
     FakeEventSource.instances[0].emit({
       type: "ui_request",

frontend/src/store/sessionStore.ts

@@ -11,9 +11,11 @@ interface SessionState {
   transcript: Entry[];
   toasts: { level: string; text: string }[];
   lastSystemEvent: StreamEvent | null;
+  currentPhase: string | null;
   applyEvent: (e: StreamEvent) => void;
   clearPending: () => void;
   resetSession: () => void;
+  setPhase: (phase: string | null) => void;
 }
 
 const empty = {
@@ -21,6 +23,7 @@ const empty = {
   transcript: [] as Entry[],
   toasts: [] as { level: string; text: string }[],
   lastSystemEvent: null,
+  currentPhase: null as string | null,
 };
 
 export const useSessionStore = create<SessionState>((set) => ({
@@ -41,4 +44,5 @@ export const useSessionStore = create<SessionState>((set) => ({
     }),
   clearPending: () => set({ pendingWidget: null }),
   resetSession: () => set({ ...empty }),
+  setPhase: (phase) => set({ currentPhase: phase }),
 }));