feat: F014 compare view — side-by-side decision table with AI summary

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

src/components/compare/AICompareSummary.tsx

@@ -0,0 +1,133 @@
+import { useState } from 'react'
+import { Alert, Box, Chip, CircularProgress, Collapse, Typography } from '@mui/material'
+import { ChevronDown, ChevronUp, Trophy, TrendingDown, ShieldCheck, AlertTriangle, Info, ArrowRight } from 'lucide-react'
+import type { ComparisonSummary } from '../../services/aiService'
+
+interface Props {
+  summary?: ComparisonSummary
+  isLoading: boolean
+}
+
+export function AICompareSummary({ summary, isLoading }: Props) {
+  const [open, setOpen] = useState(true)
+
+  return (
+    <Box sx={{ mb: 2, border: '1px solid #e2e8f0', borderRadius: 1, overflow: 'hidden' }}>
+      <Box
+        onClick={() => setOpen(v => !v)}
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          px: 2,
+          py: 1.25,
+          bgcolor: '#f8fafc',
+          cursor: 'pointer',
+          '&:hover': { bgcolor: '#f1f5f9' },
+        }}
+      >
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+          <Typography variant="subtitle2" sx={{ fontWeight: 700 }}>AI Vergleichs-Zusammenfassung</Typography>
+          <Chip label="Beta" size="small" sx={{ fontSize: 10, bgcolor: '#ede9fe', color: '#6d28d9' }} />
+        </Box>
+        {open ? <ChevronUp size={16} /> : <ChevronDown size={16} />}
+      </Box>
+
+      <Collapse in={open}>
+        <Box sx={{ p: 2 }}>
+          {isLoading && (
+            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, py: 1 }}>
+              <CircularProgress size={16} />
+              <Typography variant="body2" color="text.secondary">Analyse wird erstellt…</Typography>
+            </Box>
+          )}
+
+          {!isLoading && summary && (
+            <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>
+              {/* Strongest option */}
+              <Box sx={{ display: 'flex', gap: 1, alignItems: 'flex-start' }}>
+                <Trophy size={16} color="#1a7a4a" style={{ flexShrink: 0, marginTop: 2 }} />
+                <Box>
+                  <Typography variant="caption" sx={{ fontWeight: 600, color: '#64748b', display: 'block' }}>Stärkstes Match</Typography>
+                  <Typography variant="body2" sx={{ fontWeight: 600 }}>{summary.strongestOption.label}</Typography>
+                  <Typography variant="caption" color="text.secondary">{summary.strongestOption.reason}</Typography>
+                </Box>
+              </Box>
+
+              {/* Best value */}
+              {summary.bestValue && (
+                <Box sx={{ display: 'flex', gap: 1, alignItems: 'flex-start' }}>
+                  <TrendingDown size={16} color="#1e3a5f" style={{ flexShrink: 0, marginTop: 2 }} />
+                  <Box>
+                    <Typography variant="caption" sx={{ fontWeight: 600, color: '#64748b', display: 'block' }}>Bestes Preis-Leistungs-Verhältnis</Typography>
+                    <Typography variant="body2" sx={{ fontWeight: 600 }}>{summary.bestValue.label}</Typography>
+                    <Typography variant="caption" color="text.secondary">{summary.bestValue.reason}</Typography>
+                  </Box>
+                </Box>
+              )}
+
+              {/* Highest confidence */}
+              <Box sx={{ display: 'flex', gap: 1, alignItems: 'flex-start' }}>
+                <ShieldCheck size={16} color="#0891b2" style={{ flexShrink: 0, marginTop: 2 }} />
+                <Box>
+                  <Typography variant="caption" sx={{ fontWeight: 600, color: '#64748b', display: 'block' }}>Höchste Datenkonfidenz</Typography>
+                  <Typography variant="body2" sx={{ fontWeight: 600 }}>
+                    {summary.highestConfidence.label}
+                    <Typography component="span" variant="caption" color="text.secondary" sx={{ ml: 0.5 }}>
+                      ({Math.round(summary.highestConfidence.confidenceLevel * 100)}%)
+                    </Typography>
+                  </Typography>
+                </Box>
+              </Box>
+
+              {/* Tradeoffs */}
+              {summary.biggestTradeoffs.length > 0 && (
+                <Box sx={{ display: 'flex', gap: 1, alignItems: 'flex-start' }}>
+                  <AlertTriangle size={16} color="#d97706" style={{ flexShrink: 0, marginTop: 2 }} />
+                  <Box>
+                    <Typography variant="caption" sx={{ fontWeight: 600, color: '#64748b', display: 'block' }}>Wichtigste Abwägungen</Typography>
+                    {summary.biggestTradeoffs.map((t, i) => (
+                      <Typography key={i} variant="caption" color="text.secondary" sx={{ display: 'block' }}>· {t}</Typography>
+                    ))}
+                  </Box>
+                </Box>
+              )}
+
+              {/* Missing data */}
+              {summary.missingDataWarnings.length > 0 && (
+                <Box sx={{ display: 'flex', gap: 1, alignItems: 'flex-start' }}>
+                  <Info size={16} color="#c0392b" style={{ flexShrink: 0, marginTop: 2 }} />
+                  <Box>
+                    <Typography variant="caption" sx={{ fontWeight: 600, color: '#64748b', display: 'block' }}>Fehlende Informationen</Typography>
+                    {summary.missingDataWarnings.map((w, i) => (
+                      <Typography key={i} variant="caption" color="error" sx={{ display: 'block' }}>· {w}</Typography>
+                    ))}
+                  </Box>
+                </Box>
+              )}
+
+              {/* Next step */}
+              <Box sx={{ display: 'flex', gap: 1, alignItems: 'flex-start', pt: 0.5, borderTop: '1px solid #f1f5f9', mt: 0.5 }}>
+                <ArrowRight size={16} color="#1e3a5f" style={{ flexShrink: 0, marginTop: 2 }} />
+                <Box>
+                  <Typography variant="caption" sx={{ fontWeight: 600, color: '#64748b', display: 'block' }}>Empfohlener nächster Schritt</Typography>
+                  <Typography variant="body2">{summary.recommendedNextStep}</Typography>
+                </Box>
+              </Box>
+            </Box>
+          )}
+
+          {!isLoading && !summary && (
+            <Alert severity="info" sx={{ py: 0.5 }}>
+              Mindestens 2 Ergebnisse auswählen, um die Zusammenfassung zu generieren.
+            </Alert>
+          )}
+
+          <Typography variant="caption" color="text.secondary" sx={{ display: 'block', mt: 1.5, fontStyle: 'italic' }}>
+            Diese Zusammenfassung basiert ausschliesslich auf den vorliegenden Daten und trifft keine endgültige Entscheidung.
+          </Typography>
+        </Box>
+      </Collapse>
+    </Box>
+  )
+}

