/* global React */ // Bike-Konfigurator — UI-Komponenten const { useState, useEffect, useMemo, useCallback, useRef } = React; const { fmtPrice, fmtNum, SLOT_LABELS, SLOT_TO_POOL, PRIMARY_SLOTS, SECONDARY_SLOTS, TERRAIN_OPTIONS, STYLE_OPTIONS, SKILL_OPTIONS } = window.BikeFmt; const Icon = window.BikeIcon; // ----- Brand registry ----- const BRAND_MAP = { "Shimano": { url: "https://www.shimano.com", logo: "https://logo.clearbit.com/shimano.com" }, "SRAM": { url: "https://www.sram.com", logo: "https://logo.clearbit.com/sram.com" }, "RockShox": { url: "https://www.sram.com/en/rockshox", logo: "https://logo.clearbit.com/sram.com" }, "Fox": { url: "https://www.ridefox.com", logo: "https://logo.clearbit.com/ridefox.com" }, "Maxxis": { url: "https://www.maxxis.com", logo: "https://logo.clearbit.com/maxxis.com" }, "Schwalbe": { url: "https://www.schwalbe.com", logo: "https://logo.clearbit.com/schwalbe.com" }, "Crankbrothers":{ url: "https://www.crankbrothers.com", logo: "https://logo.clearbit.com/crankbrothers.com" }, "OneUp": { url: "https://www.oneupcomponents.com", logo: "https://logo.clearbit.com/oneupcomponents.com" }, "Ergon": { url: "https://www.ergon-bike.com", logo: "https://logo.clearbit.com/ergon-bike.com" }, "BikeYoke": { url: "https://bikeyoke.de", logo: "https://logo.clearbit.com/bikeyoke.de" }, "Bosch": { url: "https://www.bosch-ebike.com", logo: "https://logo.clearbit.com/bosch-ebike.com" }, "DT Swiss": { url: "https://www.dtswiss.com", logo: "https://logo.clearbit.com/dtswiss.com" }, "Suntour": { url: "https://www.srsuntour-cycling.com", logo: "https://logo.clearbit.com/srsuntour-cycling.com" }, "ODI": { url: "https://www.odigrips.com", logo: "https://logo.clearbit.com/odigrips.com" }, "SQlab": { url: "https://www.sq-lab.com", logo: "https://logo.clearbit.com/sq-lab.com" }, "X-Fusion": { url: "https://www.xfusionshox.com", logo: "https://logo.clearbit.com/xfusionshox.com" }, "KS": { url: "https://www.kindshock.com", logo: "https://logo.clearbit.com/kindshock.com" }, "Magura": { url: "https://www.magura.com", logo: "https://logo.clearbit.com/magura.com" }, "TRP": { url: "https://www.trpcycling.com", logo: "https://logo.clearbit.com/trpcycling.com" }, "Enve": { url: "https://www.enve.com", logo: "https://logo.clearbit.com/enve.com" }, "Brand-X": { url: "https://www.chainreactioncycles.com", logo: "https://logo.clearbit.com/chainreactioncycles.com" }, }; const FALLBACK_MARKETPLACE_PARTNERS = [ { id: "bike_discount", name: "Bike-Discount", status: "pending", search_url_template: "https://www.bike-discount.de/de/search?sSearch={query_encoded}", tracking_url_template: "", priority: 10 }, { id: "bike24", name: "Bike24", status: "pending", search_url_template: "https://www.bike24.de/search?searchTerm={query_encoded}", tracking_url_template: "", priority: 20 }, { id: "mantel", name: "Mantel", status: "pending", search_url_template: "https://www.mantel.com/de/search?search={query_encoded}", tracking_url_template: "", priority: 50 } ]; function detectBrand(name) { for (const brand of Object.keys(BRAND_MAP)) { if (name && name.toLowerCase().includes(brand.toLowerCase())) return brand; } return null; } function getMarketplacePartners() { const registry = window.BikeAffiliatePartners; const partners = Array.isArray(registry?.partners) ? registry.partners : FALLBACK_MARKETPLACE_PARTNERS; const usable = partners .filter(p => p.status !== "disabled" && p.search_url_template) .sort((a, b) => (a.priority || 999) - (b.priority || 999)); return usable.length ? usable : FALLBACK_MARKETPLACE_PARTNERS; } function fillMarketplaceTemplate(template, item, partner, destinationUrl) { const rawQuery = item?.name || "mountainbike komponenten"; const encodedQuery = encodeURIComponent(rawQuery); const campaign = "component_offer"; const content = item?.id || "component"; return template .replaceAll("{query}", rawQuery) .replaceAll("{query_encoded}", encodedQuery) .replaceAll("{item_id}", content) .replaceAll("{partner_id}", partner.id || partner.name || "partner") .replaceAll("{campaign}", campaign) .replaceAll("{content}", content) .replaceAll("{destination_url}", destinationUrl) .replaceAll("{destination_url_encoded}", encodeURIComponent(destinationUrl)); } function appendMarketplaceParams(urlText, item, partner) { const url = new URL(urlText); const defaults = window.BikeAffiliatePartners?.tracking_defaults || {}; url.searchParams.set("utm_source", defaults.utm_source || "bikeforge"); url.searchParams.set("utm_medium", defaults.utm_medium || "marketplace"); url.searchParams.set("utm_campaign", defaults.utm_campaign || "component_offer"); url.searchParams.set("utm_content", item?.id || "component"); url.searchParams.set("partner", partner.id || partner.name || "partner"); return url.toString(); } function marketplaceUrlFor(item, partner = getMarketplacePartners()[0]) { const destination = fillMarketplaceTemplate(partner.search_url_template, item, partner, ""); const destinationWithParams = appendMarketplaceParams(destination, item, partner); if (partner.status === "active" && partner.tracking_url_template) { return fillMarketplaceTemplate(partner.tracking_url_template, item, partner, destinationWithParams); } return destinationWithParams; } function MarketplaceButton({ item, compact = false }) { if (!item) return null; return ( { e.stopPropagation(); window.BikeAnalytics?.track("marketplace_click", { source: "component_card", item_id: item.id, item_name: item.name, partner: getMarketplacePartners()[0]?.id || getMarketplacePartners()[0]?.name || "partner" }); }} title={`${item.name} Angebote bei ${getMarketplacePartners()[0]?.name || "Partnern"} prüfen`} style={{ display: "inline-flex", alignItems: "center", gap: compact ? 4 : 7, background: compact ? "transparent" : "var(--accent-soft)", color: compact ? "var(--accent)" : "var(--ink)", border: compact ? "none" : "1px solid var(--accent)", padding: compact ? 0 : "6px 10px", textDecoration: "none", font: `700 ${compact ? 10 : 11}px/1 var(--font-sans)`, letterSpacing: "0.7px", textTransform: "uppercase", whiteSpace: "nowrap" }} > Angebote ); } function BrandBadge({ name, size = "sm" }) { const brand = detectBrand(name); if (!brand) return null; const { url, logo } = BRAND_MAP[brand]; const [imgOk, setImgOk] = useState(true); const isLarge = size === "lg"; return ( e.stopPropagation()} title={`${brand} Website`} style={{ display: "inline-flex", alignItems: "center", gap: isLarge ? 8 : 5, background: "rgba(255,255,255,0.06)", border: "1px solid var(--hairline)", padding: isLarge ? "6px 12px" : "3px 8px", textDecoration: "none", flexShrink: 0, }}> {imgOk && ( {brand} setImgOk(false)} style={{ height: isLarge ? 18 : 12, width: "auto", objectFit: "contain", filter: "brightness(0) invert(1)" }} /> )} {imgOk ? "" : brand} ); } // ----- Brand Ticker ----- const TICKER_BRANDS = Object.entries(BRAND_MAP).map(([name, { url, logo }]) => ({ name, url, logo })); function BrandTicker() { // Inject keyframes once useEffect(() => { if (document.getElementById("bf-ticker-style")) return; const s = document.createElement("style"); s.id = "bf-ticker-style"; s.textContent = ` @keyframes bf-marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .bf-ticker-track { animation: bf-marquee 28s linear infinite; } .bf-ticker-track:hover { animation-play-state: paused; } `; document.head.appendChild(s); }, []); const items = [...TICKER_BRANDS, ...TICKER_BRANDS]; // seamless loop return (
{/* fade edges */}
{items.map(({ name, url, logo }, i) => ( {name} e.target.style.opacity = "1"} onMouseLeave={e => e.target.style.opacity = "0.55"} onError={e => { e.target.style.display = "none"; e.target.nextSibling.style.display = "block"; }} /> {name} ))}
); } // ----- Top Nav ----- function TopIconButton({ title, icon, onClick, href, active, badge }) { const className = "btn btn-ghost btn-sm icon-btn" + (active ? " is-active" : ""); const content = ( <> {badge ? {badge} : null} ); if (href) { return {content}; } return ; } function TopNav({ onOpenGarage, savedCount, onReset, user, onLogout, plan, onUpgrade, onOpenExistingBike, onOpenCoach, installReady, isInstalled, onInstallApp, onOpenBikePass, onOpenBodySetup, onOpenSuspensionSetup }) { return (
BikeForge
{user && ( {user.name} )} {plan === "pro" ? ( PRO ) : ( )} {installReady && !isInstalled && ( )} 0 ? savedCount : null} /> {onLogout && ( )}
); } function ToolDrawer({ title, eyebrow, icon, onClose, children, footer }) { return ( <>
{eyebrow}

{title}

{children}
{footer && (
{footer}
)}
); } const BIKE_PASS_PART_TYPES = [ { value: "frame", label: "Rahmen" }, { value: "fork", label: "Federgabel" }, { value: "shock", label: "Daempfer" }, { value: "wheels", label: "Laufraeder" }, { value: "brakes", label: "Bremsen" }, { value: "drivetrain", label: "Antrieb" }, { value: "cockpit", label: "Cockpit" }, { value: "dropper", label: "Dropper" }, { value: "tires", label: "Reifen" }, { value: "other", label: "Sonstiges" } ]; function BikePassDrawer({ profile, result, onAddPart, onRemovePart, onClose }) { const setup = profile.suspension_setup || {}; const manualParts = profile.bike_pass_parts || []; const [draft, setDraft] = useState({ type: "fork", brand: "", model: "", serial: "", year: "", notes: "" }); const [lookup, setLookup] = useState({ loading: false, result: null, error: "" }); const set = (key, value) => setDraft(prev => ({ ...prev, [key]: value })); const identifyPart = async () => { const query = [draft.brand, draft.model, draft.serial, draft.year].filter(Boolean).join(" ").trim(); if (!query) { setLookup({ loading: false, result: null, error: "Bitte Marke, Modell oder Seriennummer eintragen." }); return null; } setLookup({ loading: true, result: null, error: "" }); try { const response = await fetch("/api/parts/identify", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ ...draft, query }) }); const data = await response.json(); if (!response.ok) throw new Error(data.error || "Teil konnte nicht erkannt werden."); setLookup({ loading: false, result: data, error: "" }); return data; } catch (error) { const message = error.message || "Teil konnte nicht erkannt werden."; setLookup({ loading: false, result: null, error: message }); return null; } }; const savePart = async () => { const identification = lookup.result || await identifyPart(); if (!identification && !draft.model.trim() && !draft.serial.trim()) return; const best = identification?.match || {}; onAddPart({ type: draft.type, type_label: BIKE_PASS_PART_TYPES.find(item => item.value === draft.type)?.label || draft.type, brand: draft.brand.trim() || best.brand || "", model: draft.model.trim() || best.name || "", serial: draft.serial.trim(), year: draft.year ? Number(draft.year) || draft.year : "", notes: draft.notes.trim(), identification: identification || { status: "manual", confidence: 0, message: "Manuell eingetragen, noch nicht gegen Datenbank erkannt." } }); setDraft({ type: "fork", brand: "", model: "", serial: "", year: "", notes: "" }); setLookup({ loading: false, result: null, error: "" }); }; const rider = [ profile.rider_name ? String(profile.rider_name).trim() : "", profile.rider_age ? `${profile.rider_age} Jahre` : "", `${profile.height} cm / ${profile.weight} kg` ].filter(Boolean).join(" · "); const rows = [ ["Rahmen", result.build.frame?.name], ["Einsatz", (profile.terrain || "").toUpperCase()], ["Fahrer", rider], ["Antrieb", result.build.drivetrain?.name], ["Gabel", result.build.fork?.name], ["Dämpfer", result.build.shock?.name], ["Bremsen", result.build.brakes?.name], ["Gesamt", fmtPrice(result.total_price)] ]; return (
{rows.map(([label, value]) => (
{label} {value || "—"}
))}
Fahrwerk
SAG {setup.sag ?? 28}% · Gabel-Rebound {setup.fork_rebound ?? 8} Klicks · Dämpfer-Rebound {setup.shock_rebound ?? 7} Klicks
Eigenes Teil eintragen
Marke, Modell und Seriennummer erfassen. BikeForge gleicht den Eintrag mit der vorhandenen Teile-Datenbank ab und speichert unbekannte Teile als pruefpflichtigen Pass-Eintrag.
{lookup.result && (
{lookup.result.match?.name || "Kein sicherer Treffer"} {lookup.result.message} {lookup.result.match?.details && {lookup.result.match.details}}
)} {lookup.error &&
{lookup.error}
}
Eingetragene eigene Teile
{manualParts.length ? manualParts.map(part => (
{part.type_label || part.type}: {[part.brand, part.model].filter(Boolean).join(" ") || "Unbenanntes Teil"}
{part.serial ? `Seriennummer: ${part.serial}` : "Keine Seriennummer hinterlegt"}{part.year ? ` · Baujahr: ${part.year}` : ""}
{part.identification?.message || "Manueller Fahrradpass-Eintrag."}
)) : (
Noch keine eigenen Teile eingetragen.
)}
); } function BodySetupDrawer({ profile, onApply, onClose }) { const [draft, setDraft] = useState({ rider_name: profile.rider_name || "", rider_age: profile.rider_age || "", height: profile.height || 181, weight: profile.weight || 92 }); const set = (key, value) => setDraft(prev => ({ ...prev, [key]: value })); return ( onApply(draft)}> Übernehmen )} >
set("height", v)} large /> set("weight", v)} large />
Diese Werte beeinflussen Reach-Empfehlung, Bremsreserve, Belastung und Teilepriorität.
); } function SuspensionSetupDrawer({ profile, result, onApply, onClose }) { const current = profile.suspension_setup || {}; const [draft, setDraft] = useState({ sag: current.sag ?? 28, fork_rebound: current.fork_rebound ?? 8, fork_compression: current.fork_compression ?? 3, shock_rebound: current.shock_rebound ?? 7, shock_compression: current.shock_compression ?? 2 }); const set = (key, value) => setDraft(prev => ({ ...prev, [key]: value })); const source = current.source === "body_auto" ? "Automatisch aus Körperdaten vorgeschlagen." : "Manuell gesetztes Setup."; return ( onApply(draft)}> Setup speichern )} >
Aktuelle Komponenten
Gabel: {result.build.fork?.name || "—"}
Dämpfer: {result.build.shock?.name || "—"}
Fahrer: {profile.height} cm / {profile.weight} kg · {source}
set("sag", v)} /> set("fork_rebound", v)} /> set("fork_compression", v)} /> set("shock_rebound", v)} /> set("shock_compression", v)} />
Startwert: Rebound von geschlossen aus zählen. Vor echter Fahrt Herstellerdruck, SAG und Sicherheitscheck prüfen.
); } const EXISTING_BIKE_FIELDS = [ { key: "fork", label: "Gabel", placeholder: "Fox 36 Performance" }, { key: "shock", label: "Dämpfer", placeholder: "Fox Float X" }, { key: "brakes", label: "Bremsen", placeholder: "SRAM Code R" }, { key: "drivetrain", label: "Antrieb", placeholder: "SRAM GX Eagle" }, { key: "wheels", label: "Laufräder", placeholder: "DT Swiss EX1700" }, { key: "tires", label: "Reifen", placeholder: "Maxxis Minion DHF" }, { key: "dropper", label: "Dropper", placeholder: "OneUp V2 150" }, { key: "cockpit", label: "Cockpit", placeholder: "Race Face Turbine" }, { key: "grips", label: "Griffe", placeholder: "ODI Elite Pro" }, { key: "saddle", label: "Sattel", placeholder: "Ergon SM Pro" }, { key: "chain", label: "Kette", placeholder: "SRAM GX Eagle Chain" }, { key: "pedals", label: "Pedale", placeholder: "Crankbrothers Stamp" } ]; const PHOTO_HINTS_BY_SLOT = { fork: "Gabel-Decals und linke/rechte Seite freier sichtbar fotografieren.", shock: "Daempferbereich im Rahmendreieck heller aufnehmen.", brakes: "Bremssattel und Bremshebel naeher sichtbar machen.", drivetrain: "Rechte Seite mit Schaltwerk, Kassette und Kurbel fotografieren.", wheels: "Naben und Felgenprofil seitlich klar sichtbar lassen.", tires: "Reifenflanke lesbar aufnehmen.", dropper: "Sattelstuetze und Remote-Hebel heller zeigen.", cockpit: "Lenker, Vorbau und Hebel nicht vom Rahmen verdecken lassen.", grips: "Lenkerenden und Griffe naeher sichtbar machen.", saddle: "Sattel seitlich und von oben nicht verdecken.", chain: "Kette und Kassette auf der Antriebsseite sichtbar machen.", pedals: "Pedale seitlich freistellen, nicht vom Kurbelarm verdecken lassen." }; function confidenceLevel(value) { const confidence = Math.max(0, Math.min(1, Number(value || 0))); if (confidence >= 0.75) return "ok"; if (confidence >= 0.45) return "check"; return "low"; } function confidenceHintFor(field, confidence) { const percent = Math.round(Math.max(0, Math.min(1, Number(confidence || 0))) * 100); const base = PHOTO_HINTS_BY_SLOT[field.key] || "Komponente manuell pruefen."; return `${field.label}: ${percent}% - ${base}`; } function ExistingBikeModal({ profile, onApply, onClose }) { const [preview, setPreview] = useState(null); const [modelName, setModelName] = useState(""); const [terrain, setTerrain] = useState(profile.terrain || "trail"); const [bikeType, setBikeType] = useState(profile.bike_type || "analog"); const [components, setComponents] = useState({}); const [componentActions, setComponentActions] = useState({}); const [componentConfidence, setComponentConfidence] = useState({}); const [analyzing, setAnalyzing] = useState(false); const [detailAnalyzingSlot, setDetailAnalyzingSlot] = useState(null); const [detailMessage, setDetailMessage] = useState(null); const [analysisError, setAnalysisError] = useState(null); const [analysisMeta, setAnalysisMeta] = useState(null); const setComponent = (key, value) => { setComponents(prev => ({ ...prev, [key]: value })); if (String(value || "").trim()) { setComponentActions(prev => ({ ...prev, [key]: prev[key] || "keep" })); } else { setComponentConfidence(prev => { const next = { ...prev }; delete next[key]; return next; }); } }; const applyVisionAnalysis = (payload = {}) => { const analysis = payload.analysis || {}; if (analysis.bike_model_name) setModelName(analysis.bike_model_name); if (analysis.frame_category) setTerrain(analysis.frame_category); setBikeType(analysis.is_ebike ? "ebike" : "analog"); const recognized = Object.entries(analysis.components || {}) .map(([key, value]) => [key, String(value || "").trim()]) .filter(([, value]) => value); if (recognized.length) { setComponents(prev => ({ ...prev, ...Object.fromEntries(recognized) })); setComponentActions(prev => ({ ...prev, ...Object.fromEntries(recognized.map(([key]) => [key, prev[key] || "keep"])) })); setComponentConfidence(prev => ({ ...prev, ...Object.fromEntries( recognized.map(([key]) => [key, Math.max(0, Math.min(1, Number(analysis.component_confidence?.[key] || 0)))]) ) })); } setAnalysisMeta({ provider: payload.provider || "vision", model: payload.model || "", confidence: Number(analysis.confidence || 0), observations: Array.isArray(analysis.observations) ? analysis.observations.filter(Boolean) : [] }); }; const applyDetailAnalysis = (slot, payload = {}) => { const analysis = payload.analysis || {}; const value = String(analysis.components?.[slot] || "").trim(); const confidence = Math.max(0, Math.min(1, Number(analysis.component_confidence?.[slot] || 0))); const field = EXISTING_BIKE_FIELDS.find(item => item.key === slot); if (!value) { setDetailMessage({ kind: "warn", text: `${field?.label || slot}: Detailfoto konnte kein eindeutiges Teil erkennen. Feld bitte manuell pruefen.` }); setComponentConfidence(prev => ({ ...prev, [slot]: confidence })); return; } setComponents(prev => ({ ...prev, [slot]: value })); setComponentActions(prev => ({ ...prev, [slot]: prev[slot] || "keep" })); setComponentConfidence(prev => ({ ...prev, [slot]: confidence })); setDetailMessage({ kind: confidence >= 0.75 ? "ok" : "warn", text: `${field?.label || slot}: Detailfoto erkannt - ${value} (${Math.round(confidence * 100)}%).` }); }; const analyzeImage = async (file) => { setAnalyzing(true); setAnalysisError(null); setDetailMessage(null); setAnalysisMeta(null); try { const body = new FormData(); body.append("image", file); const response = await fetch(`${window.BIKEFORGE_API_URL}/vision/analyze`, { method: "POST", body }); const payload = await response.json().catch(() => ({})); if (!response.ok) { throw new Error(payload.detail || payload.error || "Bildanalyse fehlgeschlagen."); } applyVisionAnalysis(payload); } catch (error) { setAnalysisError(error.message || "Bildanalyse fehlgeschlagen."); } finally { setAnalyzing(false); } }; const analyzeDetailImage = async (slot, file) => { setDetailAnalyzingSlot(slot); setAnalysisError(null); setDetailMessage(null); try { const body = new FormData(); body.append("image", file); body.append("slot", slot); const response = await fetch(`${window.BIKEFORGE_API_URL}/vision/analyze`, { method: "POST", body }); const payload = await response.json().catch(() => ({})); if (!response.ok) { throw new Error(payload.detail || payload.error || "Detailanalyse fehlgeschlagen."); } applyDetailAnalysis(slot, payload); } catch (error) { const field = EXISTING_BIKE_FIELDS.find(item => item.key === slot); setDetailMessage({ kind: "error", text: `${field?.label || slot}: ${error.message || "Detailanalyse fehlgeschlagen."}` }); } finally { setDetailAnalyzingSlot(null); } }; const handleFile = (event) => { const file = event.target.files?.[0]; if (!file) return; const reader = new FileReader(); reader.onload = () => setPreview(reader.result); reader.readAsDataURL(file); analyzeImage(file); event.target.value = ""; }; const handleDetailFile = (slot, event) => { const file = event.target.files?.[0]; if (!file) return; analyzeDetailImage(slot, file); event.target.value = ""; }; const apply = () => { onApply({ model_name: modelName.trim() || "Bestandsbike", terrain, is_ebike: bikeType === "ebike", bike_type: bikeType, style: profile.riding_style || "balanced", photo_preview: preview, components: Object.fromEntries( Object.entries(components) .map(([key, value]) => [key, String(value || "").trim()]) .filter(([, value]) => value) ), component_actions: Object.fromEntries( Object.entries(components) .map(([key, value]) => [key, String(value || "").trim()]) .filter(([, value]) => value) .map(([key]) => [key, componentActions[key] || "keep"]) ), component_confidence: Object.fromEntries( Object.entries(components) .map(([key, value]) => [key, String(value || "").trim()]) .filter(([, value]) => value) .map(([key]) => [key, Math.max(0, Math.min(1, Number(componentConfidence[key] || 0)))]) ) }); }; const confidenceHints = EXISTING_BIKE_FIELDS .filter(field => components[field.key] && componentConfidence[field.key] > 0 && componentConfidence[field.key] < 0.75) .map(field => ({ key: field.key, level: confidenceLevel(componentConfidence[field.key]), text: confidenceHintFor(field, componentConfidence[field.key]) })); const lowConfidenceCount = confidenceHints.filter(hint => hint.level === "low").length; return ( <>
{preview ? ( Bestandsbike Vorschau ) : (
Foto-Anleitung: Bike vollstaendig seitlich, hell und auf Nabenhoehe fotografieren
)}
Bestandsbike

Ausstattung als Startpunkt.

Foto hochladen, Vision-Analyse prüfen und sichtbare Teile korrigieren. BikeForge behandelt den Rahmen als vorhandene Basis.

Seitlich fotografieren Ganzes Bike sichtbar Helles Licht ruhiger Hintergrund
{(analysisMeta || analysisError || analyzing) && (
{analyzing && "Vision-Analyse laeuft. Du kannst die Felder danach weiter bearbeiten."} {analysisError && `Vision-Analyse nicht verfuegbar: ${analysisError}`} {analysisMeta && !analysisError && ( <> Vision erkannt ({Math.round(Math.max(0, Math.min(1, analysisMeta.confidence)) * 100)}% Sicherheit) {analysisMeta.observations.length > 0 && (
    {analysisMeta.observations.map((item, index) =>
  • {item}
    • )}
)} )}
)} {confidenceHints.length > 0 && (
{lowConfidenceCount >= 3 ? "Foto wahrscheinlich neu aufnehmen" : "Bitte manuell pruefen"}
{lowConfidenceCount >= 3 ? "Mehrere Teile wurden unsicher erkannt. Seitlicher, heller und mit ruhigem Hintergrund fotografieren." : "Einige erkannte Teile sind unsicher. Pruefe diese Felder vor dem Uebernehmen."}
    {confidenceHints.slice(0, 5).map(hint => (
  • {hint.text}
    • ))}
)} {detailMessage && (
{detailMessage.text}
)}
Bike / Modell
setModelName(e.target.value)} placeholder="z.B. Cube Stereo Hybrid 140" />
Typ
Einsatz
{EXISTING_BIKE_FIELDS.map(field => (
{field.label}
{componentConfidence[field.key] > 0 && ( = 0.75 ? "var(--accent)" : componentConfidence[field.key] < 0.45 ? "var(--danger)" : "var(--ink-muted)", padding: "3px 6px", font: "700 9px/1 var(--font-sans)", letterSpacing: "0.6px", textTransform: "uppercase", whiteSpace: "nowrap" }}> {Math.round(componentConfidence[field.key] * 100)}% )}
setComponentActions(prev => ({ ...prev, [field.key]: value }))} />
setComponent(field.key, e.target.value)} placeholder={field.placeholder} style={{ fontSize: 14 }} /> {components[field.key] && componentConfidence[field.key] > 0 && componentConfidence[field.key] < 0.75 && ( )}
))}
Die Vision-Analyse ist ein Startpunkt, keine technische Garantie. Markiere gute Teile mit Behalten; bei Ersetzen nutzt BikeForge die erkannten Daten nur als Kontext und sucht eine passende neue Komponente.
); } // ----- Upgrade Modal ----- const COACH_QUICK_PROMPTS = [ "Erstelle aus meinem Briefing einen finalen Custom-Plan.", "Welche Teile soll ich in welcher Reihenfolge tauschen?", "Welche Teile sollte ich aus Sicherheitsgruenden nicht nur wegen Optik tauschen?" ]; const COACH_LOOK_OPTIONS = [ { value: "rosso", label: "Rosso", hint: "Rot / Schwarz" }, { value: "stealth", label: "Stealth", hint: "Schwarz / Gunmetal" }, { value: "neon", label: "Neon", hint: "Lauter Trail-Look" }, { value: "oil", label: "Oil Slick", hint: "Details / Schrauben" }, { value: "raw", label: "Raw", hint: "Metall / clean" } ]; const COACH_BUDGET_OPTIONS = [ { value: "low", label: "50-120 EUR" }, { value: "balanced", label: "120-250 EUR" }, { value: "premium", label: "250-500 EUR" } ]; const COACH_PRIORITY_OPTIONS = [ { value: "style", label: "Optik" }, { value: "comfort", label: "Komfort" }, { value: "performance", label: "Performance" }, { value: "durability", label: "Haltbarkeit" } ]; function summarizeResultForCoach(result) { if (!result) return null; const parts = Object.entries(result.build || {}) .filter(([slot, item]) => item && typeof item === "object" && !slot.startsWith("__")) .map(([slot, item]) => ({ slot, label: SLOT_LABELS[slot] || slot, name: item.name, price: item.price || 0, level: item.level || item.category || null, color: item.color || null })); return { total_price: result.total_price, scores: result.scores, warnings: result.warnings || [], explanation: result.explanation || null, parts }; } function priceCapForBriefing(level) { if (level === "low") return 120; if (level === "premium") return 500; return 250; } function catalogScore(item, slot, preferences, currentItem) { const name = `${item.name || ""}`.toLowerCase(); let score = 0; if (item.id === currentItem?.id) score -= 20; if ((preferences.noGos || "").toLowerCase().includes("carbon") && name.includes("carbon")) score -= 30; if (preferences.priority === "comfort" && /(ergon|sqlab|esi|saddle|grip)/i.test(item.name || "")) score += 12; if (preferences.priority === "performance" && (item.score || item.performance || 0) >= 8) score += 10; if (preferences.priority === "durability" && /(hope|odi|oneup|race face|crankbrothers|renthal)/i.test(item.name || "")) score += 8; if (preferences.look === "stealth" && /(black|alloy|race face|oneup|hope|renthal|spank)/i.test(item.name || "")) score += 5; if (preferences.look === "raw" && /(alloy|silver|spank|race face|pro koryak)/i.test(item.name || "")) score += 5; if (preferences.look === "oil" && /(hope|crankbrothers|oneup)/i.test(item.name || "")) score += 4; if (preferences.look === "neon" && /(pnw|race face|dmr|sdg)/i.test(item.name || "")) score += 4; if (slot === "saddle" && preferences.noGos?.toLowerCase().includes("komfort") && /(ergon|sqlab|fizik)/i.test(item.name || "")) score += 10; score += Math.min(8, Number(item.score || item.performance || 0)); score += Math.max(0, 6 - Math.min(6, Number(item.price || 0) / 60)); return score; } function enrichCoachSuggestions(suggestions, components, preferences, result) { const cap = priceCapForBriefing(preferences.budgetLevel); return (suggestions || []).map(suggestion => { const poolName = SLOT_TO_POOL[suggestion.slot]; const pool = poolName ? components?.[poolName] : null; if (!Array.isArray(pool) || !pool.length) return suggestion; const currentItem = result?.build?.[suggestion.slot]; const noCarbon = (preferences.noGos || "").toLowerCase().includes("carbon"); const candidates = pool .filter(item => item.id !== currentItem?.id) .filter(item => !noCarbon || !`${item.name || ""}`.toLowerCase().includes("carbon")) .filter(item => preferences.budgetLevel === "premium" || Number(item.price || 0) <= cap) .sort((a, b) => catalogScore(b, suggestion.slot, preferences, currentItem) - catalogScore(a, suggestion.slot, preferences, currentItem)); const item = candidates[0] || pool.find(candidate => candidate.id !== currentItem?.id) || pool[0]; return { ...suggestion, item, item_id: item?.id || null, item_name: item?.name || null, item_price: item?.price || null, price_range: item?.price != null ? fmtPrice(item.price) : suggestion.price_range, reason: item ? `${suggestion.reason} Katalog-Match: ${item.name} passt in diese Stufe und kann direkt uebernommen werden.` : suggestion.reason }; }); } function CoachSuggestionCards({ suggestions, onApplyPart, result }) { if (!Array.isArray(suggestions) || !suggestions.length) return null; return (
{suggestions.map((suggestion, index) => { const catalogItem = suggestion.item || null; const searchItem = catalogItem || { id: `coach-${suggestion.slot || index}`, name: suggestion.query || suggestion.title }; const isApplied = Boolean(catalogItem && result?.build?.[suggestion.slot]?.id === catalogItem.id); return (
{suggestion.label || suggestion.slot || "Upgrade"}
{suggestion.title}
{catalogItem && (
Empfohlen: {catalogItem.name}
)}
{suggestion.risk === "low" ? "Low Risk" : "Check"}

{suggestion.reason}

{suggestion.price_range || "Preis pruefen"}
); })}
); } function CoachPlanPanel({ plan, onApply, applied }) { if (!plan) return null; const palette = Array.isArray(plan.palette) ? plan.palette : []; const priorities = Array.isArray(plan.priority) ? plan.priority : []; const checks = Array.isArray(plan.checks) ? plan.checks : []; const variants = Array.isArray(plan.variants) ? plan.variants : []; return (
Custom-Plan
{plan.name || "Individueller Look"}
{plan.estimated_total || "Budget pruefen"}
{palette.length > 0 && (
{palette.map(color => ( ))} {palette.map(color => color.name).join(" / ")}
)} {checks.length > 0 && (
Technik-Check
{checks.map(check => (
{check.status === "ok" ? "OK" : "Check"} · {check.label} {check.message}
))}
)} {variants.length > 0 && (
Plan-Varianten
{variants.map(variant => (
{variant.name} {variant.recommended && ( )}
{variant.estimated_total}
{variant.focus}
))}
)} {priorities.length > 0 && (
    {priorities.map(item =>
  1. {item}
    2. )}
)} {onApply && ( )}
); } function coachRiderContext(profile = {}) { const setup = profile.suspension_setup || {}; const rider = [ profile.rider_name ? String(profile.rider_name).trim() : "", profile.rider_age ? `${profile.rider_age} Jahre` : "", `${profile.height || "?"} cm / ${profile.weight || "?"} kg` ].filter(Boolean).join(" · "); const suspension = setup.sag ? `SAG ${setup.sag}% · Gabel ${setup.fork_rebound ?? "?"} · Daempfer ${setup.shock_rebound ?? "?"}${setup.source === "body_auto" ? " · Auto" : ""}` : "Fahrwerk noch nicht gesetzt"; return { rider, suspension }; } function CoachBriefingPanel({ preferences, profile, onChange, onSubmit, disabled }) { const set = (key, value) => onChange({ ...preferences, [key]: value }); const coachContext = coachRiderContext(profile); return (
Beratungsbriefing

Ziel-Look, Budget und Prioritaet steuern den finalen Custom-Plan.

Coach-Kontext
{coachContext.rider}
{coachContext.suspension}
Ziel-Look
{COACH_LOOK_OPTIONS.map(option => ( ))}
Budgetstufe
{COACH_BUDGET_OPTIONS.map(option => ( ))}
Prioritaet
{COACH_PRIORITY_OPTIONS.map(option => ( ))}
); } function CustomCoachDrawer({ plan, token, profile, result, components, onClose, onUpgrade, onApplyPlan, onApplyPart }) { const isPro = plan === "pro"; const [preferences, setPreferences] = useState({ look: "rosso", budgetLevel: "balanced", priority: "style", noGos: "" }); const [messages, setMessages] = useState(() => ([{ role: "assistant", content: "Ich bin dein BikeForge Pro-Coach. Fuell kurz das Beratungsbriefing aus; danach erstelle ich dir einen Custom-Plan mit Look, Budget, Tausch-Reihenfolge und technischen Grenzen." }])); const [input, setInput] = useState(""); const [loading, setLoading] = useState(false); const [error, setError] = useState(null); const scrollerRef = useRef(null); useEffect(() => { const node = scrollerRef.current; if (node) node.scrollTop = node.scrollHeight; }, [messages, loading]); const send = async (text = input) => { const message = String(text || "").trim(); if (!message || loading || !isPro) return; window.BikeAnalytics?.track("coach_message_sent", { has_custom_plan: Boolean(profile.custom_plan), terrain: profile.terrain, budget: profile.budget, height: profile.height, weight: profile.weight, rider_age: profile.rider_age || null, has_rider_name: Boolean(profile.rider_name), has_suspension_setup: Boolean(profile.suspension_setup), briefing_look: preferences.look, briefing_budget: preferences.budgetLevel, briefing_priority: preferences.priority, briefing_no_gos: preferences.noGos ? preferences.noGos.slice(0, 140) : "" }); const nextMessages = [...messages, { role: "user", content: message }]; setMessages(nextMessages); setInput(""); setLoading(true); setError(null); try { const res = await fetch("/api/ai/chat", { method: "POST", headers: { "Content-Type": "application/json", "Authorization": `Bearer ${token || ""}` }, body: JSON.stringify({ message, history: nextMessages.slice(-8), context: { profile, build: summarizeResultForCoach(result), coach_preferences: preferences } }) }); const data = await res.json(); if (!res.ok) throw new Error(data.error || "Coach nicht erreichbar."); window.BikeAnalytics?.track("coach_response_received", { provider: data.provider, model: data.model, suggestions: Array.isArray(data.suggestions) ? data.suggestions.length : 0, plan: data.plan?.name || null, briefing_look: preferences.look }); setMessages(prev => [...prev, { role: "assistant", content: data.reply || "Ich konnte dazu keine Empfehlung erzeugen.", suggestions: enrichCoachSuggestions(data.suggestions || [], components, preferences, result), plan: data.plan || null }]); } catch (err) { const fallback = "Der KI-Dienst ist gerade nicht erreichbar. Technisch sichere Farb-Upgrades sind meist Griffe, Pedale, Sattel, Ventile, Spacer, Decals und Cockpit-Akzente. Bremsen, Laufräder und Antrieb bitte nur nach Kompatibilitaet tauschen."; setError(err.message || "Netzwerkfehler."); setMessages(prev => [...prev, { role: "assistant", content: fallback, suggestions: [] }]); } finally { setLoading(false); } }; return ( <>
BikeForge Pro

Custombike-Coach

Teile, Farben und Upgrade-Pfade passend zu deinem aktuellen Build.

{!isPro ? (
Pro Feature

Persoenliche Custombike-Beratung

Der Coach diskutiert mit dir ueber farbige Teile, sinnvolle Tausch-Reihenfolge, Budget und technische Grenzen deines Bikes.

) : ( <>
send("Erstelle aus meinem Beratungsbriefing einen finalen Custom-Plan.")} disabled={loading} /> {messages.map((msg, index) => (
{msg.content} {msg.role === "assistant" && ( )} {msg.role === "assistant" && ( )}
))} {loading && (
Coach denkt ueber deinen Build nach ...
)}
{COACH_QUICK_PROMPTS.map(prompt => ( ))}
{error &&
{error}
}