What's new

Changelog

Every release on FrontendX, from the unified AI assistant to the deploy pipeline underneath it. Newest first.

12releases
3feature drops
Aug 11, 2026latest
Aug 11, 2026NewLatest

Unified AI Assistant for Every Surface

One AI, everywhere
  • Unified AI configuration module shared by the landing assistant, DSA helper, playground host, and UI problem tutor. One provider-profile selector, one model picker, one thinking-level control across every surface.
  • Shared chat shell with a consistent composer, conversation log, streaming SSE adapter, and history persistence. A conversation started on the landing page behaves identically inside a problem workspace.
  • Enabled in production with the platform provider (DeepSeek V4 Flash and V4 Pro, plus Auto routing) and 10,000 free tokens for new accounts.
  • Bring-your-own-key support for OpenAI, Anthropic, Gemini, Groq, NVIDIA NIM, Moonshot, Z.AI, and more, with per-provider model discovery.
Agent UI
  • Rebuilt composer with model and thinking selectors, queued-prompt handling, selection tools, and asset previews.
  • Conversation log with streaming text, active tool-call indicators, copy, edit, and regenerate actions.
  • Scenario adapters for DSA, playground, UI problems, and general chat that share one message harness.
  • Session history stored locally per surface with resume support via ?chat= deep links.
Aug 10, 2026New

Browser Audio Tools: Free TTS and Speech-to-Text

100% local, no API keys
  • Free text-to-speech and speech-to-text utilities that run entirely in the browser. Model inference and microphone or file processing never leave the device.
  • Lazy model loading with WebGPU first and a WASM fallback, plus an explicit first-download state with progress.
  • Versioned first-party audio model bundles on the CDN (cdn/audio/<model>/v1) with a manifest, Cache API persistence, and scoped sync.
  • Voice cloning requires explicit permission acknowledgement with educational-use, consent, anti-impersonation, disclosure, and applicable-law warnings.
  • Exposed to AI chat through WebMCP runtime bridges that enforce model-download readiness and keep audio local.
Aug 7, 2026Improved

Local Auth and Content Endpoints

  • Completed local authentication flows for development: sign-in, callback, and session handling work against the local API worker without remote dependencies.
  • Content endpoints available locally so the admin studio, notes, submissions, and dashboard can read and write problem and article content in dev.
  • Deployment verification now covers the authenticated composer path and the unauthenticated AI sign-in gate.
Aug 6, 2026Architecture

TanStack Start Consolidation

  • Consolidated the remaining Next.js-era application routes onto the TanStack Start and Vite codebase.
  • Prerendered HTML, route data, JavaScript, and CSS synchronized from dist/client to R2 with the SSG-first architecture.
  • Static pages served from R2 and cached at the edge while client-side navigation keeps the SPA experience.
Aug 5, 2026Improved

Navigator Authoring and Hydration Stability

  • Stabilized problem tab hydration so editor, preview, and console panes restore reliably on navigation and reload.
  • Shipped navigator authoring: searchable problem navigation across playlists with predictable hydration.
  • Deployed SSG artifacts are now tested before release, and the deployment workflow documentation was hardened.
Aug 2, 2026Architecture

Gated Production Deploys and SPA Reliability

Deploy pipeline
  • Every deploy now runs a 5-stage pipeline: local dev browser tests, production build, SSG preview tests, deploy, then production browser tests against frontendx.dev.
  • Deployment is gated on the built SPA: blank frames, hydration stability, and route persistence are checked before anything ships.
  • Resumable R2 migration uploads with cache invalidation after resumed syncs.
  • Isolated deployment dev server and serialized browser checks so parallel deploys cannot interfere.
  • Build tests run from the generated worker config and the deploy pipeline web root is resolved explicitly.
SPA problem flow
  • Problem header navigation now routes through the SPA instead of full page loads.
  • Problem data is preserved across route remounts, and the workspace (editor, console, layout) is retained while routes load.
  • Problem lifecycle and workspace sync are preserved across client-side navigation.
Jul 9, 2026Fixed

SSG and R2 Sync Reliability

  • Pinned the SSG buildId so stale asset references can be detected and pruned safely.
  • Added safe R2 orphan cleanup and fixed the SSG sync so unchanged files are actually skipped.
  • Excluded out-of-tree API dependencies from the worker build (strip-d1-deps).
  • Fixed 9 production build failures, duplicate response headers, and a deploy hang.
Jul 7, 2026Improved

System Design Library Refactor

  • Extracted shared article components (ArticleHero, Section, InlineCode, CodeBlock, CodeCard, PrevNext, callouts) and rolled them out across the system-design article library.
  • Resolved TypeScript errors across 30+ articles including whiteboarding, RBAC, QR login, PWA, Google Maps, analytics dashboards, and bit-manipulation guides.
  • Fixed the playground Cloudflare Workers deploy with correct assets SPA handling and no redirect loops.
Mar 21, 2026Architecture

SSG-First / Worker Bundle Optimization

Architecture
  • SSG-SPA policy enforced - App is strictly static-first (as close to SPA as possible). Worker only executes API routes; all interactive UI is client-side.
  • New 3-file pattern for client-heavy pages: page.tsx (server, force-static) to *Loader.tsx ("use client", dynamic ssr:false) to *Client.tsx (all interactive content). Removes page dependencies from the worker SSR bundle.
  • next/dynamic with ssr: false is only valid inside Client Components - Server Components must delegate to a client loader file first.
