@siteboon/claude-code-ui 1.13.0 → 1.13.1

package/dist/index.html

@@ -25,7 +25,7 @@
     
     <!-- Prevent zoom on iOS -->
     <meta name="format-detection" content="telephone=no" />
-    <script type="module" crossorigin src="/assets/index-Zq2roSUR.js"></script>
+    <script type="module" crossorigin src="/assets/index-BL1HpeHJ.js"></script>
     <link rel="modulepreload" crossorigin href="/assets/vendor-react-DVSKlM5e.js">
     <link rel="modulepreload" crossorigin href="/assets/vendor-codemirror-CnTQH7Pk.js">
     <link rel="modulepreload" crossorigin href="/assets/vendor-xterm-DfaPXD3y.js">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@siteboon/claude-code-ui",
-  "version": "1.13.0",
+  "version": "1.13.1",
   "description": "A web-based UI for Claude Code CLI",
   "type": "module",
   "main": "server/index.js",

package/server/claude-sdk.js

@@ -16,6 +16,7 @@ import { query } from '@anthropic-ai/claude-agent-sdk';
 import { promises as fs } from 'fs';
 import path from 'path';
 import os from 'os';
+import { CLAUDE_MODELS } from '../shared/modelConstants.js';
 
 // Session tracking: Map of session IDs to active query instances
 const activeSessions = new Map();
@@ -77,7 +78,7 @@ function mapCliOptionsToSDK(options = {}) {
 
   // Map model (default to sonnet)
   // Valid models: sonnet, opus, haiku, opusplan, sonnet[1m]
-  sdkOptions.model = options.model || 'sonnet';
+  sdkOptions.model = options.model || CLAUDE_MODELS.DEFAULT;
   console.log(`Using model: ${sdkOptions.model}`);
 
   // Map system prompt configuration
@@ -397,10 +398,10 @@ async function queryClaudeSDK(command, options = {}, ws) {
         // Send session-created event only once for new sessions
         if (!sessionId && !sessionCreatedSent) {
           sessionCreatedSent = true;
-          ws.send(JSON.stringify({
+          ws.send({
             type: 'session-created',
             sessionId: capturedSessionId
-          }));
+          });
         } else {
           console.log('Not sending session-created. sessionId:', sessionId, 'sessionCreatedSent:', sessionCreatedSent);
         }
@@ -410,20 +411,20 @@ async function queryClaudeSDK(command, options = {}, ws) {
 
       // Transform and send message to WebSocket
       const transformedMessage = transformMessage(message);
-      ws.send(JSON.stringify({
+      ws.send({
         type: 'claude-response',
         data: transformedMessage
-      }));
+      });
 
       // Extract and send token budget updates from result messages
       if (message.type === 'result') {
         const tokenBudget = extractTokenBudget(message);
         if (tokenBudget) {
           console.log('Token budget from modelUsage:', tokenBudget);
-          ws.send(JSON.stringify({
+          ws.send({
             type: 'token-budget',
             data: tokenBudget
-          }));
+          });
         }
       }
     }
@@ -438,12 +439,12 @@ async function queryClaudeSDK(command, options = {}, ws) {
 
     // Send completion event
     console.log('Streaming complete, sending claude-complete event');
-    ws.send(JSON.stringify({
+    ws.send({
       type: 'claude-complete',
       sessionId: capturedSessionId,
       exitCode: 0,
       isNewSession: !sessionId && !!command
-    }));
+    });
     console.log('claude-complete event sent');
 
   } catch (error) {
@@ -458,10 +459,10 @@ async function queryClaudeSDK(command, options = {}, ws) {
     await cleanupTempFiles(tempImagePaths, tempDir);
 
     // Send error to WebSocket
-    ws.send(JSON.stringify({
+    ws.send({
       type: 'claude-error',
       error: error.message
-    }));
+    });
 
     throw error;
   }

package/server/cursor-cli.js

@@ -102,29 +102,29 @@ async function spawnCursor(command, options = {}, ws) {
                   // Send session-created event only once for new sessions
                   if (!sessionId && !sessionCreatedSent) {
                     sessionCreatedSent = true;
-                    ws.send(JSON.stringify({
+                    ws.send({
                       type: 'session-created',
                       sessionId: capturedSessionId,
                       model: response.model,
                       cwd: response.cwd
-                    }));
+                    });
                   }
                 }
                 
                 // Send system info to frontend
-                ws.send(JSON.stringify({
+                ws.send({
                   type: 'cursor-system',
                   data: response
-                }));
+                });
               }
               break;
               
             case 'user':
               // Forward user message
-              ws.send(JSON.stringify({
+              ws.send({
                 type: 'cursor-user',
                 data: response
-              }));
+              });
               break;
               
             case 'assistant':
@@ -134,7 +134,7 @@ async function spawnCursor(command, options = {}, ws) {
                 messageBuffer += textContent;
                 
                 // Send as Claude-compatible format for frontend
-                ws.send(JSON.stringify({
+                ws.send({
                   type: 'claude-response',
                   data: {
                     type: 'content_block_delta',
@@ -143,7 +143,7 @@ async function spawnCursor(command, options = {}, ws) {
                       text: textContent
                     }
                   }
-                }));
+                });
               }
               break;
               
@@ -153,37 +153,37 @@ async function spawnCursor(command, options = {}, ws) {
               
               // Send final message if we have buffered content
               if (messageBuffer) {
-                ws.send(JSON.stringify({
+                ws.send({
                   type: 'claude-response',
                   data: {
                     type: 'content_block_stop'
                   }
-                }));
+                });
               }
               
               // Send completion event
-              ws.send(JSON.stringify({
+              ws.send({
                 type: 'cursor-result',
                 sessionId: capturedSessionId || sessionId,
                 data: response,
                 success: response.subtype === 'success'
-              }));
+              });
               break;
               
             default:
               // Forward any other message types
-              ws.send(JSON.stringify({
+              ws.send({
                 type: 'cursor-response',
                 data: response
-              }));
+              });
           }
         } catch (parseError) {
           console.log('📄 Non-JSON response:', line);
           // If not JSON, send as raw text
-          ws.send(JSON.stringify({
+          ws.send({
             type: 'cursor-output',
             data: line
-          }));
+          });
         }
       }
     });
