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/pages/demand/AISearch.tsx

@@ -1,13 +1,5 @@
 import { useRef, useState } from 'react'
-import {
-  Alert,
-  Box,
-  Button,
-  CircularProgress,
-  Divider,
-  Typography,
-} from '@mui/material'
-import { ArrowRight, Bookmark, Save, Search } from 'lucide-react'
+import { Box, Typography } from '@mui/material'
 import { useNavigate } from 'react-router'
 import { useQueryClient } from '@tanstack/react-query'
 import {
@@ -15,9 +7,10 @@ import {
   NeedInput,
   VoiceNeedInput,
   WeightingEditor,
-  NeedCardPreview,
   NeedBuilderErrorState,
 } from '../../components/demand'
+import { AISearchActionBar } from '../../components/demand/AISearchActionBar'
+import { AISearchSavePreview } from '../../components/demand/AISearchSavePreview'
 import { useParseNeed } from '../../hooks/useAI'
 import { useCreateNeed } from '../../hooks/useNeeds'
 import { useDefaultWeights } from '../../hooks/useWeighting'
@@ -25,12 +18,8 @@ import { NeedBuilderStep } from '../../domain/needBuilder'
 import type { ParseNeedResult, ParsedNeedCriteria, WeightingKey } from '../../domain/needBuilder'
 import { generateSummary, buildNeedInput } from '../../services/aiSearch/needSearchMapper'
 
-// ── Action intent ─────────────────────────────────────────────────────────────
-
 type ActionIntent = 'search' | 'save-profile'
 
-// ── Page ──────────────────────────────────────────────────────────────────────
-
 export default function AISearch() {
   const navigate = useNavigate()
   const queryClient = useQueryClient()
@@ -90,7 +79,6 @@ export default function AISearch() {
     })
   }
 
