// Explorer · primary deliverable // Layout: top bar, mode hero strip, [phase rail | tool list | detail] const { useState, useEffect, useMemo } = React; function Explorer() { const phases = window.UXW_PHASES; const rows = window.UXW_ROWS; const modes = window.UXW_MODES; const summaries = window.UXW_PROMPT_SUMMARIES; const [query, setQuery] = useState(''); const [phaseFilter, setPhaseFilter] = useState(new Set(phases.map(p => p.id))); const [modeFilter, setModeFilter] = useState(new Set(Object.keys(modes))); const [selectedId, setSelectedId] = useState('messaging-wireframes'); const [showFullPrompt, setShowFullPrompt] = useState(false); const toggle = (set, setter) => (id) => { const next = new Set(set); if (next.has(id)) next.delete(id); else next.add(id); if (next.size === 0) return; // never let user select zero. Keep at least one setter(next); }; const counts = useMemo(() => ({ automate: rows.filter(r => r.mode === 'automate').length, augment: rows.filter(r => r.mode === 'augment').length, alone: rows.filter(r => r.mode === 'alone').length, }), []); const filtered = rows.filter(r => { if (!phaseFilter.has(r.phase)) return false; if (!modeFilter.has(r.mode)) return false; if (!query) return true; const q = query.toLowerCase(); return r.tool.toLowerCase().includes(q) || r.definition.toLowerCase().includes(q) || (r.application || '').toLowerCase().includes(q) || (r.whenToUse || '').toLowerCase().includes(q) || r.modeNote.toLowerCase().includes(q); }); // Keep selection inside the filtered list useEffect(() => { if (!filtered.find(r => r.id === selectedId) && filtered[0]) { setSelectedId(filtered[0].id); } }, [filtered.length, filtered[0]?.id]); // Reset prompt view when switching tools useEffect(() => { setShowFullPrompt(false); }, [selectedId]); const selected = rows.find(r => r.id === selectedId) || filtered[0] || rows[0]; const m = modes[selected.mode]; const summary = summaries[selected.id]; const modeVars = (md) => ({ '--mode-bg': md.bg, '--mode-mark': md.color, '--mode-fg': md.fg, '--mode-line': md.dot, }); return (
{/* TOP BAR */}
The UX writing process in the age of AI
An explorer of tools, modes, and where AI fits.
{filtered.length} of {rows.length}
{/* MODE HERO */}
Three ways AI shows up

Filter the process by how much AI does the work.

{Object.values(modes).map(md => { const active = modeFilter.has(md.id); return ( ); })}
{/* SIDEBAR */} {/* TOOL LIST */}
{phases.map((p, pi) => { const phaseRows = filtered.filter(r => r.phase === p.id); if (phaseRows.length === 0) return null; return (
Phase {String(pi+1).padStart(2,'0')} · {p.label} {p.blurb} {phaseRows.length} {phaseRows.length === 1 ? 'tool' : 'tools'}
{phaseRows.map(r => { const md = modes[r.mode]; const isSel = r.id === selected.id; return ( ); })}
); })} {filtered.length === 0 && (
No tools match these filters
Try clearing the search or turning a mode back on.
)}
{/* DETAIL */}
{/* Format switcher */}
); } window.Explorer = Explorer;