);
}
// ── Theme toggle ─────────────────────────────────────────────────────────────
function ThemeToggle() {
const [theme, setTheme] = useS_A(document.documentElement.dataset.theme || "light");
function toggle() {
const next = theme === "dark" ? "light" : "dark";
document.documentElement.dataset.theme = next;
try { localStorage.setItem("td-theme", next); } catch(_e) {}
setTheme(next);
}
return (
);
}
// ── Download consent modal ───────────────────────────────────────────────────
// Shown before every WebLLM model download — explicit consent is always required.
function DownloadConsentModal({ model, onConfirm, onCancel }) {
const sizeLabel = model.sizeMB >= 1000
? `${(model.sizeMB / 1000).toFixed(1)} GB`
: `${model.sizeMB} MB`;
const modalRef = useR_A(null);
const headingId = "download-consent-heading";
// Move focus to first focusable element on mount
useE_A(() => {
const el = modalRef.current;
if (!el) return;
const focusable = el.querySelectorAll(
'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
);
if (focusable.length) focusable[0].focus();
}, []);
// Focus trap and Escape key
function handleKeyDown(e) {
if (e.key === "Escape") { onCancel(); return; }
if (e.key !== "Tab") return;
const el = modalRef.current;
if (!el) return;
const focusable = Array.from(el.querySelectorAll(
'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
)).filter(n => !n.disabled);
if (!focusable.length) return;
const first = focusable[0];
const last = focusable[focusable.length - 1];
if (e.shiftKey) {
if (document.activeElement === first) { e.preventDefault(); last.focus(); }
} else {
if (document.activeElement === last) { e.preventDefault(); first.focus(); }
}
}
function handleBackdropKey(e) {
if (e.key === "Enter" || e.key === " ") { e.preventDefault(); onCancel(); }
}
return (
e.stopPropagation()}
onKeyDown={handleKeyDown}
>
Download AI model?
{model.label} will download ~{sizeLabel}{" "}
and run fully on your device. No data leaves your machine, and the model
is cached in your browser — one download only.
{/* Quality indicator */}
Quality
{model.quality}
Size
~{sizeLabel}
What it does
{model.note}
Requires a browser with WebGPU support (Chrome or Edge 113+).
Download speed depends on your connection.
);
}
// ── WebLLM progress bar ──────────────────────────────────────────────────────
// Fixed bar along the bottom of the viewport while a model is downloading.
function WebLLMProgressBar({ progress, progressText }) {
const pct = Math.round(progress * 100);
const phaseLabel = progressText || (progress > 0 ? 'Downloading…' : 'Preparing…');
return (
{phaseLabel}
{pct}%
);
}
// ── AI Status Badge ──────────────────────────────────────────────────────────
// Shows the active AI backend. When unavailable + WebGPU present, opens a
// model picker dropdown so the user can choose to download one.
function AIBadge({ aiState, onRequestModel }) {
const [open, setOpen] = useS_A(false);
const ref = useR_A(null);
const triggerRef = useR_A(null);
const menuRef = useR_A(null);
// Close dropdown on outside click
useE_A(() => {
if (!open) return;
function onDown(e) { if (ref.current && !ref.current.contains(e.target)) setOpen(false); }
document.addEventListener('mousedown', onDown);
return () => document.removeEventListener('mousedown', onDown);
}, [open]);
// Focus first menu item when dropdown opens
useE_A(() => {
if (!open || !menuRef.current) return;
const first = menuRef.current.querySelector('[role="menuitem"]');
if (first) first.focus();
}, [open]);
// Arrow-key and Escape navigation within the menu
function onMenuKeyDown(e) {
if (!menuRef.current) return;
const items = Array.from(menuRef.current.querySelectorAll('[role="menuitem"]'));
const idx = items.indexOf(document.activeElement);
if (e.key === 'ArrowDown') {
e.preventDefault();
items[(idx + 1) % items.length]?.focus();
} else if (e.key === 'ArrowUp') {
e.preventDefault();
items[(idx - 1 + items.length) % items.length]?.focus();
} else if (e.key === 'Escape') {
e.preventDefault();
setOpen(false);
triggerRef.current?.focus();
}
}
const { type, status } = aiState;
const canPick = status === 'unavailable' && window.LocalAI.hasWebGPU();
let label, dotColor, chipStyle = {};
if (status === 'starting') {
label = "Detecting AI…";
dotColor = "var(--border)";
} else if (status === 'loading') {
const pct = aiState.progress > 0 ? ` ${Math.round(aiState.progress * 100)}%` : "…";
label = type === 'window-ai' ? "Downloading…" : `Loading${pct}`;
dotColor = "#FF7C00";
} else if (status === 'ready') {
label = type === 'window-ai' ? "AI on — Built-in"
: type === 'webllm' ? "AI on — Browser"
: "AI on";
dotColor = "var(--pass)";
} else {
// unavailable
label = canPick ? "Load AI model" : "Manual mode";
dotColor = "var(--border)";
if (canPick) chipStyle.cursor = "pointer";
}
return (
{/* Visually-hidden description for ready state (replaces title-only info) */}
{status === 'ready' && (
{type === 'window-ai' ? "Chrome's on-device AI (Gemini Nano)" :
type === 'webllm' ? "AI model running in your browser via WebGPU" : ""}
)}
{/* Model picker dropdown */}
{open && (
Run AI in your browser
Models download once, then run offline — no API key or account needed.
Requires Chrome or Edge 113+.
);
}
// ── Interview AI nudge ───────────────────────────────────────────────────────
// Shown in the interview when AI is unavailable — non-blocking, easily dismissed.
function AIUnavailableNudge({ hasWebGPU, onLoadModel }) {
const [dismissed, setDismissed] = useS_A(false);
if (dismissed) return null;
return (
Manual mode — AI not loaded.
Questions are pre-generated; you choose which quadrant each answer belongs in.
{hasWebGPU && (
)}
);
}
// ── Tweaks panel ─────────────────────────────────────────────────────────────
const DEFAULT_TWEAKS = /*EDITMODE-BEGIN*/{
"board_style": "classic",
"coach_tone": "friendly",
"show_source_questions": false
}/*EDITMODE-END*/;
function AppTweaksPanel({ boardStyle, onBoardStyle }) {
// eslint-disable-next-line no-unused-vars -- used as JSX tags below
const { TweaksPanel, useTweaks, TweakSection, TweakRadio } = window;
const [t, setTweak] = useTweaks(DEFAULT_TWEAKS);
useE_A(() => {
if (t.board_style !== boardStyle) setTweak("board_style", boardStyle);
}, [boardStyle]);
function setStyle(v) { setTweak("board_style", v); onBoardStyle(v); }
return (
setTweak("coach_tone", v)}
options={[
{ value: "friendly", label: "Friendly" },
{ value: "concise", label: "Concise" },
{ value: "playful", label: "Playful" },
]}
/>
);
}
// ── Root App ─────────────────────────────────────────────────────────────────
function SwotApp() {
const persisted = window.loadState();
const [step, setStep] = useS_A(persisted?.step || "intro");
const [session, setSession] = useS_A(persisted?.session || null);
const [swot, setSwot] = useS_A(persisted?.swot || window.newEmptySwot());
const [boardStyle, setBoardStyle]= useS_A(persisted?.boardStyle || "classic");
const [toast, setToast] = useS_A(null);
const [aiState, setAiState] = useS_A(window.LocalAI.getStatus());
const [consentModel, setConsentModel] = useS_A(null); // model pending user consent
const [coachTone, setCoachTone] = useS_A(DEFAULT_TWEAKS.coach_tone);
const toastTimer = useR_A(null);
// Subscribe to AI status changes
useE_A(() => { window.LocalAI.onStatus(s => setAiState({ ...s })); }, []);
// Keep coachTone in sync with the tweaks panel
useE_A(() => {
function onTweakChange(e) {
if (e.detail?.coach_tone) setCoachTone(e.detail.coach_tone);
}
window.addEventListener('tweakchange', onTweakChange);
return () => window.removeEventListener('tweakchange', onTweakChange);
}, []);
// Persist state
useE_A(() => { window.saveState({ step, session, swot, boardStyle }); }, [step, session, swot, boardStyle]);
function showToast(msg) {
setToast(msg);
if (toastTimer.current) clearTimeout(toastTimer.current);
toastTimer.current = setTimeout(() => setToast(null), 2400);
}
// ── Model loading with size-based consent ──────────────────────────────
async function startModelDownload(model) {
try {
await window.LocalAI.loadWebLLM(model.id);
showToast("AI model ready — reload interview for AI questions!");
} catch(_e) {
showToast("Download failed. WebGPU may not be supported in this browser.");
}
}
function handleRequestModel(model) {
setConsentModel(model); // always require explicit consent before any model download
}
function handleConsentConfirm() {
const model = consentModel;
setConsentModel(null);
startModelDownload(model);
}
// ── SWOT data handlers ─────────────────────────────────────────────────
function handleStart({ subject, scope, title }) {
setSession({ subject, scope, title, lastQuestion: "", history: [] });
setSwot(window.newEmptySwot());
setStep("interview");
}
function handleBackToIntro() { setStep("intro"); }
function handleAddItem(item) { setSwot(prev => ({ ...prev, [item.bucket]: [...prev[item.bucket], item] })); }
function handleUpdateItem(updated) {
setSwot(prev => {
const next = window.newEmptySwot();
for (const k of ["S","W","O","T"]) next[k] = prev[k].filter(it => it.id !== updated.id);
next[updated.bucket] = [...next[updated.bucket], updated];
return next;
});
}
function handleDeleteItem(id) {
setSwot(prev => {
const next = window.newEmptySwot();
for (const k of ["S","W","O","T"]) next[k] = prev[k].filter(it => it.id !== id);
return next;
});
}
function handleFinish() { setStep("board"); }
function handleRestart() { setSession(null); setSwot(window.newEmptySwot()); setStep("intro"); window.clearState(); }
function handleBackToInterview() { setStep("interview"); }
const totalCount = window.BUCKETS.reduce((n, b) => n + (swot[b.key]?.length || 0), 0);
const isDownloading = aiState.status === 'loading';
const aiUnavailable = aiState.status === 'unavailable';
return (