Redesign chat UI and fix MedGemma generation config issues

- Landing page: sunrise orb with glassmorphism, about section, disclaimer
- Chat page: remove card wrappers from AI responses, plain text rendering
- Tool calls shown as inline status lines with dots/spinners (not cards)
- Thinking segments show animated spinner while active, done dot when complete
- Fix max_new_tokens vs max_length conflict in generation_config
- Fix Gemma3ImageProcessor warning by explicitly loading fast processor
- Add chat route import to backend routes __init__

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

backend/routes/__init__.py

@@ -1 +1 @@
-from . import patients, lesions, analysis
+from . import patients, lesions, analysis, chat

models/medgemma_agent.py

@@ -205,7 +205,7 @@ class MedGemmaAgent:
 
         import os
         import torch
-        from transformers import pipeline
+        from transformers import pipeline, AutoProcessor
 
         # Authenticate with HF Hub (required for gated models like MedGemma)
         hf_token = os.environ.get("HF_TOKEN")
@@ -234,13 +234,23 @@ class MedGemmaAgent:
         )
 
         start = time.time()
+        processor = AutoProcessor.from_pretrained(
+            self.model_id, use_fast=True, token=hf_token,
+        )
         self.pipe = pipeline(
             "image-text-to-text",
             model=self.model_id,
             model_kwargs=model_kwargs,
             token=hf_token,  # pass explicitly in addition to login()
+            image_processor=processor.image_processor,
+            tokenizer=processor.tokenizer,
         )
 
+        # Clear default max_length from generation_config to avoid conflict
+        # with max_new_tokens passed at inference time
+        if hasattr(self.pipe.model, "generation_config"):
+            self.pipe.model.generation_config.max_length = None
+
         self._print(f"Model loaded in {time.time() - start:.1f}s")
         self.loaded = True
 

web/src/components/MessageContent.css

@@ -5,19 +5,19 @@
   gap: 6px;
   font-size: 0.9375rem;
   line-height: 1.6;
-  color: var(--gray-800);
+  color: #333333;
   width: 100%;
 }
 
 /* ─── Stage header ───────────────────────────────────────────────────────── */
 .mc-stage {
-  font-size: 0.75rem;
+  font-size: 0.7rem;
   font-weight: 600;
-  color: var(--primary);
+  color: #999999;
   text-transform: uppercase;
   letter-spacing: 0.06em;
   padding: 8px 0 2px;
-  border-top: 1px solid var(--gray-100);
+  border-top: 1px solid rgba(0, 0, 0, 0.05);
   margin-top: 4px;
 }
 
@@ -29,14 +29,39 @@
 
 /* ─── Thinking text ──────────────────────────────────────────────────────── */
 .mc-thinking {
+  display: flex;
+  align-items: center;
+  gap: 8px;
   font-size: 0.8125rem;
-  color: var(--gray-500);
+  color: #999999;
   font-style: italic;
 }
 
