claudecodeui/slash-command-fix-progress.md

Slash Command Execution Fix - Progress Report

Issue

Slash commands weren't executing when selected from the command menu. After typing a command like /tm:list and selecting it from the menu, nothing would happen - the page would stay on "Choose Your AI Assistant" screen.

Root Cause

The handleCustomCommand function was trying to call handleSubmit via a ref, but the ref wasn't being set properly. Originally attempted to set the ref inside handleSubmit itself, which meant it was only set AFTER the first submit - too late for command execution.

Solution Implemented

1. Converted handleSubmit to use useCallback with proper dependencies
2. Added a useEffect hook that runs after handleSubmit is defined to store it in handleSubmitRef
3. Now handleCustomCommand can access handleSubmit via the ref and call it with a fake event

Code Changes

File: src/components/ChatInterface.jsx

Added ref declaration (around line 1534):

// Ref to store handleSubmit so we can call it from handleCustomCommand
const handleSubmitRef = useRef(null);

Modified handleCustomCommand (around line 1555):

// Set the input to the command content
setInput(content);

// Wait for state to update, then directly call handleSubmit
setTimeout(() => {
  if (handleSubmitRef.current) {
    // Create a fake event to pass to handleSubmit
    const fakeEvent = { preventDefault: () => {} };
    handleSubmitRef.current(fakeEvent);
  }
}, 50);

Converted handleSubmit to useCallback (line 3292):

const handleSubmit = useCallback(async (e) => {
  e.preventDefault();
  if (!input.trim() || isLoading || !selectedProject) return;
  // ... rest of function
}, [input, isLoading, selectedProject, attachedImages, currentSessionId, selectedSession, provider, permissionMode, onSessionActive, cursorModel, sendMessage, setInput, setAttachedImages, setUploadingImages, setImageErrors, setIsTextareaExpanded, textareaRef, setChatMessages, setIsLoading, setCanAbortSession, setClaudeStatus, setIsUserScrolledUp, scrollToBottom]);

Added useEffect to store ref (line 3437):

// Store handleSubmit in ref so handleCustomCommand can access it
useEffect(() => {
  handleSubmitRef.current = handleSubmit;
}, [handleSubmit]);

Fixed Issues

1. Commands Button Visibility ✅ FIXED

• Problem: Button was not showing in active chat sessions with provider selected
• Root Cause: Button was positioned at right-14 sm:right-16 which overlapped with the clear button at sm:right-28
• Solution: Changed button position to right-14 sm:right-36 to place it left of the clear button
• File: src/components/ChatInterface.jsx:4255
• Status: Fixed in build dist/assets/index-CWRjcZ7A.js

2. Slash Command Menu Positioning ✅ FIXED

• Problem: Mobile positioning was inconsistent - used wrong ref for bottom calculation
• Root Cause: Position calculation used inputContainerRef (permission mode selector) instead of textareaRef (actual input)
• Solution:
  • Changed bottom calculation to use textareaRef instead of inputContainerRef
  • Updated formula: window.innerHeight - textareaRef.getBoundingClientRect().top + 8
  • Removed extra + 8 in CommandMenu.jsx since spacing is already in the calculation
  • Added explicit maxHeight: '300px' to desktop positioning for consistency
  • Mobile maxHeight now uses min(50vh, 300px) for better consistency
• Files Modified:
  • src/components/ChatInterface.jsx:4132-4134 - Fixed bottom position calculation
  • src/components/CommandMenu.jsx:30-46 - Improved positioning logic and max heights

Related Issues Found (Not Fixed Yet)

3. Service Worker Caching Issue

• After building, the service worker caches old build files
• Requires manual unregistration of service worker on first load after build
• Causes 404 errors for old asset filenames (e.g., index-n_2V3_vw.js when new build has index-Wp3pq386.js)
• Need to implement proper cache busting or service worker update strategy

4. Chat Screen Jumping

• Screen jumps/scrolls when Task Master widget appears/disappears
• Likely due to layout shifts from the task widget

Testing Status

• ✅ Slash command execution fix implemented and built
• ✅ Commands button visibility fix implemented and built
• ⏳ Not yet tested end-to-end due to service worker caching issues requiring manual cache clearing
• Need to test:
  1. Verify commands button is now visible to the left of clear button
  2. Click commands button to open menu
  3. Type /tm:list in chat input
  4. Select command from menu
  5. Verify command content loads and sends to Claude
  6. Verify session is created if none exists

Next Steps

1. Test the slash command button visibility fix
2. Test the slash command execution fix end-to-end
3. Fix service worker caching to enable easier testing
4. Fix chat screen jumping issue

Build Info

• Latest build: dist/assets/index-C5zDTo8x.js (657.55 kB)
• Commands button positioned at right-14 sm:right-36 (mobile/desktop)
• Menu positioning uses textareaRef for accurate placement
• Mobile menu: bottom calculated from textarea top + 8px spacing
• Desktop menu: top calculated with 316px offset, max 300px height
• Server running on port 3001
• Using Claude Agents SDK for Claude integration

Implementation Details

Mobile Positioning

// ChatInterface.jsx - Position calculation
bottom: textareaRef.current
  ? window.innerHeight - textareaRef.current.getBoundingClientRect().top + 8
  : 90

// CommandMenu.jsx - Mobile layout
{
  position: 'fixed',
  bottom: `${inputBottom}px`,
  left: '16px',
  right: '16px',
  maxHeight: 'min(50vh, 300px)'
}

Desktop Positioning

// ChatInterface.jsx - Position calculation
top: textareaRef.current
  ? Math.max(16, textareaRef.current.getBoundingClientRect().top - 316)
  : 0

// CommandMenu.jsx - Desktop layout
{
  position: 'fixed',
  top: `${calculatedTop}px`,
  left: `${position.left}px`,
  width: 'min(400px, calc(100vw - 32px))',
  maxHeight: '300px'
}