feat: F008 AI need builder — full spec compliance (editable criteria, grouped sections, needService.create)

- NeedInput: Reset button, Asset-Type Quick Select chips, 3 typed examples
- ExtractedFieldRow: inline edit mode (pencil → TextField, Enter/blur commits)
- CriteriaReviewPanel: 3 grouped sections (Hard Facts, Soft Factors, Must-haves) + AI Assumptions + Missing Information; all 14 criteria fields shown and editable; onCriteriaChange propagates typed edits to parent
- FollowUpPanel: Rückfragen neu generieren button triggers onReparse
- NeedCardPreview: Need Title input, Confidence Summary with progress bar, Missing Critical Fields alert, low-confidence draft label
- AISearch page: editedCriteria state (mutable copy of parse result), handleReparse via generateFollowUpQuestions, handleSave calls needService.create() with full CreateNeedInput mapping, low-confidence → status DRAFT

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

src/components/demand/NeedInput.tsx

@@ -1,5 +1,6 @@
 import { Box, Button, Card, Chip, TextField, Typography, Stack } from '@mui/material'
-import { Sparkles } from 'lucide-react'
+import { Sparkles, RotateCcw } from 'lucide-react'
+import { AssetType } from '../../domain/enums'
 
 interface Props {
   value: string
@@ -7,19 +8,31 @@ interface Props {
   onSubmit: () => void
 }
 
-const EXAMPLES = [
-  'Büro Zürich 500–800 m², ab September 2025, max. 45 CHF/m², gute ÖV-Anbindung',
-  'Logistik Basel 2000 m², Tiefgarage, sofort verfügbar',
-  'Retail Bern Innenstadt, hohe Passantenfrequenz, max. CHF 200/m²',
+const EXAMPLES: Record<string, string> = {
+  Büro: 'Wir suchen 800–1.000 m² Bürofläche in Zürich-West, verfügbar ab September 2025, Budget max. 45 CHF/m². Wichtig: gute ÖV-Anbindung, moderne Infrastruktur.',
+  Retail: 'Suche Ladenfläche 200–400 m² in Bern Innenstadt, hohe Passantenfrequenz, Erdgeschoss, max. CHF 150/m². Sofort verfügbar.',
+  Logistik: 'Lagerhalle 2.000–3.000 m² Basel Umgebung, Tiefgarage oder Aussenrampe, 12 m Deckenhöhe, sofort. Budget CHF 15/m².',
+}
+
+const ASSET_TYPE_OPTIONS: Array<{ label: string; value: string }> = [
+  { label: 'Büro', value: AssetType.OFFICE },
+  { label: 'Retail', value: AssetType.RETAIL },
+  { label: 'Logistik', value: AssetType.LOGISTICS },
+  { label: 'Produktion', value: AssetType.PRODUCTION },
+  { label: 'Light Industrial', value: AssetType.LIGHT_INDUSTRIAL },
 ]
 
 export function NeedInput({ value, onChange, onSubmit }: Props) {
   return (
     <Box sx={{ maxWidth: 720, mx: 'auto' }}>
       <Card sx={{ p: 3, mb: 2 }}>
-        <Typography variant="subtitle1" sx={{ fontWeight: 600, mb: 2 }}>
+        <Typography variant="subtitle1" sx={{ fontWeight: 600, mb: 0.5 }}>
           Flächenbedarf beschreiben
         </Typography>
+        <Typography variant="caption" color="text.secondary" sx={{ display: 'block', mb: 2 }}>
+          Beschreiben Sie Typ, Fläche, Standort, Budget und Verfügbarkeit — die KI extrahiert die Kriterien automatisch.
+        </Typography>
+
         <TextField
           multiline
           rows={5}
@@ -33,31 +46,60 @@ export function NeedInput({ value, onChange, onSubmit }: Props) {
         <Typography variant="caption" color="text.secondary" sx={{ display: 'block', textAlign: 'right', mb: 2 }}>
           {value.length}/2000
         </Typography>
-        <Button
-          variant="contained"
-          fullWidth
-          disabled={value.length < 20}
-          onClick={onSubmit}
-          endIcon={<Sparkles size={16} />}
-          sx={{ bgcolor: '#1e3a5f', '&:hover': { bgcolor: '#162d4a' } }}
-        >
-          KI-Analyse starten
-        </Button>
+
+        <Box sx={{ display: 'flex', gap: 1 }}>
+          <Button
+            variant="contained"
+            fullWidth
+            disabled={value.length < 20}
+            onClick={onSubmit}
+            endIcon={<Sparkles size={16} />}
+            sx={{ bgcolor: '#1e3a5f', '&:hover': { bgcolor: '#162d4a' } }}
+          >
+            KI-Analyse starten
+          </Button>
+          <Button
+            variant="outlined"
+            onClick={() => onChange('')}
+            startIcon={<RotateCcw size={16} />}
+            sx={{ flexShrink: 0 }}
+          >
+            Reset
+          </Button>
+        </Box>
       </Card>
 
-      <Typography variant="caption" color="text.secondary" sx={{ display: 'block', mb: 1 }}>
-        Beispiele:
+      {/* Asset-Type Quick Select */}
+      <Typography variant="caption" color="text.secondary" sx={{ display: 'block', mb: 0.5 }}>
+        Schnellauswahl Nutzungstyp:
       </Typography>
-      <Stack direction="row" spacing={1} sx={{ flexWrap: 'wrap', gap: 1 }}>
-        {EXAMPLES.map(q => (
+      <Stack direction="row" spacing={0.5} sx={{ flexWrap: 'wrap', gap: 0.5, mb: 2 }}>
+        {ASSET_TYPE_OPTIONS.map(opt => (
           <Chip
-            key={q}
-            label={q}
+            key={opt.value}
+            label={opt.label}
             size="small"
             variant="outlined"
             clickable
-            onClick={() => onChange(q)}
-            sx={{ maxWidth: 300, overflow: 'hidden', textOverflow: 'ellipsis' }}
+            onClick={() => onChange(EXAMPLES[opt.label] ?? value)}
+          />
+        ))}
+      </Stack>
+
+      {/* Example prompts */}
+      <Typography variant="caption" color="text.secondary" sx={{ display: 'block', mb: 0.5 }}>
+        Beispiele:
+      </Typography>
+      <Stack spacing={0.5}>
+        {Object.entries(EXAMPLES).map(([label, text]) => (
+          <Chip
+            key={label}
+            label={`${label}: ${text.slice(0, 60)}…`}
+            size="small"
+            variant="outlined"
+            clickable
+            onClick={() => onChange(text)}
+            sx={{ height: 'auto', py: 0.5, '& .MuiChip-label': { whiteSpace: 'normal' } }}
           />
         ))}
       </Stack>