);
}
// Task 2.6 — the subtitle/transcription engine is an EXPLICIT user choice, never
// an automatic fallback. This radio persists to generation.transcription.provider
// (the /_api/generate/prefs route); `maude design transcribe` reads the same
// default. Local whisper is free/offline/no-key; the cloud engines need a key
// (managed in the provider cards above).
const TRANSCRIPTION_ENGINES = [
{
id: 'auto',
label: 'Auto',
note: 'Use the best engine this machine is set up for — the card says which.',
},
{
id: 'whisper',
label: 'Local whisper.cpp',
note: 'Free · offline · no key · runs on your hardware',
},
{
id: 'elevenlabs',
label: 'ElevenLabs Scribe',
note: 'Cloud · accuracy · needs an ElevenLabs key',
},
{ id: 'groq', label: 'Groq Whisper', note: 'Cloud · fast · needs a Groq key' },
];
const ENGINE_LABELS = Object.fromEntries(TRANSCRIPTION_ENGINES.map((e) => [e.id, e.label]));
function TranscriptionEngineCard() {
const [engine, setEngine] = useState(null); // null = loading
const [busy, setBusy] = useState(false);
const [status, setStatus] = useState(null);
// What `auto` currently resolves to, from the server (key presence lives in
// the keychain). Shown verbatim so a delegated choice is still a visible one.
const [auto, setAuto] = useState(null);
useEffect(() => {
fetch('/_api/generate/prefs')
.then((r) => (r.ok ? r.json() : Promise.reject(new Error(`HTTP ${r.status}`))))
.then((d) => setEngine(d?.transcriptionProvider || 'whisper'))
.catch(() => setEngine('whisper'));
}, []);
// Re-read on every selection change: adding a key elsewhere in Settings moves
// what Auto resolves to, and the user should see that immediately.
useEffect(() => {
fetch('/_api/generate/whisper-model')
.then((r) => (r.ok ? r.json() : null))
.then((d) => setAuto(d?.auto || null))
.catch(() => {});
}, []);
async function choose(id) {
if (id === engine) return;
const prev = engine;
setEngine(id);
setBusy(true);
setStatus(null);
try {
const res = await fetch('/_api/generate/prefs', {
method: 'POST',
headers: { 'content-type': 'text/plain' },
body: JSON.stringify({ transcriptionProvider: id }),
});
if (!res.ok) throw new Error(await res.text());
setStatus({ ok: true, msg: 'Saved.' });
} catch (err) {
setEngine(prev); // revert on failure — no silent state drift
setStatus({ ok: false, msg: err && err.message ? err.message : 'save failed' });
} finally {
setBusy(false);
}
}
return (
Subtitles — transcription engine
Which engine turns audio into subtitles. Maude never switches engines behind your back — pin
one, or pick Auto and it uses the best you're set up for and says so.
{engine === 'auto' && auto && (
Right now Auto uses {ENGINE_LABELS[auto.engine] || auto.engine} —{' '}
{auto.reason}
{auto.cloud && ' Audio is uploaded to that provider and billed to your account.'}
)}
{TRANSCRIPTION_ENGINES.map((e) => (
))}
{status && (
{status.msg}
)}
);
}
// Task 2.7 (approach A) — one-click local whisper.cpp models. The engine binary
// is still a soft dep, but the MODEL half is one click: download a ggml model
// into a Maude-managed cache and `--provider whisper` auto-resolves it. Polls
// the download progress from the privileged /_api/generate/whisper-model route.
function WhisperModelCard() {
const [state, setState] = useState(null); // { models, downloading } | null
const [err, setErr] = useState(null);
const load = useCallback(() => {
fetch('/_api/generate/whisper-model')
.then((r) => (r.ok ? r.json() : Promise.reject(new Error(`HTTP ${r.status}`))))
.then(setState)
.catch((e) => setErr(e && e.message ? e.message : 'failed to load models'));
}, []);
useEffect(() => {
load();
}, [load]);
// Poll while a download is in flight.
useEffect(() => {
if (!state?.downloading) return undefined;
const t = setInterval(load, 1000);
return () => clearInterval(t);
}, [state?.downloading, load]);
async function download(id) {
setErr(null);
try {
const res = await fetch('/_api/generate/whisper-model', {
method: 'POST',
headers: { 'content-type': 'text/plain' },
body: JSON.stringify({ id }),
});
if (!res.ok) throw new Error(await res.text());
load();
} catch (e) {
setErr(e && e.message ? e.message : 'download failed');
}
}
async function remove(id) {
setErr(null);
try {
const res = await fetch('/_api/generate/whisper-model', {
method: 'DELETE',
headers: { 'content-type': 'text/plain' },
body: JSON.stringify({ id }),
});
if (!res.ok) throw new Error(await res.text());
load();
} catch (e) {
setErr(e && e.message ? e.message : 'remove failed');
}
}
const dl = state?.downloading;
const pctOf = (r, t) => (t > 0 ? Math.min(100, Math.round((r / t) * 100)) : 0);
const modelsReady = (state?.models || []).some((m) => m.downloaded);
return (
Local subtitle models (whisper.cpp)
Local subtitles need two things: the whisper.cpp engine and one model. Models are stored on
this machine only and never committed.
{state && (
{state.setup?.installed ? '✓' : '1'}
{state.setup?.installed
? 'whisper.cpp engine is installed'
: 'Install the whisper.cpp engine'}
{/* Only routes that work on THIS machine — no `brew install`
without Homebrew. whisper.cpp ships no macOS prebuilt, so the
brew-less answer is a cloud engine or a source build. */}
{(state.setup?.options || []).slice(0, 1).map((opt) =>
opt.kind === 'command' ? (
) : (
{opt.note}
)
)}
{modelsReady ? '✓' : '2'}
{modelsReady ? 'Model ready' : 'Download a model (below)'}
{(state.setup?.options || []).length > 1 && (
Other ways to get the engine
{state.setup.options.slice(1).map((opt) => (
);
}
// feature-scene-aware-keyframes — the video-analysis frame-selection engine, the
// sibling of the Subtitles section. Persists `keyframeEngine` to /_api/generate/prefs.
const KEYFRAME_ENGINES = [
{ id: 'auto', label: 'Auto', note: 'Use the best available: Gemma scout → ffmpeg → blind.' },
{ id: 'gemma', label: 'Gemma scout', note: 'Semantic action beats. Needs Ollama (gemma3 vision) or mlx-vlm + a model.' },
{ id: 'ffmpeg', label: 'ffmpeg scene-detect', note: 'Scene cuts + endpoints. Needs ffmpeg. No model download.' },
{ id: 'blind', label: 'Blind (even-spaced)', note: 'Chromium fallback — works with neither ffmpeg nor Gemma.' },
];
function KeyframeEngineCard() {
const [engine, setEngine] = useState(null);
const [busy, setBusy] = useState(false);
const [status, setStatus] = useState(null);
useEffect(() => {
fetch('/_api/generate/prefs')
.then((r) => (r.ok ? r.json() : Promise.reject(new Error(`HTTP ${r.status}`))))
.then((d) => setEngine(d?.keyframeEngine || 'auto'))
.catch(() => setEngine('auto'));
}, []);
async function choose(id) {
if (id === engine) return;
const prev = engine;
setEngine(id);
setBusy(true);
setStatus(null);
try {
const res = await fetch('/_api/generate/prefs', {
method: 'POST',
headers: { 'content-type': 'text/plain' },
body: JSON.stringify({ keyframeEngine: id }),
});
if (!res.ok) throw new Error(await res.text());
setStatus({ ok: true, msg: 'Saved.' });
} catch (err) {
setEngine(prev);
setStatus({ ok: false, msg: err && err.message ? err.message : 'save failed' });
} finally {
setBusy(false);
}
}
return (
Scene-aware keyframes — analysis engine
How Maude picks frames when it analyzes a video (`/design:video-analyze`, `/design:reel`).
Scene-aware beats a blind frame rate. This is an explicit choice — a chosen-but-unavailable
engine tells you how to fix it; Auto just uses the best you have installed.
{KEYFRAME_ENGINES.map((e) => (
))}
{status && (
{status.msg}
)}
);
}
// A copy/paste terminal command with a Copy button (same look as the ACP
// readiness rows — the rdy-* classes are global in the bundled stylesheet).
function CopyCommand({ command, label }) {
const [copied, setCopied] = useState(false);
const copy = () => {
navigator.clipboard?.writeText(command).then(
() => {
setCopied(true);
setTimeout(() => setCopied(false), 1500);
},
() => {}
);
};
return (
{command}
);
}
// The setup path, as STEPS rather than a wall of options. Only the shortest
// route is visible (install → pull); everything else — Homebrew, the download
// link, the whole mlx-vlm alternative — sits folded behind one disclosure, so a
// first-time reader sees two commands, not seven.
function SetupSteps({ state }) {
const ollama = state.ollama || {};
const setup = ollama.setup || [];
// The server orders routes best-first, so the head is the one step to take now
// ("install", or "start" when the binary is already there). Everything after
// it is an alternative way to reach the same place.
const [primary, ...alternatives] = setup;
const step1Done = Boolean(ollama.available);
const step2Done = Boolean(ollama.model);
// Once Ollama is running, its own route list collapses to the pull command —
// which IS step 2, so it must not also render as step 1.
const step1 = step1Done || primary?.id === 'pull' ? null : primary;
return (
Other ways to install
{alternatives.map((opt) => (
{opt.label}
{/* A link is rendered as a copyable URL, not a button: the desktop
shell has no general URL opener by design (DDR-054). */}
))}
mlx-vlm instead of Ollama — faster, Apple Silicon only
{state.mlx?.supported ? (
<>
Then download a model below. Models live in your HuggingFace cache.
) : (
// Never show a command that would fail here — say why instead.
{state.mlx?.reason}
)}
);
}
// The MODEL half of the Gemma scout — one click, mirroring WhisperModelCard. The
// RUNTIME is a manual install the app can't do for you (DDR-183), but the card
// hands you copy/paste commands for BOTH runtime paths — Ollama (simplest: one
// app, `ollama pull`, no Python) and mlx-vlm (fastest, the benchmarked path) —
// and re-probes on its own, so the card unlocks itself once you've run one.
function GemmaModelCard() {
const [state, setState] = useState(null); // { models, downloading, mlxVlmAvailable, ffmpegAvailable, installCommand, ollama }
const [err, setErr] = useState(null);
const load = useCallback(() => {
fetch('/_api/generate/keyframe-model')
.then((r) => (r.ok ? r.json() : Promise.reject(new Error(`HTTP ${r.status}`))))
.then(setState)
.catch((e) => setErr(e && e.message ? e.message : 'failed to load models'));
}, []);
useEffect(() => {
load();
}, [load]);
useEffect(() => {
if (!state?.downloading) return undefined;
const t = setInterval(load, 1500);
return () => clearInterval(t);
}, [state?.downloading, load]);
// No scout runtime yet → the user is likely running one of the install
// commands in a terminal right now. Re-probe every 10 s (server-side the
// probes are TTL-cached) so the card unlocks itself without a reopen.
const noRuntime = state ? !state.mlxVlmAvailable && !state.ollama?.model : false;
useEffect(() => {
if (!noRuntime) return undefined;
const t = setInterval(load, 10_000);
return () => clearInterval(t);
}, [noRuntime, load]);
async function download(id) {
setErr(null);
try {
const res = await fetch('/_api/generate/keyframe-model', {
method: 'POST',
headers: { 'content-type': 'text/plain' },
body: JSON.stringify({ id }),
});
if (!res.ok) throw new Error(await res.text());
load();
} catch (e) {
setErr(e && e.message ? e.message : 'download failed');
}
}
const dl = state?.downloading;
const mlx = state?.mlxVlmAvailable;
const ff = state?.ffmpegAvailable;
const ollama = state?.ollama;
const scoutReady = Boolean(mlx || ollama?.model);
const pctOf = (r, t) => (t > 0 ? Math.min(100, Math.round((r / t) * 100)) : 0);
const activeTier = scoutReady
? `Gemma scout${mlx ? '' : ` (Ollama · ${ollama.model})`}`
: ff
? 'ffmpeg scene-detect'
: 'blind (even-spaced)';
return (
Gemma scout model (optional)
Adds semantic action-beat detection on top of scene cuts. Two short steps in a terminal —
Maude picks the result up on its own.
{state && !scoutReady && }
{state && (
Active tier on this machine: {activeTier}
{scoutReady && !mlx && ' — Ollama manages its own models, nothing to download below.'}
{m.downloaded ? (
ready
) : (
// Each row is enabled by ITS OWN runtime — an Ollama model is
// one click whenever Ollama is running (the server pulls it
// through /api/pull); an mlx snapshot needs mlx-vlm. The
// button keeps its label and just goes disabled, with the
// reason in small type underneath.
{runtimeReady ? null : (
{blockedNote}
)}
)}
);
})}
);
}
// feature-unified-settings-modal — one modal for every Maude preference, laid
// out as a left vertical tab rail + an internally-scrolling pane. Categories:
/**
* Figma connect card (DDR-216 D2/D3 / T11).
*
* Same trust model as ProviderCard, DIFFERENT routes: `figma` is deliberately
* not in the media-generation registry, so this card talks to
* `/_api/figma/{status,connect,probe}` — all three main-origin-only, loopback-
* and same-origin-gated, and none of which ever echoes the token back.
*
* The scope named here is `file_content:read`, never the deprecated blanket
* `files:read`. The "Connected as …" handle comes from `/v1/me` and is
* upstream-controlled — bounded server-side and rendered as a React text child
* (never `dangerouslySetInnerHTML`), and deliberately never persisted.
*/
function FigmaConnectCard() {
const [status, setStatus] = useState(null); // null = loading
const [tokenInput, setTokenInput] = useState('');
const [busy, setBusy] = useState(false);
const [msg, setMsg] = useState(null);
const [handle, setHandle] = useState(null);
const load = useCallback(() => {
fetch('/_api/figma/status')
.then((r) => (r.ok ? r.json() : Promise.reject(new Error(`HTTP ${r.status}`))))
.then(setStatus)
.catch(() => setStatus({ configured: false }));
}, []);
useEffect(() => {
load();
}, [load]);
async function connect() {
const token = tokenInput.trim();
if (!token || busy) return;
setBusy(true);
setMsg(null);
try {
const res = await fetch('/_api/figma/connect', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ token }),
});
const body = await res.json().catch(() => ({}));
if (!res.ok) {
setMsg(body.error || 'could not save the token');
return;
}
// Clear the field immediately — the value is never read back from the
// server, so leaving it on screen only risks a shoulder-surf.
setTokenInput('');
load();
await probe();
} finally {
setBusy(false);
}
}
async function probe() {
setMsg(null);
const res = await fetch('/_api/figma/probe', { method: 'POST' });
const body = await res.json().catch(() => ({}));
if (body.ok) {
setHandle(body.handle || '');
setMsg(null);
} else {
setHandle(null);
setMsg(body.error || 'Figma did not accept that token.');
}
}
async function disconnect() {
if (busy) return;
setBusy(true);
try {
await fetch('/_api/figma/connect', { method: 'DELETE' });
setHandle(null);
setMsg(null);
load();
} finally {
setBusy(false);
}
}
const configured = Boolean(status?.configured);
return (
Figma
{configured && (
connected
)}
Import real Figma documents — frames become editable canvases, FigJam boards become the
whiteboard, and paint/text/effect styles become design tokens. The translation is plain
code: no AI reads your file.
Create a personal access token with the {status?.requiredScope || 'file_content:read'}{' '}
scope. It is stored on this machine only and is never sent anywhere but Figma.
setTokenInput(e.target.value)}
onKeyDown={(e) => {
if (e.key === 'Enter') connect();
}}
aria-label="Figma personal access token"
data-testid="figma-connect-input"
/>
{configured && (
)}
{configured && (
)}
{handle !== null && (
Connected as {handle || 'your Figma account'}
)}
{msg && (
{msg}
)}
);
}
const TABS = [
{ id: 'appearance', label: 'Appearance' },
{ id: 'canvas-view', label: 'Canvas & View' },
{ id: 'layout', label: 'Layout' },
// Cloud Phase 27 — `local: true` means "this tab configures something that
// runs on the machine Maude is installed on". A browser tab has no ffmpeg, no
// mlx-vlm, no HuggingFace cache and no provider key of yours, and the routes
// behind these panes are refused in a cell by design (DDR-209 D1) — so in the
// cloud they rendered as a wall of `HTTP 404`.
//
// ABSENT, not disabled. C2 says state an absence where the thing would be,
// and that rule earns its keep for the agent chat: the feature exists, you
// just need the desktop app. These are settings for machinery that is not
// missing so much as inapplicable — a preference pane for hardware this shell
// does not have. There is nothing for the reader to act on, so a whole tab of
// dead controls is worse than no tab.
{ id: 'ai-generation', label: 'AI generation', local: true },
// DDR-216 — Figma is its OWN tab, not a row under "AI generation". It is not
// a media-generation provider (it produces no modality and needs no adapter),
// and putting it in that registry would create a second write path for the
// same secret — which is how one of them ends up ungated.
{ id: 'figma', label: 'Figma', local: true },
{ id: 'subtitles', label: 'Subtitles', local: true },
{ id: 'video', label: 'Video', local: true },
];
const SETTINGS_TAB_STORE = 'mdcc-settings-tab';
// feature-configurable-panel-docking — the panels the Layout tab can dock. Order
// = display order. (Assistant is native-only; moving it is a no-op in the browser.)
const LAYOUT_PANELS = [
{ id: 'tree', label: 'Files' },
{ id: 'layers', label: 'Layers' },
{ id: 'inspector', label: 'Inspector' },
{ id: 'comments', label: 'Comments' },
{ id: 'changes', label: 'Changes' },
{ id: 'assistant', label: 'Assistant' },
];
function SideToggle({ value, disabled, onChange }) {
return (
{['left', 'right'].map((s) => (
))}
);
}
const LAYERS_MODE_OPTIONS = [
{ id: 'separate', label: 'Separate panel', note: 'Layers docks on its own (default: left).' },
{ id: 'in-inspector', label: 'Inside Inspector', note: 'Layers is a tab within the Inspector.' },
];
function LayoutTab({ panelSide, onSetPanelSide, layersMode, onSetLayersMode }) {
return (
<>
Layers panel
Show Layers as its own dockable panel, or as a tab inside the Inspector.
{LAYERS_MODE_OPTIONS.map((o) => (
))}
Panel positions
Dock each panel to the left or right side. Each side shows one panel at a time, with tabs
to switch between the panels docked there.
{p.label}
{disabled && (
Layers is inside the Inspector — choose “Separate panel” above to dock it.
)}
onSetPanelSide(p.id, s)}
/>
);
})}
);
}
// A labeled switch row. The `checked`/`onChange` are owned by app.jsx state
// (single source of truth) so the modal and the View menu never diverge.
function PrefToggleRow({ label, note, checked, disabled, reason, onChange }) {
return (
);
}
// Appearance — theme control. Reuses the transcription-engine radio density so
// the whole modal reads as one system. Wired to app.jsx `theme` + `onSetTheme`.
const THEME_OPTIONS = [
{ id: 'light', label: 'Light', note: 'Bright shell chrome' },
{ id: 'dark', label: 'Dark', note: 'Dim shell chrome' },
];
// DDR-171 — the CSS-panel (Inspector) vocabulary. Advanced = raw CSS property
// names (the default, unchanged); Designer = Figma-familiar clusters (Fill,
// Stroke, Auto layout…). Same underlying controls + write path, just relabeled
// and regrouped. Persisted via the App-owned `maude-cp-mode` state, so this
// radio and the in-panel corner toggle stay in lockstep.
const CP_MODE_OPTIONS = [
{ id: 'advanced', label: 'Advanced', note: 'Raw CSS property names — border-radius, flex-direction…' },
{ id: 'designer', label: 'Designer', note: 'Figma vocabulary — Fill, Stroke, Corner radius, Auto layout…' },
];
function AppearanceTab({ theme, onSetTheme, cpMode, onSetCpMode }) {
return (
<>
Theme
Controls Maude’s own chrome — menubar, sidebar, canvas plane, minimap, zoom HUD. Artboards
keep their own design-system theme.
{THEME_OPTIONS.map((o) => (
))}
Inspector vocabulary
How the CSS panel labels controls. You can also flip this from the small toggle in the
panel’s own corner — this choice is remembered.
{CP_MODE_OPTIONS.map((o) => (
))}
);
}
export default function SettingsPanel({
/** `{ dashboardUrl?, projectName }` when this is a cloud tab, else null. */
// Tri-state (see the note where this value is created): `undefined` until
// the server config answers, `null` for the desktop, an object for a cloud
// tab. Defaulting it to `null` here is what re-broke the boot 404 after the
// call sites were fixed — a default fires on `undefined`, so "not known yet"
// became "not cloud" one layer further in, invisibly.
cloud,
onClose,
initialTab,
theme,
onSetTheme,
cpMode,
onSetCpMode,
minimapVisible,
onToggleMinimap,
zoomCtlVisible,
onToggleZoomCtl,
annotationsVisible,
onToggleAnnotations,
autoOpenInspector,
onToggleAutoOpenInspector,
hasCanvas = false,
panelSide,
onSetPanelSide,
layersMode,
onSetLayersMode,
}) {
const [providers, setProviders] = useState(null); // null = loading
const [error, setError] = useState(null);
// The tabs THIS shell can honour. See TABS for why the local-machine ones are
// absent in a browser tab rather than disabled.
const tabs = useMemo(() => TABS.filter((t) => !(cloud && t.local)), [cloud]);
const [tab, setTab] = useState(() => {
// A remembered tab that this shell does not have (you opened Video on the
// desktop, then opened Settings in the cloud) must not select nothing.
const has = (id) => TABS.some((t) => t.id === id && !(cloud && t.local));
if (initialTab && has(initialTab)) return initialTab;
try {
const v = localStorage.getItem(SETTINGS_TAB_STORE);
if (v && has(v)) return v;
} catch {}
return 'appearance';
});
useEffect(() => {
try {
localStorage.setItem(SETTINGS_TAB_STORE, tab);
} catch {}
}, [tab]);
const load = useCallback(() => {
fetch('/_api/generate/providers')
.then((r) => {
if (!r.ok) throw new Error(`HTTP ${r.status}`);
return r.json();
})
.then((d) => setProviders(Array.isArray(d?.providers) ? d.providers : []))
.catch((err) => setError(err && err.message ? err.message : 'failed to load providers'));
}, []);
useEffect(() => {
load();
}, [load]);
useEffect(() => {
function onKey(e) {
if (e.key === 'Escape') {
e.preventDefault();
onClose();
}
}
window.addEventListener('keydown', onKey);
return () => window.removeEventListener('keydown', onKey);
}, [onClose]);
// Vertical roving focus over the tab rail (native-menu parity).
function onRailKey(e) {
const idx = tabs.findIndex((t) => t.id === tab);
if (e.key === 'ArrowDown' || e.key === 'ArrowRight') {
e.preventDefault();
setTab(tabs[(idx + 1) % tabs.length].id);
} else if (e.key === 'ArrowUp' || e.key === 'ArrowLeft') {
e.preventDefault();
setTab(tabs[(idx - 1 + tabs.length) % tabs.length].id);
} else if (e.key === 'Home') {
e.preventDefault();
setTab(tabs[0].id);
} else if (e.key === 'End') {
e.preventDefault();
setTab(tabs[tabs.length - 1].id);
}
}
// Minimap / zoom-controls are canvas-scoped — mirror the View menu's
// `disabled: !activePath || isSystem` gate and say why inline.
const canvasReason = !hasCanvas ? 'Open a canvas to use this.' : undefined;
return (
{
if (e.target === e.currentTarget) onClose();
}}
>
Settings
{tabs.map((t) => (
))}
{/* Appearance */}
Appearance
{/* Canvas & View — the persistent View-menu prefs, one canonical home. */}
{/* AI generation — BYOK provider keys (kept mounted so the fetch runs once). */}
Provider keys
Bring your own API keys to generate images (and, soon, audio + video) inside Maude.
Keys are stored on this machine only — in your OS keychain or a private{' '}
~/.config/maude/keys.json (mode 0600) — sent straight to the provider,
and never committed, logged, or exposed to a canvas.