@siteboon/claude-code-ui 1.8.2

package/README.md

@@ -0,0 +1,275 @@
+<div align="center">
+  <img src="public/logo.svg" alt="Claude Code UI" width="64" height="64">
+  <h1>Claude Code UI</h1>
+</div>
+
+
+A desktop and mobile UI for [Claude Code](https://docs.anthropic.com/en/docs/claude-code), and [Cursor CLI](https://docs.cursor.com/en/cli/overview). You can use it locally or remotely to view your active projects and sessions in Claude Code or Cursor and make changes to them from everywhere (mobile or desktop). This gives you a proper interface that works everywhere. Supports models including **Claude Sonnet 4**, **Opus 4.1**, and **GPT-5**
+
+## Screenshots
+
+<div align="center">
+  
+<table>
+<tr>
+<td align="center">
+<h3>Desktop View</h3>
+<img src="public/screenshots/desktop-main.png" alt="Desktop Interface" width="400">
+<br>
+<em>Main interface showing project overview and chat</em>
+</td>
+<td align="center">
+<h3>Mobile Experience</h3>
+<img src="public/screenshots/mobile-chat.png" alt="Mobile Interface" width="250">
+<br>
+<em>Responsive mobile design with touch navigation</em>
+</td>
+</tr>
+<tr>
+<td align="center" colspan="2">
+<h3>CLI Selection</h3>
+<img src="public/screenshots/cli-selection.png" alt="CLI Selection" width="400">
+<br>
+<em>Select between Claude Code and Cursor CLI</em>
+</td>
+</tr>
+</table>
+
+
+
+</div>
+
+## Features
+
+- **Responsive Design** - Works seamlessly across desktop, tablet, and mobile so you can also use Claude Code from mobile 
+- **Interactive Chat Interface** - Built-in chat interface for seamless communication with Claude Code or Cursor
+- **Integrated Shell Terminal** - Direct access to Claude Code or Cursor CLI through built-in shell functionality
+- **File Explorer** - Interactive file tree with syntax highlighting and live editing
+- **Git Explorer** - View, stage and commit your changes. You can also switch branches 
+- **Session Management** - Resume conversations, manage multiple sessions, and track history
+- **TaskMaster AI Integration** *(Optional)* - Advanced project management with AI-powered task planning, PRD parsing, and workflow automation
+- **Model Compatibility** - Works with Claude Sonnet 4, Opus 4.1, and GPT-5
+
+
+## Quick Start
+
+### Prerequisites
+
+- [Node.js](https://nodejs.org/) v20 or higher
+- [Claude Code CLI](https://docs.anthropic.com/en/docs/claude-code) installed and configured, and/or
+- [Cursor CLI](https://docs.cursor.com/en/cli/overview) installed and configured
+
+### Installation
+
+1. **Clone the repository:**
+```bash
+git clone https://github.com/siteboon/claudecodeui.git
+cd claudecodeui
+```
+
+2. **Install dependencies:**
+```bash
+npm install
+```
+
+3. **Configure environment:**
+```bash
+cp .env.example .env
+# Edit .env with your preferred settings
+```
+
+4. **Start the application:**
+```bash
+# Development mode (with hot reload)
+npm run dev
+
+```
+The application will start at the port you specified in your .env
+
+5. **Open your browser:**
+   - Development: `http://localhost:3001`
+
+## Security & Tools Configuration
+
+**🔒 Important Notice**: All Claude Code tools are **disabled by default**. This prevents potentially harmful operations from running automatically.
+
+### Enabling Tools
+
+To use Claude Code's full functionality, you'll need to manually enable tools:
+
+1. **Open Tools Settings** - Click the gear icon in the sidebar
+3. **Enable Selectively** - Turn on only the tools you need
+4. **Apply Settings** - Your preferences are saved locally
+
+<div align="center">
+
+![Tools Settings Modal](public/screenshots/tools-modal.png)
+*Tools Settings interface - enable only what you need*
+
+</div>
+
+**Recommended approach**: Start with basic tools enabled and add more as needed. You can always adjust these settings later.
+
+## TaskMaster AI Integration *(Optional)*
+
+Claude Code UI supports **[TaskMaster AI](https://github.com/eyaltoledano/claude-task-master)** (aka claude-task-master) integration for advanced project management and AI-powered task planning.
+
+It provides
+- AI-powered task generation from PRDs (Product Requirements Documents)
+- Smart task breakdown and dependency management  
+- Visual task boards and progress tracking
+
+**Setup & Documentation**: Visit the [TaskMaster AI GitHub repository](https://github.com/eyaltoledano/claude-task-master) for installation instructions, configuration guides, and usage examples.
+After installing it you should be able to enable it from the Settings
+
+
+## Usage Guide
+
+### Core Features
+
+#### Project Management
+The UI automatically discovers Claude Code projects from `~/.claude/projects/` and provides:
+- **Visual Project Browser** - All available projects with metadata and session counts
+- **Project Actions** - Rename, delete, and organize projects
+- **Smart Navigation** - Quick access to recent projects and sessions
+- **MCP support** - Add your own MCP servers through the UI 
+
+#### Chat Interface
+- **Use responsive chat or Claude Code/Cursor CLI** - You can either use the adapted chat interface or use the shell button to connect to your selected CLI. 
+- **Real-time Communication** - Stream responses from Claude with WebSocket connection
+- **Session Management** - Resume previous conversations or start fresh sessions
+- **Message History** - Complete conversation history with timestamps and metadata
+- **Multi-format Support** - Text, code blocks, and file references
+
+#### File Explorer & Editor
+- **Interactive File Tree** - Browse project structure with expand/collapse navigation
+- **Live File Editing** - Read, modify, and save files directly in the interface
+- **Syntax Highlighting** - Support for multiple programming languages
+- **File Operations** - Create, rename, delete files and directories
+
+#### Git Explorer
+
+
+#### TaskMaster AI Integration *(Optional)*
+- **Visual Task Board** - Kanban-style interface for managing development tasks
+- **PRD Parser** - Create Product Requirements Documents and parse them into structured tasks
+- **Progress Tracking** - Real-time status updates and completion tracking
+
+#### Session Management
+- **Session Persistence** - All conversations automatically saved
+- **Session Organization** - Group sessions by project and timestamp
+- **Session Actions** - Rename, delete, and export conversation history
+- **Cross-device Sync** - Access sessions from any device
+
+### Mobile App
+- **Responsive Design** - Optimized for all screen sizes
+- **Touch-friendly Interface** - Swipe gestures and touch navigation
+- **Mobile Navigation** - Bottom tab bar for easy thumb navigation
+- **Adaptive Layout** - Collapsible sidebar and smart content prioritization
+- **Add shortcut to Home Screen** - Add a shortcut to your home screen and the app will behave like a PWA
+
+## Architecture
+
+### System Overview
+
+```
+┌─────────────────┐    ┌─────────────────┐    ┌─────────────────┐
+│   Frontend      │    │   Backend       │    │  Claude CLI     │
+│   (React/Vite)  │◄──►│ (Express/WS)    │◄──►│  Integration    │
+└─────────────────┘    └─────────────────┘    └─────────────────┘
+```
+
+### Backend (Node.js + Express)
+- **Express Server** - RESTful API with static file serving
+- **WebSocket Server** - Communication for chats and project refresh
+- **CLI Integration (Claude Code / Cursor)** - Process spawning and management
+- **Session Management** - JSONL parsing and conversation persistence
+- **File System API** - Exposing file browser for projects
+
+### Frontend (React + Vite)
+- **React 18** - Modern component architecture with hooks
+- **CodeMirror** - Advanced code editor with syntax highlighting
+
+
+
+
+
+### Contributing
+
+We welcome contributions! Please follow these guidelines:
+
+#### Getting Started
+1. **Fork** the repository
+2. **Clone** your fork: `git clone <your-fork-url>`
+3. **Install** dependencies: `npm install`
+4. **Create** a feature branch: `git checkout -b feature/amazing-feature`
+
+#### Development Process
+1. **Make your changes** following the existing code style
+2. **Test thoroughly** - ensure all features work correctly
+3. **Run quality checks**: `npm run lint && npm run format`
+4. **Commit** with descriptive messages following [Conventional Commits](https://conventionalcommits.org/)
+5. **Push** to your branch: `git push origin feature/amazing-feature`
+6. **Submit** a Pull Request with:
+   - Clear description of changes
+   - Screenshots for UI changes
+   - Test results if applicable
+
+#### What to Contribute
+- **Bug fixes** - Help us improve stability
+- **New features** - Enhance functionality (discuss in issues first)
+- **Documentation** - Improve guides and API docs
+- **UI/UX improvements** - Better user experience
+- **Performance optimizations** - Make it faster
+
+## Troubleshooting
+
+### Common Issues & Solutions
+
+#### "No Claude projects found"
+**Problem**: The UI shows no projects or empty project list
+**Solutions**:
+- Ensure [Claude CLI](https://docs.anthropic.com/en/docs/claude-code) is properly installed
+- Run `claude` command in at least one project directory to initialize
+- Verify `~/.claude/projects/` directory exists and has proper permissions
+d
+
+#### File Explorer Issues
+**Problem**: Files not loading, permission errors, empty directories
+**Solutions**:
+- Check project directory permissions (`ls -la` in terminal)
+- Verify the project path exists and is accessible
+- Review server console logs for detailed error messages
+- Ensure you're not trying to access system directories outside project scope
+
+
+## License
+
+GNU General Public License v3.0 - see [LICENSE](LICENSE) file for details.
+
+This project is open source and free to use, modify, and distribute under the GPL v3 license.
+
+## Acknowledgments
+
+### Built With
+- **[Claude Code](https://docs.anthropic.com/en/docs/claude-code)** - Anthropic's official CLI
+- **[React](https://react.dev/)** - User interface library
+- **[Vite](https://vitejs.dev/)** - Fast build tool and dev server
+- **[Tailwind CSS](https://tailwindcss.com/)** - Utility-first CSS framework
+- **[CodeMirror](https://codemirror.net/)** - Advanced code editor
+- **[TaskMaster AI](https://github.com/eyaltoledano/claude-task-master)** *(Optional)* - AI-powered project management and task planning
+
+## Support & Community
+
+### Stay Updated
+- **Star** this repository to show support
+- **Watch** for updates and new releases
+- **Follow** the project for announcements
+
+### Sponsors
+- [Siteboon - AI powered website builder](https://siteboon.ai)
+---
+
+<div align="center">
+  <strong>Made with care for the Claude Code community.</strong>
+</div>

package/index.html

@@ -0,0 +1,48 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="icon" type="image/png" href="/favicon.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, viewport-fit=cover" />
+    <title>Claude Code UI</title>
+    
+    <!-- PWA Manifest -->
+    <link rel="manifest" href="/manifest.json" />
+    
+    <!-- iOS Safari PWA Meta Tags -->
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+    <meta name="apple-mobile-web-app-title" content="Claude UI" />
+    
+    <!-- iOS Safari Icons -->
+    <link rel="apple-touch-icon" sizes="152x152" href="/icons/icon-152x152.png" />
+    <link rel="apple-touch-icon" sizes="180x180" href="/icons/icon-192x192.png" />
+    
+    <!-- Theme Color -->
+    <meta name="theme-color" content="#ffffff" />
+    <meta name="msapplication-TileColor" content="#ffffff" />
+    
+    <!-- Prevent zoom on iOS -->
+    <meta name="format-detection" content="telephone=no" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+    
+    <!-- Service Worker Registration -->
+    <script>
+      if ('serviceWorker' in navigator) {
+        window.addEventListener('load', () => {
+          navigator.serviceWorker.register('/sw.js')
+            .then(registration => {
+              console.log('SW registered: ', registration);
+            })
+            .catch(registrationError => {
+              console.log('SW registration failed: ', registrationError);
+            });
+        });
+      }
+    </script>
+  </body>
+</html>

package/package.json

@@ -0,0 +1,84 @@
+{
+  "name": "@siteboon/claude-code-ui",
+  "version": "1.8.2",
+  "description": "A web-based UI for Claude Code CLI",
+  "type": "module",
+  "main": "server/index.js",
+  "homepage": "https://claudecodeui.siteboon.ai",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/siteboon/claudecodeui.git"
+  },
+  "bugs": {
+    "url": "https://github.com/siteboon/claudecodeui/issues"
+  },
+  "scripts": {
+    "dev": "concurrently --kill-others \"npm run server\" \"npm run client\"",
+    "server": "node server/index.js",
+    "client": "vite --host",
+    "build": "vite build",
+    "preview": "vite preview",
+    "start": "npm run build && npm run server",
+    "release": "release-it"
+  },
+  "keywords": [
+    "claude coode",
+    "ai",
+    "anthropic",
+    "ui",
+    "mobile"
+  ],
+  "author": "Claude Code UI Contributors",
+  "license": "MIT",
+  "dependencies": {
+    "@codemirror/lang-css": "^6.3.1",
+    "@codemirror/lang-html": "^6.4.9",
+    "@codemirror/lang-javascript": "^6.2.4",
+    "@codemirror/lang-json": "^6.0.1",
+    "@codemirror/lang-markdown": "^6.3.3",
+    "@codemirror/lang-python": "^6.2.1",
+    "@codemirror/theme-one-dark": "^6.1.2",
+    "@tailwindcss/typography": "^0.5.16",
+    "@uiw/react-codemirror": "^4.23.13",
+    "@xterm/addon-clipboard": "^0.1.0",
+    "@xterm/addon-webgl": "^0.18.0",
+    "bcrypt": "^6.0.0",
+    "better-sqlite3": "^12.2.0",
+    "chokidar": "^4.0.3",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cors": "^2.8.5",
+    "cross-spawn": "^7.0.3",
+    "express": "^4.18.2",
+    "jsonwebtoken": "^9.0.2",
+    "lucide-react": "^0.515.0",
+    "mime-types": "^3.0.1",
+    "multer": "^2.0.1",
+    "node-fetch": "^2.7.0",
+    "node-pty": "^1.1.0-beta34",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-dropzone": "^14.2.3",
+    "react-markdown": "^10.1.0",
+    "react-router-dom": "^6.8.1",
+    "sqlite": "^5.1.1",
+    "sqlite3": "^5.1.7",
+    "tailwind-merge": "^3.3.1",
+    "ws": "^8.14.2",
+    "xterm": "^5.3.0",
+    "xterm-addon-fit": "^0.8.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.43",
+    "@types/react-dom": "^18.2.17",
+    "@vitejs/plugin-react": "^4.6.0",
+    "autoprefixer": "^10.4.16",
+    "concurrently": "^8.2.2",
+    "node-gyp": "^10.0.0",
+    "postcss": "^8.4.32",
+    "release-it": "^19.0.5",
+    "sharp": "^0.34.2",
+    "tailwindcss": "^3.4.0",
+    "vite": "^7.0.4"
+  }
+}

package/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

package/public/convert-icons.md

@@ -0,0 +1,53 @@
+# Convert SVG Icons to PNG
+
+I've created SVG versions of the app icons that match the MessageSquare design from the sidebar. To convert them to PNG format, you can use one of these methods:
+
+## Method 1: Online Converter (Easiest)
+1. Go to https://cloudconvert.com/svg-to-png
+2. Upload each SVG file from the `/icons/` directory
+3. Download the PNG versions
+4. Replace the existing PNG files
+
+## Method 2: Using Node.js (if you have it)
+```bash
+npm install sharp
+node -e "
+const sharp = require('sharp');
+const fs = require('fs');
+const sizes = [72, 96, 128, 144, 152, 192, 384, 512];
+sizes.forEach(size => {
+  const svgPath = \`./icons/icon-\${size}x\${size}.svg\`;
+  const pngPath = \`./icons/icon-\${size}x\${size}.png\`;
+  if (fs.existsSync(svgPath)) {
+    sharp(svgPath).png().toFile(pngPath);
+    console.log(\`Converted \${svgPath} to \${pngPath}\`);
+  }
+});
+"
+```
+
+## Method 3: Using ImageMagick (if installed)
+```bash
+cd public/icons
+for size in 72 96 128 144 152 192 384 512; do
+  convert "icon-${size}x${size}.svg" "icon-${size}x${size}.png"
+done
+```
+
+## Method 4: Using Inkscape (if installed)
+```bash
+cd public/icons
+for size in 72 96 128 144 152 192 384 512; do
+  inkscape --export-type=png "icon-${size}x${size}.svg"
+done
+```
+
+## Icon Design
+The new icons feature:
+- Clean MessageSquare (chat bubble) design matching the sidebar
+- Primary color background with rounded corners
+- White stroke icon that's clearly visible
+- Consistent sizing and proportions across all sizes
+- Proper PWA-compliant format
+
+Once converted, the PNG files will replace the existing ones and provide a consistent icon experience across all platforms.

package/public/favicon.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64">
+  <!-- Background fills entire canvas -->
+  <rect x="0" y="0" width="64" height="64" fill="hsl(240 5.9% 10%)"/>
+  
+  <!-- MessageSquare icon - exact same as sidebar -->
+  <g transform="translate(32, 32) scale(1.333) translate(-12, -12)" stroke="white" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
+  </g>
+</svg>

package/public/generate-icons.js

@@ -0,0 +1,49 @@
+const fs = require('fs');
+const path = require('path');
+
+// Icon sizes needed
+const sizes = [72, 96, 128, 144, 152, 192, 384, 512];
+
+// SVG template function
+function createIconSVG(size) {
+  const cornerRadius = Math.round(size * 0.25); // 25% corner radius
+  const strokeWidth = Math.max(2, Math.round(size * 0.06)); // Scale stroke width
+  
+  // MessageSquare path scaled to size
+  const padding = Math.round(size * 0.25);
+  const iconSize = size - (padding * 2);
+  const startX = padding;
+  const startY = Math.round(padding * 0.7);
+  const endX = startX + iconSize;
+  const endY = startY + Math.round(iconSize * 0.6);
+  const tailX = startX;
+  const tailY = endY + Math.round(iconSize * 0.3);
+  
+  return `<svg width="${size}" height="${size}" viewBox="0 0 ${size} ${size}" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <!-- Background with rounded corners -->
+  <rect width="${size}" height="${size}" rx="${cornerRadius}" fill="hsl(262.1 83.3% 57.8%)"/>
+  
+  <!-- MessageSquare icon -->
+  <path d="M${startX} ${startY}C${startX} ${startY - 10} ${startX + 10} ${startY - 20} ${startX + 20} ${startY - 20}H${endX - 20}C${endX - 10} ${startY - 20} ${endX} ${startY - 10} ${endX} ${startY}V${endY - 20}C${endX} ${endY - 10} ${endX - 10} ${endY} ${endX - 20} ${endY}H${startX + Math.round(iconSize * 0.4)}L${tailX} ${tailY}V${startY}Z" 
+        stroke="white" 
+        stroke-width="${strokeWidth}" 
+        stroke-linecap="round" 
+        stroke-linejoin="round" 
+        fill="none"/>
+</svg>`;
+}
+
+// Generate SVG files for each size
+sizes.forEach(size => {
+  const svgContent = createIconSVG(size);
+  const filename = `icon-${size}x${size}.svg`;
+  const filepath = path.join(__dirname, 'icons', filename);
+  
+  fs.writeFileSync(filepath, svgContent);
+  console.log(`Created ${filename}`);
+});
+
+console.log('\nSVG icons created! To convert to PNG, you can use:');
+console.log('1. Online converter like cloudconvert.com');
+console.log('2. If you have ImageMagick: convert icon.svg icon.png');
+console.log('3. If you have Inkscape: inkscape --export-type=png icon.svg');

package/public/icons/claude-ai-icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 512 509.64"><path fill="#D77655" d="M115.612 0h280.775C459.974 0 512 52.026 512 115.612v278.415c0 63.587-52.026 115.612-115.613 115.612H115.612C52.026 509.639 0 457.614 0 394.027V115.612C0 52.026 52.026 0 115.612 0z"/><path fill="#FCF2EE" fill-rule="nonzero" d="M142.27 316.619l73.655-41.326 1.238-3.589-1.238-1.996-3.589-.001-12.31-.759-42.084-1.138-36.498-1.516-35.361-1.896-8.897-1.895-8.34-10.995.859-5.484 7.482-5.03 10.717.935 23.683 1.617 35.537 2.452 25.782 1.517 38.193 3.968h6.064l.86-2.451-2.073-1.517-1.618-1.517-36.776-24.922-39.81-26.338-20.852-15.166-11.273-7.683-5.687-7.204-2.451-15.721 10.237-11.273 13.75.935 3.513.936 13.928 10.716 29.749 23.027 38.848 28.612 5.687 4.727 2.275-1.617.278-1.138-2.553-4.271-21.13-38.193-22.546-38.848-10.035-16.101-2.654-9.655c-.935-3.968-1.617-7.304-1.617-11.374l11.652-15.823 6.445-2.073 15.545 2.073 6.547 5.687 9.655 22.092 15.646 34.78 24.265 47.291 7.103 14.028 3.791 12.992 1.416 3.968 2.449-.001v-2.275l1.997-26.641 3.69-32.707 3.589-42.084 1.239-11.854 5.863-14.206 11.652-7.683 9.099 4.348 7.482 10.716-1.036 6.926-4.449 28.915-8.72 45.294-5.687 30.331h3.313l3.792-3.791 15.342-20.372 25.782-32.227 11.374-12.789 13.27-14.129 8.517-6.724 16.1-.001 11.854 17.617-5.307 18.199-16.581 21.029-13.75 17.819-19.716 26.54-12.309 21.231 1.138 1.694 2.932-.278 44.536-9.479 24.062-4.347 28.714-4.928 12.992 6.066 1.416 6.167-5.106 12.613-30.71 7.583-36.018 7.204-53.636 12.689-.657.48.758.935 24.164 2.275 10.337.556h25.301l47.114 3.514 12.309 8.139 7.381 9.959-1.238 7.583-18.957 9.655-25.579-6.066-59.702-14.205-20.474-5.106-2.83-.001v1.694l17.061 16.682 31.266 28.233 39.152 36.397 1.997 8.999-5.03 7.102-5.307-.758-34.401-25.883-13.27-11.651-30.053-25.302-1.996-.001v2.654l6.926 10.136 36.574 54.975 1.895 16.859-2.653 5.485-9.479 3.311-10.414-1.895-21.408-30.054-22.092-33.844-17.819-30.331-2.173 1.238-10.515 113.261-4.929 5.788-11.374 4.348-9.478-7.204-5.03-11.652 5.03-23.027 6.066-30.052 4.928-23.886 4.449-29.674 2.654-9.858-.177-.657-2.173.278-22.37 30.71-34.021 45.977-26.919 28.815-6.445 2.553-11.173-5.789 1.037-10.337 6.243-9.2 37.257-47.392 22.47-29.371 14.508-16.961-.101-2.451h-.859l-98.954 64.251-17.618 2.275-7.583-7.103.936-11.652 3.589-3.791 29.749-20.474-.101.102.024.101z"/></svg>

package/public/icons/cursor.svg

@@ -0,0 +1 @@
+<svg height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>Cursor</title><path d="M11.925 24l10.425-6-10.425-6L1.5 18l10.425 6z" fill="url(#lobe-icons-cursorundefined-fill-0)"></path><path d="M22.35 18V6L11.925 0v12l10.425 6z" fill="url(#lobe-icons-cursorundefined-fill-1)"></path><path d="M11.925 0L1.5 6v12l10.425-6V0z" fill="url(#lobe-icons-cursorundefined-fill-2)"></path><path d="M22.35 6L11.925 24V12L22.35 6z" fill="#555"></path><path d="M22.35 6l-10.425 6L1.5 6h20.85z" fill="#000"></path><defs><linearGradient gradientUnits="userSpaceOnUse" id="lobe-icons-cursorundefined-fill-0" x1="11.925" x2="11.925" y1="12" y2="24"><stop offset=".16" stop-color="#000" stop-opacity=".39"></stop><stop offset=".658" stop-color="#000" stop-opacity=".8"></stop></linearGradient><linearGradient gradientUnits="userSpaceOnUse" id="lobe-icons-cursorundefined-fill-1" x1="22.35" x2="11.925" y1="6.037" y2="12.15"><stop offset=".182" stop-color="#000" stop-opacity=".31"></stop><stop offset=".715" stop-color="#000" stop-opacity="0"></stop></linearGradient><linearGradient gradientUnits="userSpaceOnUse" id="lobe-icons-cursorundefined-fill-2" x1="11.925" x2="1.5" y1="0" y2="18"><stop stop-color="#000" stop-opacity=".6"></stop><stop offset=".667" stop-color="#000" stop-opacity=".22"></stop></linearGradient></defs></svg>

package/public/icons/generate-icons.md

@@ -0,0 +1,19 @@
+# PWA Icons Required
+
+Create the following icon files in this directory:
+
+- icon-72x72.png
+- icon-96x96.png
+- icon-128x128.png
+- icon-144x144.png
+- icon-152x152.png
+- icon-192x192.png
+- icon-384x384.png
+- icon-512x512.png
+
+You can use any icon generator tool or create them manually. The icons should be square and represent your Claude Code UI application.
+
+For a quick solution, you can:
+1. Create a simple square PNG icon (512x512)
+2. Use online tools like realfavicongenerator.net to generate all sizes
+3. Or use ImageMagick: `convert icon-512x512.png -resize 192x192 icon-192x192.png`

package/public/icons/icon-128x128.svg

@@ -0,0 +1,12 @@
+<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <!-- Background fills entire canvas - iOS will handle corner rounding -->
+  <rect width="512" height="512" fill="hsl(240 5.9% 10%)"/>
+  
+  <!-- MessageSquare icon - scaled and centered -->
+  <path d="M128 144C128 126.327 142.327 112 160 112H352C369.673 112 384 126.327 384 144V272C384 289.673 369.673 304 352 304H224L128 400V144Z" 
+        stroke="white" 
+        stroke-width="32" 
+        stroke-linecap="round" 
+        stroke-linejoin="round" 
+        fill="none"/>
+</svg>

package/public/icons/icon-144x144.svg

@@ -0,0 +1,12 @@
+<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <!-- Background fills entire canvas - iOS will handle corner rounding -->
+  <rect width="512" height="512" fill="hsl(240 5.9% 10%)"/>
+  
+  <!-- MessageSquare icon - scaled and centered -->
+  <path d="M128 144C128 126.327 142.327 112 160 112H352C369.673 112 384 126.327 384 144V272C384 289.673 369.673 304 352 304H224L128 400V144Z" 
+        stroke="white" 
+        stroke-width="32" 
+        stroke-linecap="round" 
+        stroke-linejoin="round" 
+        fill="none"/>
+</svg>

package/public/icons/icon-152x152.svg

@@ -0,0 +1,12 @@
+<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <!-- Background fills entire canvas - iOS will handle corner rounding -->
+  <rect width="512" height="512" fill="hsl(240 5.9% 10%)"/>
+  
+  <!-- MessageSquare icon - scaled and centered -->
+  <path d="M128 144C128 126.327 142.327 112 160 112H352C369.673 112 384 126.327 384 144V272C384 289.673 369.673 304 352 304H224L128 400V144Z" 
+        stroke="white" 
+        stroke-width="32" 
+        stroke-linecap="round" 
+        stroke-linejoin="round" 
+        fill="none"/>
+</svg>

package/public/icons/icon-192x192.svg

@@ -0,0 +1,12 @@
+<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <!-- Background fills entire canvas - iOS will handle corner rounding -->
+  <rect width="512" height="512" fill="hsl(240 5.9% 10%)"/>
+  
+  <!-- MessageSquare icon - scaled and centered -->
+  <path d="M128 144C128 126.327 142.327 112 160 112H352C369.673 112 384 126.327 384 144V272C384 289.673 369.673 304 352 304H224L128 400V144Z" 
+        stroke="white" 
+        stroke-width="32" 
+        stroke-linecap="round" 
+        stroke-linejoin="round" 
+        fill="none"/>
+</svg>

package/public/icons/icon-384x384.svg

@@ -0,0 +1,12 @@
+<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <!-- Background fills entire canvas - iOS will handle corner rounding -->
+  <rect width="512" height="512" fill="hsl(240 5.9% 10%)"/>
+  
+  <!-- MessageSquare icon - scaled and centered -->
+  <path d="M128 144C128 126.327 142.327 112 160 112H352C369.673 112 384 126.327 384 144V272C384 289.673 369.673 304 352 304H224L128 400V144Z" 
+        stroke="white" 
+        stroke-width="32" 
+        stroke-linecap="round" 
+        stroke-linejoin="round" 
+        fill="none"/>
+</svg>

package/public/icons/icon-512x512.svg

@@ -0,0 +1,12 @@
+<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <!-- Background fills entire canvas - iOS will handle corner rounding -->
+  <rect width="512" height="512" fill="hsl(240 5.9% 10%)"/>
+  
+  <!-- MessageSquare icon - scaled and centered -->
+  <path d="M128 144C128 126.327 142.327 112 160 112H352C369.673 112 384 126.327 384 144V272C384 289.673 369.673 304 352 304H224L128 400V144Z" 
+        stroke="white" 
+        stroke-width="32" 
+        stroke-linecap="round" 
+        stroke-linejoin="round" 
+        fill="none"/>
+</svg>