New Frontend Architecture Launch

We're excited to announce the launch of our completely rebuilt frontend architecture! After months of development, we've evolved from our previous Next.js implementation (sg-web) to a modern, high-performance Next.js 15 application (softgen-platform) that delivers a superior building experience.

🏗️ Modern Architecture Foundation

Next.js 15 with TypeScript

• Full TypeScript Implementation: Complete type safety across all components and API interactions
• App Router Architecture: Upgraded from Pages Router to Next.js 15's latest App Router for optimal performance
• Enhanced Server-Side Rendering: Improved SSR implementation for faster initial page loads
• Turbopack Integration: Lightning-fast development builds and hot reload

State Management & Performance

• Zustand State Management: Lightweight, modern state management replacing previous state management approach
• React Query Integration: Optimized data fetching with intelligent caching and background updates
• Component Lazy Loading: Enhanced dynamic imports for faster initial page loads
• Optimized Bundle Splitting: Reduced JavaScript bundle sizes for better performance

🎨 Enhanced Builder UI Experience

Resizable Panel System

• Advanced Layout Controls: New resizable panel system with persistent layout preferences
• Intelligent Panel Management: Automatic panel sizing based on content and user behavior
• Responsive Design: Seamless experience across desktop, tablet, and mobile devices

Improved Code Editor Integration

• Enhanced File Navigation: Streamlined file tree with better search and filtering capabilities
• Context-Aware Editing: Improved file context management with visual indicators
• Better Syntax Highlighting: Enhanced code highlighting with more language support

Modern UI Components

• shadcn/ui Component Library: Consistent, accessible UI components throughout the platform
• Enhanced Message System: Redesigned chat interface with improved threading and history
• Advanced Form Controls: Better form validation, error handling, and user feedback
• Improved Loading States: Skeleton loaders and progressive loading for better perceived performance

🚀 Performance Improvements

Speed Enhancements

• Faster Initial Load: Optimized bundling and code splitting
• Reduced Memory Usage: More efficient component lifecycle management
• Better Caching Strategies: Intelligent browser and API response caching
• Smoother Animations: Hardware-accelerated transitions and interactions

Developer Experience

• Better Error Boundaries: More informative error messages and recovery options
• Enhanced Debugging: Improved development tools integration

🎯 Builder-Focused Enhancements

Project Management

• Streamlined Project Creation: Simplified onboarding flow with better template selection
• Enhanced Project Settings: More intuitive project configuration with real-time validation
• Improved File Upload: Drag-and-drop file handling with progress indicators
• Better Preview System: Enhanced live preview with faster refresh rates

Thread & Messaging

• Advanced Message Input: Enhanced text input with better file attachment handling
• Improved Thread History: Better conversation management with search and filtering
• Context Indicators: Visual feedback for AI context usage and optimization suggestions
• Message Threading: Better conversation organization and navigation

Mobile Experience

• Responsive Design: Fully optimized mobile interface with touch-first interactions
• Mobile Code Editor: Improved mobile code editing experience
• Adaptive Navigation: Context-aware navigation that adapts to screen size
• Touch Gestures: Native mobile gestures for better usability

🔧 Technical Improvements

Code Quality & Maintainability

• 100% TypeScript Coverage: Full type safety across the entire codebase
• ESLint & Prettier: Consistent code formatting and quality standards
• Component Testing: Comprehensive test coverage for UI components
• Accessibility Compliance: WCAG 2.1 AA compliance across all interfaces

API Integration

• Optimized API Calls: Reduced API requests through intelligent caching
• Better Error Handling: More resilient error recovery and user feedback
• WebSocket Improvements: Enhanced real-time communication reliability
• Rate Limiting Awareness: Built-in handling for API rate limits

📱 Cross-Platform Compatibility

• Browser Optimization: Enhanced compatibility with all modern browsers
• Progressive Web App: Improved PWA capabilities for better mobile experience
• Offline Support: Basic offline functionality for better reliability
• Cross-Device Sync: Seamless experience across multiple devices

🔄 Migration & Compatibility

The new frontend maintains full compatibility with all existing projects and workflows. All your current projects, settings, and integrations will continue to work seamlessly with the new interface.

🚀 What's Next

This new frontend architecture serves as the foundation for upcoming features including enhanced collaboration tools, advanced debugging capabilities, and expanded deployment options.

The new frontend is now live for all users. We're committed to continuously improving your building experience based on your feedback and usage patterns.

Context Window Indicator

Keep your AI interactions running smoothly with our new context window indicator! This feature helps you maintain optimal performance by providing real-time feedback on your context window usage.

Stay aware of your AI context usage with a simple, color-coded indicator:

File Context Management in Softgen

We're excited to introduce our new File Context Management system, giving you complete control over which files are included in your AI assistant's context.

What's new with File Context Management?

• Selective File Context: Choose exactly which files you want to include in your AI's context
• Token Optimization: Close unnecessary files to reduce token usage and improve performance
• Bulk Operations: Open or close multiple files at once with our new bulk management tools
• Smart Search: Quickly find and add files to your context with our intelligent file search

Take control of your workspace context and optimize your AI interactions by managing which files are included in each conversation.

How to use

The new File Context Management system is available in the Agent Settings modal. You can:

1. View all currently open files in your context
2. Select and close files you don't need
3. Search and add new files to your context
4. Manage multiple files at once with bulk operations

Looking ahead, we're working on more advanced context management features—stay tuned for updates.

Sonnet 4 Is Now Supported in Softgen

We're excited to announce full support for Sonnet 4, the latest Claude model from Anthropic, now integrated into our builder agent.

What's new with Sonnet 4?

• Much faster completions, even in complex threads
• Longer context handling, perfect for deep conversations
• Better intent understanding and fewer off-topic replies
• Secure by design, with Softgen's existing privacy guardrails intact

Expect faster responses, deeper understanding of long context, and improved accuracy across all assistant workflows.

Available now

Sonnet 4 is the new default for all chats and builder agent interactions. No configuration needed—just ask away.

Looking ahead, we're exploring model mixing and fine-tuning—stay tuned.

Plan Mode

Take the driver's seat in your project planning with our new Plan Mode!

• Strategic Planning: Perfect for early project stages and architecture decisions
• Decision Support: Evaluate technology choices and compare approaches
• No Code Implementation: Focus on planning without immediate code changes
• Documentation: Create a reference for your project's strategic decisions
• Team Alignment: Ensure everyone understands the project vision

When to Use Plan Mode

Plan Mode is ideal for:

• Early project requirements and scope definition
• Architecture and technology decisions
• Feature prioritization and planning
• Workflow and system interaction design

Switching to Implementation

When you're ready to bring your plans to life:

1. Switch to Creative Mode for new file creation
2. Use Standard Mode for modifying existing files

Plan Mode helps you establish a clear direction before writing any code, preventing costly pivots and ensuring efficient implementation.

Custom Prompts in Settings

You can now manage prompts directly in Project Settings!

• Add, edit, and delete your own prompts
• Quickly use saved prompts in your workflow
• Browse curated example prompts
• Everything syncs instantly

A faster, smarter way to manage and reuse prompts across your projects.

Creative Mode

Writing flows best when you’re in the zone. Creative Mode gives you:

• A minimalist toolbar—all the essentials, nothing that distracts
• Full-screen editing so you can focus on words, not UI
• Auto-save snapshots to let you wander off script without losing work
• Typewriter scroll that keeps your current line centered and calm

Toggle Creative Mode anytime with ⌘ M on Mac or Ctrl M on Windows.
Dive into your next brainstorm in a beautifully uncluttered space.