// ToolAdvisor — Catalog interactive app // Owns: search, sort, family filter, ISO material filter, view toggle, // compare drawer, favorites, recently viewed, CSV export, quick view. const { useState, useEffect, useMemo, useRef, useCallback } = React; // ---------- helpers ---------- const LS = { get(key, fallback) { try { const v = localStorage.getItem(key); return v ? JSON.parse(v) : fallback; } catch { return fallback; } }, set(key, v) { try { localStorage.setItem(key, JSON.stringify(v)); } catch {} }, }; const ISO_TONE = { P:'iso-p', M:'iso-m', K:'iso-k', N:'iso-n', S:'iso-s', H:'iso-h' }; const ISO_COLOR = { P:'#3B82F6', M:'#F59E0B', K:'#EF4444', N:'#10B981', S:'#F97316', H:'#64748B' }; const ISO_LABEL = { P:'Steel', M:'Stainless', K:'Cast iron', N:'Non-ferrous', S:'Superalloy', H:'Hardened' }; // All Tailwind class strings explicit per ISO group — CDN JIT can only see literal class tokens. // Keep these literals: border-iso-p-blue border-iso-m-amber border-iso-k-red border-iso-n-green border-iso-s-orange border-iso-h-slate // bg-iso-p-blue/10 text-iso-p-blue border-iso-p-blue/20 bg-iso-m-amber/10 text-iso-m-amber border-iso-m-amber/20 // bg-iso-k-red/10 text-iso-k-red border-iso-k-red/20 bg-iso-n-green/10 text-iso-n-green border-iso-n-green/20 // bg-iso-s-orange/10 text-iso-s-orange border-iso-s-orange/20 bg-iso-h-slate/10 text-iso-h-slate border-iso-h-slate/20 const ISO_CLASSES = { P: { border:'border-iso-p-blue', chip:'bg-iso-p-blue/10 text-iso-p-blue border-iso-p-blue/20' }, M: { border:'border-iso-m-amber', chip:'bg-iso-m-amber/10 text-iso-m-amber border-iso-m-amber/20' }, K: { border:'border-iso-k-red', chip:'bg-iso-k-red/10 text-iso-k-red border-iso-k-red/20' }, N: { border:'border-iso-n-green', chip:'bg-iso-n-green/10 text-iso-n-green border-iso-n-green/20' }, S: { border:'border-iso-s-orange', chip:'bg-iso-s-orange/10 text-iso-s-orange border-iso-s-orange/20' }, H: { border:'border-iso-h-slate', chip:'bg-iso-h-slate/10 text-iso-h-slate border-iso-h-slate/20' }, }; const FAMILIES = ['All','Turning','Milling','Drilling','Threading','Reaming']; const SORTS = [ { id:'relevance', label:'Relevance' }, { id:'confidence', label:'Data confidence ↓' }, { id:'vcDesc', label:'Cutting speed Vc ↓' }, { id:'vcAsc', label:'Cutting speed Vc ↑' }, { id:'feedDesc', label:'Feed rate ↓' }, { id:'brandAsc', label:'Brand A→Z' }, ]; const PAGE_SIZE = 12; // ---------- atoms ---------- function Icon({name, size=18, fill=false, weight, className=''}) { const props = {}; if (fill) props['data-icon-fill'] = ''; if (weight) props['data-icon-weight'] = String(weight); return {name}; } function Confidence({pct, source}) { // literal classes: bg-iso-n-green bg-iso-m-amber bg-iso-k-red const toneCls = pct >= 90 ? 'bg-iso-n-green' : pct >= 80 ? 'bg-iso-m-amber' : 'bg-iso-k-red'; return (

{pct}%

); } // ---------- tool card ---------- function ToolCard({tool, view, isCompared, onToggleCompare, isFav, onToggleFav, onOpen}) { const t = tool; const cls = ISO_CLASSES[t.iso]; const borderClass = cls.border; const bgChip = cls.chip; if (view === 'list') { return (

{t.brand}

{t.code}

ISO {t.iso} · {t.family} · {t.op}

