); } // ── Layout helpers ────────────────────────────────────────────────────────── function TweakSection({ label, children }) { return ( <>

{label}

{children} ); } function TweakRow({ label, value, children, inline = false }) { return (

{label} {value != null && {value}}

{children}

); } // ── Controls ──────────────────────────────────────────────────────────────── function TweakSlider({ label, value, min = 0, max = 100, step = 1, unit = '', onChange }) { return ( onChange(Number(e.target.value))} /> ); } function TweakToggle({ label, value, onChange }) { return (

onChange(!value)}>

{label}

); } function TweakRadio({ label, value, options, onChange }) { const trackRef = React.useRef(null); const [dragging, setDragging] = React.useState(false); // The active value is read by pointer-move handlers attached for the lifetime // of a drag — ref it so a stale closure doesn't fire onChange for every move. const valueRef = React.useRef(value); valueRef.current = value; // Segments wrap mid-word once per-segment width runs out. The track is // ~248px (280 panel − 28 body pad − 4 seg pad), each button loses 12px // to its own padding, and 11.5px system-ui averages ~6.3px/char — so 2 // options fit ~16 chars each, 3 fit ~10. Past that (or >3 options), fall // back to a dropdown rather than wrap. const labelLen = (o) => String(typeof o === 'object' ? o.label : o).length; const maxLen = options.reduce((m, o) => Math.max(m, labelLen(o)), 0); const fitsAsSegments = maxLen <= ({ 2: 16, 3: 10 }[options.length] ?? 0); if (!fitsAsSegments) { // onChange(e.target.value)}> {options.map((o) => { const v = typeof o === 'object' ? o.value : o; const l = typeof o === 'object' ? o.label : o; return ; })} ); } function TweakText({ label, value, placeholder, onChange }) { return ( onChange(e.target.value)} /> ); } function TweakNumber({ label, value, min, max, step = 1, unit = '', onChange }) { const clamp = (n) => { if (min != null && n < min) return min; if (max != null && n > max) return max; return n; }; const startRef = React.useRef({ x: 0, val: 0 }); const onScrubStart = (e) => { e.preventDefault(); startRef.current = { x: e.clientX, val: value }; const decimals = (String(step).split('.')[1] || '').length; const move = (ev) => { const dx = ev.clientX - startRef.current.x; const raw = startRef.current.val + dx * step; const snapped = Math.round(raw / step) * step; onChange(clamp(Number(snapped.toFixed(decimals)))); }; const up = () => { window.removeEventListener('pointermove', move); window.removeEventListener('pointerup', up); }; window.addEventListener('pointermove', move); window.addEventListener('pointerup', up); }; return (
{label} onChange(clamp(Number(e.target.value)))} /> {unit && {unit}}
); } // Relative-luminance contrast pick — checkmarks drawn over a swatch need to // read on both #111 and #fafafa without per-option configuration. Hex input // only (#rgb / #rrggbb); named or rgb()/hsl() colors fall through to "light". function __twkIsLight(hex) { const h = String(hex).replace('#', ''); const x = h.length === 3 ? h.replace(/./g, (c) => c + c) : h.padEnd(6, '0'); const n = parseInt(x.slice(0, 6), 16); if (Number.isNaN(n)) return true; const r = (n >> 16) & 255, g = (n >> 8) & 255, b = n & 255; return r * 299 + g * 587 + b * 114 > 148000; } const __TwkCheck = ({ light }) => ( ); // TweakColor — curated color/palette picker. Each option is either a single // hex string or an array of 1-5 hex strings; the card adapts — a lone color // renders solid, a palette renders colors[0] as the hero (left ~2/3) with the // rest stacked in a sharp column on the right. onChange emits the // option in the shape it was passed (string stays string, array stays array). // Without options it falls back to the native color input for back-compat. function TweakColor({ label, value, options, onChange }) { if (!options || !options.length) { return (

