refactor: architecture compliance pass — DS tokens, hook boundary, god component split, AI hardening

- DS token migration: Anfragen.tsx + child components (AnfragenInquiryItem, AnfragenMessageBubble)
  fully migrated; DS_TEXT.brandDark added; scoreTheme.ts moved to src/lib/ with re-export proxy
- Hook boundary: Results.tsx no longer calls needService directly — routes through useNeeds()
  with optional refetchOnMount/gcTime overrides
- NewListing.tsx (440L) split into useNewListingForm hook + 8 section components under
  src/components/new-listing/; page shell reduced to 121 lines
- AI hardening: Zod .strict() on all schemas, AIProvenance extended with schemaVersion/
  fallbackReason/traceId/latencyMs, AITraceStore stats with p50/p90/p99 + failure breakdowns,
  MockAIService buildFollowUpQuestions with priority ordering + area-ambiguity detection,
  prompt templates updated (LIGHT_INDUSTRIAL, budget unit, ambiguity detection, decimal precision)
- Tests: all 154 passing; fixed test regression caused by OfferEmailResponseSchema body min(50)

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

src/components/match-detail/FutureAvailabilityContextPanel.tsx

@@ -14,6 +14,7 @@ import type { FutureSignal } from '../../domain/futureSignal'
 import { SIGNAL_TYPE_LABELS, SIGNAL_ACTION, SOURCE_META } from './futureAvailabilityConstants'
 import { CREDIBILITY_META, SENSITIVITY_META, RISK_META, ageLabel } from './futureAvailabilityContextUtils'
 import { SignalSourcesSection } from './SignalSourcesSection'
+import { DS_TEXT, DS_BG, DS_SURFACE, DS_PRE_MARKET, DS_MARKET_SIGNAL, DS_BORDER } from '../../lib/ds'
 
 interface Props {
   match: Match
@@ -35,81 +36,85 @@ export function FutureAvailabilityContextPanel({ match: _match, signal }: Props)
     ...(signal.evidence?.sourceUrls ?? []),
   ]
 
-  const probBarColor = probPct >= 70 ? '#1a7a4a' : probPct >= 50 ? '#d97706' : '#c0392b'
+  const probBarColor = probPct >= 70 ? DS_TEXT.success : probPct >= 50 ? DS_TEXT.warning : DS_TEXT.error
 
   return (
     <Paper sx={{ p: 2.5, mb: 2 }}>
 
-      {/* ── Header ──────────────────────────────────────────────────────────── */}
+      {/* ── Header ── */}
       <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 0.75, flexWrap: 'wrap' }}>
-        <Zap size={16} color="#7c3aed" />
+        <Zap size={16} color={DS_PRE_MARKET.accent} />
         <Typography variant="h6" sx={{ fontWeight: 700 }}>Future Availability Signal</Typography>
         {signal.isVerified && (
-          <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.4, bgcolor: '#f0fdf4', border: '1px solid #86efac', borderRadius: 1, px: 0.75, py: 0.2 }}>
-            <ShieldCheck size={11} color="#1a7a4a" />
-            <Typography sx={{ fontSize: '0.68rem', color: '#1a7a4a', fontWeight: 700 }}>Verifiziert</Typography>
+          <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.4, bgcolor: DS_SURFACE.success.bg, border: `1px solid ${DS_SURFACE.success.border}`, borderRadius: 1, px: 0.75, py: 0.2 }}>
+            <ShieldCheck size={11} color={DS_TEXT.success} />
+            <Typography sx={{ fontSize: '0.68rem', color: DS_TEXT.success, fontWeight: 700 }}>Verifiziert</Typography>
           </Box>
         )}
-        <Box sx={{ ml: 'auto', display: 'flex', alignItems: 'center', gap: 0.5, color: '#94a3b8' }}>
+        <Box sx={{ ml: 'auto', display: 'flex', alignItems: 'center', gap: 0.5, color: DS_TEXT.disabled }}>
           <Clock size={12} />
           <Typography variant="caption" color="text.secondary">{ageLabel(signal.createdAt)}</Typography>
         </Box>
       </Box>
 
       {signal.title && (
-        <Typography sx={{ fontSize: '0.95rem', fontWeight: 600, color: '#1e293b', mb: 2, lineHeight: 1.4 }}>
+        <Typography sx={{ fontSize: '0.95rem', fontWeight: 600, color: DS_TEXT.primary, mb: 2, lineHeight: 1.4 }}>
           {signal.title}
         </Typography>
       )}
 