Vc {t.vcMin}–{t.vcMax} m/min · f {t.fMin}–{t.fMax} mm/rev · {t.bestFor}

); } return (

{/* Top-right action stack: fav + cross-ref hint */}

{t.brand}

{t.code}

ISO {t.iso}

{t.family} · {t.op} · Grade {t.grade}

Vc {t.vcMin}–{t.vcMax} m/min

Feed {t.fMin}–{t.fMax} mm/rev

aₚ {t.apMin}–{t.apMax} mm

{/* Structured best-for */}

Best for

{t.bestFor}

{t.op} {t.stability} stability {t.coolant}

{/* Economics row */}

{'\u20ac'.repeat(t.costTier)}{'\u20ac'.repeat(4-t.costTier)} · €{t.costPerEdge}/edge {t.weeklyPicks} picks

{/* Confidence row */}

Data confidence

Supply

{t.supply} suppliers

{/* Cross-ref hint */} {t.equivIds.length > 0 && ( {t.equivIds.length} equivalents available )} {/* Better-value swap hint */} {t.betterValueId && (() => { const bv = window.TA_TOOLS.find(o => o.id === t.betterValueId); if (!bv) return null; return ( ); })()}

); } function Tag({children}) { return {children}; } function CardActions({tool, isCompared, onToggleCompare, onOpen, compact}) { return (

); } // ---------- compare drawer ---------- function CompareDrawer({tools, onRemove, onClear, onOpen, onExport, onCompare}) { if (!tools.length) return null; return (

{tools.length} / 4 selected

{tools.map(t => (

{t.code}

))}

); } // ---------- detail modal ---------- function DetailModal({tool, onClose, onOpenTool, tools}) { if (!tool) return null; const equivs = tool.equivIds.map(id => tools.find(o => o.id === id)).filter(Boolean); return ( ); } function Spec({label, value, unit}) { return (

{label}

{value} {unit}

); } // ---------- smart swaps (value-seeker headline) ---------- function SmartSwaps({shortlist, tools, onOpen, onApplySwap}) { const [open, setOpen] = useState(true); const swaps = useMemo(() => { return shortlist .filter(t => t.betterValueId) .map(t => { const to = tools.find(o => o.id === t.betterValueId); if (!to) return null; const saving = Math.max(0, (t.unitPrice - to.unitPrice)); const savingPct = t.unitPrice ? Math.round((saving / t.unitPrice) * 100) : 0; const lifeGain = to.lifeRel - t.lifeRel; return { from: t, to, saving, savingPct, lifeGain, delta: t.betterValueDelta }; }) .filter(Boolean); }, [shortlist, tools]); if (!shortlist.length || swaps.length === 0) return null; const totalSaving = swaps.reduce((s, x) => s + x.saving, 0); const avgPct = Math.round(swaps.reduce((s, x) => s + x.savingPct, 0) / swaps.length); return (