{label}
onChange(e.target.value)} />
); } // Native emits lowercase hex per the HTML spec, so // compare case-insensitively. String() guards JSON.stringify(undefined), // which returns the primitive undefined (no .toLowerCase). const key = (o) => String(JSON.stringify(o)).toLowerCase(); const cur = key(value); return (
{options.map((o, i) => { const colors = Array.isArray(o) ? o : [o]; const [hero, ...rest] = colors; const sup = rest.slice(0, 4); const on = key(o) === cur; return ( ); })}
); } function TweakButton({ label, onClick, secondary = false }) { return ( ); } // ── AIModelSection ───────────────────────────────────────────────────────── // Provider + model selector used in the CODEX Settings panel. Reads the live // /providers map (passed in from /api/health) so the segmented control can // grey out engines we can't reach (no key for anthropic/xai, no daemon for // ollama). Persists the user's pick via the parent's setTweak("provider"/ // "model") so it lives in codex.tweaks.v1. function AIModelSection({ provider, model, availableProviders, onChange }) { const [keyInput, setKeyInput] = React.useState(""); const [keyBusy, setKeyBusy] = React.useState(false); const [keyMsg, setKeyMsg] = React.useState(""); const [testMsg, setTestMsg] = React.useState(""); const [testBusy, setTestBusy] = React.useState(false); const PROVIDERS = [ { id: "anthropic", label: "Anthropic", sub: "Claude" }, { id: "xai", label: "xAI", sub: "Grok" }, { id: "groq", label: "Groq", sub: "free" }, { id: "gemini", label: "Gemini", sub: "Google" }, { id: "ollama", label: "Local", sub: "Ollama" }, ]; const reg = availableProviders || {}; const curReg = reg[provider] || { available: false, models: [] }; const models = curReg.models || []; const needsKey = (provider === "anthropic" || provider === "xai" || provider === "groq" || provider === "gemini") && !curReg.available; // When the user flips provider, snap model to the first available one so // we never POST a stale model id from a different provider. const pickProvider = (p) => { const r = reg[p]; if (!r || !r.available) { // Still let them pick (so they can paste a key). Model becomes empty // until /api/health says the provider has models available. const first = (r && r.models && r.models[0] && r.models[0].id) || ""; onChange({ provider: p, model: first }); return; } const first = (r.models && r.models[0] && r.models[0].id) || ""; onChange({ provider: p, model: first }); }; const tooltipFor = (p) => { const r = reg[p]; if (r && r.available) return `Use ${p}`; if (p === "ollama") return "Local: no Ollama detected (start the daemon)"; if (p === "xai") return "xAI: no key configured"; if (p === "groq") return "Groq: no key configured — get a free key at console.groq.com"; if (p === "gemini") return "Gemini: no key configured — get a free key at aistudio.google.com/apikey"; if (p === "anthropic") return "Anthropic: no key configured"; return ""; }; const submitKey = async () => { const key = keyInput.trim(); if (!key) return; setKeyBusy(true); setKeyMsg(""); try { const r = await fetch("/api/key", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ key, provider }), }); const d = await r.json().catch(() => ({})); if (!r.ok) throw new Error(d.error || `HTTP ${r.status}`); setKeyMsg("✓ saved"); setKeyInput(""); // Tell the rest of the app to re-probe /api/health. try { window.dispatchEvent(new CustomEvent("codex:engine-change")); } catch {} } catch (e) { setKeyMsg(String(e.message || e)); } finally { setKeyBusy(false); } }; const runTest = async () => { setTestBusy(true); setTestMsg(""); const t0 = performance.now(); try { const r = await fetch("/api/chat", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ provider, model, messages: [{ role: "user", content: "ping" }], max_tokens: 5, }), }); const d = await r.json().catch(() => ({})); if (!r.ok) throw new Error(d.error || `HTTP ${r.status}`); const ms = Math.round(performance.now() - t0); const u = d.usage || {}; const toks = (u.input_tokens || 0) + (u.output_tokens || 0); setTestMsg(`✓ ${ms}ms · ${toks} tok`); } catch (e) { setTestMsg("✗ " + String(e.message || e).slice(0, 60)); } finally { setTestBusy(false); } }; return (

{PROVIDERS.map(p => { const r = reg[p.id] || { available: false }; const on = provider === p.id; const off = !r.available; return ( ); })}

Model
{needsKey && (
{provider === "xai" ? "xAI API key (xai-…)" : provider === "groq" ? "Groq API key (gsk_…)" : provider === "gemini" ? "Gemini API key (AIza… / aistudio.google.com)" : "Anthropic API key (sk-ant-…)"} {keyMsg ? {keyMsg} : null}
setKeyInput(e.target.value)} autoComplete="off" spellCheck={false} />

)}
{testMsg ? ( {testMsg} ) : null}

); } // Day-mode theme picker — 9 light palettes selectable as swatches. // Reads/writes via the window.CODEX_LIGHT_THEMES global from light-themes.js. // Renders as a grid of mini swatches inside the Theme section of the tweaks // panel. Visible regardless of dark/light state so user can preview, but the // chosen variant only visibly applies when the app is in light mode. function LightThemePicker() { const [current, setCurrent] = React.useState( (window.CODEX_LIGHT_THEMES && window.CODEX_LIGHT_THEMES.get()) || "parchment" ); React.useEffect(() => { const onChange = (e) => setCurrent(e.detail?.theme || current); window.addEventListener("codex:light-theme-change", onChange); return () => window.removeEventListener("codex:light-theme-change", onChange); }, [current]); if (!window.CODEX_LIGHT_THEMES) return null; const themes = window.CODEX_LIGHT_THEMES.list(); return (
{themes.map(t => { const isActive = current === t.id; return ( ); })}
); } // ── Schizo Mode toggle (easter egg) ──────────────────────────────────── // Renders nothing unless `eligible` is true — eligibility is set by App // once the user has actually landed on Acts 16:26 (the prison earthquake — // "every one's bands were loosed"). The label inherits // a faint glitch animation from .cx-schizo-toggle in styles.css so it's // easy to miss unless you're looking. Kept here so the gating logic // lives next to the other Tweak primitives. function TweakSchizoToggle({ eligible, value, onChange }) { if (!eligible) return null; return (

); } Object.assign(window, { useTweaks, TweaksPanel, TweakSection, TweakRow, TweakSlider, TweakToggle, TweakRadio, TweakSelect, TweakText, TweakNumber, TweakColor, TweakButton, TweakSchizoToggle, AIModelSection, LightThemePicker, });