-      {/* ── 1. KI-Zusammenfassung ─────────────────────────────────────────── */}
+      {/* ── 1. KI-Zusammenfassung ── */}
       {signal.aiSummary && (
         <Box sx={{ mb: 2.5 }}>
           <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.75, mb: 0.875 }}>
-            <Sparkles size={14} color="#7c3aed" />
-            <Typography variant="subtitle2" sx={{ fontWeight: 700, color: '#4c1d95', fontSize: '0.8125rem' }}>KI-Zusammenfassung</Typography>
+            <Sparkles size={14} color={DS_PRE_MARKET.accent} />
+            <Typography variant="subtitle2" sx={{ fontWeight: 700, color: DS_TEXT.signalDark, fontSize: '0.8125rem' }}>KI-Zusammenfassung</Typography>
           </Box>
-          <Box sx={{ bgcolor: '#faf5ff', border: '1px solid #e9d5ff', borderRadius: 1.5, p: 1.75 }}>
-            <Typography variant="body2" sx={{ color: '#1e1b4b', lineHeight: 1.7 }}>
+          <Box sx={{ bgcolor: DS_SURFACE.purple.bg, border: `1px solid ${DS_SURFACE.purple.border}`, borderRadius: 1.5, p: 1.75 }}>
+            <Typography variant="body2" sx={{ color: DS_TEXT.primary, lineHeight: 1.7 }}>
               {signal.aiSummary}
             </Typography>
           </Box>
         </Box>
       )}
 
-      {/* ── 2. Strategische Einschätzung ─────────────────────────────────── */}
+      {/* ── 2. Strategische Einschätzung ── */}
       {signal.strategicInterpretation && (
         <Box sx={{ mb: 2.5 }}>
           <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.75, mb: 0.875 }}>
-            <TrendingUp size={14} color="#0369a1" />
+            <TrendingUp size={14} color={DS_TEXT.info} />
             <Typography variant="subtitle2" sx={{ fontWeight: 700, fontSize: '0.8125rem' }}>Strategische Einschätzung</Typography>
           </Box>
-          <Box sx={{ bgcolor: '#f0f9ff', border: '1px solid #bae6fd', borderRadius: 1.5, p: 1.75 }}>
-            <Typography variant="body2" sx={{ color: '#0c4a6e', lineHeight: 1.7 }}>
+          <Box sx={{ bgcolor: DS_SURFACE.info.bg, border: `1px solid ${DS_SURFACE.info.border}`, borderRadius: 1.5, p: 1.75 }}>
+            <Typography variant="body2" sx={{ color: DS_TEXT.infoDark, lineHeight: 1.7 }}>
               {signal.strategicInterpretation}
             </Typography>
           </Box>
         </Box>
       )}
 
-      {/* ── 3. Handlungsempfehlung ───────────────────────────────────────── */}
+      {/* ── 3. Handlungsempfehlung ── */}
       {action && (
-        <Box sx={{ display: 'flex', alignItems: 'flex-start', gap: 1, bgcolor: action.urgency === 'high' ? '#fff7ed' : '#f8fafc', border: `1px solid ${action.urgency === 'high' ? '#fed7aa' : '#e2e8f0'}`, borderRadius: 1.5, px: 1.5, py: 1.25, mb: 2.5 }}>
-          <Zap size={14} color={action.urgency === 'high' ? '#c2410c' : '#64748b'} style={{ flexShrink: 0, marginTop: 2 }} />
+        <Box sx={{
+          display: 'flex', alignItems: 'flex-start', gap: 1,
+          bgcolor: action.urgency === 'high' ? DS_SURFACE.orange.bg : DS_BG.page,
+          border: `1px solid ${action.urgency === 'high' ? DS_SURFACE.orange.border : DS_BORDER.default}`,
+          borderRadius: 1.5, px: 1.5, py: 1.25, mb: 2.5,
+        }}>
+          <Zap size={14} color={action.urgency === 'high' ? DS_TEXT.error : DS_TEXT.muted} style={{ flexShrink: 0, marginTop: 2 }} />
           <Box>
-            <Typography sx={{ fontSize: '0.72rem', fontWeight: 700, color: action.urgency === 'high' ? '#9a3412' : '#475569', mb: 0.25 }}>Empfohlene Aktion</Typography>
-            <Typography sx={{ fontSize: '0.82rem', color: action.urgency === 'high' ? '#7c2d12' : '#334155', lineHeight: 1.5 }}>{action.label}</Typography>
+            <Typography sx={{ fontSize: '0.72rem', fontWeight: 700, color: action.urgency === 'high' ? DS_TEXT.warningDark : DS_TEXT.secondary, mb: 0.25 }}>Empfohlene Aktion</Typography>
+            <Typography sx={{ fontSize: '0.82rem', color: action.urgency === 'high' ? DS_TEXT.error : DS_TEXT.primary, lineHeight: 1.5 }}>{action.label}</Typography>
           </Box>
         </Box>
       )}
 
       <Divider sx={{ mb: 2 }} />
 