{open && (

{swaps.map(s => (

{/* From */} {/* To */} {/* Delta + apply */}

{s.saving > 0 ? `−€${s.saving.toFixed(0)} (${s.savingPct}%)` : 'same cost'}

{s.delta}

))}

)}

); } // ---------- main app ---------- function App() { const TOOLS = window.TA_TOOLS; // filters const [query, setQuery] = useState(''); const [family, setFamily] = useState('All'); const [iso, setIso] = useState(null); // ISO letter or null const [op, setOp] = useState(null); const [confMin, setConfMin] = useState(0); const [sort, setSort] = useState('relevance'); const [view, setView] = useState('grid'); const [visible, setVisible] = useState(PAGE_SIZE); // selection const [compare, setCompare] = useState(() => new Set(LS.get('ta:compare', []))); const [favs, setFavs] = useState(() => new Set(LS.get('ta:favs', []))); const [recent, setRecent] = useState(() => LS.get('ta:recent', [])); const [openTool, setOpenTool] = useState(null); useEffect(() => LS.set('ta:compare', [...compare]), [compare]); useEffect(() => LS.set('ta:favs', [...favs]), [favs]); useEffect(() => LS.set('ta:recent', recent), [recent]); // listen to sidebar filter events (bidirectional sync) useEffect(() => { const onIso = (e) => { setIso(e.detail?.iso ?? null); setVisible(PAGE_SIZE); }; const onFam = (e) => { const f = e.detail?.family ?? null; setFamily(f || 'All'); setOp(null); setVisible(PAGE_SIZE); }; const onClear = () => { setQuery(''); setFamily('All'); setIso(null); setOp(null); setConfMin(0); setVisible(PAGE_SIZE); }; window.addEventListener('ta:iso-filter', onIso); window.addEventListener('ta:family-filter', onFam); window.addEventListener('ta:clear-filters', onClear); return () => { window.removeEventListener('ta:iso-filter', onIso); window.removeEventListener('ta:family-filter', onFam); window.removeEventListener('ta:clear-filters', onClear); }; }, []); // Broadcast state to sidebar so it can update active visuals useEffect(() => { window.dispatchEvent(new CustomEvent('ta:filter-state', { detail: { family: family === 'All' ? null : family, iso } })); }, [family, iso]); // listen for top-nav search (cmd-K-ish) → focus our local search instead const searchRef = useRef(null); useEffect(() => { const onKey = (e) => { if ((e.metaKey || e.ctrlKey) && e.key === 'k') { e.preventDefault(); searchRef.current?.focus(); } }; window.addEventListener('keydown', onKey); return () => window.removeEventListener('keydown', onKey); }, []); // filtering const filtered = useMemo(() => { const q = query.trim().toLowerCase(); let out = TOOLS.filter(t => { if (family !== 'All' && t.family !== family) return false; if (iso && t.iso !== iso) return false; if (op && t.op !== op) return false; if (t.confidence < confMin) return false; if (q) { const hay = `${t.brand} ${t.code} ${t.grade} ${t.family} ${t.op} ${t.bestFor} ISO${t.iso}`.toLowerCase(); if (!hay.includes(q)) return false; } return true; }); const midVc = t => (t.vcMin + t.vcMax) / 2; const midF = t => (t.fMin + t.fMax) / 2; switch (sort) { case 'confidence': out.sort((a,b) => b.confidence - a.confidence); break; case 'vcDesc': out.sort((a,b) => midVc(b) - midVc(a)); break; case 'vcAsc': out.sort((a,b) => midVc(a) - midVc(b)); break; case 'feedDesc': out.sort((a,b) => midF(b) - midF(a)); break; case 'brandAsc': out.sort((a,b) => a.brand.localeCompare(b.brand)); break; default: /* relevance — preserve insertion order */ break; } return out; }, [TOOLS, query, family, iso, op, confMin, sort]); const visibleTools = filtered.slice(0, visible); // operations cluster — show only those present in current family const ops = useMemo(() => { const set = new Set(TOOLS.filter(t => family === 'All' || t.family === family).map(t => t.op)); return [...set].sort(); }, [TOOLS, family]); // actions const toggleCompare = useCallback((id) => { setCompare(prev => { const next = new Set(prev); if (next.has(id)) next.delete(id); else { if (next.size >= 4) return prev; next.add(id); } return next; }); }, []); const toggleFav = useCallback((id) => { setFavs(prev => { const n = new Set(prev); n.has(id) ? n.delete(id) : n.add(id); return n; }); }, []); const openDetail = useCallback((tool) => { setOpenTool(tool); setRecent(prev => { const next = [tool.id, ...prev.filter(x => x !== tool.id)].slice(0, 6); return next; }); }, []); // hydrate inserts when DOM updates useEffect(() => { const h = () => { if (window.taInsert3DHydrate) window.taInsert3DHydrate(document.getElementById('catalog-root')); }; h(); const t = setTimeout(h, 80); return () => clearTimeout(t); }, [visibleTools, view, openTool]); const compareTools = [...compare].map(id => TOOLS.find(t => t.id === id)).filter(Boolean); const favTools = [...favs].map(id => TOOLS.find(t => t.id === id)).filter(Boolean); const recentTools = recent.map(id => TOOLS.find(t => t.id === id)).filter(Boolean); // active filter chips const activeChips = []; if (query) activeChips.push({ key:'q', label:`"${query}"`, onClear:() => setQuery('') }); if (family!=='All')activeChips.push({ key:'fam', label:`Family: ${family}`, onClear:() => setFamily('All') }); if (iso) activeChips.push({ key:'iso', label:`ISO ${iso} · ${ISO_LABEL[iso]}`, onClear:() => setIso(null) }); if (op) activeChips.push({ key:'op', label:`Op: ${op}`, onClear:() => setOp(null) }); if (confMin>0) activeChips.push({ key:'conf', label:`Confidence ≥ ${confMin}%`, onClear:() => setConfMin(0) }); // export CSV const exportCSV = useCallback((rows) => { const cols = ['brand','code','grade','iso','family','op','vcMin','vcMax','fMin','fMax','apMin','apMax','coolant','stability','confidence','source','supply']; const header = cols.join(','); const body = rows.map(r => cols.map(c => `"${String(r[c]).replace(/"/g,'""')}"`).join(',')).join('\n'); const blob = new Blob([header + '\n' + body], { type: 'text/csv' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = `toolad-catalog-${rows.length}-tools.csv`; document.body.appendChild(a); a.click(); a.remove(); URL.revokeObjectURL(url); }, []); return (

