mptyl/ThothII
1
0
Fork 0
Code Issues 25 Pull Requests Actions Packages Projects Releases 1 Wiki Activity

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

Browse Source 
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>
This commit is contained in:
marcopan
2026-06-28 18:05:23 +02:00
co-authored by Claude Opus 4.8
parent f59d6d1478
commit 4e6d4a4cea
12 changed files with 424 additions and 180 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/index.html
+6
View File
@@ -4,6 +4,12 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ThothII</title> <title>ThothII</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&display=swap"
rel="stylesheet"
/>
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>
frontend/src/components/ui/button.tsx
+9 -11
View File
@@ -4,15 +4,15 @@ import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "@/lib/utils" import { cn } from "@/lib/utils"
const buttonVariants = cva( const buttonVariants = cva(
"group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", "group/button inline-flex shrink-0 items-center justify-center rounded-full border border-transparent bg-clip-padding text-sm font-semibold tracking-[0.005em] whitespace-nowrap transition-all outline-none select-none focus-visible:ring-3 focus-visible:ring-ring/25 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
{ {
variants: { variants: {
variant: { variant: {
default: "bg-primary text-primary-foreground hover:bg-primary/80", default: "bg-primary text-primary-foreground hover:bg-[oklch(var(--primary-hover))]",
outline: outline:
"border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50", "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
secondary: secondary:
"bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground", "bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,oklch(var(--secondary)),oklch(var(--foreground))_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
ghost: ghost:
"hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50", "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
destructive: destructive:
@@ -21,15 +21,13 @@ const buttonVariants = cva(
}, },
size: { size: {
default: default:
"h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2", "h-8 gap-1.5 px-3.5 has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5",
xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3", xs: "h-6 gap-1 px-2.5 text-xs has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5", sm: "h-7 gap-1 px-3 text-[0.8rem] has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-3.5",
lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2", lg: "h-10 gap-1.5 px-5 text-[0.9rem] has-data-[icon=inline-end]:pr-3.5 has-data-[icon=inline-start]:pl-3.5",
icon: "size-8", icon: "size-8",
"icon-xs": "icon-xs": "size-6 [&_svg:not([class*='size-'])]:size-3",
"size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3", "icon-sm": "size-7",
"icon-sm":
"size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
"icon-lg": "size-9", "icon-lg": "size-9",
}, },
}, },
frontend/src/components/ui/sonner.tsx
+3 -3
View File
@@ -28,9 +28,9 @@ const Toaster = ({ ...props }: ToasterProps) => {
}} }}
style={ style={
{ {
"--normal-bg": "var(--popover)", "--normal-bg": "oklch(var(--popover))",
"--normal-text": "var(--popover-foreground)", "--normal-text": "oklch(var(--popover-foreground))",
"--normal-border": "var(--border)", "--normal-border": "oklch(var(--border))",
"--border-radius": "var(--radius)", "--border-radius": "var(--radius)",
} as React.CSSProperties } as React.CSSProperties
} }
frontend/src/index.css
+162 -73
View File
@@ -1,89 +1,178 @@
@import "tw-animate-css"; @import "tw-animate-css";
@import "shadcn/tailwind.css"; @import "shadcn/tailwind.css";
@import "@fontsource-variable/geist";
@tailwind base; @tailwind base;
@tailwind components; @tailwind components;
@tailwind utilities; @tailwind utilities;
/*
* GSD theme — mirrors the Omics Portal design system (Manrope + Fraunces, warm
* off-white surfaces, #cb333b red). Tokens are RAW OKLCH triplets (L C H) so the
* Tailwind v3 config can wrap them as `oklch(var(--token) / <alpha-value>)` and
* opacity utilities (bg-primary/80, …) keep working. Dark tokens follow either a
* `.dark` class or the portal's `[data-bs-theme="dark"]`, ready for embedding.
*/
@layer base { @layer base {
.theme {
--font-heading: var(--font-sans);
--font-sans: 'Geist Variable', sans-serif
}
:root { :root {
--background: oklch(1 0 0); --font-sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Arial, sans-serif;
--foreground: oklch(0.145 0 0); --font-heading: "Fraunces", "Source Serif Pro", Georgia, "Times New Roman", serif;
--card: oklch(1 0 0);
--card-foreground: oklch(0.145 0 0); --background: 0.9918 0.0011 17.2; /* surface */
--popover: oklch(1 0 0); --foreground: 0.2678 0.0097 355.6; /* text */
--popover-foreground: oklch(0.145 0 0); --card: 0.9985 0.0006 17.2;
--primary: oklch(0.205 0 0); --card-foreground: 0.2678 0.0097 355.6;
--primary-foreground: oklch(0.985 0 0); --popover: 0.9985 0.0006 17.2;
--secondary: oklch(0.97 0 0); --popover-foreground: 0.2678 0.0097 355.6;
--secondary-foreground: oklch(0.205 0 0); --primary: 0.5587 0.1881 23.2; /* gsd red */
--muted: oklch(0.97 0 0); --primary-foreground: 0.9918 0.0011 17.2;
--muted-foreground: oklch(0.556 0 0); --primary-hover: 0.5095 0.1812 24.1;
--accent: oklch(0.97 0 0); --secondary: 0.9709 0.0011 17.2; /* surface-alt */
--accent-foreground: oklch(0.205 0 0); --secondary-foreground: 0.2678 0.0097 355.6;
--destructive: oklch(0.577 0.245 27.325); --muted: 0.9709 0.0011 17.2;
--border: oklch(0.922 0 0); --muted-foreground: 0.5133 0.0088 345.6;
--input: oklch(0.922 0 0); --accent: 0.9408 0.0011 17.2; /* sunken */
--ring: oklch(0.708 0 0); --accent-foreground: 0.2678 0.0097 355.6;
--chart-1: oklch(0.87 0 0); --destructive: 0.5587 0.1881 23.2;
--chart-2: oklch(0.556 0 0); --destructive-foreground: 0.9918 0.0011 17.2;
--chart-3: oklch(0.439 0 0); --border: 0.9093 0.0035 354.7;
--chart-4: oklch(0.371 0 0); --input: 0.9093 0.0035 354.7;
--chart-5: oklch(0.269 0 0); --ring: 0.5587 0.1881 23.2;
--radius: 0.625rem; --success: 0.7577 0.1581 165.0;
--sidebar: oklch(0.985 0 0); --warning: 0.8523 0.1386 78.9;
--sidebar-foreground: oklch(0.145 0 0); --info: 0.7035 0.1128 221.3;
--sidebar-primary: oklch(0.205 0 0); --radius: 0.5rem;
--sidebar-primary-foreground: oklch(0.985 0 0); --sidebar: 0.9709 0.0011 17.2;
--sidebar-accent: oklch(0.97 0 0); --sidebar-foreground: 0.2678 0.0097 355.6;
--sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-primary: 0.5587 0.1881 23.2;
--sidebar-border: oklch(0.922 0 0); --sidebar-primary-foreground: 0.9918 0.0011 17.2;
--sidebar-ring: oklch(0.708 0 0) --sidebar-accent: 0.9408 0.0011 17.2;
--sidebar-accent-foreground: 0.2678 0.0097 355.6;
--sidebar-border: 0.9093 0.0035 354.7;
--sidebar-ring: 0.5587 0.1881 23.2;
} }
.dark {
--background: oklch(0.145 0 0); .dark,
--foreground: oklch(0.985 0 0); [data-bs-theme="dark"] {
--card: oklch(0.205 0 0); --background: 0.2178 0 90;
--card-foreground: oklch(0.985 0 0); --foreground: 0.9310 0 90;
--popover: oklch(0.205 0 0); --card: 0.2350 0 90;
--popover-foreground: oklch(0.985 0 0); --card-foreground: 0.9310 0 90;
--primary: oklch(0.922 0 0); --popover: 0.2350 0 90;
--primary-foreground: oklch(0.205 0 0); --popover-foreground: 0.9310 0 90;
--secondary: oklch(0.269 0 0); --primary: 0.6023 0.1848 20.3;
--secondary-foreground: oklch(0.985 0 0); --primary-foreground: 0.9310 0 90;
--muted: oklch(0.269 0 0); --primary-hover: 0.6897 0.1779 16.9;
--muted-foreground: oklch(0.708 0 0); --secondary: 0.2972 0 90;
--accent: oklch(0.269 0 0); --secondary-foreground: 0.9310 0 90;
--accent-foreground: oklch(0.985 0 0); --muted: 0.2972 0 90;
--destructive: oklch(0.704 0.191 22.216); --muted-foreground: 0.7826 0 90;
--border: oklch(1 0 0 / 10%); --accent: 0.3485 0 90;
--input: oklch(1 0 0 / 15%); --accent-foreground: 0.9310 0 90;
--ring: oklch(0.556 0 0); --destructive: 0.6023 0.1848 20.3;
--chart-1: oklch(0.87 0 0); --destructive-foreground: 0.9310 0 90;
--chart-2: oklch(0.556 0 0); --border: 0.3715 0 90;
--chart-3: oklch(0.439 0 0); --input: 0.3715 0 90;
--chart-4: oklch(0.371 0 0); --ring: 0.6897 0.1779 16.9;
--chart-5: oklch(0.269 0 0); --sidebar: 0.2350 0 90;
--sidebar: oklch(0.205 0 0); --sidebar-foreground: 0.9310 0 90;
--sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: 0.6023 0.1848 20.3;
--sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: 0.9310 0 90;
--sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: 0.3485 0 90;
--sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: 0.9310 0 90;
--sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: 0.3715 0 90;
--sidebar-border: oklch(1 0 0 / 10%); --sidebar-ring: 0.6897 0.1779 16.9;
--sidebar-ring: oklch(0.556 0 0)
} }
* { * {
@apply border-border outline-ring/50; @apply border-border outline-ring/50;
} }
body {
@apply bg-background text-foreground;
}
html { html {
@apply font-sans; @apply font-sans;
} }
}
body {
@apply bg-background text-foreground antialiased;
font-feature-settings: "ss01", "cv11";
}
h1, h2, h3, h4 {
font-family: var(--font-heading);
font-optical-sizing: auto;
letter-spacing: -0.01em;
}
::selection {
background: oklch(var(--primary) / 0.16);
}
/* Thin, brand-tinted scrollbars */
* {
scrollbar-width: thin;
scrollbar-color: oklch(var(--border)) transparent;
}
*::-webkit-scrollbar {
width: 10px;
height: 10px;
}
*::-webkit-scrollbar-thumb {
background: oklch(var(--border));
border-radius: 9999px;
border: 2px solid transparent;
background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover {
background: oklch(var(--muted-foreground) / 0.5);
}
}
/*
* Minimal markdown prose for assistant turns (no typography plugin installed).
* Scoped so it never leaks into widgets.
*/
@layer components {
.thot-prose {
color: oklch(var(--foreground));
font-size: 0.9375rem;
line-height: 1.65;
}
.thot-prose > :first-child { margin-top: 0; }
.thot-prose > :last-child { margin-bottom: 0; }
.thot-prose p { margin: 0.6em 0; }
.thot-prose h1, .thot-prose h2, .thot-prose h3 {
font-family: var(--font-heading);
font-weight: 600;
line-height: 1.25;
margin: 1.1em 0 0.5em;
letter-spacing: -0.01em;
}
.thot-prose h1 { font-size: 1.4rem; }
.thot-prose h2 { font-size: 1.2rem; }
.thot-prose h3 { font-size: 1.05rem; }
.thot-prose ul, .thot-prose ol { margin: 0.6em 0; padding-left: 1.3em; }
.thot-prose li { margin: 0.25em 0; }
.thot-prose a { color: oklch(var(--primary)); text-decoration: underline; text-underline-offset: 2px; }
.thot-prose code {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 0.85em;
background: oklch(var(--muted));
padding: 0.12em 0.4em;
border-radius: 0.3rem;
}
.thot-prose pre {
background: oklch(var(--muted));
padding: 0.9rem 1rem;
border-radius: var(--radius);
overflow-x: auto;
border: 1px solid oklch(var(--border));
}
.thot-prose pre code { background: transparent; padding: 0; }
.thot-prose blockquote {
border-left: 2px solid oklch(var(--border));
padding-left: 0.9em;
color: oklch(var(--muted-foreground));
margin: 0.7em 0;
}
.thot-prose table { border-collapse: collapse; width: 100%; margin: 0.7em 0; font-size: 0.875rem; }
.thot-prose th, .thot-prose td { border: 1px solid oklch(var(--border)); padding: 0.4em 0.6em; text-align: left; }
.thot-prose th { background: oklch(var(--muted)); font-weight: 600; }
}
frontend/src/shell/AppShell.tsx
+82 -43
View File
@@ -1,64 +1,103 @@
import { useState } from "react";
import { useSessionStream } from "../stream/useSessionStream"; import { useSessionStream } from "../stream/useSessionStream";
import { WidgetHost } from "./WidgetHost"; import { WidgetHost } from "./WidgetHost";
import { Transcript } from "./Transcript";
import { NavSessions } from "./NavSessions"; import { NavSessions } from "./NavSessions";
import { NewSessionDialog } from "./NewSessionDialog"; import { NewSessionDialog } from "./NewSessionDialog";
import { SettingsDialog } from "./SettingsDialog"; import { SettingsDialog } from "./SettingsDialog";
import { SteerInput } from "./SteerInput"; import { SteerInput } from "./SteerInput";
import { WorkflowBar } from "./WorkflowBar"; 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() { export function AppShell() {
const [activeSessionId, setActiveSessionId] = useState<string | null>(null); const [activeSessionId, setActiveSessionId] = useState<string | null>(null);
const [sidebarOpen, setSidebarOpen] = useState(true);
useSessionStream(activeSessionId); useSessionStream(activeSessionId);
function handleSessionSelect(id: string) {
setActiveSessionId(id);
}
function handleCreated(id: string) {
setActiveSessionId(id);
}
return ( return (
<div className="flex h-screen"> <div className="flex h-screen bg-background text-foreground">
{/* Left nav: new session button + sessions list */} {/* Conversation column */}
<aside className="w-48 border-r p-2 flex flex-col gap-2"> <div className="flex min-w-0 flex-1 flex-col">
<NewSessionDialog onCreated={handleCreated} /> {activeSessionId && (
<SettingsDialog /> <div className="shrink-0 border-b border-border/70 bg-background/80 px-6 py-2.5 backdrop-blur">
<NavSessions <div className="mx-auto max-w-3xl">
activeSessionId={activeSessionId} <WorkflowBar />
onSessionSelect={handleSessionSelect} </div>
/> </div>
</aside> )}
<div className="flex flex-col flex-1 min-w-0"> <main className="flex-1 overflow-y-auto px-6 py-8">
{/* Top workflow bar */} <div className="mx-auto flex max-w-3xl flex-col gap-6">
<header className="border-b px-4 py-2 flex items-center gap-4"> {activeSessionId ? (
<WorkflowBar /> <>
<button <Transcript />
className="ml-auto text-xs text-muted-foreground hover:text-foreground border rounded px-2 py-0.5" <WidgetHost sessionId={activeSessionId} />
onClick={() => setSidebarOpen((v) => !v)} </>
aria-label={sidebarOpen ? "Chiudi sidebar" : "Apri sidebar"} ) : (
> <EmptyState />
{sidebarOpen ? "←" : "→"} )}
</button> </div>
</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> </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> </div>
{/* Right artifact sidebar — collapsible */} {/* Right session rail — symmetric to the portal's left sidebar */}
{sidebarOpen && ( <aside className="flex w-[280px] shrink-0 flex-col border-l border-border bg-sidebar">
<aside className="w-64 border-l p-2 flex flex-col"> <div className="px-4 pb-3 pt-5">
<p className="text-xs text-muted-foreground">Artefatti</p> <h1 className="font-heading text-xl font-semibold leading-none tracking-tight text-foreground">
</aside> 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> </div>
); );
} }
frontend/src/shell/NavSessions.tsx
+51 -17
View File
@@ -23,24 +23,58 @@ export function NavSessions({ activeSessionId, onSessionSelect }: Props) {
onSessionSelect(id); onSessionSelect(id);
} }
if (sessions.length === 0) {
return (
<p className="px-1 py-6 text-center text-xs text-muted-foreground">
Nessuna sessione. Inizia con <span className="font-medium text-foreground">Nuova domanda</span>.
</p>
);
}
return ( return (
<ul className="flex flex-col gap-1"> <ul className="flex flex-col gap-0.5">
{sessions.map((s) => ( {sessions.map((s) => {
<li key={s.id}> const active = s.id === activeSessionId;
<button return (
data-testid={`session-item-${s.id}`} <li key={s.id}>
data-active={s.id === activeSessionId ? "true" : "false"} <button
onClick={() => handleClick(s.id)} data-testid={`session-item-${s.id}`}
className={[ data-active={active ? "true" : "false"}
"w-full text-left rounded px-2 py-1 text-xs hover:bg-accent truncate", onClick={() => handleClick(s.id)}
s.id === activeSessionId ? "bg-accent font-semibold" : "", className={[
].join(" ")} "group w-full rounded-lg px-2.5 py-2 text-left transition-colors",
> active
<span className="block truncate">{s.question || s.id}</span> ? "bg-[oklch(var(--primary)/0.12)]"
<span className="block text-muted-foreground text-[10px]">{s.status}</span> : "hover:bg-accent",
</button> ].join(" ")}
</li> >
))} <span
className={[
"block truncate text-[0.8rem] leading-snug",
active ? "font-bold text-primary" : "text-foreground/90",
].join(" ")}
>
{s.question || s.id}
</span>
<span className="mt-1 flex items-center gap-1.5">
<span
className={[
"size-1.5 rounded-full",
s.status === "open"
? "bg-[oklch(var(--success))]"
: s.status === "finalized"
? "bg-primary"
: "bg-muted-foreground/50",
].join(" ")}
/>
<span className="text-[0.65rem] uppercase tracking-wide text-muted-foreground">
{s.status}
</span>
</span>
</button>
</li>
);
})}
</ul> </ul>
); );
} }
frontend/src/shell/NewSessionDialog.tsx
+2 -2
View File
@@ -55,7 +55,7 @@ export function NewSessionDialog({ onCreated }: Props) {
</DialogHeader> </DialogHeader>
<form onSubmit={handleSubmit} className="flex flex-col gap-3"> <form onSubmit={handleSubmit} className="flex flex-col gap-3">
<div> <div>
<label className="block text-xs font-medium mb-1" htmlFor="nsd-question"> <label className="mb-1.5 block text-xs font-medium text-muted-foreground" htmlFor="nsd-question">
Domanda Domanda
</label> </label>
<textarea <textarea
@@ -63,7 +63,7 @@ export function NewSessionDialog({ onCreated }: Props) {
value={question} value={question}
onChange={(e) => setQuestion(e.target.value)} onChange={(e) => setQuestion(e.target.value)}
rows={3} rows={3}
className="w-full border rounded px-2 py-1 text-sm focus:outline-none focus:ring-1 resize-none" className="w-full resize-none rounded-lg border border-input bg-card px-3 py-2 text-sm outline-none transition-colors placeholder:text-muted-foreground focus:border-primary/50 focus:ring-3 focus:ring-ring/15"
placeholder="Inserisci la tua domanda…" placeholder="Inserisci la tua domanda…"
/> />
</div> </div>
frontend/src/shell/SettingsDialog.tsx
+10 -10
View File
@@ -98,14 +98,14 @@ export function SettingsDialog() {
</DialogHeader> </DialogHeader>
<form onSubmit={handleSave} className="flex flex-col gap-3"> <form onSubmit={handleSave} className="flex flex-col gap-3">
<div> <div>
<label className="block text-xs font-medium mb-1" htmlFor="set-workspace"> <label className="mb-1.5 block text-xs font-medium text-muted-foreground" htmlFor="set-workspace">
Workspace Workspace
</label> </label>
<select <select
id="set-workspace" id="set-workspace"
value={workspace} value={workspace}
onChange={(e) => setWorkspace(e.target.value)} onChange={(e) => setWorkspace(e.target.value)}
className="w-full border rounded px-2 py-1 text-sm" className="w-full rounded-lg border border-input bg-card px-3 py-2 text-sm outline-none transition-colors focus:border-primary/50 focus:ring-3 focus:ring-ring/15"
> >
{workspaces.length === 0 ? ( {workspaces.length === 0 ? (
<option value="">—</option> <option value="">—</option>
@@ -120,7 +120,7 @@ export function SettingsDialog() {
</div> </div>
<div> <div>
<label className="block text-xs font-medium mb-1" htmlFor="set-provider"> <label className="mb-1.5 block text-xs font-medium text-muted-foreground" htmlFor="set-provider">
Provider Provider
</label> </label>
{hasModels ? ( {hasModels ? (
@@ -131,7 +131,7 @@ export function SettingsDialog() {
setProvider(e.target.value); setProvider(e.target.value);
setModel(""); // reset model when provider changes setModel(""); // reset model when provider changes
}} }}
className="w-full border rounded px-2 py-1 text-sm" className="w-full rounded-lg border border-input bg-card px-3 py-2 text-sm outline-none transition-colors focus:border-primary/50 focus:ring-3 focus:ring-ring/15"
> >
<option value="">— tutti —</option> <option value="">— tutti —</option>
{providers.map((p) => ( {providers.map((p) => (
@@ -147,14 +147,14 @@ export function SettingsDialog() {
value={provider} value={provider}
onChange={(e) => setProvider(e.target.value)} onChange={(e) => setProvider(e.target.value)}
placeholder="es. anthropic" placeholder="es. anthropic"
className="w-full border rounded px-2 py-1 text-sm focus:outline-none focus:ring-1" className="w-full rounded-lg border border-input bg-card px-3 py-2 text-sm outline-none transition-colors focus:border-primary/50 focus:ring-3 focus:ring-ring/15"
data-testid="provider-freetext" data-testid="provider-freetext"
/> />
)} )}
</div> </div>
<div> <div>
<label className="block text-xs font-medium mb-1" htmlFor="set-model"> <label className="mb-1.5 block text-xs font-medium text-muted-foreground" htmlFor="set-model">
Modello Modello
</label> </label>
{hasModels ? ( {hasModels ? (
@@ -162,7 +162,7 @@ export function SettingsDialog() {
id="set-model" id="set-model"
value={model} value={model}
onChange={(e) => setModel(e.target.value)} onChange={(e) => setModel(e.target.value)}
className="w-full border rounded px-2 py-1 text-sm" className="w-full rounded-lg border border-input bg-card px-3 py-2 text-sm outline-none transition-colors focus:border-primary/50 focus:ring-3 focus:ring-ring/15"
> >
<option value="">— default —</option> <option value="">— default —</option>
{modelsForProvider.map((m) => ( {modelsForProvider.map((m) => (
@@ -178,21 +178,21 @@ export function SettingsDialog() {
value={model} value={model}
onChange={(e) => setModel(e.target.value)} onChange={(e) => setModel(e.target.value)}
placeholder="es. glm-5.2" placeholder="es. glm-5.2"
className="w-full border rounded px-2 py-1 text-sm focus:outline-none focus:ring-1" className="w-full rounded-lg border border-input bg-card px-3 py-2 text-sm outline-none transition-colors focus:border-primary/50 focus:ring-3 focus:ring-ring/15"
data-testid="model-freetext" data-testid="model-freetext"
/> />
)} )}
</div> </div>
<div> <div>
<label className="block text-xs font-medium mb-1" htmlFor="set-thinking"> <label className="mb-1.5 block text-xs font-medium text-muted-foreground" htmlFor="set-thinking">
Thinking Thinking
</label> </label>
<select <select
id="set-thinking" id="set-thinking"
value={thinking} value={thinking}
onChange={(e) => setThinking(e.target.value)} onChange={(e) => setThinking(e.target.value)}
className="w-full border rounded px-2 py-1 text-sm" className="w-full rounded-lg border border-input bg-card px-3 py-2 text-sm outline-none transition-colors focus:border-primary/50 focus:ring-3 focus:ring-ring/15"
> >
{THINKING_LEVELS.map((lvl) => ( {THINKING_LEVELS.map((lvl) => (
<option key={lvl} value={lvl}> <option key={lvl} value={lvl}>
frontend/src/shell/SteerInput.tsx
+11 -6
View File
@@ -1,6 +1,8 @@
// frontend/src/shell/SteerInput.tsx // frontend/src/shell/SteerInput.tsx
import { useState } from "react"; import { useState } from "react";
import { ArrowUpIcon } from "lucide-react";
import { postSteer } from "../api/sessions"; import { postSteer } from "../api/sessions";
import { Button } from "../components/ui/button";
interface Props { interface Props {
sessionId: string; sessionId: string;
@@ -24,21 +26,24 @@ export function SteerInput({ sessionId }: Props) {
} }
return ( return (
<div className="flex gap-2 items-center border-t pt-2"> <div className="flex items-center gap-2 rounded-full border border-input bg-card px-2 py-1.5 shadow-sm transition-colors focus-within:border-primary/40 focus-within:ring-3 focus-within:ring-ring/15">
<input <input
type="text" type="text"
value={text} value={text}
onChange={(e) => setText(e.target.value)} onChange={(e) => setText(e.target.value)}
onKeyDown={handleKeyDown} onKeyDown={handleKeyDown}
placeholder="Steering libero (!)…" placeholder="Steering libero (!)…"
className="flex-1 border rounded px-2 py-1 text-sm focus:outline-none focus:ring-1" aria-label="Steering"
className="flex-1 bg-transparent px-2 text-sm outline-none placeholder:text-muted-foreground"
/> />
<button <Button
size="icon-sm"
onClick={submit} onClick={submit}
className="border rounded px-3 py-1 text-sm hover:bg-accent" disabled={!text.trim()}
aria-label="Invia"
> >
Invia <ArrowUpIcon />
</button> </Button>
</div> </div>
); );
} }
frontend/src/shell/Transcript.tsx
+28
View File
@@ -0,0 +1,28 @@
// frontend/src/shell/Transcript.tsx
import ReactMarkdown from "react-markdown";
import remarkGfm from "remark-gfm";
import { useSessionStore } from "../store/sessionStore";
/**
* Renders the streamed assistant conversation. The store accumulates assistant
* text deltas in `transcript`; this is the surface that shows them.
*/
export function Transcript() {
const transcript = useSessionStore((s) => s.transcript);
if (transcript.length === 0) return null;
return (
<div className="flex flex-col gap-6">
{transcript.map((entry, i) => (
<article key={i} className="flex flex-col gap-1.5">
<span className="font-heading text-xs font-semibold uppercase tracking-[0.12em] text-primary/80">
ThothII
</span>
<div className="thot-prose">
<ReactMarkdown remarkPlugins={[remarkGfm]}>{entry.text}</ReactMarkdown>
</div>
</article>
))}
</div>
);
}
frontend/src/shell/WorkflowBar.tsx
+45 -15
View File
@@ -14,25 +14,55 @@ const PHASES = [
export function WorkflowBar() { export function WorkflowBar() {
const currentPhase = useSessionStore((s) => s.currentPhase); const currentPhase = useSessionStore((s) => s.currentPhase);
const activeIdx = PHASES.findIndex((p) => p.id === currentPhase);
return ( return (
<nav className="flex gap-1 overflow-x-auto"> <nav
{PHASES.map((p) => { aria-label="Avanzamento workflow"
className="flex items-center gap-0 overflow-x-auto py-0.5"
>
{PHASES.map((p, i) => {
const isActive = currentPhase === p.id; const isActive = currentPhase === p.id;
const isDone = activeIdx > -1 && i < activeIdx;
return ( return (
<span <div key={p.id} className="flex items-center">
key={p.id} {i > 0 && (
data-testid={`phase-${p.id}`} <span
data-active={isActive ? "true" : "false"} aria-hidden
className={[ className={[
"px-2 py-0.5 rounded text-xs whitespace-nowrap", "mx-1.5 h-px w-4 shrink-0",
isActive isDone || isActive ? "bg-primary/40" : "bg-border",
? "bg-primary text-primary-foreground font-bold" ].join(" ")}
: "text-muted-foreground border", />
].join(" ")} )}
> <span
{p.id}: {p.name} data-testid={`phase-${p.id}`}
</span> data-active={isActive ? "true" : "false"}
title={`${p.id}: ${p.name}`}
className={[
"inline-flex items-center gap-1.5 whitespace-nowrap rounded-full px-2.5 py-1 text-xs transition-colors",
isActive
? "bg-primary text-primary-foreground font-semibold shadow-sm shadow-primary/20"
: isDone
? "text-foreground/70 font-medium"
: "text-muted-foreground",
].join(" ")}
>
<span
className={[
"font-heading text-[0.7rem] font-semibold",
isActive
? "text-primary-foreground"
: isDone
? "text-primary/80"
: "text-muted-foreground/70",
].join(" ")}
>
{p.id}
</span>
<span className={isActive ? "inline" : "hidden md:inline"}>{p.name}</span>
</span>
</div>
); );
})} })}
</nav> </nav>
frontend/src/test/setup.ts
+15
View File
@@ -1,6 +1,21 @@
import "@testing-library/jest-dom/vitest"; import "@testing-library/jest-dom/vitest";
import { server } from "./msw"; import { server } from "./msw";
// jsdom lacks matchMedia; sonner's <Toaster> (mounted in AppShell) needs it.
if (!window.matchMedia) {
window.matchMedia = (query: string) =>
({
matches: false,
media: query,
onchange: null,
addEventListener: () => {},
removeEventListener: () => {},
addListener: () => {},
removeListener: () => {},
dispatchEvent: () => false,
}) as unknown as MediaQueryList;
}
beforeAll(() => server.listen()); beforeAll(() => server.listen());
afterEach(() => server.resetHandlers()); afterEach(() => server.resetHandlers());
afterAll(() => server.close()); afterAll(() => server.close());