@@ -191,10 +191,10 @@ async function spawnCursor(command, options = {}, ws) {
     // Handle stderr
     cursorProcess.stderr.on('data', (data) => {
       console.error('Cursor CLI stderr:', data.toString());
-      ws.send(JSON.stringify({
+      ws.send({
         type: 'cursor-error',
         error: data.toString()
-      }));
+      });
     });
     
     // Handle process completion
@@ -205,12 +205,12 @@ async function spawnCursor(command, options = {}, ws) {
       const finalSessionId = capturedSessionId || sessionId || processKey;
       activeCursorProcesses.delete(finalSessionId);
 
-      ws.send(JSON.stringify({
+      ws.send({
         type: 'claude-complete',
         sessionId: finalSessionId,
         exitCode: code,
         isNewSession: !sessionId && !!command // Flag to indicate this was a new session
-      }));
+      });
       
       if (code === 0) {
         resolve();
@@ -226,12 +226,12 @@ async function spawnCursor(command, options = {}, ws) {
       // Clean up process reference on error
       const finalSessionId = capturedSessionId || sessionId || processKey;
       activeCursorProcesses.delete(finalSessionId);
-      
-      ws.send(JSON.stringify({
+
+      ws.send({
         type: 'cursor-error',
         error: error.message
-      }));
-      
+      });
+
       reject(error);
     });
     

package/server/index.js

@@ -717,6 +717,32 @@ wss.on('connection', (ws, request) => {
     }
 });
 
+/**
+ * WebSocket Writer - Wrapper for WebSocket to match SSEStreamWriter interface
+ */
+class WebSocketWriter {
+  constructor(ws) {
+    this.ws = ws;
+    this.sessionId = null;
+    this.isWebSocketWriter = true;  // Marker for transport detection
+  }
+
+  send(data) {
+    if (this.ws.readyState === 1) { // WebSocket.OPEN
+      // Providers send raw objects, we stringify for WebSocket
+      this.ws.send(JSON.stringify(data));
+    }
+  }
+
+  setSessionId(sessionId) {
+    this.sessionId = sessionId;
+  }
+
+  getSessionId() {
+    return this.sessionId;
+  }
+}
+
 // Handle chat WebSocket connections
 function handleChatConnection(ws) {
     console.log('[INFO] Chat WebSocket connected');
@@ -724,6 +750,9 @@ function handleChatConnection(ws) {
     // Add to connected clients for project updates
     connectedClients.add(ws);
 
+    // Wrap WebSocket with writer for consistent interface with SSEStreamWriter
+    const writer = new WebSocketWriter(ws);
+
     ws.on('message', async (message) => {
         try {
             const data = JSON.parse(message);
@@ -734,19 +763,19 @@ function handleChatConnection(ws) {
                 console.log('🔄 Session:', data.options?.sessionId ? 'Resume' : 'New');
 
                 // Use Claude Agents SDK
-                await queryClaudeSDK(data.command, data.options, ws);
+                await queryClaudeSDK(data.command, data.options, writer);
             } else if (data.type === 'cursor-command') {
                 console.log('[DEBUG] Cursor message:', data.command || '[Continue/Resume]');
                 console.log('📁 Project:', data.options?.cwd || 'Unknown');
                 console.log('🔄 Session:', data.options?.sessionId ? 'Resume' : 'New');
                 console.log('🤖 Model:', data.options?.model || 'default');
-                await spawnCursor(data.command, data.options, ws);
+                await spawnCursor(data.command, data.options, writer);
             } else if (data.type === 'codex-command') {
                 console.log('[DEBUG] Codex message:', data.command || '[Continue/Resume]');
                 console.log('📁 Project:', data.options?.projectPath || data.options?.cwd || 'Unknown');
                 console.log('🔄 Session:', data.options?.sessionId ? 'Resume' : 'New');
                 console.log('🤖 Model:', data.options?.model || 'default');
-                await queryCodex(data.command, data.options, ws);
+                await queryCodex(data.command, data.options, writer);
             } else if (data.type === 'cursor-resume') {
                 // Backward compatibility: treat as cursor-command with resume and no prompt
                 console.log('[DEBUG] Cursor resume session (compat):', data.sessionId);
@@ -754,7 +783,7 @@ function handleChatConnection(ws) {
                     sessionId: data.sessionId,
                     resume: true,
                     cwd: data.options?.cwd
-                }, ws);
+                }, writer);
             } else if (data.type === 'abort-session') {
                 console.log('[DEBUG] Abort session request:', data.sessionId);
                 const provider = data.provider || 'claude';
@@ -769,21 +798,21 @@ function handleChatConnection(ws) {
                     success = await abortClaudeSDKSession(data.sessionId);
                 }
 
-                ws.send(JSON.stringify({
+                writer.send({
                     type: 'session-aborted',
                     sessionId: data.sessionId,
                     provider,
                     success
-                }));
+                });
             } else if (data.type === 'cursor-abort') {
                 console.log('[DEBUG] Abort Cursor session:', data.sessionId);
                 const success = abortCursorSession(data.sessionId);
-                ws.send(JSON.stringify({
+                writer.send({
                     type: 'session-aborted',
                     sessionId: data.sessionId,
                     provider: 'cursor',
                     success
-                }));
+                });
             } else if (data.type === 'check-session-status') {
                 // Check if a specific session is currently processing
                 const provider = data.provider || 'claude';
@@ -799,12 +828,12 @@ function handleChatConnection(ws) {
                     isActive = isClaudeSDKSessionActive(sessionId);
                 }
 
-                ws.send(JSON.stringify({
+                writer.send({
                     type: 'session-status',
                     sessionId,
                     provider,
                     isProcessing: isActive
-                }));
+                });
             } else if (data.type === 'get-active-sessions') {
                 // Get all currently active sessions
                 const activeSessions = {
@@ -812,17 +841,17 @@ function handleChatConnection(ws) {
                     cursor: getActiveCursorSessions(),
                     codex: getActiveCodexSessions()
                 };
-                ws.send(JSON.stringify({
+                writer.send({
                     type: 'active-sessions',
                     sessions: activeSessions
-                }));
+                });
             }
         } catch (error) {
             console.error('[ERROR] Chat WebSocket error:', error.message);
-            ws.send(JSON.stringify({
+            writer.send({
                 type: 'error',
                 error: error.message
-            }));
+            });
         }
     });
 

package/server/openai-codex.js

@@ -213,7 +213,8 @@ export async function queryCodex(command, options = {}, ws) {
       workingDirectory,
       skipGitRepoCheck: true,
       sandboxMode,
-      approvalPolicy
+      approvalPolicy,
+      model
     };
 
     // Start or resume thread
@@ -359,12 +360,12 @@ export function getActiveCodexSessions() {
  */
 function sendMessage(ws, data) {
   try {
-    if (typeof ws.send === 'function') {
-      // WebSocket
+    if (ws.isSSEStreamWriter || ws.isWebSocketWriter) {
+      // Writer handles stringification (SSEStreamWriter or WebSocketWriter)
+      ws.send(data);
+    } else if (typeof ws.send === 'function') {
+      // Raw WebSocket - stringify here
       ws.send(JSON.stringify(data));
-    } else if (typeof ws.write === 'function') {
-      // SSE writer (for agent API)
-      ws.write(`data: ${JSON.stringify(data)}\n\n`);
     }
   } catch (error) {
     console.error('[Codex] Error sending message:', error);

package/server/routes/agent.js

@@ -10,6 +10,7 @@ import { queryClaudeSDK } from '../claude-sdk.js';
 import { spawnCursor } from '../cursor-cli.js';
 import { queryCodex } from '../openai-codex.js';
 import { Octokit } from '@octokit/rest';
+import { CLAUDE_MODELS, CURSOR_MODELS, CODEX_MODELS } from '../../shared/modelConstants.js';
 
 const router = express.Router();
 
@@ -450,6 +451,7 @@ class SSEStreamWriter {
   constructor(res) {
     this.res = res;
     this.sessionId = null;
+    this.isSSEStreamWriter = true;  // Marker for transport detection
   }
 
   send(data) {
@@ -457,7 +459,7 @@ class SSEStreamWriter {
       return;
     }
 
-    // Format as SSE
+    // Format as SSE - providers send raw objects, we stringify
     this.res.write(`data: ${JSON.stringify(data)}\n\n`);
   }
 
@@ -634,9 +636,14 @@ class ResponseCollector {
  *                          - true: Returns text/event-stream with incremental updates
  *                          - false: Returns complete JSON response after completion
  *
- * @param {string} model - (Optional) Model identifier for Cursor provider.
- *                        Only applicable when provider='cursor'.
- *                        Examples: 'gpt-4', 'claude-3-opus', etc.
+ * @param {string} model - (Optional) Model identifier for providers.
+ *
+ *                        Claude models: 'sonnet' (default), 'opus', 'haiku', 'opusplan', 'sonnet[1m]'
+ *                        Cursor models: 'gpt-5' (default), 'gpt-5.2', 'gpt-5.2-high', 'sonnet-4.5', 'opus-4.5',
+ *                                       'gemini-3-pro', 'composer-1', 'auto', 'gpt-5.1', 'gpt-5.1-high',
+ *                                       'gpt-5.1-codex', 'gpt-5.1-codex-high', 'gpt-5.1-codex-max',
+ *                                       'gpt-5.1-codex-max-high', 'opus-4.1', 'grok', and thinking variants
+ *                        Codex models: 'gpt-5.2' (default), 'gpt-5.1-codex-max', 'o3', 'o4-mini'
  *
  * @param {boolean} cleanup - (Optional) Auto-cleanup project directory after completion.
  *                           Default: true
@@ -939,6 +946,7 @@ router.post('/', validateExternalApiKey, async (req, res) => {
         projectPath: finalProjectPath,
         cwd: finalProjectPath,
         sessionId: null, // New session
+        model: model,
         permissionMode: 'bypassPermissions' // Bypass all permissions for API calls
       }, writer);
 
@@ -959,7 +967,7 @@ router.post('/', validateExternalApiKey, async (req, res) => {
         projectPath: finalProjectPath,
         cwd: finalProjectPath,
         sessionId: null,
-        model: model || 'gpt-5.2',
+        model: model || CODEX_MODELS.DEFAULT,
         permissionMode: 'bypassPermissions'
       }, writer);
     }

package/server/routes/commands.js

@@ -4,6 +4,7 @@ import path from 'path';
 import { fileURLToPath } from 'url';
 import os from 'os';
 import matter from 'gray-matter';
+import { CLAUDE_MODELS, CURSOR_MODELS, CODEX_MODELS } from '../../shared/modelConstants.js';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
@@ -182,23 +183,15 @@ Custom commands can be created in:
   },
 
   '/model': async (args, context) => {
-    // Read available models from config or defaults
+    // Read available models from centralized constants
     const availableModels = {
-      claude: [
-        'claude-sonnet-4.5',
-        'claude-sonnet-4',
-        'claude-opus-4',
-        'claude-sonnet-3.5'
-      ],
-      cursor: [
-        'gpt-5',
-        'sonnet-4',
-        'opus-4.1'
-      ]
+      claude: CLAUDE_MODELS.OPTIONS.map(o => o.value),
+      cursor: CURSOR_MODELS.OPTIONS.map(o => o.value),
+      codex: CODEX_MODELS.OPTIONS.map(o => o.value)
     };
 
     const currentProvider = context?.provider || 'claude';
-    const currentModel = context?.model || 'claude-sonnet-4.5';
+    const currentModel = context?.model || CLAUDE_MODELS.DEFAULT;
 
     return {
       type: 'builtin',
@@ -216,50 +209,6 @@ Custom commands can be created in:
     };
   },
 
-  '/cost': async (args, context) => {
-    // Calculate token usage and cost
-    const sessionId = context?.sessionId;
-    const tokenUsage = context?.tokenUsage || { used: 0, total: 200000 };
-
-    const costPerMillion = {
-      'claude-sonnet-4.5': { input: 3, output: 15 },
-      'claude-sonnet-4': { input: 3, output: 15 },
-      'claude-opus-4': { input: 15, output: 75 },
-      'gpt-5': { input: 5, output: 15 }
-    };
-
-    const model = context?.model || 'claude-sonnet-4.5';
-    const rates = costPerMillion[model] || costPerMillion['claude-sonnet-4.5'];
-
-    // Estimate 70% input, 30% output
-    const estimatedInputTokens = Math.floor(tokenUsage.used * 0.7);
-    const estimatedOutputTokens = Math.floor(tokenUsage.used * 0.3);
-
-    const inputCost = (estimatedInputTokens / 1000000) * rates.input;
-    const outputCost = (estimatedOutputTokens / 1000000) * rates.output;
-    const totalCost = inputCost + outputCost;
-
-    return {
-      type: 'builtin',
-      action: 'cost',
-      data: {
-        tokenUsage: {
-          used: tokenUsage.used,
-          total: tokenUsage.total,
-          percentage: ((tokenUsage.used / tokenUsage.total) * 100).toFixed(1)
-        },
-        cost: {
-          input: inputCost.toFixed(4),
-          output: outputCost.toFixed(4),
-          total: totalCost.toFixed(4),
-          currency: 'USD'
-        },
-        model,
-        rates
-      }
-    };
-  },
-
   '/status': async (args, context) => {
     // Read version from package.json
     const packageJsonPath = path.join(path.dirname(__dirname), '..', 'package.json');

package/server/routes/cursor.js

@@ -6,6 +6,7 @@ import { spawn } from 'child_process';
 import sqlite3 from 'sqlite3';
 import { open } from 'sqlite';
 import crypto from 'crypto';
+import { CURSOR_MODELS } from '../../shared/modelConstants.js';
 
 const router = express.Router();
 
@@ -33,7 +34,7 @@ router.get('/config', async (req, res) => {
         config: {
           version: 1,
           model: {
-            modelId: "gpt-5",
+            modelId: CURSOR_MODELS.DEFAULT,
             displayName: "GPT-5"
           },
           permissions: {