{/* Header */}

Cutting Tool Catalog

Brand-neutral tool index with technical data and source flags. Filter by tool family; refine by ISO material from the left.

{/* Pro ribbon — premium teaser */} {/* Toolbar */}

{ setQuery(e.target.value); setVisible(PAGE_SIZE); }} aria-label="Search catalog" className="w-full h-10 pl-10 pr-3 rounded-lg bg-surface-container-low border border-transparent focus:bg-white focus:border-primary focus:outline-none focus:ring-4 focus:ring-primary/10 text-sm font-body-md" />

Sort Conf ≥ {/* Export */} {/* View toggle */}

{/* Family chips */}

Tool family · {FAMILIES.map(f => ( ))} ISO material is a refinement — use the left sidebar.

{/* Operation sub-filter (only when a family is selected) */} {family !== 'All' && ops.length > 1 && (

Operation · {ops.map(o => ( ))}

)} {/* Active filter chips + result counter */}

{activeChips.length > 0 ? ( Active · {activeChips.map(c => ( ))} ) : No filters · showing all}

{visible < filtered.length ? {visible} shown of {filtered.length} matching : {filtered.length} {filtered.length === 1 ? 'result' : 'results'} }

{/* Shortlist strip */} {favTools.length > 0 && (

My shortlist · {favTools.length}

{favTools.map(t => ( ))}

)} {/* Smart Swaps — value-seeker headline feature */} { setFavs(prev => { const n = new Set(prev); n.delete(fromId); n.add(toId); return n; }); }}/> {/* Recently viewed strip */} {recentTools.length > 0 && (

No tools match your filters

Try clearing some filters or broadening your search.

) : (

{visibleTools.map(t => ( ))}

)} {/* Load more */} {visible < filtered.length && (

)} {/* Bottom bento — refocused on actual catalog actions */}

{compare.size} selected

Side-by-side comparison

Open the comparison matrix to put up to four tools head-to-head: Vc range, feed envelope, stability, cost tier, and engineering notes.

Launch comparison matrix

Shortlist & export

Save tools you're considering. Export a clean CSV to share with procurement or your CAM team.

