feat: Inform users about slash commands on chat interface

* Make database path configurable via DATABASE_PATH environment variable

- Add DATABASE_PATH environment variable support in db.js
- Automatically create database directory if custom path is provided
- Update .env.example with DATABASE_PATH documentation for container deployments
- Maintain backward compatibility with default path (server/database/auth.db)

Co-authored-by: werdnum <271070+werdnum@users.noreply.github.com>

* Add error handling for creating DATABASE_PATH.

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: werdnum <271070+werdnum@users.noreply.github.com>
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Co-authored-by: viper151 <simosmik@gmail.com>

.env.example

@@ -14,6 +14,15 @@ VITE_PORT=5173
 # Uncomment the following line if you have a custom claude cli path other than the default "claude"
 # CLAUDE_CLI_PATH=claude
 
+# =============================================================================
+# DATABASE CONFIGURATION
+# =============================================================================
+
+# Path to the authentication database file
+# This should be set to a persistent volume path when running in containers
+# Default: server/database/auth.db (relative to project root)
+# Example for Docker: /data/auth.db
+# DATABASE_PATH=/data/auth.db
 # Claude Code context window size (maximum tokens per session)
 # Note: VITE_ prefix makes it available to frontend
 VITE_CONTEXT_WINDOW=160000

README.md

@@ -278,22 +278,6 @@ We welcome contributions! Please follow these guidelines:
 
 ### Common Issues & Solutions
 
-#### Server starts but redirects to port 5173 (Vite)
-**Problem**: Running `npx @siteboon/claude-code-ui` says it's running on port 3001, but redirects to 5173
-**Solutions**:
-- This was fixed in v1.9.1+. Update to the latest version:
-  ```bash
-  npx @siteboon/claude-code-ui@latest
-  ```
-- Or clear NPX cache and reinstall:
-  ```bash
-  npx clear-npx-cache
-  npx @siteboon/claude-code-ui
-  ```
-- If using global install, update it:
-  ```bash
-  npm update -g @siteboon/claude-code-ui
-  ```
 
 #### "No Claude projects found"
 **Problem**: The UI shows no projects or empty project list

server/database/db.js

@@ -7,12 +7,27 @@ import { dirname } from 'path';
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
 
-const DB_PATH = path.join(__dirname, 'auth.db');
+// Use DATABASE_PATH environment variable if set, otherwise use default location
+const DB_PATH = process.env.DATABASE_PATH || path.join(__dirname, 'auth.db');
 const INIT_SQL_PATH = path.join(__dirname, 'init.sql');
 
+// Ensure database directory exists if custom path is provided
+if (process.env.DATABASE_PATH) {
+  const dbDir = path.dirname(DB_PATH);
+  try {
+    if (!fs.existsSync(dbDir)) {
+      fs.mkdirSync(dbDir, { recursive: true });
+      console.log(`Created database directory: ${dbDir}`);
+    }
+  } catch (error) {
+    console.error(`Failed to create database directory ${dbDir}:`, error.message);
+    throw error;
+  }
+}
+
 // Create database connection
 const db = new Database(DB_PATH);
-console.log('Connected to SQLite database');
+console.log(`Connected to SQLite database at: ${DB_PATH}`);
 
 // Initialize database with schema
 const initializeDatabase = async () => {

src/components/ChatInterface.jsx

@@ -4228,20 +4228,11 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess
                 const isExpanded = e.target.scrollHeight > lineHeight * 2;
                 setIsTextareaExpanded(isExpanded);
               }}
-              placeholder={`Ask ${provider === 'cursor' ? 'Cursor' : 'Claude'} to help with your code...`}
+              placeholder={`Type / for commands, @ for files, or ask ${provider === 'cursor' ? 'Cursor' : 'Claude'} anything...`}
               disabled={isLoading}
               className="chat-input-placeholder block w-full pl-12 pr-20 sm:pr-40 py-1.5 sm:py-4 bg-transparent rounded-2xl focus:outline-none text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 disabled:opacity-50 resize-none min-h-[50px] sm:min-h-[80px] max-h-[40vh] sm:max-h-[300px] overflow-y-auto text-sm sm:text-base leading-[21px] sm:leading-6 transition-all duration-200"
               style={{ height: '50px' }}
             />
-            {/* Custom placeholder overlay that can wrap */}
-            {!input.trim() && !isInputFocused && (
-              <div
-                className="absolute inset-0 pl-12 pr-20 sm:pr-40 py-1.5 sm:py-4 pointer-events-none text-gray-400 dark:text-gray-500 text-sm sm:text-base"
-                style={{ whiteSpace: 'normal', wordWrap: 'break-word' }}
-              >
-                Type / for commands, @ for files, or ask {provider === 'cursor' ? 'Cursor' : 'Claude'} anything...
-              </div>
-            )}
             {/* Image upload button */}
             <button
               type="button"
@@ -4339,15 +4330,15 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess
           {/* Hint text */}
           <div className="text-xs text-gray-500 dark:text-gray-400 text-center mt-2 hidden sm:block">
             {sendByCtrlEnter
-              ? "Ctrl+Enter to send (IME safe) • Shift+Enter for new line • Tab to change modes"
-              : "Press Enter to send • Shift+Enter for new line • Tab to change modes"}
+              ? "Ctrl+Enter to send (IME safe) • Shift+Enter for new line • Tab to change modes • Type / for slash commands"
+              : "Press Enter to send • Shift+Enter for new line • Tab to change modes • Type / for slash commands"}
           </div>
           <div className={`text-xs text-gray-500 dark:text-gray-400 text-center mt-2 sm:hidden transition-opacity duration-200 ${
             isInputFocused ? 'opacity-100' : 'opacity-0'
           }`}>
-            {sendByCtrlEnter 
-              ? "Ctrl+Enter to send (IME safe) • Tab for modes • @ for files" 
-              : "Enter to send • Tab for modes • @ for files"}
+            {sendByCtrlEnter
+              ? "Ctrl+Enter to send (IME safe) • Tab for modes • @ for files • / for commands"
+              : "Enter to send • Tab for modes • @ for files • / for commands"}
           </div>
         </form>
       </div>