Worker Bundle Reductions
  • Landing page - LandingPageLoader.tsx added; LandingPage (HeroUI + framer-motion) no longer SSR'd.
  • Account page - Extracted to AccountClient.tsx + AccountLoader.tsx; was a 67.4 KiB SSR chunk, now fully client-side.
  • My Solutions page - Extracted to MySolutionsClient.tsx + MySolutionsLoader.tsx.
  • Pricing page - PricingLoader.tsx added; PricingContent (HeroUI Button/Card/Chip) no longer SSR'd. Removed ~143 KiB of HeroUI chunks from the worker.
  • Paths page - PathsLoader.tsx added; PathsContent (framer-motion) no longer SSR'd.
  • Problems page - ProblemsLoader.tsx added; ProblemsPageClient no longer SSR'd (props passed through loader).
  • Playlist pages - PlaylistPageClient now lazy-loads the navigation header (ssr: false), removing framer-motion from all 8 playlist page SSR bundles.
  • Blog post pages - BlogClientShell.tsx added; Header (framer-motion) and BlogTOCDialog (HeroUI) lazy-loaded client-side instead of SSR'd.
  • Total worker bundle reduction: ~3.392 MiB to ~2.95 MiB (targeting the sub-2.9 MiB free-plan limit).
Mar 21, 2026Improved

UI Runtime Stabilization, Playlist Context, View Transitions, and Ship Analysis

UI Test Runner Fixes
  • Fixed UI srcdoc runtime breakages caused by malformed ui_test_fn snippets.
  • Hardened the iframe harness to compile test functions safely per-case and report errors without crashing the whole run.
  • Added streaming test progress updates so results appear incrementally during execution.
  • Added a watchdog timeout to prevent an indefinite Running tests... state when no iframe result message arrives.
Run/Submit UX
  • Submit is now gated behind a successful Run (visible tests must pass first).
  • Added toast feedback when Submit is blocked.
  • Run/Submit now auto-focus test results on mobile UI/DSA layouts.
  • Run/Submit now force a results-capable IDE layout when result panes are hidden in focus mode.
Playlist-Scoped Navigation
  • Fixed the problem picker/sidebar scope for from=<playlist> context so it only shows playlist problems.
  • Prev/next navigation now respects playlist scope (including ui-75, top-150, top-100, blind-75, dp-*, backtracking).
  • Applied scoped behavior to UILayout and QuizLayout for consistency with DSA behavior.
Problem Picker Drawer Redesign
  • Rebuilt the picker sidebar with spring motion (framer-motion) and squircle panel geometry with margins.
  • Added backdrop blur and click-to-dismiss behavior.
  • Added keyboard Escape close and a focus trap for accessibility (role="dialog", aria-modal, managed focus cycle).
View Transition Reliability
  • Removed reliance on the React Canary-only <ViewTransition /> API.
  • Implemented stable browser View Transitions (document.startViewTransition) for header links and playlist-to-problem navigation.
  • Normalized transition names (problem-header-shell, problem-header-title) and added explicit ::view-transition-* CSS keyframes.
Optimization and Security
  • Enabled additional production optimizations (productionBrowserSourceMaps: false, removeConsole, optimizePackageImports).
  • Enabled minification for @frontendxlab/gui tsup output and minified @repo/ui Tailwind build output.
  • Added security scripts: security:deps, security:scan, security:static, security:full.
  • Added a static security scanner script (scripts/security-scan.mjs) with source-focused checks and generated-folder exclusions.
Ship Pipeline
  • Extended the pnpm ship pipeline with a post-deploy bundle analysis step.
  • Added apps/web/scripts/bundle-report.mjs to report client and worker bundle sizes (raw/gzip/brotli).
  • Configured post-deploy analysis as non-blocking so existing deploy behavior is preserved.
Mar 20, 2026New

UI-75 Layout and Optimization Sweep

New Components
  • FileExplorer.tsx - File tree for interactive problems with npm package search and dependency management.
  • MultiFileEditor.tsx - Monaco editor with per-file models, missing import markers, and a tab interface.
  • PreviewPane.tsx - esbuild-wasm iframe preview with runtime error capture via postMessage and ui_test_fn test harness injection.
  • QuizView.tsx - Single/multiple choice and free text with score display and explanations.
  • ResizableColumns.tsx - Draggable column separator for layout splitting.
  • ProblemHeader.tsx - Unified floating squircle header for all problem pages with logo, prev/next, title, level badge, actions, and avatar.
New Layouts
  • UILayout.tsx - 3-pane layout (Explorer, Editor, Preview) upgraded to use ProblemHeader, with a fourth test-results panel when ui_test_fn cases exist.
  • QuizLayout.tsx - 50/50 layout (Description, Quiz) now using ProblemHeader.
UI Test Runner
  • TestCase type extended with ui_test_fn? and description?.
  • When a problem has ui_test_fn cases, UILayout shows Run/Submit in the header; Run executes up to 3 public cases and Submit executes all.
  • Test harness injected into the iframe, runs after DOM settle, and reports via postMessage; results shown in a collapsible console panel.
Boilerplate Flag System
  • BoilerplateFlag type: emptyVanillaJs | emptyReactBoilerplate | emptyReactTsBoilerplate | emptyReactTailwindBoilerplate | emptyReactTailwindMotionBoilerplate.
  • problems/boilerplate/index.ts - registry of UIFile[] per flag so problem markdown can reference a flag instead of embedding files.
  • Parser detects and stores boilerplate_flag on the Problem object.
Mar 19, 2026Improved

Responsive and Problem Types Foundation

  • Responsive layout improvements.
  • Solutions added to several problems.
  • New landing page.
  • 2 new playlists added.
  • Shipping feature (all working).
Building in public
FrontendX is open source. Follow the code, or file a feature request for what you want next.
View on GitHub
© 2026 FrontendX. All rights reserved.