src/components/compare/CompareCell.tsx

@@ -0,0 +1,48 @@
+import type { ReactNode } from 'react'
+import { Box, Tooltip, Typography } from '@mui/material'
+import { Info } from 'lucide-react'
+
+export type CellHighlight = 'best' | 'worst' | 'critical' | 'future' | 'none'
+
+interface Props {
+  highlight?: CellHighlight
+  icon?: ReactNode
+  iconTooltip?: string
+  children: ReactNode
+}
+
+const HIGHLIGHT_SX: Record<CellHighlight, object> = {
+  best:     { bgcolor: '#f0fdf4', borderLeft: '3px solid #1a7a4a' },
+  worst:    { bgcolor: '#fef3c7', borderLeft: '3px solid #d97706' },
+  critical: { bgcolor: '#fef2f2', borderLeft: '3px solid #c0392b' },
+  future:   { bgcolor: '#faf5ff', borderLeft: '3px solid #7c3aed' },
+  none:     {},
+}
+
+export function CompareCell({ highlight = 'none', icon, iconTooltip, children }: Props) {
+  return (
+    <Box sx={{ display: 'flex', alignItems: 'flex-start', gap: 0.75, ...HIGHLIGHT_SX[highlight] }}>
+      {icon && (
+        iconTooltip
+          ? <Tooltip title={iconTooltip}><Box sx={{ flexShrink: 0, display: 'flex', mt: 0.25 }}>{icon}</Box></Tooltip>
+          : <Box sx={{ flexShrink: 0, display: 'flex', mt: 0.25 }}>{icon}</Box>
+      )}
+      <Box sx={{ flex: 1, minWidth: 0 }}>{children}</Box>
+    </Box>
+  )
+}
+
+export function MissingDataCell({ reason }: { reason?: string }) {
+  return (
+    <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
+      <Tooltip title={reason ?? 'Keine Daten vorhanden — kann Konfidenz beeinflussen'}>
+        <Box sx={{ display: 'flex', alignItems: 'center' }}>
+          <Info size={12} color="#94a3b8" />
+        </Box>
+      </Tooltip>
+      <Typography variant="body2" sx={{ color: '#94a3b8', fontStyle: 'italic' }}>
+        Nicht verfügbar
+      </Typography>
+    </Box>
+  )
+}

src/components/compare/CompareColumnHeader.tsx