-  // Resolve criteria (parse text if needed), then either search or show save preview
   function handleAction(chosenIntent: ActionIntent) {
     setIntent(chosenIntent)
     setError(null)
@@ -130,7 +118,6 @@ export default function AISearch() {
     resolvedResult: ParseNeedResult | null,
   ) {
     if (chosenIntent === 'search') {
-      // Save as DRAFT and navigate immediately
       setStep(NeedBuilderStep.SAVING)
       const conf = resolvedResult
         ? Object.values(resolvedResult.confidenceByField).reduce((s, v) => s + v, 0) /
@@ -150,7 +137,6 @@ export default function AISearch() {
       return
     }
 
-    // save-profile: show preview step
     const confidenceByField: Record<string, number> = resolvedResult?.confidenceByField ?? {}
     if (!resolvedResult) {
       if (resolved.assetType) confidenceByField.assetType = 1.0
@@ -229,10 +215,9 @@ export default function AISearch() {
 
       <Box sx={{ flex: 1, overflowY: 'auto', px: 3, py: 3 }}>
 
-        {/* ── IDLE: full form ── */}
+        {/* IDLE: full form */}
         {(step === NeedBuilderStep.IDLE || step === NeedBuilderStep.PARSING) && (
           <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3, maxWidth: 1200, mx: 'auto' }}>
-
             <VoiceNeedInput
               text={inputText}
               onTextChange={handleTextChange}
@@ -240,7 +225,6 @@ export default function AISearch() {
               onAiSubmit={handleAiAutofill}
               isAnalyzing={step === NeedBuilderStep.PARSING}
             />
-
             <Box className="grid grid-cols-2 gap-4" sx={{ alignItems: 'start' }}>
               <NeedInput criteria={criteria} onCriteriaChange={handleCriteriaChange} />
               <WeightingEditor
@@ -250,108 +234,32 @@ export default function AISearch() {
                 assetType={criteria.assetType}
               />
             </Box>
-
-            {/* Action bar */}
-            <Box sx={{ display: 'flex', gap: 2, alignItems: 'center' }}>
-              <Button
-                variant="contained"
-                size="large"
-                disabled={!canProceed || isProcessing}
-                onClick={() => handleAction('search')}
-                endIcon={
-                  isProcessing && intent === 'search'
-                    ? <CircularProgress size={18} color="inherit" />
-                    : <Search size={18} />
-                }
-                sx={{
-                  flex: 1,
-                  py: 1.5,
-                  bgcolor: '#1e3a5f',
-                  '&:hover': { bgcolor: '#162d4a' },
-                  fontSize: 15,
-                  fontWeight: 600,
-                  textTransform: 'none',
-                }}
-              >
-                {isProcessing && intent === 'search' ? 'Sucht…' : 'Jetzt suchen'}
-              </Button>
-
-              <Divider orientation="vertical" flexItem sx={{ mx: 0.5 }} />
-
-              <Button
-                variant="outlined"
-                size="large"
-                disabled={!canProceed || isProcessing}
-                onClick={() => handleAction('save-profile')}
-                startIcon={<Bookmark size={16} />}
-                endIcon={
-                  isProcessing && intent === 'save-profile'
-                    ? <CircularProgress size={18} color="inherit" />
-                    : <ArrowRight size={18} />
-                }
-                sx={{
-                  py: 1.5,
-                  fontSize: 15,
-                  fontWeight: 500,
-                  textTransform: 'none',
-                  whiteSpace: 'nowrap',
-                }}
-              >
-                {isProcessing && intent === 'save-profile' ? 'Analysiert…' : 'Als Suchprofil speichern'}
-              </Button>
-            </Box>
-
-            <Alert severity="info" sx={{ mt: -1 }}>
-              <strong>Jetzt suchen</strong> liefert sofortige Ergebnisse.{' '}
-              <strong>Als Suchprofil speichern</strong> legt einen dauerhaften Bedarf an, der automatisch mit neuen Angeboten abgeglichen wird — auch in Zukunft.
-            </Alert>
-          </Box>
-        )}
-
-        {/* ── Preview + Save as Profile ── */}
-        {isSaveStep && parseResult && editedCriteria && (
-          <Box sx={{ maxWidth: 1200, mx: 'auto' }}>
-            <Alert severity="success" sx={{ mb: 3 }}>
-              Dieses Suchprofil wird als aktiver Bedarf gespeichert und erscheint automatisch im Match Center der Verwaltung.
-            </Alert>
-            <NeedCardPreview
-              criteria={editedCriteria}
-              weights={weights}
-              confidenceByField={parseResult.confidenceByField}
-              missingFields={parseResult.missingFields}
-              needTitle={needTitle}
-              onNeedTitleChange={setNeedTitle}
+            <AISearchActionBar
+              canProceed={canProceed}
+              isSearching={isProcessing && intent === 'search'}
+              isSavingProfile={isProcessing && intent === 'save-profile'}
+              onSearch={() => handleAction('search')}
+              onSaveProfile={() => handleAction('save-profile')}
             />
-            <Box sx={{ maxWidth: 720, mx: 'auto', display: 'flex', justifyContent: 'space-between', mt: 3 }}>
-              <Button
-                variant="outlined"
-                onClick={() => setStep(NeedBuilderStep.IDLE)}
-                disabled={step === NeedBuilderStep.SAVING}
-              >
-                ← Zurück
-              </Button>
-              <Button
-                variant="contained"
-                onClick={handleSaveProfile}
-                disabled={step === NeedBuilderStep.SAVING}
-                endIcon={
-                  step === NeedBuilderStep.SAVING
-                    ? <CircularProgress size={16} color="inherit" />
-                    : <Save size={16} />
-                }
-                sx={{ bgcolor: '#1e3a5f', '&:hover': { bgcolor: '#162d4a' }, textTransform: 'none' }}
-              >
-                {step === NeedBuilderStep.SAVING
-                  ? 'Wird gespeichert…'
-                  : overallConfidence < 0.6
-                    ? 'Als Entwurf speichern'
-                    : 'Suchprofil speichern & Matching starten'}
-              </Button>
-            </Box>
           </Box>
         )}
 
-        {/* ── Error ── */}
+        {/* Save preview step */}
+        {isSaveStep && parseResult && editedCriteria && (
+          <AISearchSavePreview
+            criteria={editedCriteria}
+            weights={weights}
+            parseResult={parseResult}
+            needTitle={needTitle}
+            overallConfidence={overallConfidence}
+            isSaving={step === NeedBuilderStep.SAVING}
+            onNeedTitleChange={setNeedTitle}
+            onBack={() => setStep(NeedBuilderStep.IDLE)}
+            onSave={handleSaveProfile}
+          />
+        )}
+
+        {/* Error */}
         {step === NeedBuilderStep.ERROR && (
           <NeedBuilderErrorState message={error ?? 'Unbekannter Fehler'} onRetry={handleRetry} />
         )}

src/pages/demand/Anfragen.tsx

@@ -12,7 +12,7 @@ import type { InquiryMessage } from '../../domain/inquiry'
 import { STAGE_ORDER, STAGE_LABELS, detectKiStage } from './anfragenKiDetection'
 import { AnfragenMessageBubble } from '../../components/demand/AnfragenMessageBubble'
 import { AnfragenInquiryItem } from '../../components/demand/AnfragenInquiryItem'
-import { INQUIRY_STATUS_META, DS_COLORS } from '../../lib/ds'
+import { INQUIRY_STATUS_META, DS_COLORS, DS_TEXT, DS_BG, DS_BORDER, DS_SURFACE } from '../../lib/ds'
 
 // ── Config ────────────────────────────────────────────────────────────────────
 
@@ -130,13 +130,13 @@ export default function Anfragen() {
           minWidth: { md: 320 },
           flexShrink: 0,
           display: 'flex', flexDirection: 'column',
-          borderRight: '1px solid #e2e8f0',
+          borderRight: `1px solid ${DS_BORDER.default}`,
           overflow: 'hidden',
           bgcolor: 'white',
           transition: 'width 0.2s ease',
         }}
       >
-        <Box sx={{ px: 2, py: 2, borderBottom: '1px solid #e2e8f0' }}>
+        <Box sx={{ px: 2, py: 2, borderBottom: `1px solid ${DS_BORDER.default}` }}>
           <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 1.5 }}>
             <Typography variant="h6" sx={{ fontWeight: 700, fontSize: '1rem' }}>Anfragen</Typography>
             {totalUnread > 0 && (
@@ -147,7 +147,7 @@ export default function Anfragen() {
           <TextField
             size="small" placeholder="Suchen..." fullWidth
             value={search} onChange={e => setSearch(e.target.value)}
-            InputProps={{ startAdornment: <InputAdornment position="start"><Search size={14} color="#94a3b8" /></InputAdornment> }}
+            InputProps={{ startAdornment: <InputAdornment position="start"><Search size={14} color={DS_TEXT.disabled} /></InputAdornment> }}
             sx={{ mb: 1.25 }}
           />
           <Box sx={{ display: 'flex', gap: 0.5, flexWrap: 'wrap' }}>
@@ -155,10 +155,10 @@ export default function Anfragen() {
               <Chip key={tab.key} label={tab.label} size="small" onClick={() => setStatusFilter(tab.key)}
                 sx={{
                   height: 22, fontSize: '0.7rem', cursor: 'pointer',
-                  bgcolor: statusFilter === tab.key ? 'primary.main' : '#f1f5f9',
-                  color: statusFilter === tab.key ? 'white' : '#475569',
+                  bgcolor: statusFilter === tab.key ? 'primary.main' : DS_BG.subtle,
+                  color: statusFilter === tab.key ? 'white' : DS_TEXT.secondary,
                   fontWeight: statusFilter === tab.key ? 700 : 400,
-                  '&:hover': { bgcolor: statusFilter === tab.key ? 'primary.dark' : '#e2e8f0' },
+                  '&:hover': { bgcolor: statusFilter === tab.key ? 'primary.dark' : DS_BG.muted },
                 }}
               />
             ))}
@@ -188,7 +188,7 @@ export default function Anfragen() {
         display: { xs: mobileShowChat ? 'flex' : 'none', md: 'flex' },
         flexDirection: 'column',
         overflow: 'hidden',
-        bgcolor: '#f8fafc',
+        bgcolor: DS_BG.page,
         minWidth: 0,
       }}>
         {!selected ? (
@@ -199,7 +199,7 @@ export default function Anfragen() {
         ) : (
           <>
             {/* Chat header */}
-            <Box sx={{ px: 3, py: 1.75, bgcolor: 'white', borderBottom: '1px solid #e2e8f0', flexShrink: 0 }}>
+            <Box sx={{ px: 3, py: 1.75, bgcolor: 'white', borderBottom: `1px solid ${DS_BORDER.default}`, flexShrink: 0 }}>
               <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
                 <IconButton size="small" sx={{ display: { md: 'none' }, mr: -0.5 }} onClick={() => setMobileShowChat(false)}>
                   <ArrowLeft size={16} />
@@ -219,10 +219,10 @@ export default function Anfragen() {
                 <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, flexShrink: 0 }}>
                   {selected.matchScore && (
                     <Chip label={`${selected.matchScore}%`} size="small" sx={{
-                      bgcolor: selected.matchScore >= 80 ? '#f0fdf4' : '#fffbeb',
-                      color: selected.matchScore >= 80 ? '#1a7a4a' : '#d97706',
+                      bgcolor: selected.matchScore >= 80 ? DS_SURFACE.success.bg : DS_SURFACE.warning.bg,
+                      color: selected.matchScore >= 80 ? DS_TEXT.success : DS_TEXT.warning,
                       fontWeight: 700, height: 22, fontSize: '0.75rem',
-                      border: `1px solid ${selected.matchScore >= 80 ? '#86efac' : '#fde68a'}`,
+                      border: `1px solid ${selected.matchScore >= 80 ? DS_SURFACE.success.border : DS_SURFACE.warning.border}`,
                     }} />
                   )}
                   <Chip
@@ -253,7 +253,7 @@ export default function Anfragen() {
               {/* Property reference */}
               {(linkedPipelineItem?.propertyAddress ?? selected.subject) && (
                 <Box sx={{ mt: 1, display: 'flex', alignItems: 'center', gap: 1 }}>
-                  <Building2 size={12} color="#64748b" />
+                  <Building2 size={12} color={DS_TEXT.muted} />
                   <Typography variant="caption" color="text.secondary">
                     {linkedPipelineItem?.propertyAddress ?? selected.subject}
                   </Typography>
@@ -286,7 +286,7 @@ export default function Anfragen() {
             </Box>
 
             {/* Composer */}
-            <Box sx={{ px: { xs: 2, md: 3 }, py: 2, bgcolor: 'white', borderTop: '1px solid #e2e8f0', flexShrink: 0 }}>
+            <Box sx={{ px: { xs: 2, md: 3 }, py: 2, bgcolor: 'white', borderTop: `1px solid ${DS_BORDER.default}`, flexShrink: 0 }}>
               <Box sx={{ display: 'flex', gap: 1, alignItems: 'flex-end' }}>
                 <TextField
                   multiline minRows={2} maxRows={6} fullWidth size="small"
@@ -297,9 +297,9 @@ export default function Anfragen() {
                   sx={{ '& .MuiOutlinedInput-root': { borderRadius: 2 } }}
                 />
                 <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.5 }}>
-                  <IconButton size="small" sx={{ color: '#94a3b8' }}><Paperclip size={16} /></IconButton>
+                  <IconButton size="small" sx={{ color: DS_TEXT.disabled }}><Paperclip size={16} /></IconButton>
                   <IconButton size="small" onClick={handleSend} disabled={!replyText.trim()}
-                    sx={{ bgcolor: 'primary.main', color: 'white', '&:hover': { bgcolor: 'primary.dark' }, '&:disabled': { bgcolor: '#e2e8f0', color: '#94a3b8' } }}>
+                    sx={{ bgcolor: 'primary.main', color: 'white', '&:hover': { bgcolor: 'primary.dark' }, '&:disabled': { bgcolor: DS_BG.muted, color: DS_TEXT.disabled } }}>
                     <Send size={16} />
                   </IconButton>
                 </Box>

src/pages/demand/Results.tsx

@@ -1,9 +1,9 @@
 import { useState, useMemo, useEffect } from 'react'
 import { Box, Button, Card, Typography } from '@mui/material'
 import { useNavigate, useLocation } from 'react-router'
-import { useQuery, useQueryClient } from '@tanstack/react-query'
+import { useQueryClient } from '@tanstack/react-query'
 import { useUnifiedResults } from '../../hooks/useUnifiedResults'
-import { needService } from '../../services/needService'
+import { useNeeds } from '../../hooks/useNeeds'
 import { DecisionContextPanel } from '../../components/ui'
 import {
   FeedEmptyState,
@@ -47,15 +47,11 @@ export default function Results() {
   // When coming from NeedBuilder, invalidate so the freshly created need is included
   const activeNeedIdFromNav = (location.state as { activeNeedId?: string } | null)?.activeNeedId
 
-  const { data: needResp } = useQuery({
-    queryKey: ['needs'],
-    queryFn: () => needService.getAll(),
+  const { data: allNeeds = [] } = useNeeds({
     refetchOnMount: activeNeedIdFromNav ? 'always' : true,
     gcTime: 0,
   })
 
-  const allNeeds = needResp?.data ?? []
-
   // Nav ID (from NeedBuilder) takes priority; otherwise first named need
   const effectiveNeedId = activeNeedIdFromNav ?? allNeeds.find(n => n.companyName !== 'Neue Suche')?.id