+.mc-thinking-spinner {
+  width: 12px;
+  height: 12px;
+  border: 2px solid rgba(0, 0, 0, 0.08);
+  border-top-color: #999999;
+  border-radius: 50%;
+  animation: mc-spin 0.8s linear infinite;
+  flex-shrink: 0;
+}
+
+.mc-thinking-done {
+  width: 6px;
+  height: 6px;
+  background: #bbbbbb;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+@keyframes mc-spin {
+  to { transform: rotate(360deg); }
+}
+
 /* ─── Response block (markdown) ──────────────────────────────────────────── */
 .mc-response {
-  color: var(--gray-800);
+  color: #333333;
 }
 
 .mc-response p {
@@ -49,7 +74,7 @@
 
 .mc-response strong {
   font-weight: 600;
-  color: var(--gray-900);
+  color: #1a1a1a;
 }
 
 .mc-response em {
@@ -72,29 +97,29 @@
 .mc-response h4 {
   font-size: 0.9375rem;
   font-weight: 600;
-  color: var(--gray-900);
+  color: #111111;
   margin: 10px 0 4px;
 }
 
 .mc-response code {
   font-family: monospace;
   font-size: 0.875em;
-  background: var(--gray-100);
+  background: rgba(0, 0, 0, 0.05);
   padding: 1px 5px;
   border-radius: 4px;
 }
 
 /* ─── Tool output (monospace block) ─────────────────────────────────────── */
 .mc-tool-output {
-  background: var(--gray-900);
-  border-radius: 8px;
+  background: #1a1a1a;
+  border-radius: 10px;
   overflow: hidden;
 }
 
 .mc-tool-output-label {
   font-size: 0.6875rem;
   font-weight: 600;
-  color: var(--gray-400);
+  color: #777777;
   text-transform: uppercase;
   letter-spacing: 0.05em;
   padding: 6px 12px 4px;
@@ -108,7 +133,7 @@
   font-family: 'SF Mono', 'Fira Code', monospace;
   font-size: 0.8rem;
   line-height: 1.5;
-  color: #e2e8f0;
+  color: #e0e0e0;
   white-space: pre;
   overflow-x: auto;
 }
@@ -119,9 +144,9 @@
 }
 
 .mc-image-label {
-  font-size: 0.75rem;
+  font-size: 0.7rem;
   font-weight: 600;
-  color: var(--gray-500);
+  color: #999999;
   text-transform: uppercase;
   letter-spacing: 0.05em;
   margin-bottom: 6px;
@@ -130,16 +155,16 @@
 .mc-gradcam-img {
   width: 100%;
   max-width: 380px;
-  border-radius: 10px;
-  border: 1px solid var(--gray-200);
+  border-radius: 12px;
+  border: 1px solid rgba(0, 0, 0, 0.06);
   display: block;
 }
 
 .mc-comparison-img {
   width: 100%;
   max-width: 560px;
-  border-radius: 10px;
-  border: 1px solid var(--gray-200);
+  border-radius: 12px;
+  border: 1px solid rgba(0, 0, 0, 0.06);
   display: block;
 }
 
@@ -160,22 +185,22 @@
 .mc-gradcam-compare-title {
   font-size: 0.75rem;
   font-weight: 600;
-  color: var(--gray-600);
+  color: #666666;
   text-align: center;
 }
 
 .mc-gradcam-compare-img {
   width: 100%;
-  border-radius: 8px;
-  border: 1px solid var(--gray-200);
+  border-radius: 10px;
+  border: 1px solid rgba(0, 0, 0, 0.06);
   display: block;
 }
 
 /* ─── Result / error / complete / observation ───────────────────────────── */
 .mc-result {
-  background: linear-gradient(135deg, #f0fdf4, #dcfce7);
-  border: 1px solid #86efac;
-  border-radius: 8px;
+  background: rgba(22, 163, 74, 0.08);
+  border: 1px solid rgba(22, 163, 74, 0.15);
+  border-radius: 10px;
   padding: 8px 12px;
   font-size: 0.875rem;
   font-weight: 500;
@@ -183,9 +208,9 @@
 }
 
 .mc-error {
-  background: #fef2f2;
-  border: 1px solid #fca5a5;
-  border-radius: 8px;
+  background: rgba(239, 68, 68, 0.06);
+  border: 1px solid rgba(239, 68, 68, 0.15);
+  border-radius: 10px;
   padding: 8px 12px;
   font-size: 0.875rem;
   color: #dc2626;
@@ -193,13 +218,13 @@
 
 .mc-complete {
   font-size: 0.8rem;
-  color: var(--gray-400);
+  color: #bbbbbb;
   text-align: right;
 }
 
 .mc-observation {
   font-size: 0.875rem;
-  color: var(--gray-600);
+  color: #666666;
   font-style: italic;
 }
 
@@ -207,21 +232,21 @@
 .mc-text {
   white-space: pre-wrap;
   word-break: break-word;
-  color: var(--gray-700);
+  color: #444444;
   font-size: 0.875rem;
 }
 
 /* ─── References ─────────────────────────────────────────────────────────── */
 .mc-references {
-  border-top: 1px solid var(--gray-100);
+  border-top: 1px solid rgba(0, 0, 0, 0.05);
   padding-top: 8px;
   margin-top: 4px;
 }
 
 .mc-references-title {
-  font-size: 0.75rem;
+  font-size: 0.7rem;
   font-weight: 600;
-  color: var(--gray-500);
+  color: #999999;
   text-transform: uppercase;
   letter-spacing: 0.05em;
   margin-bottom: 4px;
@@ -229,7 +254,7 @@
 
 .mc-ref-item {
   font-size: 0.8125rem;
-  color: var(--gray-600);
+  color: #666666;
   line-height: 1.5;
 }
 
@@ -237,7 +262,7 @@
   font-size: 0.6875rem;
   vertical-align: super;
   margin-right: 4px;
-  color: var(--primary);
+  color: #555555;
   font-weight: 600;
 }
 
@@ -246,5 +271,5 @@
 }
 
 .mc-ref-page {
-  color: var(--gray-400);
+  color: #aaaaaa;
 }

web/src/components/MessageContent.tsx

@@ -158,8 +158,18 @@ export function MessageContent({ text }: { text: string }) {
           case 'stage':
             return <div key={i} className="mc-stage">{seg.label}</div>;
 
-          case 'thinking':
-            return <div key={i} className="mc-thinking">{seg.content}</div>;
+          case 'thinking': {
+            // Spinner only on the last thinking segment (earlier ones are done)
+            const isLast = !segments.slice(i + 1).some(s => s.type !== 'text' || s.content.trim());
+            return (
+              <div key={i} className="mc-thinking">
+                {isLast
+                  ? <span className="mc-thinking-spinner" />
+                  : <span className="mc-thinking-done" />}
+                {seg.content}
+              </div>
+            );
+          }
 
           case 'response':
             return (

web/src/components/ToolCallCard.css

@@ -1,338 +1,59 @@
-/* ─── Card container ─────────────────────────────────────────────────────── */
-.tool-card {
-  border: 1px solid var(--gray-200);
-  border-left: 3px solid var(--primary);
-  border-radius: 10px;
-  overflow: hidden;
-  background: var(--gray-50);
-  margin-top: 8px;
-}
-
-.tool-card.loading {
-  border-left-color: var(--gray-400);
-}
-
-.tool-card.error {
-  border-left-color: #ef4444;
-}
-
-/* ─── Header (collapsed row) ─────────────────────────────────────────────── */
-.tool-card-header {
-  width: 100%;
+/* ─── Tool status line ────────────────────────────────────────────────────── */
+.tool-line {
   display: flex;
   align-items: center;
   gap: 8px;
-  padding: 10px 14px;
-  background: transparent;
-  border: none;
-  cursor: pointer;
-  text-align: left;
-  transition: background 0.15s;
-}
-
-.tool-card-header:hover:not(:disabled) {
-  background: var(--gray-100);
-}
-
-.tool-card-header:disabled {
-  cursor: default;
+  padding: 4px 0;
 }
 
-.tool-icon {
-  font-size: 1rem;
+.tool-line-indicator {
   flex-shrink: 0;
-}
-
-.tool-label {
-  flex: 1;
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: var(--gray-700);
-  text-transform: capitalize;
-}
-
-.tool-status {
-  font-size: 0.8125rem;
-  flex-shrink: 0;
-}
-
-.tool-status.done {
-  color: var(--success, #22c55e);
-  font-weight: 600;
-}
-
-.tool-status.calling {
-  color: var(--gray-500);
   display: flex;
   align-items: center;
-  gap: 5px;
 }
 
-.tool-status.error-text {
-  color: #ef4444;
-}
-
-.tool-header-summary {
-  font-size: 0.8125rem;
-  color: var(--gray-500);
-  font-weight: 400;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 200px;
+.tool-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
 }
 
-.tool-chevron {
-  font-size: 0.625rem;
-  color: var(--gray-400);
-  margin-left: 2px;
-  flex-shrink: 0;
-}
+.dot-green { background: #22c55e; }
+.dot-amber { background: #f59e0b; }
+.dot-red   { background: #ef4444; }
+.dot-blue  { background: #3b82f6; }
 
-/* ─── Spinner ────────────────────────────────────────────────────────────── */
-.spinner {
+.tool-spinner {
   display: inline-block;
-  width: 12px;
-  height: 12px;
-  border: 2px solid var(--gray-300);
-  border-top-color: var(--gray-600);
+  width: 10px;
+  height: 10px;
+  border: 1.5px solid #dddddd;
+  border-top-color: #888888;
   border-radius: 50%;
-  animation: spin 0.8s linear infinite;
+  animation: tool-spin 0.8s linear infinite;
 }
 
-@keyframes spin {
+@keyframes tool-spin {
   to { transform: rotate(360deg); }
 }
 
-/* ─── Card body ──────────────────────────────────────────────────────────── */
-.tool-card-body {
-  padding: 14px;
-  border-top: 1px solid var(--gray-200);
-  background: white;
-}
-
-/* ─── analyze_image ──────────────────────────────────────────────────────── */
-.analyze-result {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.analyze-top {
-  display: flex;
-  gap: 14px;
-  align-items: flex-start;
-}
-
-.analyze-thumb {
-  width: 72px;
-  height: 72px;
-  object-fit: cover;
-  border-radius: 8px;
-  border: 1px solid var(--gray-200);
-  flex-shrink: 0;
-}
-
-.analyze-info {
-  flex: 1;
-  min-width: 0;
-}
-
-.diagnosis-name {
-  font-size: 0.9375rem;
-  font-weight: 600;
-  color: var(--gray-900);
-  margin: 0 0 4px;
-  line-height: 1.3;
-}
-
-.confidence-label {
-  font-size: 0.8125rem;
-  font-weight: 500;
-  margin: 0 0 6px;
-}
-
-.confidence-bar-track {
-  height: 6px;
-  background: var(--gray-200);
-  border-radius: 999px;
-  overflow: hidden;
-}
-
-.confidence-bar-fill {
-  height: 100%;
-  border-radius: 999px;
-  transition: width 0.3s ease;
-}
-
-.analyze-summary {
-  font-size: 0.875rem;
-  color: var(--gray-700);
-  line-height: 1.6;
-  margin: 0;
-  border-top: 1px solid var(--gray-100);
-  padding-top: 10px;
-  white-space: pre-wrap;
-}
-
-.other-predictions {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  border-top: 1px solid var(--gray-100);
-  padding-top: 10px;
-}
-
-.prediction-row {
-  display: flex;
-  justify-content: space-between;
+.tool-line-label {
   font-size: 0.8125rem;
+  color: #888888;
 }
 
-.pred-name {
-  color: var(--gray-600);
-}
-
-.pred-pct {
-  color: var(--gray-500);
-  font-variant-numeric: tabular-nums;
-}
-
-/* ─── compare_images ─────────────────────────────────────────────────────── */
-.compare-result {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.carousel {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-}
-
-.carousel-image-wrap {
-  position: relative;
-  display: inline-block;
-}
-
-.carousel-image {
-  width: 200px;
-  height: 160px;
-  object-fit: cover;
-  border-radius: 10px;
-  border: 1px solid var(--gray-200);
-  display: block;
-}
-
-.carousel-label {
-  position: absolute;
-  bottom: 8px;
-  left: 50%;
-  transform: translateX(-50%);
-  background: rgba(0, 0, 0, 0.55);
-  color: white;
-  font-size: 0.75rem;
-  font-weight: 600;
-  padding: 3px 10px;
-  border-radius: 999px;
-  white-space: nowrap;
-}
-
-.carousel-btn {
-  background: white;
-  border: 1px solid var(--gray-300);
-  border-radius: 6px;
-  width: 28px;
-  height: 28px;
-  cursor: pointer;
+.tool-line-status {
   font-size: 0.75rem;
-  color: var(--gray-600);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-}
-
-.carousel-btn:hover {
-  background: var(--gray-100);
-}
-
-.carousel-dots {
-  position: absolute;
-  bottom: -18px;
-  left: 50%;
-  transform: translateX(-50%);
-  display: flex;
-  gap: 5px;
-}
-
-.carousel-dot {
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-  background: var(--gray-300);
-  cursor: pointer;
-  transition: background 0.15s;
-}
-
-.carousel-dot.active {
-  background: var(--primary);
+  color: #bbbbbb;
 }
 
-.compare-status {
-  font-size: 0.9375rem;
-  margin-top: 6px;
-}
-
-.feature-changes {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-
-.feature-row {
-  display: flex;
-  justify-content: space-between;
+.tool-line-summary {
   font-size: 0.8125rem;
-}
-
-.feature-name {
-  color: var(--gray-600);
-  text-transform: capitalize;
-}
-
-.feature-delta {
-  font-variant-numeric: tabular-nums;
+  color: #555555;
   font-weight: 500;
 }
 
-.compare-summary {
-  font-size: 0.875rem;
-  color: var(--gray-600);
-  line-height: 1.5;
-  margin: 0;
-  border-top: 1px solid var(--gray-100);
-  padding-top: 10px;
-}
-
-/* ─── Generic fallback ───────────────────────────────────────────────────── */
-.generic-result {
+.tool-line-error {
   font-size: 0.75rem;
-  background: var(--gray-50);
-  border-radius: 6px;
-  padding: 10px;
-  overflow-x: auto;
-  color: var(--gray-700);
-  margin: 0;
-  white-space: pre-wrap;
-  word-break: break-all;
+  color: #ef4444;
 }

web/src/components/ToolCallCard.tsx

@@ -1,4 +1,3 @@
-import { useEffect, useState } from 'react';
 import { ToolCall } from '../types';
 import './ToolCallCard.css';
 
@@ -6,202 +5,56 @@ interface ToolCallCardProps {
   toolCall: ToolCall;
 }
 
-/** One-line summary shown in the collapsed header so results are visible at a glance */
-function CollapsedSummary({ toolCall }: { toolCall: ToolCall }) {
-  const r = toolCall.result;
-  if (!r) return null;
-
-  if (toolCall.tool === 'analyze_image') {
-    const name = r.full_name ?? r.diagnosis;
-    const pct = r.confidence != null ? `${Math.round(r.confidence * 100)}%` : null;
-    if (name) return (
-      <span className="tool-header-summary">
-        {name}{pct ? ` — ${pct}` : ''}
-      </span>
-    );
-  }
-
-  if (toolCall.tool === 'compare_images') {
-    const key = r.status_label ?? 'STABLE';
-    const cfg = STATUS_CONFIG[key] ?? { emoji: '⚪', label: key };
-    return (
-      <span className="tool-header-summary">
-        {cfg.emoji} {cfg.label}
-      </span>
-    );
-  }
+const TOOL_LABELS: Record<string, string> = {
+  analyze_image: 'Analyse image',
+  compare_images: 'Compare images',
+  load_model: 'Loading analysis model',
+  visual_exam: 'MedGemma visual examination',
+  classify: 'Running classifier',
+  gradcam: 'Generating attention map',
+  guidelines: 'Searching clinical guidelines',
+};
 
-  return null;
-}
+const STATUS_CONFIG: Record<string, { label: string; dot: string }> = {
+  STABLE: { label: 'Stable', dot: 'dot-green' },
+  MINOR_CHANGE: { label: 'Minor Change', dot: 'dot-amber' },
+  SIGNIFICANT_CHANGE: { label: 'Significant Change', dot: 'dot-red' },
+  IMPROVED: { label: 'Improved', dot: 'dot-blue' },
+};
 
 export function ToolCallCard({ toolCall }: ToolCallCardProps) {
-  // Auto-expand when the tool completes so results are immediately visible.
-  // User can collapse manually afterwards.
-  const [expanded, setExpanded] = useState(false);
-
-  useEffect(() => {
-    if (toolCall.status === 'complete') setExpanded(true);
-  }, [toolCall.status]);
-
   const isLoading = toolCall.status === 'calling';
   const isError = toolCall.status === 'error';
-
-  const icon = toolCall.tool === 'compare_images' ? '🔄' : '🔬';
-  const label = toolCall.tool.replace(/_/g, ' ');
+  const label = TOOL_LABELS[toolCall.tool] ?? toolCall.tool.replace(/_/g, ' ');
+
+  // Build summary text for completed tools
+  let summary = '';
+  if (toolCall.status === 'complete' && toolCall.result) {
+    const r = toolCall.result;
+    if (toolCall.tool === 'analyze_image' && (r.full_name || r.diagnosis)) {
+      const pct = r.confidence != null ? ` (${Math.round(r.confidence * 100)}%)` : '';
+      summary = `${r.full_name ?? r.diagnosis}${pct}`;
+    } else if (toolCall.tool === 'compare_images' && r.status_label) {
+      const cfg = STATUS_CONFIG[r.status_label];
+      summary = cfg?.label ?? r.status_label;
+    }
+  }
 
   return (
-    <div className={`tool-card ${isLoading ? 'loading' : ''} ${isError ? 'error' : ''}`}>
-      <button
-        className="tool-card-header"
-        onClick={() => !isLoading && setExpanded(e => !e)}
-        disabled={isLoading}
-      >
-        <span className="tool-icon">{icon}</span>
-        <span className="tool-label">{label}</span>
+    <div className="tool-line">
+      <span className="tool-line-indicator">
         {isLoading ? (
-          <span className="tool-status calling">
-            <span className="spinner" /> running…
-          </span>
+          <span className="tool-spinner" />
         ) : isError ? (
-          <span className="tool-status error-text">error</span>
+          <span className="tool-dot dot-red" />
         ) : (
-          <>
-            <span className="tool-status done">✓</span>
-            {!expanded && <CollapsedSummary toolCall={toolCall} />}
-          </>
-        )}
-        {!isLoading && (
-          <span className="tool-chevron">{expanded ? '▲' : '▼'}</span>
+          <span className="tool-dot dot-green" />
         )}
-      </button>
-
-      {expanded && !isLoading && toolCall.result && (
-        <div className="tool-card-body">
-          {toolCall.tool === 'analyze_image' && (
-            <AnalyzeImageResult result={toolCall.result} />
-          )}
-          {toolCall.tool === 'compare_images' && (
-            <CompareImagesResult result={toolCall.result} />
-          )}
-          {toolCall.tool !== 'analyze_image' && toolCall.tool !== 'compare_images' && (
-            <GenericResult result={toolCall.result} />
-          )}
-        </div>
-      )}
-    </div>
-  );
-}
-
-/* ─── analyze_image renderer ─────────────────────────────────────────────── */
-
-function AnalyzeImageResult({ result }: { result: ToolCall['result'] }) {
-  if (!result) return null;
-
-  const hasClassifier = result.diagnosis != null;
-  const topPrediction = result.all_predictions?.[0];
-  const otherPredictions = result.all_predictions?.slice(1) ?? [];
-  const confidence = result.confidence ?? topPrediction?.probability ?? 0;
-  const pct = Math.round(confidence * 100);
-  const statusColor = pct >= 70 ? '#ef4444' : pct >= 40 ? '#f59e0b' : '#22c55e';
-
-  return (
-    <div className="analyze-result">
-      <div className="analyze-top">
-        {result.image_url && (
-          <img
-            src={result.image_url}
-            alt="Analyzed lesion"
-            className="analyze-thumb"
-          />
-        )}
-        <div className="analyze-info">
-          {hasClassifier ? (
-            <>
-              <p className="diagnosis-name">{result.full_name ?? result.diagnosis}</p>
-              <p className="confidence-label" style={{ color: statusColor }}>
-                Confidence: {pct}%
-              </p>
-              <div className="confidence-bar-track">
-                <div
-                  className="confidence-bar-fill"
-                  style={{ width: `${pct}%`, background: statusColor }}
-                />
-              </div>
-            </>
-          ) : (
-            <p className="diagnosis-name" style={{ color: 'var(--gray-500)', fontWeight: 400, fontSize: '0.875rem' }}>
-              Visual assessment complete — classifier unavailable
-            </p>
-          )}
-        </div>
-      </div>
-
-      {hasClassifier && otherPredictions.length > 0 && (
-        <ul className="other-predictions">
-          {otherPredictions.map(p => (
-            <li key={p.class} className="prediction-row">
-              <span className="pred-name">{p.full_name ?? p.class}</span>
-              <span className="pred-pct">{Math.round(p.probability * 100)}%</span>
-            </li>
-          ))}
-        </ul>
-      )}
-    </div>
-  );
-}
-
-/* ─── compare_images renderer ────────────────────────────────────────────── */
-
-const STATUS_CONFIG: Record<string, { label: string; color: string; emoji: string }> = {
-  STABLE: { label: 'Stable', color: '#22c55e', emoji: '🟢' },
-  MINOR_CHANGE: { label: 'Minor Change', color: '#f59e0b', emoji: '🟡' },
-  SIGNIFICANT_CHANGE: { label: 'Significant Change', color: '#ef4444', emoji: '🔴' },
-  IMPROVED: { label: 'Improved', color: '#3b82f6', emoji: '🔵' },
-};
-
-function CompareImagesResult({ result }: { result: ToolCall['result'] }) {
-  if (!result) return null;
-
-  const statusKey = result.status_label ?? 'STABLE';
-  const status = STATUS_CONFIG[statusKey] ?? { label: statusKey, color: '#6b7280', emoji: '⚪' };
-  const featureChanges = Object.entries(result.feature_changes ?? {});
-
-  return (
-    <div className="compare-result">
-      <div className="compare-status" style={{ color: status.color }}>
-        <strong>Status: {status.label} {status.emoji}</strong>
-      </div>
-
-      {featureChanges.length > 0 && (
-        <ul className="feature-changes">
-          {featureChanges.map(([name, vals]) => {
-            const delta = vals.curr - vals.prev;
-            const sign = delta > 0 ? '+' : '';
-            return (
-              <li key={name} className="feature-row">
-                <span className="feature-name">{name}</span>
-                <span className="feature-delta" style={{ color: Math.abs(delta) > 0.1 ? '#f59e0b' : '#6b7280' }}>
-                  {sign}{(delta * 100).toFixed(1)}%
-                </span>
-              </li>
-            );
-          })}
-        </ul>
-      )}
-
-      {result.summary && (
-        <p className="compare-summary">{result.summary}</p>
-      )}
+      </span>
+      <span className="tool-line-label">{label}</span>
+      {isLoading && <span className="tool-line-status">running</span>}
+      {summary && <span className="tool-line-summary">{summary}</span>}
+      {isError && <span className="tool-line-error">failed</span>}
     </div>
   );
 }
-
-/* ─── Generic (unknown tool) renderer ───────────────────────────────────── */
-
-function GenericResult({ result }: { result: ToolCall['result'] }) {
-  return (
-    <pre className="generic-result">
-      {JSON.stringify(result, null, 2)}
-    </pre>
-  );
-}

web/src/pages/ChatPage.css

@@ -3,7 +3,7 @@
   display: flex;
   flex-direction: column;
   height: 100vh;
-  background: var(--gray-50);
+  background: #fafafa;
   overflow: hidden;
 }
 
@@ -14,8 +14,10 @@
   gap: 12px;
   padding: 0 16px;
   height: 56px;
-  background: white;
-  border-bottom: 1px solid var(--gray-200);
+  background: rgba(255, 255, 255, 0.7);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
   flex-shrink: 0;
   z-index: 10;
 }
@@ -29,14 +31,14 @@
   border: none;
   background: transparent;
   cursor: pointer;
-  color: var(--gray-600);
+  color: #555555;
   border-radius: 8px;
   transition: background 0.15s;
   flex-shrink: 0;
 }
 
 .header-back-btn:hover {
-  background: var(--gray-100);
+  background: rgba(0, 0, 0, 0.05);
 }
 
 .header-back-btn svg {
@@ -54,7 +56,7 @@
 .header-app-name {
   font-size: 0.7rem;
   font-weight: 600;
-  color: var(--primary);
+  color: #999999;
   text-transform: uppercase;
   letter-spacing: 0.05em;
   line-height: 1;
@@ -63,7 +65,7 @@
 .header-patient-name {
   font-size: 1rem;
   font-weight: 600;
-  color: var(--gray-900);
+  color: #111111;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -71,30 +73,33 @@
 }
 
 .header-clear-btn {
-  border: 1px solid var(--gray-300);
+  border: 1px solid rgba(0, 0, 0, 0.1);
   background: transparent;
   border-radius: 8px;
   padding: 6px 14px;
   font-size: 0.8125rem;
-  color: var(--gray-600);
+  color: #777777;
   cursor: pointer;
   transition: all 0.15s;
   flex-shrink: 0;
 }
 
 .header-clear-btn:hover {
-  background: var(--gray-100);
-  border-color: var(--gray-400);
+  background: rgba(0, 0, 0, 0.04);
+  border-color: rgba(0, 0, 0, 0.15);
 }
 
 /* ─── Messages ──────────────────────────────────────────────────────────── */
 .chat-messages {
   flex: 1;
   overflow-y: auto;
-  padding: 20px 16px;
+  padding: 28px 24px;
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  gap: 24px;
+  max-width: 760px;
+  width: 100%;
+  margin: 0 auto;
 }
 
 .chat-empty {
@@ -103,7 +108,7 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  color: var(--gray-400);
+  color: #aaaaaa;
   text-align: center;
   gap: 12px;
   margin: auto;
@@ -112,7 +117,7 @@
 .chat-empty-icon svg {
   width: 40px;
   height: 40px;
-  color: var(--gray-300);
+  color: #cccccc;
 }
 
 .chat-empty p {
@@ -123,42 +128,35 @@
 
 .message-row {
   display: flex;
-  max-width: 720px;
   width: 100%;
 }
 
 .message-row.user {
-  align-self: flex-end;
   justify-content: flex-end;
 }
 
 .message-row.assistant {
-  align-self: flex-start;
   justify-content: flex-start;
 }
 
-/* ─── Bubbles ────────────────────────────────────────────────────────────── */
-.bubble {
-  max-width: 85%;
-  border-radius: 16px;
-  padding: 12px 16px;
+/* ─── User message ───────────────────────────────────────────────────────── */
+.user-message {
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  align-items: flex-end;
+  gap: 4px;
+  max-width: 75%;
 }
 
 .user-bubble {
-  background: var(--primary);
-  color: white;
+  background: #111111;
+  color: #ffffff;
+  border-radius: 18px;
   border-bottom-right-radius: 4px;
-}
-
-.assistant-bubble {
-  background: white;
-  border: 1px solid var(--gray-200);
-  border-bottom-left-radius: 4px;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
-  max-width: 90%;
+  padding: 12px 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
 }
 
 .bubble-text {
@@ -167,35 +165,48 @@
   white-space: pre-wrap;
   word-break: break-word;
   margin: 0;
+  color: #ffffff;
 }
 
-.user-bubble .bubble-text {
-  color: white;
+.message-image {
+  width: 100%;
+  max-width: 260px;
+  border-radius: 12px;
+  display: block;
+}
+
+/* ─── Assistant message - no card, just text ──────────────────────────────── */
+.assistant-message {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  max-width: 90%;
 }
 
 .assistant-text {
-  color: var(--gray-800);
+  color: #333333;
+  font-size: 0.9375rem;
+  line-height: 1.65;
 }
 
-/* Image in user bubble */
-.message-image {
-  width: 100%;
-  max-width: 260px;
-  border-radius: 10px;
-  display: block;
+/* ─── Timestamps ─────────────────────────────────────────────────────────── */
+.msg-time {
+  font-size: 0.6875rem;
+  color: #bbbbbb;
+  padding: 0 4px;
 }
 
 /* ─── Thinking indicator ──────────────────────────────────────────────��──── */
 .thinking {
   display: flex;
   gap: 4px;
-  padding: 4px 0;
+  padding: 8px 0;
 }
 
 .dot {
   width: 7px;
   height: 7px;
-  background: var(--gray-400);
+  background: #bbbbbb;
   border-radius: 50%;
   animation: bounce 1.2s infinite;
 }
@@ -210,8 +221,10 @@
 
 /* ─── Input bar ──────────────────────────────────────────────────────────── */
 .chat-input-bar {
-  background: white;
-  border-top: 1px solid var(--gray-200);
+  background: rgba(255, 255, 255, 0.8);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border-top: 1px solid rgba(0, 0, 0, 0.06);
   padding: 12px 16px;
   flex-shrink: 0;
 }
@@ -226,8 +239,8 @@
   width: 72px;
   height: 72px;
   object-fit: cover;
-  border-radius: 10px;
-  border: 2px solid var(--gray-200);
+  border-radius: 12px;
+  border: 1px solid rgba(0, 0, 0, 0.08);
   display: block;
 }
 
@@ -237,7 +250,7 @@
   right: -8px;
   width: 22px;
   height: 22px;
-  background: var(--gray-700);
+  background: #333333;
   color: white;
   border: none;
   border-radius: 50%;
@@ -253,16 +266,19 @@
   display: flex;
   align-items: flex-end;
   gap: 8px;
+  max-width: 760px;
+  margin: 0 auto;
+  width: 100%;
 }
 
 .attach-btn {
   width: 38px;
   height: 38px;
-  border: 1px solid var(--gray-300);
+  border: 1px solid rgba(0, 0, 0, 0.1);
   background: transparent;
-  border-radius: 10px;
+  border-radius: 12px;
   cursor: pointer;
-  color: var(--gray-500);
+  color: #777777;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -271,9 +287,9 @@
 }
 
 .attach-btn:hover:not(:disabled) {
-  background: var(--gray-100);
-  border-color: var(--gray-400);
-  color: var(--gray-700);
+  background: rgba(0, 0, 0, 0.04);
+  border-color: rgba(0, 0, 0, 0.15);
+  color: #444444;
 }
 
 .attach-btn:disabled {
@@ -288,8 +304,8 @@
 
 .chat-input {
   flex: 1;
-  border: 1px solid var(--gray-300);
-  border-radius: 10px;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-radius: 12px;
   padding: 9px 14px;
   font-size: 0.9375rem;
   font-family: inherit;
@@ -298,25 +314,26 @@
   max-height: 160px;
   overflow-y: auto;
   transition: border-color 0.15s;
+  background: rgba(255, 255, 255, 0.6);
 }
 
 .chat-input:focus {
   outline: none;
-  border-color: var(--primary);
+  border-color: rgba(0, 0, 0, 0.25);
 }
 
 .chat-input:disabled {
-  background: var(--gray-50);
-  color: var(--gray-400);
+  background: rgba(0, 0, 0, 0.03);
+  color: #aaaaaa;
 }
 
 .send-btn {
   width: 38px;
   height: 38px;
-  background: var(--primary);
+  background: #111111;
   color: white;
   border: none;
-  border-radius: 10px;
+  border-radius: 12px;
   cursor: pointer;
   display: flex;
   align-items: center;
@@ -326,11 +343,11 @@
 }
 
 .send-btn:hover:not(:disabled) {
-  background: var(--primary-hover);
+  background: #333333;
 }
 
 .send-btn:disabled {
-  background: var(--gray-300);
+  background: #cccccc;
   cursor: not-allowed;
 }
 

web/src/pages/ChatPage.tsx

@@ -7,6 +7,13 @@ import { MessageContent } from '../components/MessageContent';
 import { Patient, ChatMessage, ToolCall } from '../types';
 import './ChatPage.css';
 
+function formatTime(ts: string) {
+  return new Date(ts).toLocaleTimeString('en-US', {
+    hour: 'numeric',
+    minute: '2-digit',
+  });
+}
+
 export function ChatPage() {
   const { patientId } = useParams<{ patientId: string }>();
   const navigate = useNavigate();
@@ -176,16 +183,27 @@ export function ChatPage() {
         {messages.map(msg => (
           <div key={msg.id} className={`message-row ${msg.role}`}>
             {msg.role === 'user' ? (
-              <div className="bubble user-bubble">
-                {msg.image_url && (
-                  <img src={msg.image_url} className="message-image" alt="Attached image" />
-                )}
-                {msg.content && <p className="bubble-text">{msg.content}</p>}
+              <div className="user-message">
+                <div className="user-bubble">
+                  {msg.image_url && (
+                    <img src={msg.image_url} className="message-image" alt="Attached" />
+                  )}
+                  {msg.content && <p className="bubble-text">{msg.content}</p>}
+                </div>
+                <span className="msg-time">{formatTime(msg.timestamp)}</span>
               </div>
             ) : (
-              <div className="bubble assistant-bubble">
+              <div className="assistant-message">
+                {/* Tool call status lines */}
+                {(msg.tool_calls ?? []).map(tc => (
+                  <ToolCallCard key={tc.id} toolCall={tc} />
+                ))}
+
+                {/* Text content */}
                 {msg.content ? (
-                  <MessageContent text={msg.content} />
+                  <div className="assistant-text">
+                    <MessageContent text={msg.content} />
+                  </div>
                 ) : (!msg.tool_calls || msg.tool_calls.length === 0) && isStreaming ? (
                   <div className="thinking">
                     <span className="dot" />
@@ -193,9 +211,10 @@ export function ChatPage() {
                     <span className="dot" />
                   </div>
                 ) : null}
-                {(msg.tool_calls ?? []).map(tc => (
-                  <ToolCallCard key={tc.id} toolCall={tc} />
-                ))}
+
+                {(msg.content || (msg.tool_calls && msg.tool_calls.length > 0)) && (
+                  <span className="msg-time">{formatTime(msg.timestamp)}</span>
+                )}
               </div>
             )}
           </div>

web/src/pages/PatientsPage.css

@@ -3,110 +3,204 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding: 60px 20px;
-  background: linear-gradient(180deg, var(--gray-50) 0%, white 100%);
+  background: #fafafa;
+  position: relative;
+  overflow: hidden;
+}
+
+/* ── Sunrise orb ── */
+.patients-page::before {
+  content: '';
+  position: absolute;
+  top: -120px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 600px;
+  height: 600px;
+  border-radius: 50%;
+  background: radial-gradient(
+    circle at 50% 50%,
+    rgba(255, 183, 77, 0.45) 0%,
+    rgba(255, 152, 67, 0.30) 25%,
+    rgba(255, 120, 80, 0.18) 45%,
+    rgba(255, 100, 100, 0.08) 65%,
+    transparent 80%
+  );
+  filter: blur(40px);
+  pointer-events: none;
+  z-index: 0;
+}
+
+.patients-page::after {
+  content: '';
+  position: absolute;
+  top: -60px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 320px;
+  height: 320px;
+  border-radius: 50%;
+  background: radial-gradient(
+    circle,
+    rgba(255, 200, 100, 0.50) 0%,
+    rgba(255, 170, 70, 0.25) 40%,
+    transparent 70%
+  );
+  filter: blur(25px);
+  pointer-events: none;
+  z-index: 0;
 }
 
-.patients-page .title {
-  font-size: 2.5rem;
+/* ── Hero ── */
+.hero {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 80px 24px 48px;
+  text-align: center;
+  max-width: 600px;
+}
+
+.title {
+  font-size: 3rem;
   font-weight: 700;
-  color: var(--gray-900);
-  margin-bottom: 8px;
+  color: #111111;
+  letter-spacing: -0.04em;
+  margin-bottom: 12px;
+}
+
+.tagline {
+  font-size: 1.05rem;
+  line-height: 1.65;
+  color: #555555;
+  margin-bottom: 36px;
+  max-width: 480px;
 }
 
-.patients-page .subtitle {
+.cta-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  background: #111111;
+  color: #ffffff;
+  border: none;
+  border-radius: 14px;
+  padding: 16px 36px;
   font-size: 1rem;
-  color: var(--gray-500);
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.25s ease;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+}
+
+.cta-btn:hover {
+  background: #333333;
+  transform: translateY(-2px);
+  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
+}
+
+.cta-btn svg {
+  width: 20px;
+  height: 20px;
+}
+
+.loading {
+  color: #6b6b6b;
+  padding: 120px 0;
+}
+
+/* ── Section shared ── */
+.patients-section,
+.how-section,
+.about-section {
+  position: relative;
+  z-index: 1;
+  width: 100%;
+  max-width: 900px;
+  padding: 0 24px;
   margin-bottom: 48px;
 }
 
-.patients-page .loading {
-  color: var(--gray-500);
+.section-label {
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: #999999;
+  margin-bottom: 16px;
 }
 
+/* ── Patient cards ── */
 .patients-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-  gap: 20px;
-  max-width: 900px;
-  width: 100%;
+  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+  gap: 16px;
 }
 
 .patient-card {
-  background: white;
-  border: 2px solid var(--gray-200);
-  border-radius: 16px;
-  padding: 28px 24px;
+  background: rgba(255, 255, 255, 0.55);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border: 1px solid rgba(255, 255, 255, 0.7);
+  border-radius: 18px;
+  padding: 28px 20px;
   cursor: pointer;
-  transition: all 0.2s ease;
+  transition: all 0.3s ease;
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 12px;
+  gap: 10px;
   position: relative;
+  box-shadow:
+    0 4px 24px rgba(0, 0, 0, 0.04),
+    0 1px 2px rgba(0, 0, 0, 0.03),
+    inset 0 1px 0 rgba(255, 255, 255, 0.8);
 }
 
 .patient-card:hover {
-  border-color: var(--primary);
-  box-shadow: 0 8px 25px rgba(99, 102, 241, 0.15);
-  transform: translateY(-2px);
-}
-
-.patient-card.new-patient {
-  border-style: dashed;
-  background: var(--gray-50);
-}
-
-.patient-card.new-patient:hover {
-  background: white;
+  background: rgba(255, 255, 255, 0.75);
+  border-color: rgba(255, 255, 255, 0.9);
+  box-shadow:
+    0 12px 40px rgba(0, 0, 0, 0.08),
+    0 2px 8px rgba(0, 0, 0, 0.04),
+    inset 0 1px 0 rgba(255, 255, 255, 0.9);
+  transform: translateY(-3px);
 }
 
 .patient-icon {
-  width: 48px;
-  height: 48px;
-  background: var(--gray-100);
+  width: 44px;
+  height: 44px;
+  background: rgba(0, 0, 0, 0.06);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
-  color: var(--gray-500);
+  color: #555555;
 }
 
 .patient-icon svg {
-  width: 28px;
-  height: 28px;
-}
-
-.add-icon {
-  width: 48px;
-  height: 48px;
-  background: var(--primary);
-  color: white;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 2rem;
-  font-weight: 300;
+  width: 24px;
+  height: 24px;
 }
 
 .patient-name {
   font-weight: 600;
-  color: var(--gray-800);
-  font-size: 1rem;
+  color: #1a1a1a;
+  font-size: 0.95rem;
   text-align: center;
 }
 
-
 .delete-btn {
   position: absolute;
-  top: 12px;
-  right: 12px;
+  top: 10px;
+  right: 10px;
   background: transparent;
   border: none;
   padding: 6px;
   cursor: pointer;
-  color: var(--gray-400);
+  color: #aaaaaa;
   opacity: 0;
   transition: all 0.2s;
   border-radius: 6px;
@@ -118,19 +212,138 @@
 
 .delete-btn:hover {
   color: #ef4444;
-  background: #fef2f2;
+  background: rgba(239, 68, 68, 0.08);
 }
 
 .delete-btn svg {
-  width: 18px;
-  height: 18px;
+  width: 16px;
+  height: 16px;
+}
+
+/* ── How It Works ── */
+.steps-row {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 16px;
+}
+
+.step-card {
+  background: rgba(255, 255, 255, 0.55);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border: 1px solid rgba(255, 255, 255, 0.7);
+  border-radius: 18px;
+  padding: 28px 24px;
+  box-shadow:
+    0 4px 24px rgba(0, 0, 0, 0.04),
+    inset 0 1px 0 rgba(255, 255, 255, 0.8);
+}
+
+.step-num {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background: #111111;
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.8rem;
+  font-weight: 700;
+  margin-bottom: 14px;
+}
+
+.step-card h3 {
+  font-size: 1rem;
+  font-weight: 600;
+  color: #1a1a1a;
+  margin-bottom: 6px;
+}
+
+.step-card p {
+  font-size: 0.875rem;
+  line-height: 1.55;
+  color: #666666;
+}
+
+/* ── About ── */
+.about-card {
+  background: rgba(255, 255, 255, 0.55);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border: 1px solid rgba(255, 255, 255, 0.7);
+  border-radius: 20px;
+  padding: 36px 32px;
+  box-shadow:
+    0 4px 24px rgba(0, 0, 0, 0.04),
+    inset 0 1px 0 rgba(255, 255, 255, 0.8);
+}
+
+.about-card h3 {
+  font-size: 1.1rem;
+  font-weight: 600;
+  color: #111111;
+  margin-bottom: 14px;
+}
+
+.about-card p {
+  font-size: 0.9rem;
+  line-height: 1.7;
+  color: #444444;
+  margin-bottom: 14px;
 }
 
-/* Modal */
+.about-card p strong {
+  color: #1a1a1a;
+}
+
+.tech-pills {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 8px;
+}
+
+.pill {
+  background: rgba(0, 0, 0, 0.06);
+  color: #333333;
+  padding: 6px 14px;
+  border-radius: 100px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  letter-spacing: 0.01em;
+}
+
+/* ── Disclaimer ── */
+.disclaimer {
+  position: relative;
+  z-index: 1;
+  width: 100%;
+  max-width: 900px;
+  padding: 0 24px;
+  margin-bottom: 60px;
+}
+
+.disclaimer p {
+  font-size: 0.8rem;
+  line-height: 1.6;
+  color: #888888;
+  text-align: center;
+  border-top: 1px solid rgba(0, 0, 0, 0.06);
+  padding-top: 24px;
+}
+
+.disclaimer strong {
+  color: #666666;
+}
+
+/* ── Modal (glassmorphic) ── */
 .modal-overlay {
   position: fixed;
   inset: 0;
-  background: rgba(0, 0, 0, 0.4);
+  background: rgba(0, 0, 0, 0.35);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -138,33 +351,39 @@
 }
 
 .modal {
-  background: white;
-  border-radius: 16px;
-  padding: 28px;
+  background: rgba(255, 255, 255, 0.85);
+  backdrop-filter: blur(24px);
+  -webkit-backdrop-filter: blur(24px);
+  border: 1px solid rgba(255, 255, 255, 0.8);
+  border-radius: 20px;
+  padding: 32px;
   width: 100%;
   max-width: 400px;
-  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
+  box-shadow:
+    0 24px 48px rgba(0, 0, 0, 0.12),
+    0 8px 16px rgba(0, 0, 0, 0.06);
 }
 
 .modal h2 {
   font-size: 1.25rem;
   font-weight: 600;
-  color: var(--gray-800);
+  color: #111111;
   margin-bottom: 20px;
 }
 
 .modal input {
   width: 100%;
   padding: 12px 16px;
-  border: 1px solid var(--gray-300);
-  border-radius: 10px;
+  border: 1px solid rgba(0, 0, 0, 0.12);
+  border-radius: 12px;
   font-size: 1rem;
   margin-bottom: 20px;
+  background: rgba(255, 255, 255, 0.6);
 }
 
 .modal input:focus {
   outline: none;
-  border-color: var(--primary);
+  border-color: rgba(0, 0, 0, 0.3);
 }
 
 .modal-buttons {
@@ -175,34 +394,51 @@
 
 .cancel-btn {
   background: transparent;
-  border: 1px solid var(--gray-300);
-  border-radius: 8px;
+  border: 1px solid rgba(0, 0, 0, 0.12);
+  border-radius: 10px;
   padding: 10px 20px;
   font-size: 0.875rem;
-  color: var(--gray-600);
+  color: #555555;
   cursor: pointer;
+  transition: all 0.2s;
 }
 
 .cancel-btn:hover {
-  background: var(--gray-50);
+  background: rgba(0, 0, 0, 0.04);
 }
 
 .create-btn {
-  background: var(--primary);
+  background: #111111;
   color: white;
   border: none;
-  border-radius: 8px;
+  border-radius: 10px;
   padding: 10px 24px;
   font-size: 0.875rem;
   font-weight: 500;
   cursor: pointer;
+  transition: all 0.2s;
 }
 
 .create-btn:hover {
-  background: var(--primary-hover);
+  background: #333333;
 }
 
 .create-btn:disabled {
-  background: var(--gray-300);
+  background: #cccccc;
   cursor: not-allowed;
 }
+
+/* ── Responsive ── */
+@media (max-width: 640px) {
+  .title {
+    font-size: 2.25rem;
+  }
+
+  .steps-row {
+    grid-template-columns: 1fr;
+  }
+
+  .patients-grid {
+    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+  }
+}

web/src/pages/PatientsPage.tsx

@@ -49,43 +49,117 @@ export function PatientsPage() {
 
   return (
     <div className="patients-page">
-      <h1 className="title">SkinProAI</h1>
-      <p className="subtitle">Dermatological AI Assistant</p>
+      {/* Hero Section */}
+      <section className="hero">
+        <h1 className="title">SkinProAI</h1>
+        <p className="tagline">
+          Multimodal dermatological analysis powered by MedGemma
+          and intelligent tool orchestration.
+        </p>
 
-      <div className="patients-grid">
-        {patients.map(patient => (
-          <div
-            key={patient.id}
-            className="patient-card"
-            onClick={() => navigate(`/chat/${patient.id}`)}
-          >
-            <div className="patient-icon">
-              <svg viewBox="0 0 24 24" fill="currentColor">
-                <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
-              </svg>
-            </div>
-            <span className="patient-name">{patient.name}</span>
-            <button
-              className="delete-btn"
-              onClick={(e) => handleDeletePatient(e, patient.id)}
-              title="Delete patient"
-            >
-              <svg viewBox="0 0 24 24" fill="currentColor">
-                <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/>
-              </svg>
-            </button>
+        <button className="cta-btn" onClick={() => setShowNewPatient(true)}>
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+            <line x1="12" y1="5" x2="12" y2="19" />
+            <line x1="5" y1="12" x2="19" y2="12" />
+          </svg>
+          New Patient
+        </button>
+      </section>
+
+      {/* Existing patients */}
+      {patients.length > 0 && (
+        <section className="patients-section">
+          <p className="section-label">Recent Patients</p>
+          <div className="patients-grid">
+            {patients.map(patient => (
+              <div
+                key={patient.id}
+                className="patient-card"
+                onClick={() => navigate(`/chat/${patient.id}`)}
+              >
+                <div className="patient-icon">
+                  <svg viewBox="0 0 24 24" fill="currentColor">
+                    <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
+                  </svg>
+                </div>
+                <span className="patient-name">{patient.name}</span>
+                <button
+                  className="delete-btn"
+                  onClick={(e) => handleDeletePatient(e, patient.id)}
+                  title="Delete patient"
+                >
+                  <svg viewBox="0 0 24 24" fill="currentColor">
+                    <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/>
+                  </svg>
+                </button>
+              </div>
+            ))}
+          </div>
+        </section>
+      )}
+
+      {/* How It Works */}
+      <section className="how-section">
+        <p className="section-label">How It Works</p>
+        <div className="steps-row">
+          <div className="step-card">
+            <div className="step-num">1</div>
+            <h3>Upload</h3>
+            <p>Capture or upload a dermatoscopic or clinical image of the lesion.</p>
           </div>
-        ))}
+          <div className="step-card">
+            <div className="step-num">2</div>
+            <h3>Analyze</h3>
+            <p>MedGemma examines the image and coordinates specialist tools for deeper insight.</p>
+          </div>
+          <div className="step-card">
+            <div className="step-num">3</div>
+            <h3>Track</h3>
+            <p>Monitor lesions over time with side-by-side comparison and change detection.</p>
+          </div>
+        </div>
+      </section>
 
-        <div
-          className="patient-card new-patient"
-          onClick={() => setShowNewPatient(true)}
-        >
-          <div className="add-icon">+</div>
-          <span className="patient-name">New Patient</span>
+      {/* About */}
+      <section className="about-section">
+        <div className="about-card">
+          <h3>About SkinProAI</h3>
+          <p>
+            Built for the <strong>Kaggle MedGemma Multimodal Medical AI Competition</strong>,
+            SkinProAI explores how a foundation medical vision-language model can be
+            augmented with specialised tools to deliver richer clinical insight.
+          </p>
+          <p>
+            At its core sits Google's <strong>MedGemma 4B</strong>, a multimodal model
+            fine-tuned for medical image understanding. Rather than relying on the model
+            alone, SkinProAI connects it to a suite of external tools via
+            the <strong>Model Context Protocol (MCP)</strong> &mdash; including MONET
+            feature extraction, ConvNeXt classification, Grad-CAM attention maps, and
+            clinical guideline retrieval &mdash; letting the model reason across multiple
+            sources before presenting a synthesised assessment.
+          </p>
+          <div className="tech-pills">
+            <span className="pill">MedGemma 4B</span>
+            <span className="pill">MCP Tools</span>
+            <span className="pill">MONET</span>
+            <span className="pill">ConvNeXt</span>
+            <span className="pill">Grad-CAM</span>
+            <span className="pill">RAG Guidelines</span>
+          </div>
         </div>
-      </div>
+      </section>
+
+      {/* Disclaimer */}
+      <footer className="disclaimer">
+        <p>
+          <strong>Research prototype only.</strong> SkinProAI is an educational project and
+          competition entry. It is not a medical device and must not be used for clinical
+          decision-making. Always consult a qualified healthcare professional for diagnosis
+          and treatment.
+        </p>
+      </footer>
 
+      {/* New Patient Modal */}
       {showNewPatient && (
         <div className="modal-overlay" onClick={() => setShowNewPatient(false)}>
           <div className="modal" onClick={e => e.stopPropagation()}>