+
+
+ Can't reach the MoFA engine
++ The engine at {url} is offline. +
+ +
+
+
+ Start the engine
+
+
+
+ cargo run --bin mofa-engine
+
+
+
+
+
+
+
+
+
+
+
+ + {descriptor.title || 'Error'} +
++ {descriptor.message} +
+ + {descriptor.snippet && ( +
+
+ )}
+
+
+ {descriptor.snippet}
+
+
+
+
+ {countdown !== null && (
+
+
+
+
+ );
+}
+
+function EventCard({ evt }: { evt: EngineEvent }) {
+ const { icon, color, title, desc } = formatEvent(evt);
+
+ return (
+
+
+ {events.map((evt) => (
+
+ {events.length === 0 && (
+
+
+
+ Waiting for engine events...
+ )}
+
+ {icon}
+
+
+
+
+ {title}
+
+ {new Date(evt.timestamp).toLocaleTimeString([], { hour12: false, hour: '2-digit', minute: '2-digit', second:'2-digit' })}
+
+
+
+ {desc}
+
+
+
+ );
+}
diff --git a/mofa-frontend/src/monitor/ModelGrid.tsx b/mofa-frontend/src/monitor/ModelGrid.tsx
new file mode 100644
index 0000000..c95327e
--- /dev/null
+++ b/mofa-frontend/src/monitor/ModelGrid.tsx
@@ -0,0 +1,85 @@
+import React, { useEffect, useState } from 'react';
+import { engine } from '../engine';
+import { ModelCard } from '../engine/types';
+import { StatusDot } from '../shared/StatusDot';
+import { Cpu } from 'lucide-react';
+
+
+export function ModelGrid() {
+ const [models, setModels] = useState
+
+
+ {memoryGb}
+ / {maxGb} GB
+
+
+ {percentage.toFixed(1)}%
+
+
+
+
+
+ {delta !== null && (
+ 0 ? 'text-accent-red' : 'text-accent-green'}`}>
+ {delta > 0 ? '+' : ''}{(delta / 1024 / 1024 / 1024).toFixed(2)} GB
+
+ )}
+
+
+
+ );
+ }
+
+ return (
+
+ {activeModels.map(model => {
+ const memGb = model.memory_estimate_bytes ? (model.memory_estimate_bytes / 1024 / 1024 / 1024).toFixed(1) + 'GB' : '0GB';
+ const isRemote = (model.residency || '').toLowerCase() === 'remote';
+ const statusLower = (model.status || '').toLowerCase();
+
+ return (
+
+ );
+
+}
diff --git a/mofa-frontend/src/monitor/MonitorSidebar.tsx b/mofa-frontend/src/monitor/MonitorSidebar.tsx
new file mode 100644
index 0000000..d1ca99d
--- /dev/null
+++ b/mofa-frontend/src/monitor/MonitorSidebar.tsx
@@ -0,0 +1,58 @@
+import React from 'react';
+import { Activity, Shield, Box, Zap } from 'lucide-react';
+import { MemoryGauge } from './MemoryGauge';
+import { ModelGrid } from './ModelGrid';
+import { ProviderHealth } from './ProviderHealth';
+import { PreflightIndicator } from './PreflightIndicator';
+
+export function MonitorSidebar() {
+ return (
+
+ );
+}
diff --git a/mofa-frontend/src/monitor/PreflightIndicator.tsx b/mofa-frontend/src/monitor/PreflightIndicator.tsx
new file mode 100644
index 0000000..86d299f
--- /dev/null
+++ b/mofa-frontend/src/monitor/PreflightIndicator.tsx
@@ -0,0 +1,66 @@
+import React, { useEffect, useState } from 'react';
+import { engine } from '../engine';
+import { Zap, RotateCw, CheckCircle2 } from 'lucide-react';
+
+export function PreflightIndicator() {
+ const [status, setStatus] = useState<{ type: 'idle' | 'warming' | 'evicting'; model?: string; loadedCount: number }>({
+ type: 'idle',
+ loadedCount: 0
+ });
+
+ useEffect(() => {
+ // Initial fetch to get loaded count
+ engine.getStatus().then(s => {
+ if (s.success) {
+ setStatus(prev => ({ ...prev, loadedCount: s.data.loaded_models }));
+ }
+ });
+
+ const handleEvent = (evt: any) => {
+ if (evt.type === 'ModelResidencyChanged') {
+ const { model, from, to, reason } = evt.data;
+ if (to === 'Loading') {
+ setStatus(prev => ({ ...prev, type: 'warming', model }));
+ } else if (to === 'Unloaded' && reason === 'eviction') {
+ setStatus(prev => ({ ...prev, type: 'evicting', model }));
+ } else if (to === 'Loaded' || to === 'Unloaded') {
+ // Re-fetch loaded count
+ engine.getStatus().then(s => {
+ if (s.success) {
+ setStatus({ type: 'idle', loadedCount: s.data.loaded_models });
+ }
+ });
+ }
+ } else if (evt.type === 'ModelStatusChanged') {
+ const { model, from, to } = evt.data;
+ if (to === 'Warming') {
+ setStatus(prev => ({ ...prev, type: 'warming', model }));
+ }
+ }
+ };
+
+ const unsubscribe = engine.subscribeEvents(handleEvent);
+ return () => unsubscribe();
+ }, []);
+
+ return (
+
+
+ );
+ })}
+
+
+
+
+ {model.id}
+
+ {model.provider}
+ {!isRemote && (
+ <>
+ ·
+ {memGb}
+
+ )}
+
+
+
+ {isRemote ? 'REMOTE' : statusLower.toUpperCase()}
+
+
+
+ {status.type === 'idle' ? (
+
+ );
+}
diff --git a/mofa-frontend/src/monitor/ProviderHealth.tsx b/mofa-frontend/src/monitor/ProviderHealth.tsx
new file mode 100644
index 0000000..cf44eec
--- /dev/null
+++ b/mofa-frontend/src/monitor/ProviderHealth.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import { ShieldAlert, ShieldCheck } from 'lucide-react';
+import { useEngineStatus } from '../engine/useEngineStatus';
+
+export function ProviderHealth() {
+ const { data: statusRes } = useEngineStatus();
+
+ const providers = (statusRes?.success ? statusRes.data.provider_health : null) || [
+ { name: 'Ollama (Local)', healthy: true, circuit_state: 'closed' },
+ { name: 'Kokoro (Local)', healthy: true, circuit_state: 'closed' }
+ ];
+
+ return (
+
+
+ ) : status.type === 'warming' ? (
+
+
+ ) : (
+
+
+ )}
+
+ {providers.map(p => {
+ const state = (p.circuit_state || '').toLowerCase();
+ const isClosed = state === 'closed';
+ const isHalfOpen = state === 'halfopen' || state === 'half_open';
+
+ return (
+
+ );
+}
diff --git a/mofa-frontend/src/observability/MetricsStrip.tsx b/mofa-frontend/src/observability/MetricsStrip.tsx
new file mode 100644
index 0000000..aef5b15
--- /dev/null
+++ b/mofa-frontend/src/observability/MetricsStrip.tsx
@@ -0,0 +1,96 @@
+import React, { useEffect, useState } from 'react';
+import { engine } from '../engine';
+import { EngineStatus } from '../engine/types';
+import { Card } from '../shared/Card';
+import { Activity, Clock, Cpu, HardDrive } from 'lucide-react';
+
+export function MetricsStrip() {
+ const [status, setStatus] = useState
+
+ );
+ })}
+
+ {isClosed ? (
+
+
+
+ {isClosed ? 'CLOSED' : isHalfOpen ? 'HALF_OPEN' : 'OPEN'}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/mofa-frontend/src/shared/Badge.tsx b/mofa-frontend/src/shared/Badge.tsx
new file mode 100644
index 0000000..c631e93
--- /dev/null
+++ b/mofa-frontend/src/shared/Badge.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import { cn } from '../lib/utils';
+import { Capability } from '../engine/types';
+
+interface BadgeProps extends React.HTMLAttributes
+
+
+
+ Total Requests
+ {requestCount}
+
+
+
+
+ Avg Latency
+
+ {avgLatency > 0 ? `${(avgLatency / 1000).toFixed(2)}s` : '--'}
+
+
+
+
+
+ Models Loaded
+
+ {status?.loaded_models ?? '--'} / {status?.total_models ?? '--'}
+
+
+
+
+
+ Memory Usage
+
+ {memoryPercent}%
+
+
+
+
+
+
+ )}
+
+
+
+
+ {filteredCommands.length === 0 ? (
+
+
+ No commands found.
+
+ ) : (
+ filteredCommands.map((cmd, i) => (
+ {
+ cmd.action();
+ setIsOpen(false);
+ }}
+ onMouseEnter={() => setSelectedIndex(i)}
+ className={`flex items-center justify-between px-4 py-3 cursor-pointer ${
+ i === selectedIndex ? 'bg-black/5' : 'hover:bg-black/5'
+ }`}
+ role="button"
+ tabIndex={-1}
+ >
+
+ ))
+ )}
+
+ {cmd.icon}
+
+ {cmd.label}
+
+
+ {cmd.shortcut && (
+
+ {cmd.shortcut}
+
+ )}
+
+
+
+
+
+
+ )}
+
+
+
+ Settings
+ +
+
+
+
+
+
+
+
+
+
+
+ setUrlInput(e.target.value)}
+ className="flex-1 bg-background-secondary border border-black/10 rounded-[var(--radius-small)] px-3 py-2 text-sm text-text-primary focus:outline-none focus:border-accent-blue"
+ placeholder="http://127.0.0.1:8420"
+ />
+
+
+
+ {testResult && (
+
+ {testResult.text}
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+
+ Sound Effects
+Play a chime when generation completes
+
+
+
+
+
+
+ Reduced Motion
+Minimize animations and transitions
+
+
+
+
+
+ Danger Zone
+Clear local drafts and podcast history
+
+
+ About MoFA FM
+
+
+ Engine Version: {version || 'Offline'}
+Uptime: {uptime_secs ? `${uptime_secs}s` : 'Offline'}
+Frontend: v0.1.0
+
+ GitHub
+ Grafana Metrics
+
+
+
+
+ document.dispatchEvent(new CustomEvent('navigate', { detail: 'studio' }))}>
+ 
+ MoFA Engine
+
+
+
+ MoFA Engine
+
+
+ document.dispatchEvent(new KeyboardEvent('keydown', { metaKey: true, key: 'k' }))}>
+ ⌘
+ K
+
+
+
+
+
+
+
+
+
+
+
+ History
+
+ {history.length === 0 ? (
+
+
+ No past generations.
+
+ ) : (
+ <>
+
+
+
+ {history.map((item, idx) => (
+ item.status === 'done' && (
+ handleSelect(item)}
+ className="p-4 bg-white border border-black/5 shadow-sm rounded-md cursor-pointer hover:bg-black/5 hover:border-black/10 transition-all group"
+ >
+
+ )
+ ))}
+
+ )}
+
+
+
+
+ {item.chat.script.substring(0, 40)}...
+
+
+ {item.chat.model}
+ {item.tts.model}
+
+
+ {formatMs(item.totalMs)}
+ {item.chat.tokens} tokens
+
+
+ {/* Track */}
+
+ );
+}
+
+export function PipelineNode({
+ title,
+ active,
+ done,
+ error,
+ accent,
+ result,
+ icon: Icon
+}: {
+ title: string;
+ active: boolean;
+ done: boolean;
+ error: boolean;
+ accent: 'blue' | 'purple' | 'green';
+ result: any;
+ icon: any;
+}) {
+ let borderTextClass = "text-text-dim border-black/10 shadow-sm";
+ let bgTintClass = "bg-transparent";
+
+ if (active) {
+ borderTextClass = accent === 'blue'
+ ? "text-accent-blue border-accent-blue/30 shadow-[0_0_20px_rgba(59,130,246,0.15)]"
+ : accent === 'purple' ? "text-accent-purple border-accent-purple/30 shadow-[0_0_20px_rgba(168,85,247,0.15)]"
+ : "text-accent-green border-accent-green/30 shadow-[0_0_20px_rgba(16,185,129,0.15)]";
+ bgTintClass = accent === 'blue' ? "bg-accent-blue/5" : accent === 'purple' ? "bg-accent-purple/5" : "bg-accent-green/5";
+ } else if (error) {
+ borderTextClass = "text-accent-red border-accent-red/30 shadow-sm";
+ bgTintClass = "bg-accent-red/5";
+ } else if (done) {
+ borderTextClass = "text-accent-green border-accent-green/30 shadow-sm";
+ bgTintClass = "bg-accent-green/5";
+ }
+
+ return (
+
+
+ {/* Active Flow Animation */}
+ {(isTranslating || isSynthesizing) && (
+
+
+
+
+
+
+
+ );
+}
diff --git a/mofa-frontend/src/studio/Studio.tsx b/mofa-frontend/src/studio/Studio.tsx
new file mode 100644
index 0000000..5739cff
--- /dev/null
+++ b/mofa-frontend/src/studio/Studio.tsx
@@ -0,0 +1,60 @@
+import React, { useEffect } from 'react';
+import { AnimatePresence } from 'framer-motion';
+import { usePipeline } from './usePipeline';
+import { ComposeView } from './compose/ComposeView';
+import { TheaterView } from './theater/TheaterView';
+import { ResultView } from './result/ResultView';
+import { useHistory } from '../storage/useHistory';
+import { useSettings } from '../storage/useSettings';
+import { playChime } from '../lib/audio';
+
+export function Studio() {
+ const { phase, start, reset, retryTts, loadPhase } = usePipeline();
+ const { saveToHistory } = useHistory();
+ const { settings } = useSettings();
+
+ useEffect(() => {
+ if (phase.status === 'done') {
+ saveToHistory(phase);
+ if (settings.soundEnabled && !settings.reducedMotion) {
+ playChime();
+ }
+ }
+ }, [phase, saveToHistory, settings.soundEnabled, settings.reducedMotion]);
+
+ useEffect(() => {
+ const handleLoad = (e: any) => loadPhase(e.detail);
+ document.addEventListener('load-history-phase', handleLoad);
+ return () => document.removeEventListener('load-history-phase', handleLoad);
+ }, [loadPhase]);
+
+ useEffect(() => {
+ if (phase.status === 'idle') {
+ document.title = 'MoFA FM — Local AI Podcast Studio';
+ } else if (phase.status === 'done') {
+ document.title = '✓ Ready — MoFA FM';
+ } else if (phase.status === 'error') {
+ document.title = 'Error — MoFA FM';
+ } else {
+ document.title = '⚡ Generating... — MoFA FM';
+ }
+ }, [phase.status]);
+
+ return (
+
+
+
+ {/* Ring animation if active */}
+ {active && (
+
+
+ )}
+ {error && (
+
+
+ )}
+
+
+
+
+ {active && title === 'TTS Audio' ? (
+
+
+ {[1, 2, 3, 4, 5].map(i => (
+
+ ) : (
+
+
+ {title}
+
+
+
+ {done && result && (
+ <>
+
+
+
+ {result.model ? `${result.model} · ` : ''}{formatMs(result.duration_ms ?? result.durationMs)}
+
+ {result.fallbackUsed && (
+
+ ⚡ Fallback
+
+ )}
+
+ {result.routingReason && (
+
+ Selected via: {result.routingReason.replace(/_/g, ' ')}
+
+ )}
+
+ )}
+ {active && (
+
+ Processing...
+
+ )}
+
+
+
+
+
+
+
+ MoFA Engine Demonstration
+Powered by the MoFA Engine — intelligent local model orchestration, preflight routing, and dynamic memory management.
+
+