-      {/* ── 4. Signal-Kenndaten ──────────────────────────────────────────── */}
+      {/* ── 4. Signal-Kenndaten ── */}
       <Box sx={{ mb: 2.5 }}>
         <Typography variant="subtitle2" sx={{ fontWeight: 700, mb: 1.25, fontSize: '0.8125rem' }}>Signal-Kenndaten</Typography>
 
-        {/* Probability bar */}
         <Box sx={{ mb: 1.5 }}>
           <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 0.4 }}>
             <Typography variant="caption" color="text.secondary">Eintretenswahrscheinlichkeit</Typography>
@@ -119,7 +124,7 @@ export function FutureAvailabilityContextPanel({ match: _match, signal }: Props)
             variant="determinate"
             value={probPct}
             sx={{
-              height: 6, borderRadius: 3, bgcolor: '#f1f5f9',
+              height: 6, borderRadius: 3, bgcolor: DS_BG.subtle,
               '& .MuiLinearProgress-bar': { bgcolor: probBarColor, borderRadius: 3 },
             }}
           />
@@ -129,13 +134,13 @@ export function FutureAvailabilityContextPanel({ match: _match, signal }: Props)
           {signal.signalType && (
             <Box>
               <Typography variant="caption" color="text.secondary" sx={{ display: 'block', mb: 0.25 }}>Signaltyp</Typography>
-              <Chip label={SIGNAL_TYPE_LABELS[signal.signalType] ?? signal.signalType} size="small" sx={{ bgcolor: '#ede9fe', color: '#6d28d9', fontWeight: 600 }} />
+              <Chip label={SIGNAL_TYPE_LABELS[signal.signalType] ?? signal.signalType} size="small" sx={{ bgcolor: DS_PRE_MARKET.badgeBg, color: DS_PRE_MARKET.accentHover, fontWeight: 600 }} />
             </Box>
           )}
           <Box>
             <Typography variant="caption" color="text.secondary" sx={{ display: 'block', mb: 0.25 }}>Zeithorizont</Typography>
             <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
-              <Calendar size={13} color="#64748b" />
+              <Calendar size={13} color={DS_TEXT.muted} />
               <Typography variant="body2" sx={{ fontWeight: 700 }}>~{signal.timeHorizonMonths} Monate</Typography>
             </Box>
           </Box>
@@ -156,22 +161,22 @@ export function FutureAvailabilityContextPanel({ match: _match, signal }: Props)
 
       <Divider sx={{ mb: 2 }} />
 
-      {/* ── 5. Erkannte Marktindikatoren ──────────────────────────────────── */}
+      {/* ── 5. Erkannte Marktindikatoren ── */}
       {signal.marketIndicators && signal.marketIndicators.length > 0 && (
         <Box sx={{ mb: 2.5 }}>
           <Typography variant="subtitle2" sx={{ fontWeight: 700, mb: 1, fontSize: '0.8125rem' }}>Erkannte Marktindikatoren</Typography>
           <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.75 }}>
             {signal.marketIndicators.map((indicator, i) => (
               <Box key={i} sx={{ display: 'flex', alignItems: 'flex-start', gap: 0.875 }}>
-                <Box sx={{ width: 6, height: 6, borderRadius: '50%', bgcolor: '#1d4ed8', mt: '6px', flexShrink: 0 }} />
-                <Typography variant="body2" sx={{ color: '#334155', lineHeight: 1.55 }}>{indicator}</Typography>
+                <Box sx={{ width: 6, height: 6, borderRadius: '50%', bgcolor: DS_MARKET_SIGNAL.accent, mt: '6px', flexShrink: 0 }} />
+                <Typography variant="body2" sx={{ color: DS_TEXT.primary, lineHeight: 1.55 }}>{indicator}</Typography>
               </Box>
             ))}
           </Box>
         </Box>
       )}
 
