/* ============================================================================ Found Wheels — AI Assistant ("Concierge") version. A chat experience where Claude replies with rich inline "generative UI" cards (price analysis, car cards, comparison tables, checklists, recommendations, approvals) modeled on the Tool UI component pattern (assistant-ui/tool-ui), restyled in the Found Wheels visual language. Shares the same garage + profile as the app version. Reads shared helpers from window.FW (set by the main script) and exports window.AssistantScreen. ========================================================================== */ (function () { const { useState, useEffect, useRef } = React; // Lazy accessors — window.FW is populated by the main inline script, which // runs after this file is parsed but before anything here is rendered. const FW = () => window.FW || {}; const money = (n) => (typeof n === 'number' && isFinite(n)) ? FW().fmt(Math.round(n)) : '—'; const milesN = (n) => (typeof n === 'number' && isFinite(n)) ? FW().fmtN(n) + ' mi' : '—'; // ── Persona + response contract handed to Claude on every turn ────────────── const SYSTEM = `You are the Found Wheels Concierge — a warm, sharp, friendly used-car buying assistant. You help people decide whether a used car is a smart buy. You are encouraging and plain-spoken, never pushy. Keep written replies SHORT (1–3 sentences) — let the cards carry the detail. You reply with rich inline UI cards instead of walls of text. Respond with ONLY a single JSON object, no markdown fences, in this exact shape: { "message": "your short conversational reply", "cards": [ ...zero or more card objects... ], "suggestions": [ "short follow-up the user might tap", ... up to 3 ] } CARD TYPES (emit only what's useful; most replies need 0–2 cards): • price_analysis — "is this a good price?" / valuing a specific car. { "type":"price_analysis", "year":2019, "make":"Honda", "model":"Accord", "trim":"EX-L", "mileage":52000, "asking_price":21500, "vin":"optional" } IMPORTANT: never state prices yourself — emit this card and the app computes real market value, comps, and fair value. mileage helps a lot; ask for it if missing. • car_result — present ONE specific car already in the conversation (e.g. a car the user named). The app fills the fair-value badge. { "type":"car_result", "year":2020, "make":"Toyota", "model":"Camry", "trim":"SE", "mileage":40000, "price":22000 } • find_listings — show REAL active listings for sale (live dealer inventory). Use this WHENEVER the user wants to find / shop / browse / "show me" cars. { "type":"find_listings", "make":"Toyota", "model":"Camry", "year":2020, "max_price":22000, "min_price":12000, "max_mileage":80000, "zip":"94110" } make + model are REQUIRED; everything else is optional (omit year to search all years). For a broad ask like "a reliable sedan under $20k", emit 2–3 find_listings cards for specific models you'd recommend. The app fetches real inventory (price, mileage, dealer, location, link); if no listings backend is connected it shows the typical market price instead. Never invent listings yourself. • comparison — side-by-side table of cars ALREADY in the garage. { "type":"comparison", "car_ids":[1,2] } // ids from the garage context; omit car_ids to compare all Only emit if the garage has 2+ cars. • recommendation — "which should I pick?". { "type":"recommendation" } Only if garage has 1+ cars. The app scores against the user's profile. • checklist — model-specific pre-purchase inspection points. YOU fill the items from your expertise. { "type":"checklist", "year":2019, "make":"Honda", "model":"Accord", "items":["Check the 1.5T for oil dilution — smell the dipstick for fuel","...5–7 specific items..."] } • approval — propose adding a car to the garage; REQUIRED confirmation step before anything is added. { "type":"approval", "car":{ "year":2019, "make":"Honda", "model":"Accord", "trim":"EX-L", "mileage":52000, "price":21500, "vin":"optional" } } Whenever the user wants to add/save/track a car, emit this — never assume it's added. • negotiation — draft an offer message to a seller. YOU write the draft. { "type":"negotiation", "ymm":"2018 BMW 330i", "asking_price":24900, "tone":"friendly", "draft":"Hi — I'm interested in your 330i..." } • option_list — let the user pick from choices; tapping sends the "send" text as their next message. { "type":"option_list", "title":"What matters most?", "options":[ {"label":"Lowest price","sublabel":"Best deal","send":"Show me the cheapest option"}, ... ] } RULES: - The garage holds at most 3 cars. comparison/recommendation only make sense with garage cars. - Reference garage cars by the ids given in CONTEXT. - Don't invent prices, mileage, accident records, or specs you weren't given — use the cards (the app supplies real data) or ask. - ACKNOWLEDGE what the user gave you. If they provide some details but not all, use what you have (emit the relevant card with the fields you know) and ask ONLY for the specific missing piece — never re-ask for information already in the conversation. If a value looks like a placeholder (e.g. "[price]", "VIN here", "N/A"), treat it as not-yet-provided and gently point out you need the real value. - For general advice, a plain "message" with no cards is perfect. - Always return valid JSON. No prose outside the JSON.`; function cardSummary(c) { switch (c.type) { case 'price_analysis': return `price analysis: ${c.year} ${c.make} ${c.model}`; case 'car_result': return `car: ${c.year} ${c.make} ${c.model}`; case 'find_listings': return `live listings: ${[c.year, c.make, c.model].filter(Boolean).join(' ')}`; case 'comparison': return `comparison table`; case 'recommendation': return `recommendation`; case 'checklist': return `inspection checklist: ${c.make} ${c.model}`; case 'approval': return `add-to-garage prompt`; case 'negotiation': return `offer draft`; case 'option_list': return `options`; default: return c.type; } } function parseJSON(raw) { if (!raw) return null; let s = String(raw).trim(); // strip code fences s = s.replace(/^```(?:json)?\s*/i, '').replace(/\s*```$/i, ''); try { return JSON.parse(s); } catch {} // grab outermost { ... } const a = s.indexOf('{'), b = s.lastIndexOf('}'); if (a >= 0 && b > a) { try { return JSON.parse(s.slice(a, b + 1)); } catch {} } return null; } // Deterministic synthetic VIN so the pricing pipeline's mock path is stable for // a given year/make/model (real backend, when configured, will reject it and the // pipeline falls back to the same deterministic mock). function synthVin(year, make, model) { const base = `${year || ''}${make || ''}${model || ''}`.toUpperCase().replace(/[^A-Z0-9]/g, ''); let s = (base + 'FOUNDWHEELS00000000').slice(0, 17); return s.replace(/[IOQ]/g, '0'); } // ── Agent turn: ask Claude, parse, return {message, cards(raw), suggestions} ── async function askClaude({ userText, history, cars, profile }) { if (!(window.claude && window.claude.complete)) { return { message: "I need an AI connection to chat, and it isn't available here. You can still switch to the app to add cars, compare them, and get a recommendation.", cards: [], suggestions: [], }; } const garageCtx = cars.map(c => ({ id: c.id, year: c.year, make: c.make, model: c.model, trim: c.trim, mileage: c.mileage, price: c.price, market_avg: c.market_avg, mpg_hwy: c.mpg_hwy, fuel: c.fuel, })); const profileCtx = profile ? { budget: profile.budget, use: profile.use, priorities: profile.priorities } : null; const convo = history.slice(-8).map(m => m.role === 'user' ? `User: ${m.text}` : `Assistant: ${(m.text || '')}${m.cards && m.cards.length ? ' [' + m.cards.map(cardSummary).join('; ') + ']' : ''}` ).join('\n'); const prompt = `${SYSTEM} CONTEXT Profile: ${JSON.stringify(profileCtx)} Garage (${cars.length}/3 cars): ${JSON.stringify(garageCtx)} CONVERSATION ${convo} User: ${userText} Respond with ONLY the JSON object.`; let raw = ''; try { raw = await window.claude.complete(prompt); } catch (e) { return { message: "Something hiccuped reaching the assistant — mind trying that again?", cards: [], suggestions: [] }; } const parsed = parseJSON(raw); if (!parsed) return { message: String(raw || '').slice(0, 600) || "Sorry, I didn't catch that.", cards: [], suggestions: [] }; return { message: parsed.message || '', cards: Array.isArray(parsed.cards) ? parsed.cards : [], suggestions: Array.isArray(parsed.suggestions) ? parsed.suggestions.slice(0, 3) : [], }; } // Live inventory search via the backend /search endpoint (real listings). async function findListings(card) { const base = (FW().normalizeBackendUrl ? FW().normalizeBackendUrl(window.__BACKEND_URL || '') : (window.__BACKEND_URL || '')) || ''; if (!base) return { configured: false, listings: [] }; const qs = new URLSearchParams({ make: card.make || '', model: card.model || '' }); if (card.year) qs.set('year', card.year); qs.set('zip', card.zip || '94110'); if (card.max_price) qs.set('maxPrice', card.max_price); if (card.min_price) qs.set('minPrice', card.min_price); if (card.max_mileage) qs.set('maxMileage', card.max_mileage); try { const r = await fetch(`${base.replace(/\/$/, '')}/search?${qs.toString()}`); const data = await r.json(); if (r.ok && data && !data.error) return { configured: true, ...data }; return { configured: true, error: data.error || ('HTTP ' + r.status), listings: [] }; } catch (e) { return { configured: true, error: e.message, listings: [] }; } } // ── Resolve raw card intents against real app data/pipelines ──────────────── async function resolveCard(card, { cars, profile }) { const t = card && card.type; try { if (t === 'price_analysis') { const { year, make, model, trim, mileage, asking_price, vin } = card; const md = await FW().lookupRealPricing({ vin: vin || synthVin(year, make, model), year, make, model, mileage: parseInt(mileage) || 0, zip: '94110', }); return { type: 'price_analysis', year, make, model, trim, mileage: parseInt(mileage) || null, asking_price: parseInt(asking_price) || null, data: md }; } if (t === 'find_listings') { if (!card.make || !card.model) return null; const res = await findListings(card); const est = FW().estimateMarketPrice(card.year || 0, card.make, card.model, 60000) || {}; return { type: 'find_listings', query: { year: card.year, make: card.make, model: card.model, max_price: card.max_price, min_price: card.min_price, max_mileage: card.max_mileage }, res, est }; } if (t === 'car_result') { const { year, make, model, trim, mileage, price, vin } = card; const est = FW().estimateMarketPrice(year, make, model, parseInt(mileage) || 0) || {}; return { type: 'car_result', year, make, model, trim, mileage: parseInt(mileage) || null, price: parseInt(price) || null, vin, est }; } if (t === 'comparison') { const ids = Array.isArray(card.car_ids) ? card.car_ids : []; const list = (ids.length ? ids.map(id => cars.find(c => c.id === id)).filter(Boolean) : cars).slice(0, 3); if (list.length < 2) return null; return { type: 'comparison', cars: list }; } if (t === 'recommendation') { if (!cars.length) return null; const scored = cars.map(c => ({ car: c, score: FW().scoreCarForProfile(c, profile) })).sort((a, b) => b.score - a.score); return { type: 'recommendation', scored }; } if (t === 'checklist') { let items = Array.isArray(card.items) ? card.items.filter(Boolean) : []; if (!items.length) items = FW().findModelFallback(card.make, card.model) || []; if (!items.length) return null; return { type: 'checklist', year: card.year, make: card.make, model: card.model, items }; } if (t === 'approval') { if (!card.car) return null; return { type: 'approval', car: card.car }; } if (t === 'negotiation') { return { type: 'negotiation', ymm: card.ymm, asking_price: parseInt(card.asking_price) || null, tone: card.tone, draft: card.draft || '' }; } if (t === 'option_list') { const opts = Array.isArray(card.options) ? card.options.filter(o => o && o.label) : []; if (!opts.length) return null; return { type: 'option_list', title: card.title || '', options: opts }; } } catch (e) { return null; } return null; } /* ========================== Tool UI card components ======================= */ const Badge = ({ tone = 'neutral', children }) => { const map = { green: { bg: 'var(--green-light)', fg: 'var(--green)' }, amber: { bg: 'var(--amber-light)', fg: 'var(--amber)' }, red: { bg: 'var(--red-light)', fg: 'var(--red)' }, accent: { bg: 'var(--accent-light)', fg: 'var(--accent)' }, neutral: { bg: 'var(--accent-light)', fg: 'var(--text2)' }, }[tone] || {}; return {children}; }; const CardShell = ({ children, label }) => (
{label &&
{label}
} {children}
); function ModelPhoto({ year, make, model, h = 132 }) { const [url, setUrl] = useState(null); const [failed, setFailed] = useState(false); useEffect(() => { let on = true; setFailed(false); if (FW().fetchModelPhoto) FW().fetchModelPhoto({ year, make, model }).then(u => { if (on) setUrl(u); }).catch(() => {}); return () => { on = false; }; }, [year, make, model]); const label = [year, make, model].filter(Boolean).join(' '); return (
{(url && !failed) ? {`${make} setFailed(true)} /> : <> 80 ? 46 : 30} height={h > 80 ? 46 : 30} viewBox="0 0 24 24" fill="none" style={{ opacity: 0.4 }}> {h > 80 && label &&
{label}
} }
); } // Deal verdict from asking price vs fair value (or market avg). function dealVerdict(price, fair) { if (!price || !fair) return null; const d = (price - fair) / fair; if (d <= -0.05) return { tone: 'green', label: 'Good deal', detail: `${money(fair - price)} below fair value` }; if (d <= 0.05) return { tone: 'accent', label: 'Fair price', detail: 'Right around market value' }; if (d <= 0.15) return { tone: 'amber', label: 'A bit high', detail: `${money(price - fair)} over fair value` }; return { tone: 'red', label: 'Overpriced', detail: `${money(price - fair)} over fair value` }; } function CarResultCard({ card, ctx }) { const { year, make, model, trim, mileage, price, est } = card; const fair = est.fair_value || est.market_avg; const verdict = dealVerdict(price, fair); const [state, setState] = useState('idle'); // idle | confirm | adding | added | full const [addedId, setAddedId] = useState(null); const add = async () => { if (ctx.cars.length >= 3) { setState('full'); return; } setState('adding'); const c = await FW().buildCarFromBasics({ year, make, model, trim, mileage, price, vin: card.vin }); ctx.addCar(c); setAddedId(c.id); setState('added'); }; return (
{year} {make} {model}
{[trim, mileage ? milesN(mileage) : null].filter(Boolean).join(' · ')}
{money(price)}
{verdict &&
{verdict.label}{verdict.detail}
}
{state === 'added' ? <>✓ Added to garage{addedId != null && ctx.onViewCar(addedId)} primary>Open →} : state === 'full' ? Garage is full (3/3) — remove one first. : state === 'confirm' ? <>Confirm add setState('idle')}>Cancel : <> setState('confirm')} primary>{state === 'adding' ? 'Adding…' : 'Add to garage'} ctx.onSend(`Is the ${year} ${make} ${model}${trim ? ' ' + trim : ''} a good price at ${money(price)}${mileage ? ' with ' + milesN(mileage) : ''}?`)}>Analyze price}
); } // Listing photo: prefer the listing's own photo; otherwise fall back to a real // representative photo of that year/make/model (backend /image → Wikimedia), the // same source used across the app. Better than a blank placeholder. function ListingPhoto({ l }) { const [url, setUrl] = useState(l.photo || null); useEffect(() => { let on = true; if (!l.photo && FW().fetchModelPhoto) { FW().fetchModelPhoto({ year: l.year, make: l.make, model: l.model }).then(u => { if (on && u) setUrl(u); }).catch(() => {}); } return () => { on = false; }; }, [l.photo, l.year, l.make, l.model]); return url ? {`${l.make} setUrl(null)} /> : ; } // Best click-through for a listing: the real dealer page when present, else a // web search (by VIN if we have one — that usually surfaces the exact car). function listingLink(l) { if (l.url) return { href: l.url, label: 'View listing ↗', real: true }; const q = [l.year, l.make, l.model, l.trim, l.vin ? ('VIN ' + l.vin) : '', 'for sale'].filter(Boolean).join(' '); return { href: 'https://www.bing.com/search?q=' + encodeURIComponent(q), label: 'Find this car ↗', real: false }; } function ListingRow({ l, fair, ctx, first }) { const verdict = dealVerdict(l.price, fair); const [state, setState] = useState('idle'); // idle | adding | added | full const [addedId, setAddedId] = useState(null); const add = async () => { if (ctx.cars.length >= 3) { setState('full'); return; } setState('adding'); const car = await FW().buildCarFromBasics({ year: l.year, make: l.make, model: l.model, trim: l.trim, mileage: l.mileage, price: l.price, vin: l.vin && l.vin.length === 17 ? l.vin : undefined }); ctx.addCar(car); setAddedId(car.id); setState('added'); }; const loc = [l.city, l.state].filter(Boolean).join(', '); return (
{l.year} {l.make} {l.model}
{money(l.price)}
{[l.trim, l.mileage ? milesN(l.mileage) : null].filter(Boolean).join(' · ')}
{[l.dealer, loc].filter(Boolean).join(' · ')}
{verdict && {verdict.label}} {(() => { const lk = listingLink(l); return {lk.label}; })()} {state === 'added' ? ✓ In garage{addedId != null && } : state === 'full' ? Garage full : }
); } function ListingsCard({ card, ctx }) { const { res, est, query } = card; const ymm = [query.year, query.make, query.model].filter(Boolean).join(' '); const fair = (res && (res.market_median || res.market_avg)) || est.fair_value || est.market_avg; // No backend connected — be honest: show typical market price, not fake listings. if (!res || res.configured === false) { return (
This is an estimated market price. Connect a listings backend to pull real cars for sale near you.
 ); } const listings = res.listings || []; if (!listings.length) { return (
No active listings matched those filters right now.
 ); } return (
{listings.map((l, i) => )}
{res.count} found · sorted by price ● live · {res.source}
); } const MiniBtn = ({ children, onClick, primary }) => ( ); function Metric({ label, value, big, highlight }) { return (
{label}
{value}
); } function PriceAnalysisCard({ card, ctx }) { const d = card.data || {}; const fair = d.fair_value || d.market_median || d.market_avg; const verdict = dealVerdict(card.asking_price, fair); const confTone = { high: 'green', medium: 'amber', low: 'amber' }[d.confidence] || 'neutral'; const real = d.source && d.source !== 'mock'; return (
{card.asking_price && verdict && (
Asking {money(card.asking_price)}
{verdict.label}
{verdict.detail}
)}
{(d.confidence || 'low')} confidence {d.num_comps || d.num_used || 0} comps{d.radius_mi ? ` · ${d.radius_mi === 'nationwide' || d.radius_mi === 0 ? 'nationwide' : d.radius_mi + ' mi'}` : ''} {d.mileage_adjusted && · mileage-adjusted} {real ? '● live data' : '○ estimated'}
); } function ComparisonCard({ card, ctx }) { const cars = card.cars; const tco = (c) => { const repairs = (c.repairs || []).reduce((a, r) => a + r.cost, 0); return c.price + repairs + (c.fuel_monthly || 0) * 60 + (c.insurance_monthly || 0) * 60 + (c.registration_annual || 0) * 5; }; const rows = [ { k: 'Price', f: c => money(c.price), best: c => -c.price }, { k: 'Mileage', f: c => milesN(c.mileage), best: c => -c.mileage }, { k: '5-yr cost', f: c => money(tco(c)), best: c => -tco(c) }, { k: 'MPG hwy', f: c => `${c.mpg_hwy || '—'}`, best: c => c.mpg_hwy || 0 }, { k: 'Fit score', f: c => `${FW().scoreCarForProfile(c, ctx.profile)}`, best: c => FW().scoreCarForProfile(c, ctx.profile) }, ]; return (
{cars.map(c => )} {rows.map((row, ri) => { const vals = cars.map(row.best); const max = Math.max(...vals); return ( {cars.map((c, ci) => { const isBest = cars.length > 1 && vals[ci] === max && vals.filter(v => v === max).length === 1; return ; })} ); })}
{c.year} {c.make}
{c.model}
{row.k}{row.f(c)}{isBest ? ' ✓' : ''}
ctx.onSend('Based on this comparison, which one should I pick?')} primary>Which should I pick?
); } function RecommendationCard({ card, ctx }) { const scored = card.scored; const win = scored[0]; const c = win.car; return (
Top pick
{c.year} {c.make} {c.model}
{win.score}
fit score
{scored.length > 1 && (
{scored.slice(1).map(s => (
{s.car.year} {s.car.make} {s.car.model} {s.score}
))}
)}
ctx.onViewCar(c.id)} primary>Open {c.make} {c.model} →
); } function ChecklistCard({ card }) { return (
{card.items.map((it, i) => (
{i + 1}
{it}
))}
); } function ApprovalCard({ card, ctx }) { const c = card.car; const [state, setState] = useState('idle'); // idle | adding | added | full const [addedId, setAddedId] = useState(null); const confirm = async () => { if (ctx.cars.length >= 3) { setState('full'); return; } setState('adding'); const built = await FW().buildCarFromBasics(c); ctx.addCar(built); setAddedId(built.id); setState('added'); }; return (
{c.year} {c.make} {c.model}{c.trim ? {c.trim} : null}
{[c.mileage ? milesN(parseInt(String(c.mileage).replace(/\D/g, ''))) : null, c.price ? money(parseInt(String(c.price).replace(/\D/g, ''))) : null].filter(Boolean).join(' · ')}
{state === 'added' ?
✓ Added to garage{addedId != null && ctx.onViewCar(addedId)} primary>Open →}
: state === 'full' ? Garage is full (3/3) — remove one first. :
{state === 'adding' ? 'Adding…' : 'Add to garage'} setState('added')}>Not now
}
); } function NegotiationCard({ card }) { const [copied, setCopied] = useState(false); const copy = () => { try { navigator.clipboard.writeText(card.draft); setCopied(true); setTimeout(() => setCopied(false), 1600); } catch {} }; return (
{(card.ymm || card.asking_price) &&
{[card.ymm, card.asking_price ? `asking ${money(card.asking_price)}` : null].filter(Boolean).join(' · ')}
}
{card.draft}
{copied ? '✓ Copied' : 'Copy message'}
 ); } function OptionListCard({ card, ctx }) { return (
{card.options.map((o, i) => ( ))}
); } function CardRenderer({ card, ctx }) { switch (card.type) { case 'price_analysis': return ; case 'car_result': return ; case 'find_listings': return ; case 'comparison': return ; case 'recommendation': return ; case 'checklist': return ; case 'approval': return ; case 'negotiation': return ; case 'option_list': return ; default: return null; } } /* ============================ Chat shell ================================= */ // Starter prompts, tailored to the onboarding profile. Picks a persona from the // user's priorities + primary use, then phrases every starter around it — so a // "high performance" shopper never sees Accord/sedan examples. function buildStarters(profile, carsCount) { const p = profile || {}; const pri = Array.isArray(p.priorities) ? p.priorities : []; const use = p.use || ''; const has = (s) => pri.some(x => String(x).toLowerCase().includes(s)); const budgetPhrase = { 'Under $15k': 'under $15k', '$15\u201320k': 'around $18k', '$20\u201325k': 'around $23k', '$25\u201330k': 'around $28k', 'Over $30k': 'around $35k', }[p.budget] || 'around $25k'; let persona; if (has('performance') || has('track') || has('sport') || has('manual')) persona = 'performance'; else if (has('electric') || has('hybrid')) persona = 'ev'; else if (has('awd') || has('4wd')) persona = 'awd'; else if (use === 'Family hauler') persona = 'family'; else if (has('fuel efficient') || use === 'Daily commute' || use === 'Just errands') persona = 'efficient'; else if (use === 'Weekend fun') persona = 'fun'; else if (use === 'Road trips') persona = 'roadtrip'; else persona = 'general'; const P = { performance: { good: 'Is a 2020 BMW M340i a good buy at $38,000?', inspect: 'What should I inspect on a used Ford Mustang GT?', find: `Find me a fast performance car ${budgetPhrase}`, kind: 'performance car', }, ev: { good: 'Is a 2021 Tesla Model 3 a good buy at $27,000?', inspect: 'What should I check on a used EV battery?', find: `Find me a solid used EV ${budgetPhrase}`, kind: 'EV', }, awd: { good: 'Is a 2020 Subaru Outback a good buy at $24,000?', inspect: 'What should I inspect on a used AWD wagon or SUV?', find: `Find me an AWD vehicle ${budgetPhrase}`, kind: 'AWD car', }, family: { good: 'Is a 2020 Toyota Highlander a good buy at $29,000?', inspect: 'What should I inspect on a used 3-row SUV?', find: `Find me a roomy family SUV ${budgetPhrase}`, kind: 'family SUV', }, efficient: { good: 'Is a 2020 Toyota Corolla Hybrid a good buy at $19,000?', inspect: 'What should I inspect on a high-mileage Honda Civic?', find: `Find me a fuel-efficient commuter ${budgetPhrase}`, kind: 'commuter', }, fun: { good: 'Is a 2019 Mazda MX-5 Miata a good buy at $23,000?', inspect: 'What should I inspect on a used sports car?', find: `Find me a fun weekend car ${budgetPhrase}`, kind: 'weekend car', }, roadtrip: { good: 'Is a 2020 Honda Accord a good buy at $23,000?', inspect: 'What should I inspect on a high-mileage highway cruiser?', find: `Find me a comfortable highway cruiser ${budgetPhrase}`, kind: 'road-trip car', }, general: { good: 'Is a 2019 Honda Accord EX-L a good buy at $21,500?', inspect: 'What should I inspect on a used BMW 330i?', find: `Find me a reliable car ${budgetPhrase}`, kind: 'car', }, }[persona]; const last = carsCount >= 2 ? 'Compare the cars in my garage' : carsCount === 1 ? 'How does the car in my garage stack up?' : `What matters most when buying a used ${P.kind}?`; return [P.good, P.inspect, P.find, last]; } function Avatar() { return (
); } function ThinkingBubble() { const [dots, setDots] = useState(1); useEffect(() => { const t = setInterval(() => setDots(d => d % 3 + 1), 380); return () => clearInterval(t); }, []); return (
Looking into that{'.'.repeat(dots)}
); } // Perceived-streaming word reveal — animates a freshly-arrived reply once, then // renders statically on any re-render/reload (tracked by message id). const animatedMsgIds = (window.__fwAnimatedMsgs = window.__fwAnimatedMsgs || new Set()); function StreamText({ id, text }) { const first = !animatedMsgIds.has(id); const [shown, setShown] = useState(first ? '' : text); useEffect(() => { if (!first) return; animatedMsgIds.add(id); const words = String(text).split(/(\s+)/); let i = 0; const timer = setInterval(() => { i += 1; setShown(words.slice(0, i).join('')); if (i >= words.length) clearInterval(timer); }, 26); return () => clearInterval(timer); }, []); return shown; } function AssistantMessage({ msg, ctx, isLast, busy }) { return (
{msg.text &&
{msg.fresh ? : msg.text}
} {(msg.cards || []).map((card, i) => )} {isLast && !busy && (msg.suggestions || []).length > 0 && (
{msg.suggestions.map((s, i) => ( ))}
)}
); } function UserMessage({ msg }) { return (
{msg.text}
); } function AssistantScreen({ cars, profile, addCar, onViewCar }) { const [messages, setMessages] = useState(() => { try { const s = JSON.parse(FW().safeGet('fw_chat_v1', 'null')); if (Array.isArray(s)) return s; } catch {} return []; }); const [input, setInput] = useState(''); const [busy, setBusy] = useState(false); const scrollRef = useRef(null); const taRef = useRef(null); const cancelRef = useRef(null); useEffect(() => { try { FW().safeSet('fw_chat_v1', JSON.stringify(messages.slice(-40))); } catch {} }, [messages]); useEffect(() => { const el = scrollRef.current; if (el) el.scrollTop = el.scrollHeight; }, [messages, busy]); const stop = () => { if (cancelRef.current) cancelRef.current.cancelled = true; setBusy(false); }; const send = async (text) => { const t = (text || '').trim(); if (!t || busy) return; const token = { cancelled: false }; cancelRef.current = token; const userMsg = { id: Date.now(), role: 'user', text: t }; const next = [...messages, userMsg]; setMessages(next); setInput(''); if (taRef.current) taRef.current.style.height = 'auto'; setBusy(true); let res; try { res = await askClaude({ userText: t, history: next, cars, profile }); } catch (e) { res = { message: "Something went wrong reaching the concierge. Try again in a moment.", cards: [], suggestions: [] }; } if (token.cancelled) return; const resolved = []; for (const c of res.cards) { if (token.cancelled) return; const r = await resolveCard(c, { cars, profile }); if (r) resolved.push(r); } if (token.cancelled) return; setMessages(m => [...m, { id: Date.now() + 1, role: 'assistant', text: res.message, cards: resolved, suggestions: res.suggestions, fresh: true }]); setBusy(false); }; const ctx = { cars, profile, addCar, onViewCar, onSend: send }; const empty = messages.length === 0; const starters = buildStarters(profile, cars.length); return (
{empty ? (

Your car-buying concierge

Ask about any used car — I'll value it, flag what to inspect, compare your options, and help you make the call.

{starters.map((s, i) => ( ))}
) : (
{messages.map((m, i) => m.role === 'user' ? : )} {busy && }
)}