MoFA Podcast Studio -> Frontend

[ashum9]

React + Vite + TailwindCSS frontend for the MoFA Engine. Includes a podcast studio interface, real time observability dashboard, audio waveform player, SSE connection to the engine, and local storage history. All code lives in a new mofa-frontend/ directory zero existing engine files modified.

[Copilot]

Pull request overview

Adds a new mofa-frontend/ React + Vite + TailwindCSS application that acts as a “MoFA FM” podcast studio UI and an observability surface for the MoFA Engine (SSE events, status polling, Grafana embedding), without modifying existing engine code.

Changes:

• Introduces a Vite/React/Tailwind frontend scaffold with shared UI primitives and motion utilities.
• Implements the Studio flow (compose → pipeline execution via /v1/invoke → result playback) plus local-storage settings/history.
• Adds engine connectivity + observability UI (status metrics, event feed, model grid, Grafana dashboards).

Reviewed changes

Copilot reviewed 50 out of 54 changed files in this pull request and generated 8 comments.

Show a summary per file

File	Description
mofa-frontend/vite.config.ts	Vite config (React plugin, @ alias, dev server settings).
mofa-frontend/tsconfig.json	TypeScript compiler configuration for the frontend.
mofa-frontend/src/vite-env.d.ts	Vite client type references.
mofa-frontend/src/studio/usePipeline.ts	Core “chat → tts” orchestration hook invoking the engine and tracking phases.
mofa-frontend/src/studio/useElapsed.ts	Elapsed-time hook used by the Studio UI.
mofa-frontend/src/studio/theater/TheaterView.tsx	“In-progress” theater view: pipeline viz + live events + script panel.
mofa-frontend/src/studio/Studio.tsx	High-level studio state machine and view switching.
mofa-frontend/src/studio/result/ResultView.tsx	Completion view showing pipeline summary and audio player.
mofa-frontend/src/studio/result/AudioPlayer.tsx	WaveSurfer-based audio player with keyboard controls.
mofa-frontend/src/studio/PipelineViz.tsx	Visual pipeline progress/trace component.
mofa-frontend/src/studio/compose/OnboardingBanner.tsx	Dismissible onboarding badge persisted in localStorage.
mofa-frontend/src/studio/compose/ComposeView.tsx	Prompt/article input, sample loader, voice selection, advanced prompt UI.
mofa-frontend/src/storage/useSettings.ts	Local settings persistence hook.
mofa-frontend/src/storage/useHistory.ts	Generation history + draft persistence hooks.
mofa-frontend/src/storage/HistoryDrawer.tsx	UI to browse and reload prior generations.
mofa-frontend/src/shell/TopBar.tsx	Top navigation bar (view switching, history/settings triggers).
mofa-frontend/src/shell/SettingsModal.tsx	Settings modal (engine URL, defaults, reduced motion, clear data).
mofa-frontend/src/shell/CommandPalette.tsx	Command palette overlay with keyboard shortcuts.
mofa-frontend/src/shared/StatusDot.tsx	Small status indicator component for model/provider state.
mofa-frontend/src/shared/Skeleton.tsx	Skeleton loading primitive.
mofa-frontend/src/shared/Card.tsx	Card primitive (motion-enabled).
mofa-frontend/src/shared/Button.tsx	Button primitive (motion-enabled).
mofa-frontend/src/shared/Badge.tsx	Capability/variant badge primitive.
mofa-frontend/src/observability/ObservabilityView.tsx	Grafana-backed dashboard embedding UI with availability checks.
mofa-frontend/src/observability/MetricsStrip.tsx	Live metrics strip derived from status + SSE.
mofa-frontend/src/monitor/ProviderHealth.tsx	Provider health/circuit-state panel.
mofa-frontend/src/monitor/PreflightIndicator.tsx	Prewarming/eviction indicator driven by SSE + status polling.
mofa-frontend/src/monitor/MonitorSidebar.tsx	Right-side engine monitor sidebar layout.
mofa-frontend/src/monitor/ModelGrid.tsx	Active model list panel.
mofa-frontend/src/monitor/MemoryGauge.tsx	Memory usage gauge driven by SSE + status polling.
mofa-frontend/src/monitor/EventFeed.tsx	Live event feed rendering SSE events.
mofa-frontend/src/main.tsx	React entrypoint + React Query provider.
mofa-frontend/src/lib/utils.ts	Utility helpers (cn, formatMs).
mofa-frontend/src/lib/motion.ts	Shared Framer Motion variants.
mofa-frontend/src/lib/audio.ts	Simple completion “chime” helper.
mofa-frontend/src/index.css	Tailwind v4 theme tokens and base styles.
mofa-frontend/src/errors/InlineError.tsx	Inline error panel with auto-retry and copyable snippets.
mofa-frontend/src/errors/errorCatalog.ts	Error descriptor catalog and mapping function.
mofa-frontend/src/errors/EngineOffline.tsx	Full-screen “engine offline” overlay.
mofa-frontend/src/engine/useEngineStatus.ts	React Query hook for /v1/status.
mofa-frontend/src/engine/useEngineConnection.ts	React Query hook for /health connection state.
mofa-frontend/src/engine/types.ts	Frontend engine API types and unions.
mofa-frontend/src/engine/index.ts	Engine client singleton + stored URL management hook.
mofa-frontend/src/engine/client.ts	Real HTTP + SSE client implementation.
mofa-frontend/src/App.tsx	App shell, routing between studio/observability, overlays, error boundary.
mofa-frontend/README.md	Frontend overview + quick start + mock/real engine notes.
mofa-frontend/public/favicon.svg	Frontend favicon asset.
mofa-frontend/postcss.config.mjs	PostCSS config for Tailwind.
mofa-frontend/package.json	Frontend dependencies and scripts.
mofa-frontend/index.html	HTML entry document.
mofa-frontend/eslint.config.js	ESLint configuration (TS + hooks + refresh).
mofa-frontend/.gitignore	Frontend gitignore.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.