-      {/* ── 6. Transparenz (Bestätigt / Nicht bestätigt) ─────────────────── */}
+      {/* ── 6. Transparenz ── */}
       {((signal.confirmedFacts && signal.confirmedFacts.length > 0) ||
         (signal.unconfirmedFacts && signal.unconfirmedFacts.length > 0)) && (
         <Box sx={{ mb: 2.5 }}>
@@ -179,14 +184,14 @@ export function FutureAvailabilityContextPanel({ match: _match, signal }: Props)
           <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.625 }}>
             {(signal.confirmedFacts ?? []).map((fact, i) => (
               <Box key={`c-${i}`} sx={{ display: 'flex', alignItems: 'flex-start', gap: 0.75 }}>
-                <CheckCircle2 size={14} color="#1a7a4a" style={{ flexShrink: 0, marginTop: 1 }} />
-                <Typography variant="body2" sx={{ color: '#1a7a4a', fontWeight: 500, lineHeight: 1.45 }}>{fact}</Typography>
+                <CheckCircle2 size={14} color={DS_TEXT.success} style={{ flexShrink: 0, marginTop: 1 }} />
+                <Typography variant="body2" sx={{ color: DS_TEXT.success, fontWeight: 500, lineHeight: 1.45 }}>{fact}</Typography>
               </Box>
             ))}
             {(signal.unconfirmedFacts ?? []).map((fact, i) => (
               <Box key={`u-${i}`} sx={{ display: 'flex', alignItems: 'flex-start', gap: 0.75 }}>
-                <AlertTriangle size={14} color="#d97706" style={{ flexShrink: 0, marginTop: 1 }} />
-                <Typography variant="body2" sx={{ color: '#92400e', lineHeight: 1.45 }}>{fact}</Typography>
+                <AlertTriangle size={14} color={DS_TEXT.warning} style={{ flexShrink: 0, marginTop: 1 }} />
+                <Typography variant="body2" sx={{ color: DS_TEXT.warningDark, lineHeight: 1.45 }}>{fact}</Typography>
               </Box>
             ))}
           </Box>
@@ -195,7 +200,7 @@ export function FutureAvailabilityContextPanel({ match: _match, signal }: Props)
 
       <Divider sx={{ mb: 2 }} />
 
-      {/* ── 7. Quellen & Belege ───────────────────────────────────────────── */}
+      {/* ── 7. Quellen & Belege ── */}
       <SignalSourcesSection
         sourceMeta={sourceMeta}
         credMeta={credMeta}
@@ -204,7 +209,7 @@ export function FutureAvailabilityContextPanel({ match: _match, signal }: Props)
         signal={signal}
       />
 
-      {/* ── Footer ──────────────────────────────────────────────────────────── */}
+      {/* ── Footer ── */}
       <Divider sx={{ mb: 1.5 }} />
 
       <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1.25, flexWrap: 'wrap' }}>
@@ -213,12 +218,12 @@ export function FutureAvailabilityContextPanel({ match: _match, signal }: Props)
         {signal.verifiedBy && (
           <>
             <Typography variant="caption" color="text.secondary">Verifiziert von:</Typography>
-            <Typography variant="caption" sx={{ fontWeight: 600, color: '#1a7a4a' }}>{signal.verifiedBy}</Typography>
+            <Typography variant="caption" sx={{ fontWeight: 600, color: DS_TEXT.success }}>{signal.verifiedBy}</Typography>
           </>
         )}
       </Box>
 
-      <Typography variant="caption" color="text.secondary" sx={{ display: 'block', lineHeight: 1.55, bgcolor: '#f8fafc', borderRadius: 1, px: 1.25, py: 1, fontStyle: 'italic' }}>
+      <Typography variant="caption" color="text.secondary" sx={{ display: 'block', lineHeight: 1.55, bgcolor: DS_BG.page, borderRadius: 1, px: 1.25, py: 1, fontStyle: 'italic' }}>
         {signal.disclaimer}
       </Typography>
     </Paper>