@@ -0,0 +1,85 @@
+import { Box, Chip, IconButton, Tooltip, Typography } from '@mui/material'
+import { X, AlertTriangle } from 'lucide-react'
+import type { UnifiedMatchResult } from '../../domain/unifiedResult'
+
+const TYPE_META: Record<string, { label: string; color: string }> = {
+  VERIFIED_PORTFOLIO:  { label: 'Verified Portfolio', color: '#1e3a5f' },
+  EXTERNAL_MARKET:     { label: 'Marktinserat',       color: '#d97706' },
+  FUTURE_AVAILABILITY: { label: 'Zukunftssignal',     color: '#7c3aed' },
+}
+
+const SCORE_COLOR = (s: number) => s >= 78 ? '#1a7a4a' : s >= 52 ? '#d97706' : '#c0392b'
+
+interface Props {
+  item: UnifiedMatchResult
+  onRemove: () => void
+}
+
+export function CompareColumnHeader({ item, onRemove }: Props) {
+  const meta = TYPE_META[item.resultType] ?? { label: item.resultType, color: '#64748b' }
+  const prop = item.resultType !== 'FUTURE_AVAILABILITY' ? (item as any).property : null
+  const sig  = item.resultType === 'FUTURE_AVAILABILITY' ? (item as any).signal  : null
+
+  const title       = prop?.title ?? sig?.companyName ?? sig?.locationHint ?? '–'
+  const subtitle    = prop?.location?.city ?? sig?.locationHint ?? '–'
+  const availability = prop?.availabilityDate ?? (sig ? `~${sig.timeHorizonMonths} Monate` : null)
+  const confidence  = Math.round(item.match.confidenceLevel * 100)
+  const source      = prop?.sourceLabel ?? sig?.source?.type ?? '–'
+
+  return (
+    <Box sx={{ p: 0.5 }}>
+      <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', mb: 1 }}>
+        <Chip label={meta.label} size="small" sx={{ bgcolor: meta.color, color: 'white', fontWeight: 600, fontSize: 10 }} />
+        <IconButton size="small" onClick={onRemove} sx={{ p: 0.25, ml: 1 }}>
+          <X size={14} />
+        </IconButton>
+      </Box>
+
+      <Typography variant="subtitle2" sx={{ fontWeight: 700, mb: 0.25, lineHeight: 1.3 }}>
+        {title}
+      </Typography>
+      <Typography variant="caption" color="text.secondary" sx={{ display: 'block', mb: 1 }}>
+        {subtitle}
+      </Typography>
+
+      <Box sx={{ display: 'flex', alignItems: 'baseline', gap: 0.5, mb: 0.5 }}>
+        <Typography variant="h4" sx={{ fontWeight: 800, color: SCORE_COLOR(item.matchScore), lineHeight: 1 }}>
+          {item.matchScore}
+        </Typography>
+        <Typography variant="caption" color="text.secondary">/100</Typography>
+      </Box>
+
+      <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5, mt: 0.5 }}>
+        <Tooltip title="Konfidenz">
+          <Chip
+            label={`${confidence}% Konfidenz`}
+            size="small"
+            icon={confidence < 60 ? <AlertTriangle size={10} /> : undefined}
+            sx={{
+              fontSize: 10,
+              bgcolor: confidence < 60 ? '#fef3c7' : '#f0fdf4',
+              color: confidence < 60 ? '#92400e' : '#166534',
+            }}
+          />
+        </Tooltip>
+        {source && source !== '–' && (
+          <Chip label={source} size="small" sx={{ fontSize: 10 }} />
+        )}
+        {availability && (
+          <Chip label={availability} size="small" sx={{ fontSize: 10 }} />
+        )}
+      </Box>
+
+      {item.resultType === 'FUTURE_AVAILABILITY' && sig && (
+        <Box sx={{ mt: 1, p: 0.75, bgcolor: '#faf5ff', borderRadius: 1, border: '1px solid #e9d5ff' }}>
+          <Typography variant="caption" sx={{ color: '#7c3aed', fontWeight: 600, display: 'block' }}>
+            Probabilistisches Signal
+          </Typography>
+          <Typography variant="caption" color="text.secondary">
+            {Math.round(sig.probability * 100)}% Wahrscheinlichkeit
+          </Typography>
+        </Box>
+      )}
+    </Box>
+  )
+}

src/components/compare/CompareEmptyState.tsx

@@ -0,0 +1,24 @@
+import { Box, Button, Typography } from '@mui/material'
+import { Columns2 } from 'lucide-react'
+import { useNavigate } from 'react-router'
+
+export function CompareEmptyState() {
+  const navigate = useNavigate()
+  return (
+    <Box sx={{ px: 3, py: 4 }}>
+      <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 2, py: 8 }}>
+        <Columns2 size={40} color="#94a3b8" />
+        <Typography variant="h6" color="text.secondary" sx={{ fontWeight: 600 }}>
+          Keine Ergebnisse zum Vergleich
+        </Typography>
+        <Typography variant="body2" color="text.secondary" sx={{ textAlign: 'center', maxWidth: 360 }}>
+          Fügen Sie 2–4 Ergebnisse aus dem Feed, Match Detail oder Match Center zum Vergleich hinzu.
+        </Typography>
+        <Button variant="contained" size="small" onClick={() => navigate('/demand/results')}
+          sx={{ bgcolor: '#1e3a5f', '&:hover': { bgcolor: '#162d4a' } }}>
+          Zu den Suchergebnissen
+        </Button>
+      </Box>
+    </Box>
+  )
+}

src/components/compare/index.ts

@@ -0,0 +1,4 @@
+export { CompareEmptyState } from './CompareEmptyState'
+export { CompareColumnHeader } from './CompareColumnHeader'
+export { CompareCell, MissingDataCell } from './CompareCell'
+export { AICompareSummary } from './AICompareSummary'