setOpenTool(null)} onOpenTool={openDetail} tools={TOOLS}/> setCompare(new Set())} onOpen={openDetail} onCompare={() => { window.location.href = 'compare.html'; }} onExport={() => exportCSV(compareTools)} /> ); } // ============================================================ // AI DOCK + PREMIUM SURFACES // ============================================================ // Quick actions shown above the chat. `pro:true` → locked → opens pro modal. const AI_QUICK_ACTIONS = [ { id:'explain-iso', icon:'school', label:'Explain ISO P vs M', prompt:'In 4 short bullet points, explain when to use ISO P (steel) inserts vs ISO M (stainless) inserts. Focus on practical decision criteria for a CNC operator.', pro:false }, { id:'pick-shortlist', icon:'auto_awesome',label:'Pick best from shortlist', prompt:'CTX_SHORTLIST', pro:false }, { id:'pdf-sheet', icon:'picture_as_pdf',label:'CAM-ready spec PDF', prompt:null, pro:true }, { id:'cross-brand', icon:'savings', label:'Cheapest cross-brand swap', prompt:null, pro:true }, ]; const FREE_DAILY = 3; function aiCtx(filters, shortlist, compare) { const parts = []; if (filters.family !== 'All') parts.push(`Family: ${filters.family}`); if (filters.iso) parts.push(`ISO ${filters.iso} (${ISO_LABEL[filters.iso]})`); if (filters.op) parts.push(`Operation: ${filters.op}`); if (filters.query) parts.push(`Search: "${filters.query}"`); const ctx = []; if (parts.length) ctx.push(`Active filters → ${parts.join(', ')}.`); if (shortlist.length) ctx.push(`User's shortlist: ${shortlist.map(t => `${t.brand} ${t.code} (ISO ${t.iso}, ${t.family})`).join('; ')}.`); if (compare.length) ctx.push(`In compare drawer: ${compare.map(t => `${t.brand} ${t.code}`).join('; ')}.`); return ctx.join('\n'); } function freeCounter() { const today = new Date().toISOString().slice(0,10); const st = LS.get('ta:ai:count', { day:today, used:0 }); if (st.day !== today) return { day:today, used:0 }; return st; } function incrFreeCounter() { const c = freeCounter(); c.used += 1; LS.set('ta:ai:count', c); return c; } function ProBadge() { return Pro ; } function AIDock({filters, shortlistTools, compareTools, onOpenTool}) { const [open, setOpen] = useState(() => LS.get('ta:ai:open', false)); const [messages, setMessages] = useState(() => LS.get('ta:ai:messages', [])); const [input, setInput] = useState(''); const [busy, setBusy] = useState(false); const [count, setCount] = useState(() => freeCounter()); const scrollRef = useRef(null); const lastShownAt = useRef(0); useEffect(() => LS.set('ta:ai:open', open), [open]); useEffect(() => LS.set('ta:ai:messages', messages.slice(-30)), [messages]); // Pulse: nudge the launcher 8 seconds after first load if the user hasn't opened it const [pulse, setPulse] = useState(false); useEffect(() => { if (open) return; const t = setTimeout(() => setPulse(true), 7000); return () => clearTimeout(t); }, [open]); useEffect(() => { if (scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight; }, [messages, busy]); const remaining = Math.max(0, FREE_DAILY - count.used); const ask = async (rawPrompt) => { if (busy) return; if (remaining <= 0) { TA_openProModal(); return; } let prompt = rawPrompt; // contextual prompt: "pick best from shortlist" if (prompt === 'CTX_SHORTLIST') { if (!shortlistTools.length) { setMessages(m => [...m, { role:'user', text:'Pick best from my shortlist' }, { role:'ai', text:"Your shortlist is empty. Tap the bookmark icon on any tool card to start a shortlist — then I'll recommend a pick based on your active filters." }]); return; } prompt = `From this shortlist, recommend the best single pick and explain why in 3 short bullets. If a runner-up is close, mention it.\n\nShortlist:\n${shortlistTools.map(t => `- ${t.brand} ${t.code} (ISO ${t.iso}, ${t.family}, Vc ${t.vcMin}-${t.vcMax} m/min, confidence ${t.confidence}%) — ${t.bestFor}`).join('\n')}`; } setMessages(m => [...m, { role:'user', text: rawPrompt === 'CTX_SHORTLIST' ? 'Pick best from my shortlist' : prompt }]); setInput(''); setBusy(true); const sys = `You are ToolAdvisor's in-app metalworking AI assistant. You help machinists and engineers choose cutting tools. Be concise, technical, and direct — prefer bullet points and short sentences. Never invent specs; if user data isn't given, reason from ISO group conventions. Refer to specific tools in user's shortlist or compare drawer when relevant. Don't recommend external brands not in the catalog.\n\n${aiCtx(filters, shortlistTools, compareTools)}`; try { const reply = await window.claude.complete({ messages: [ { role:'user', content: `${sys}\n\nUser question: ${prompt}` } ] }); setMessages(m => [...m, { role:'ai', text: reply || '(no response)' }]); setCount(incrFreeCounter()); } catch (err) { setMessages(m => [...m, { role:'ai', text:`Sorry — I had trouble answering that. (${err?.message || 'error'})` }]); } setBusy(false); }; const submit = (e) => { e.preventDefault(); const v = input.trim(); if (!v) return; ask(v); }; // Launcher (collapsed state) if (!open) { return ( ); } // Expanded return ( ); } function TA_openProModal() { const btn = document.querySelector('[data-modal-open="pro-upgrade"]'); if (btn) { btn.click(); return; } if (window.TA?.openModal) window.TA.openModal('pro-upgrade'); else window.location.href = 'pro.html'; } // Premium ribbon shown above results — discoverable, dismissible function ProRibbon() { const [dismissed, setDismissed] = useState(() => LS.get('ta:pro-ribbon-dismissed', false)); if (dismissed) return null; return (

Pro features in this catalog

AI tool picker · bulk PDF spec sheets · cross-brand cost analysis · saved searches

); } // "Saved searches" Pro button (in toolbar) function SavedSearchesProButton() { return ( ); } // Expose pieces so they can be picked up by the App tree below window.AIDock = AIDock; window.ProRibbon = ProRibbon; window.SavedSearchesProButton = SavedSearchesProButton; // Mount const root = ReactDOM.createRoot(document.getElementById('catalog-root')); root.render();