feat(frontend): restyle ThothII to the Omics Portal (GSD) design system

Adopt the portal's design language so the app embeds seamlessly into its
header/sidebar chrome later:
- Token layer rewritten as raw OKLCH triplets (the previous oklch()-wrapped
  vars produced invalid colors; the UI was effectively unstyled). Values mirror
  GSD: Manrope + Fraunces fonts, #cb333b red brand, warm off-white surfaces,
  pill buttons, brand focus rings. Dark tokens follow .dark or the portal's
  [data-bs-theme=dark].
- Layout: no left sidebar, no header (the portal supplies them). Conversation
  column flush-left with a slim F1-F8 phase strip; session rail moved to the
  RIGHT, mirroring the portal's left sidebar (red section label, red-tint active
  item). Editorial empty state.
- Transcript component now actually renders the streamed assistant turns (the
  store accumulated them but nothing displayed them). Toaster mounted for errors
  (matchMedia polyfill added to the jsdom test setup).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

frontend/src/shell/AppShell.tsx

@@ -1,64 +1,103 @@
-import { useState } from "react";
 import { useSessionStream } from "../stream/useSessionStream";
 import { WidgetHost } from "./WidgetHost";
+import { Transcript } from "./Transcript";
 import { NavSessions } from "./NavSessions";
 import { NewSessionDialog } from "./NewSessionDialog";
 import { SettingsDialog } from "./SettingsDialog";
 import { SteerInput } from "./SteerInput";
 import { WorkflowBar } from "./WorkflowBar";
+import { Toaster } from "../components/ui/sonner";
+import { useState } from "react";
 
+/**
+ * The page is designed to live INSIDE the Omics Portal chrome (its left sidebar
+ * + topbar) once embedded, so this shell intentionally has no left rail and no
+ * top header of its own. The session rail sits on the RIGHT, mirroring the
+ * portal's left sidebar, and the workflow phases ride a slim strip above the chat.
+ */
 export function AppShell() {
   const [activeSessionId, setActiveSessionId] = useState<string | null>(null);
-  const [sidebarOpen, setSidebarOpen] = useState(true);
 
   useSessionStream(activeSessionId);
 
-  function handleSessionSelect(id: string) {
-    setActiveSessionId(id);
-  }
-
-  function handleCreated(id: string) {
-    setActiveSessionId(id);
-  }
-
   return (
-    <div className="flex h-screen">
-      {/* Left nav: new session button + sessions list */}
-      <aside className="w-48 border-r p-2 flex flex-col gap-2">
-        <NewSessionDialog onCreated={handleCreated} />
-        <SettingsDialog />
-        <NavSessions
-          activeSessionId={activeSessionId}
-          onSessionSelect={handleSessionSelect}
-        />
-      </aside>
+    <div className="flex h-screen bg-background text-foreground">
+      {/* Conversation column */}
+      <div className="flex min-w-0 flex-1 flex-col">
+        {activeSessionId && (
+          <div className="shrink-0 border-b border-border/70 bg-background/80 px-6 py-2.5 backdrop-blur">
+            <div className="mx-auto max-w-3xl">
+              <WorkflowBar />
+            </div>
+          </div>
+        )}
 
-      <div className="flex flex-col flex-1 min-w-0">
-        {/* Top workflow bar */}
-        <header className="border-b px-4 py-2 flex items-center gap-4">
-          <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 + steer input */}
-        <main className="flex-1 overflow-auto p-4 flex flex-col gap-2">
-          <WidgetHost sessionId={activeSessionId} />
-          {activeSessionId && <SteerInput sessionId={activeSessionId} />}
+        <main className="flex-1 overflow-y-auto px-6 py-8">
+          <div className="mx-auto flex max-w-3xl flex-col gap-6">
+            {activeSessionId ? (
+              <>
+                <Transcript />
+                <WidgetHost sessionId={activeSessionId} />
+              </>
+            ) : (
+              <EmptyState />
+            )}
+          </div>
         </main>
+
+        {activeSessionId && (
+          <div className="shrink-0 px-6 pb-6 pt-2">
+            <div className="mx-auto max-w-3xl">
+              <SteerInput sessionId={activeSessionId} />
+            </div>
+          </div>
+        )}
       </div>
 
-      {/* Right artifact sidebar — collapsible */}
-      {sidebarOpen && (
-        <aside className="w-64 border-l p-2 flex flex-col">
-          <p className="text-xs text-muted-foreground">Artefatti</p>
-        </aside>
-      )}
+      {/* Right session rail — symmetric to the portal's left sidebar */}
+      <aside className="flex w-[280px] shrink-0 flex-col border-l border-border bg-sidebar">
+        <div className="px-4 pb-3 pt-5">
+          <h1 className="font-heading text-xl font-semibold leading-none tracking-tight text-foreground">
+            Thoth<span className="text-primary">II</span>
+          </h1>
+          <p className="mt-1.5 text-[0.7rem] uppercase tracking-[0.14em] text-muted-foreground">
+            Query in linguaggio naturale
+          </p>
+        </div>
+
+        <div className="flex flex-col gap-2 px-4 pb-3">
+          <NewSessionDialog onCreated={setActiveSessionId} />
+          <SettingsDialog />
+        </div>
+
+        <div className="px-4 pb-1.5 pt-1">
+          <span className="text-[0.7rem] font-bold uppercase tracking-[0.12em] text-primary">
+            Sessioni
+          </span>
+        </div>
+        <div className="flex-1 overflow-y-auto px-2 pb-4">
+          <NavSessions
+            activeSessionId={activeSessionId}
+            onSessionSelect={setActiveSessionId}
+          />
+        </div>
+      </aside>
+
+      <Toaster />
+    </div>
+  );
+}
+
+function EmptyState() {
+  return (
+    <div className="flex min-h-[60vh] flex-col items-center justify-center text-center">
+      <span className="font-heading text-5xl font-semibold tracking-tight text-foreground">
+        Thoth<span className="text-primary">II</span>
+      </span>
+      <p className="mt-4 max-w-md text-balance text-[0.95rem] leading-relaxed text-muted-foreground">
+        Interroga il tuo data warehouse in linguaggio naturale. Crea una nuova
+        domanda dal pannello a destra per avviare una sessione guidata.
+      </p>
     </div>
   );
 }