init

INSTALL.md

@@ -0,0 +1,169 @@
+# Installation Guide for bolt.new
+
+This guide walks you through setting up and running the bolt.new project locally.
+
+## Prerequisites
+
+- **Node.js**: Version 18.18.0 or higher (tested with v22.17.1)
+- **pnpm**: Package manager (will be installed if not present)
+
+## Installation Steps
+
+### 1. Install pnpm Package Manager
+
+If you don't have pnpm installed, run:
+
+```bash
+curl -fsSL https://get.pnpm.io/install.sh | sh -
+```
+
+Then reload your shell configuration:
+
+```bash
+source ~/.bashrc
+```
+
+Verify pnpm installation:
+
+```bash
+pnpm --version
+```
+
+### 2. Install Project Dependencies
+
+Navigate to the project directory and install dependencies:
+
+```bash
+cd /path/to/bolt.new
+pnpm install
+```
+
+This will install over 1000 packages including:
+- Remix framework for full-stack React development
+- Vite for build tooling
+- OpenAI SDK for GPT-4o integration
+- WebContainer API for in-browser development environment
+- CodeMirror for code editing
+- And many other development tools
+
+### 3. Environment Configuration
+
+Create a `.env.local` file in the project root:
+
+```bash
+# Environment variables for bolt.new development
+# You need to add your OpenAI API key here to use the AI features
+OPENAI_API_KEY=your_openai_api_key_here
+
+# Legacy Anthropic support (optional)
+# ANTHROPIC_API_KEY=your_anthropic_api_key_here
+
+# Optional: Set log level for development
+VITE_LOG_LEVEL=debug
+
+# Optional: Disable persistence if needed
+# VITE_DISABLE_PERSISTENCE=true
+
+# Persistent storage configuration (NEW!)
+BOLT_DATA_DIR=./data
+BOLT_PROJECTS_DIR=./data/projects
+```
+
+**Important**: To use bolt.new's AI features, you'll need an OpenAI API key:
+1. Visit [OpenAI Platform](https://platform.openai.com/)
+2. Create an account and get your API key
+3. Replace `your_openai_api_key_here` with your actual API key
+
+### 4. Start the Development Server
+
+Run the development server:
+
+```bash
+pnpm dev
+```
+
+The application will be available at: **http://localhost:5173/**
+
+## Available Scripts
+
+- `pnpm dev` - Start development server
+- `pnpm build` - Build for production
+- `pnpm start` - Start production server with Wrangler
+- `pnpm test` - Run tests
+- `pnpm test:watch` - Run tests in watch mode
+- `pnpm lint` - Run linting
+- `pnpm lint:fix` - Fix linting issues
+- `pnpm typecheck` - Run TypeScript type checking
+- `pnpm preview` - Build and start production preview
+
+## Project Structure
+
+```
+bolt.new/
+├── app/                    # Main application code
+│   ├── components/         # React components
+│   ├── lib/               # Utility libraries
+│   ├── routes/            # Remix routes
+│   └── styles/            # Stylesheets
+├── functions/             # Cloudflare functions
+├── public/                # Static assets
+├── package.json           # Project dependencies
+├── vite.config.ts         # Vite configuration
+├── wrangler.toml          # Cloudflare Workers configuration
+└── .env.local             # Environment variables (create this)
+```
+
+## Key Features
+
+- **AI-Powered Development**: Integrates with OpenAI's GPT-4o for intelligent code assistance
+- **In-Browser Environment**: Uses WebContainers for full development environment in the browser
+- **Full-Stack Support**: Build and run Node.js applications directly in the browser
+- **Real-time Collaboration**: Share and collaborate on projects via URLs
+- **Deploy Ready**: Built-in deployment capabilities
+- **Persistent Storage**: Save chats and project files to real database and filesystem (see [PERSISTENT_STORAGE.md](./PERSISTENT_STORAGE.md))
+
+## Troubleshooting
+
+### Permission Issues with pnpm Installation
+If you get permission errors when installing pnpm globally with npm, use the installer script instead:
+```bash
+curl -fsSL https://get.pnpm.io/install.sh | sh -
+```
+
+### Missing Dependencies
+If you encounter missing dependencies, try:
+```bash
+pnpm install --frozen-lockfile
+```
+
+### Chrome 129 Issue
+The project includes a workaround for Chrome 129 issues with JavaScript modules. If you encounter problems with Chrome 129, use Chrome Canary for development.
+
+### API Key Issues
+Make sure your OpenAI API key is correctly set in `.env.local`. The AI features won't work without a valid API key.
+
+## Development Notes
+
+- The development server runs on port 5173 by default
+- Hot module replacement is enabled for fast development
+- TypeScript is configured for strict type checking
+- ESLint is set up for code quality
+- The project uses UnoCSS for styling
+
+## Deployment
+
+For production deployment:
+
+1. Build the project:
+   ```bash
+   pnpm build
+   ```
+
+2. Deploy to Cloudflare Pages:
+   ```bash
+   pnpm deploy
+   ```
+
+## Support
+
+For issues and feature requests, check the [Issues section](https://github.com/stackblitz/bolt.new/issues) of the repository.

PERSISTENT_STORAGE.md

@@ -0,0 +1,177 @@
+# Persistent Storage System for bolt.new
+
+This system adds persistent storage capabilities to bolt.new, allowing you to save chat conversations and project files to a real database and filesystem.
+
+## Features
+
+- **SQLite Database**: Stores chat conversations with metadata
+- **File System Storage**: Saves all project files to real directories
+- **Auto-save**: Automatically saves chats and files during conversations
+- **Chat Management**: Load, save, and delete complete chat sessions
+- **File Persistence**: All generated files are saved to `./data/projects/{chatId}/`
+
+## Storage Locations
+
+```
+data/
+├── chats.db                    # SQLite database with chat history
+└── projects/
+    ├── {chatId-1}/             # Project files for chat 1
+    │   ├── package.json
+    │   ├── src/
+    │   └── ...
+    └── {chatId-2}/             # Project files for chat 2
+        ├── index.html
+        └── ...
+```
+
+## Configuration
+
+Add these environment variables to your `.env.local`:
+
+```bash
+# Persistent storage configuration
+BOLT_DATA_DIR=./data
+BOLT_PROJECTS_DIR=./data/projects
+```
+
+## API Endpoints
+
+### `POST /api/storage`
+
+Handle various storage operations:
+
+**Save Chat:**
+```json
+{
+  "action": "saveChat",
+  "id": "optional-existing-chat-id",
+  "title": "My Chat Title",
+  "messages": [...],
+  "files": {...}
+}
+```
+
+**Load Chat:**
+```json
+{
+  "action": "loadChat",
+  "id": "chat-id"
+}
+```
+
+**Get All Chats:**
+```json
+{
+  "action": "getAllChats"
+}
+```
+
+**Save Files:**
+```json
+{
+  "action": "saveFiles",
+  "chatId": "chat-id",
+  "files": {...}
+}
+```
+
+## Usage Examples
+
+### Auto-saving in Components
+
+```tsx
+import { usePersistentChat } from '~/lib/storage/usePersistentChat';
+
+function ChatComponent() {
+  const { messages } = useChat();
+  const {
+    saveCurrentChat,
+    autoSaveEnabled,
+    setAutoSaveEnabled,
+    saving
+  } = usePersistentChat(messages);
+
+  return (
+    <div>
+      <label>
+        <input
+          type="checkbox"
+          checked={autoSaveEnabled}
+          onChange={(e) => setAutoSaveEnabled(e.target.checked)}
+        />
+        Auto-save enabled
+      </label>
+
+      <button onClick={() => saveCurrentChat('My Custom Title')}>
+        Save Chat {saving && '(Saving...)'}
+      </button>
+    </div>
+  );
+}
+```
+
+### Manual Storage Operations
+
+```tsx
+import { persistentStorage } from '~/lib/storage/persistent-storage.client';
+
+// Save a chat
+const chatId = await persistentStorage.saveChat(
+  null, // null for new chat, existing ID for update
+  'Chat Title',
+  messages,
+  projectFiles
+);
+
+// Load a chat
+const { chat, files } = await persistentStorage.loadChat(chatId);
+
+// Get all saved chats
+const allChats = await persistentStorage.getAllChats();
+```
+
+## Database Schema
+
+### `chats` table
+- `id` - Unique chat identifier (UUID)
+- `title` - Human-readable chat title
+- `messages` - JSON string of chat messages
+- `created_at` - Creation timestamp
+- `updated_at` - Last update timestamp
+- `project_path` - Path to associated project files
+
+### `project_files` table
+- `id` - Unique file identifier (UUID)
+- `chat_id` - Foreign key to chats table
+- `file_path` - Relative path of the file
+- `content` - File content
+- `created_at` - Creation timestamp
+- `updated_at` - Last update timestamp
+
+## File System Structure
+
+Each chat gets its own directory in `./data/projects/{chatId}/` containing all generated project files. This allows you to:
+
+1. **Open projects in your IDE**: Navigate to the project directory and open it
+2. **Run projects locally**: Use the saved files to run the project outside of bolt.new
+3. **Version control**: Initialize git repos in project directories
+4. **Share projects**: Copy or zip entire project directories
+
+## Benefits
+
+1. **True Persistence**: Data survives browser refreshes and computer restarts
+2. **Real File Access**: Generated code is saved as real files you can edit
+3. **Database Storage**: Chat history stored in SQLite for querying and analysis
+4. **Auto-save**: Never lose work due to crashes or mistakes
+5. **Export/Import**: Easy to backup and restore entire conversations and projects
+
+## Installation
+
+The system is automatically available once you've installed the dependencies:
+
+```bash
+pnpm add better-sqlite3 @types/better-sqlite3 fs-extra @types/fs-extra uuid @types/uuid
+```
+
+The database and file storage directories are created automatically when first accessed.

app/components/header/Header.tsx

@@ -4,6 +4,7 @@ import { chatStore } from '~/lib/stores/chat';
 import { classNames } from '~/utils/classNames';
 import { HeaderActionButtons } from './HeaderActionButtons.client';
 import { ChatDescription } from '~/lib/persistence/ChatDescription.client';
+// import { PersistentStorageControls } from '~/components/storage/PersistentStorageControls';
 
 export function Header() {
   const chat = useStore(chatStore);

app/components/sidebar/Menu.client.tsx

@@ -1,10 +1,13 @@
 import { motion, type Variants } from 'framer-motion';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { toast } from 'react-toastify';
+import { useStore } from '@nanostores/react';
 import { Dialog, DialogButton, DialogDescription, DialogRoot, DialogTitle } from '~/components/ui/Dialog';
 import { IconButton } from '~/components/ui/IconButton';
 import { ThemeSwitch } from '~/components/ui/ThemeSwitch';
 import { db, deleteById, getAll, chatId, type ChatHistoryItem } from '~/lib/persistence';
+// import { PersistentStorageControls } from '~/components/storage/PersistentStorageControls';
+import { chatStore } from '~/lib/stores/chat';
 import { cubicEasingFn } from '~/utils/easings';
 import { logger } from '~/utils/logger';
 import { HistoryItem } from './HistoryItem';
@@ -118,6 +121,12 @@ export function Menu() {
             Start new chat
           </a>
         </div>
+        {/* Temporary disabled persistent storage
+        <div className="p-4 border-b border-bolt-elements-borderColor">
+          <div className="text-bolt-elements-textPrimary font-medium mb-2">Persistent Storage</div>
+          <PersistentStorageControls messages={[]} className="text-xs" />
+        </div>
+        */}
         <div className="text-bolt-elements-textPrimary font-medium pl-6 pr-5 my-2">Your Chats</div>
         <div className="flex-1 overflow-scroll pl-4 pr-5 pb-5">
           {list.length === 0 && <div className="pl-2 text-bolt-elements-textTertiary">No previous conversations</div>}