backlog/tasks/task-046 - Add-maximize-button-to-StandardizedToolWrapper.md

@@ -4,7 +4,6 @@ title: Add maximize button to StandardizedToolWrapper
 status: Done
 assignee: []
 created_date: '2025-12-08 08:51'
-updated_date: '2025-12-08 09:03'
 labels:
   - feature
   - ui
@@ -18,9 +17,3 @@ priority: medium
 <!-- SECTION:DESCRIPTION:BEGIN -->
 Added a maximize/fullscreen button to the standardized header bar. When clicked, the tool fills the viewport. Press Esc or click again to restore original dimensions. Created useMaximize hook that shape utils can use. Implemented on ChatBoxShapeUtil as example.
 <!-- SECTION:DESCRIPTION:END -->
-
-## Implementation Notes
-
-<!-- SECTION:NOTES:BEGIN -->
-Added maximize to ALL 16 shapes using StandardizedToolWrapper (not just ChatBox)
-<!-- SECTION:NOTES:END -->

src/shapes/ImageGenShapeUtil.tsx

@@ -804,8 +804,6 @@ export class ImageGenShape extends BaseBoxShapeUtil<IImageGen> {
                           }
                         }}
                         onPointerDown={(e) => e.stopPropagation()}
-                        onTouchStart={(e) => e.stopPropagation()}
-                        onTouchEnd={(e) => e.stopPropagation()}
                         style={{
                           flex: 1,
                           padding: '6px 10px',
@@ -821,8 +819,6 @@ export class ImageGenShape extends BaseBoxShapeUtil<IImageGen> {
                           justifyContent: 'center',
                           gap: '4px',
                           transition: 'background-color 0.15s',
-                          touchAction: 'manipulation',
-                          minHeight: '44px',
                         }}
                         onMouseEnter={(e) => (e.currentTarget.style.backgroundColor = '#f0f0f0')}
                         onMouseLeave={(e) => (e.currentTarget.style.backgroundColor = '#fff')}
@@ -854,8 +850,6 @@ export class ImageGenShape extends BaseBoxShapeUtil<IImageGen> {
                           console.log('✅ ImageGen: Image download initiated')
                         }}
                         onPointerDown={(e) => e.stopPropagation()}
-                        onTouchStart={(e) => e.stopPropagation()}
-                        onTouchEnd={(e) => e.stopPropagation()}
                         style={{
                           flex: 1,
                           padding: '6px 10px',
@@ -871,8 +865,6 @@ export class ImageGenShape extends BaseBoxShapeUtil<IImageGen> {
                           justifyContent: 'center',
                           gap: '4px',
                           transition: 'opacity 0.15s',
-                          touchAction: 'manipulation',
-                          minHeight: '44px',
                         }}
                         onMouseEnter={(e) => (e.currentTarget.style.opacity = '0.9')}
                         onMouseLeave={(e) => (e.currentTarget.style.opacity = '1')}
@@ -891,8 +883,6 @@ export class ImageGenShape extends BaseBoxShapeUtil<IImageGen> {
                           })
                         }}
                         onPointerDown={(e) => e.stopPropagation()}
-                        onTouchStart={(e) => e.stopPropagation()}
-                        onTouchEnd={(e) => e.stopPropagation()}
                         style={{
                           padding: '6px 10px',
                           backgroundColor: '#fff',
@@ -906,9 +896,6 @@ export class ImageGenShape extends BaseBoxShapeUtil<IImageGen> {
                           alignItems: 'center',
                           justifyContent: 'center',
                           transition: 'background-color 0.15s, color 0.15s',
-                          touchAction: 'manipulation',
-                          minWidth: '44px',
-                          minHeight: '44px',
                         }}
                         onMouseEnter={(e) => {
                           e.currentTarget.style.backgroundColor = '#fee'
@@ -965,8 +952,6 @@ export class ImageGenShape extends BaseBoxShapeUtil<IImageGen> {
                   borderRadius: "6px",
                   fontSize: 13,
                   padding: "0 10px",
-                  touchAction: "manipulation",
-                  minHeight: "44px",
                 }}
                 type="text"
                 placeholder="Enter image prompt..."
@@ -990,9 +975,6 @@ export class ImageGenShape extends BaseBoxShapeUtil<IImageGen> {
                 onPointerDown={(e) => {
                   e.stopPropagation()
                 }}
-                onTouchStart={(e) => {
-                  e.stopPropagation()
-                }}
                 onClick={(e) => {
                   e.stopPropagation()
                 }}
@@ -1011,9 +993,6 @@ export class ImageGenShape extends BaseBoxShapeUtil<IImageGen> {
                   fontWeight: "500",
                   fontSize: "13px",
                   opacity: shape.props.prompt.trim() && !shape.props.isLoading ? 1 : 0.6,
-                  touchAction: "manipulation",
-                  minWidth: "44px",
-                  minHeight: "44px",
                 }}
                 onPointerDown={(e) => {
                   e.stopPropagation()
@@ -1022,16 +1001,6 @@ export class ImageGenShape extends BaseBoxShapeUtil<IImageGen> {
                     handleGenerate()
                   }
                 }}
-                onTouchStart={(e) => {
-                  e.stopPropagation()
-                }}
-                onTouchEnd={(e) => {
-                  e.stopPropagation()
-                  e.preventDefault()
-                  if (shape.props.prompt.trim() && !shape.props.isLoading) {
-                    handleGenerate()
-                  }
-                }}
                 onClick={(e) => {
                   e.preventDefault()
                   e.stopPropagation()
@@ -1076,8 +1045,6 @@ export class ImageGenShape extends BaseBoxShapeUtil<IImageGen> {
                     })
                   }}
                   onPointerDown={(e) => e.stopPropagation()}
-                  onTouchStart={(e) => e.stopPropagation()}
-                  onTouchEnd={(e) => e.stopPropagation()}
                   style={{
                     padding: "2px 6px",
                     backgroundColor: "#fcc",
@@ -1086,9 +1053,6 @@ export class ImageGenShape extends BaseBoxShapeUtil<IImageGen> {
                     cursor: "pointer",
                     fontSize: "10px",
                     flexShrink: 0,
-                    touchAction: "manipulation",
-                    minWidth: "32px",
-                    minHeight: "32px",
                   }}
                 >
                   ✕

src/shapes/MultmuxShapeUtil.tsx

@@ -569,11 +569,8 @@ export class MultmuxShape extends BaseBoxShapeUtil<IMultmuxShape> {
                     color: '#cdd6f4',
                     fontFamily: 'monospace',
                     fontSize: '14px',
-                    touchAction: 'manipulation',
-                    minHeight: '44px',
                   }}
                   onPointerDown={(e) => e.stopPropagation()}
-                  onTouchStart={(e) => e.stopPropagation()}
                   onMouseDown={(e) => e.stopPropagation()}
                 />
                 <button
@@ -589,16 +586,8 @@ export class MultmuxShape extends BaseBoxShapeUtil<IMultmuxShape> {
                     fontFamily: 'monospace',
                     fontSize: '16px',
                     transition: 'background-color 0.2s',
-                    touchAction: 'manipulation',
-                    minHeight: '44px',
                   }}
                   onPointerDown={(e) => e.stopPropagation()}
-                  onTouchStart={(e) => e.stopPropagation()}
-                  onTouchEnd={(e) => {
-                    e.stopPropagation()
-                    e.preventDefault()
-                    handleCreateSession()
-                  }}
                   onMouseDown={(e) => e.stopPropagation()}
                 >
                   + Create New Session
@@ -625,16 +614,8 @@ export class MultmuxShape extends BaseBoxShapeUtil<IMultmuxShape> {
                     color: '#cdd6f4',
                     cursor: 'pointer',
                     fontFamily: 'monospace',
-                    touchAction: 'manipulation',
-                    minHeight: '44px',
                   }}
                   onPointerDown={(e) => e.stopPropagation()}
-                  onTouchStart={(e) => e.stopPropagation()}
-                  onTouchEnd={(e) => {
-                    e.stopPropagation()
-                    e.preventDefault()
-                    if (!loadingSessions) fetchSessions()
-                  }}
                   onMouseDown={(e) => e.stopPropagation()}
                 >
                   {loadingSessions ? 'Loading...' : 'Refresh Sessions'}
@@ -667,16 +648,8 @@ export class MultmuxShape extends BaseBoxShapeUtil<IMultmuxShape> {
                           cursor: 'pointer',
                           textAlign: 'left',
                           fontFamily: 'monospace',
-                          touchAction: 'manipulation',
-                          minHeight: '44px',
                         }}
                         onPointerDown={(e) => e.stopPropagation()}
-                        onTouchStart={(e) => e.stopPropagation()}
-                        onTouchEnd={(e) => {
-                          e.stopPropagation()
-                          e.preventDefault()
-                          handleJoinSession(session.id)
-                        }}
                         onMouseDown={(e) => e.stopPropagation()}
                       >
                         <div style={{ fontWeight: 'bold' }}>{session.name}</div>
@@ -701,16 +674,8 @@ export class MultmuxShape extends BaseBoxShapeUtil<IMultmuxShape> {
                     fontSize: '12px',
                     fontFamily: 'monospace',
                     padding: '4px 0',
-                    touchAction: 'manipulation',
-                    minHeight: '44px',
                   }}
                   onPointerDown={(e) => e.stopPropagation()}
-                  onTouchStart={(e) => e.stopPropagation()}
-                  onTouchEnd={(e) => {
-                    e.stopPropagation()
-                    e.preventDefault()
-                    setShowAdvanced(!showAdvanced)
-                  }}
                   onMouseDown={(e) => e.stopPropagation()}
                 >
                   {showAdvanced ? '▼' : '▶'} Advanced Settings
@@ -739,11 +704,8 @@ export class MultmuxShape extends BaseBoxShapeUtil<IMultmuxShape> {
                           color: '#cdd6f4',
                           fontFamily: 'monospace',
                           fontSize: '12px',
-                          touchAction: 'manipulation',
-                          minHeight: '44px',
                         }}
                         onPointerDown={(e) => e.stopPropagation()}
-                        onTouchStart={(e) => e.stopPropagation()}
                         onMouseDown={(e) => e.stopPropagation()}
                       />
                     </label>

src/shapes/TranscriptionShapeUtil.tsx

@@ -35,9 +35,8 @@ const AutoResizeTextarea: React.FC<{
   style: React.CSSProperties
   placeholder?: string
   onPointerDown?: (e: React.PointerEvent) => void
-  onTouchStart?: (e: React.TouchEvent) => void
   onWheel?: (e: React.WheelEvent) => void
-}> = ({ value, onChange, onBlur, onKeyDown, style, placeholder, onPointerDown, onTouchStart, onWheel }) => {
+}> = ({ value, onChange, onBlur, onKeyDown, style, placeholder, onPointerDown, onWheel }) => {
   const textareaRef = useRef<HTMLTextAreaElement>(null)
 
   useEffect(() => {
@@ -57,12 +56,8 @@ const AutoResizeTextarea: React.FC<{
       onBlur={onBlur}
       onKeyDown={onKeyDown}
       onPointerDown={onPointerDown}
-      onTouchStart={onTouchStart}
       onWheel={onWheel}
-      style={{
+      style={style}
-        ...style,
-        touchAction: 'manipulation',
-      }}
       placeholder={placeholder}
       autoFocus
     />
@@ -643,9 +638,6 @@ export class TranscriptionShape extends BaseBoxShapeUtil<ITranscription> {
       zIndex: 1000,
       position: 'relative',
       pointerEvents: 'auto', // Ensure button can receive clicks
-      touchAction: 'manipulation',
-      minWidth: '44px',
-      minHeight: '32px',
     }
 
     // Custom header content with status indicators and controls
@@ -673,12 +665,6 @@ export class TranscriptionShape extends BaseBoxShapeUtil<ITranscription> {
                 style={buttonStyle}
                 onClick={handleSaveEdit}
                 onPointerDown={(e) => e.stopPropagation()}
-                onTouchStart={(e) => e.stopPropagation()}
-                onTouchEnd={(e) => {
-                  e.stopPropagation()
-                  e.preventDefault()
-                  handleSaveEdit()
-                }}
               >
                 Save
               </button>
@@ -686,12 +672,6 @@ export class TranscriptionShape extends BaseBoxShapeUtil<ITranscription> {
                 style={buttonStyle}
                 onClick={handleCancelEdit}
                 onPointerDown={(e) => e.stopPropagation()}
-                onTouchStart={(e) => e.stopPropagation()}
-                onTouchEnd={(e) => {
-                  e.stopPropagation()
-                  e.preventDefault()
-                  handleCancelEdit()
-                }}
               >
                 Cancel
               </button>
@@ -743,7 +723,6 @@ export class TranscriptionShape extends BaseBoxShapeUtil<ITranscription> {
               style={textareaStyle}
               placeholder=""
               onPointerDown={(e) => e.stopPropagation()}
-              onTouchStart={(e) => e.stopPropagation()}
               onWheel={handleWheel}
             />
           ) : (
@@ -774,13 +753,13 @@ export class TranscriptionShape extends BaseBoxShapeUtil<ITranscription> {
             <button
               style={{
                 ...buttonStyle,
-                background: isRecording
+                background: isRecording 
                   ? "#ff4444"  // Red when recording
                   : isPaused
                   ? "#ffa500"  // Orange when paused
                   : (useWebSpeech ? webSpeechSupported : modelLoaded) ? "#007bff" : "#6c757d",  // Blue when ready to start, gray when loading
                 color: "white",
-                border: isRecording
+                border: isRecording 
                   ? "1px solid #cc0000"  // Red border when recording
                   : isPaused
                   ? "1px solid #cc8500"  // Orange border when paused
@@ -796,16 +775,6 @@ export class TranscriptionShape extends BaseBoxShapeUtil<ITranscription> {
               onPointerDown={(e) => {
                 e.stopPropagation()
               }}
-              onTouchStart={(e) => {
-                e.stopPropagation()
-              }}
-              onTouchEnd={(e) => {
-                e.stopPropagation()
-                e.preventDefault()
-                if (useWebSpeech ? webSpeechSupported : modelLoaded) {
-                  handleTranscriptionToggle()
-                }
-              }}
               disabled={useWebSpeech ? !webSpeechSupported : !modelLoaded}
               title={useWebSpeech ? (!webSpeechSupported ? "Web Speech API not supported" : "") : (!modelLoaded ? "Whisper model is loading - Please wait..." : "")}
             >
@@ -813,8 +782,8 @@ export class TranscriptionShape extends BaseBoxShapeUtil<ITranscription> {
                 if (isPaused) {
                   return "Resume"
                 }
-                const buttonText = isRecording
+                const buttonText = isRecording 
-                  ? "Stop"
+                  ? "Stop" 
                   : "Start"
                 return buttonText
               })()}
@@ -835,14 +804,6 @@ export class TranscriptionShape extends BaseBoxShapeUtil<ITranscription> {
                 onPointerDown={(e) => {
                   e.stopPropagation()
                 }}
-                onTouchStart={(e) => {
-                  e.stopPropagation()
-                }}
-                onTouchEnd={(e) => {
-                  e.stopPropagation()
-                  e.preventDefault()
-                  handlePauseToggle()
-                }}
                 title="Pause transcription"
               >
                 Pause

src/shapes/VideoGenShapeUtil.tsx

@@ -482,15 +482,13 @@ export class VideoGenShape extends BaseBoxShapeUtil<IVideoGen> {
                           setImageBase64('')
                         }}
                         onPointerDown={(e) => e.stopPropagation()}
-                        onTouchStart={(e) => e.stopPropagation()}
-                        onTouchEnd={(e) => e.stopPropagation()}
                         disabled={isGenerating}
                         style={{
                           position: 'absolute',
                           top: '4px',
                           right: '4px',
-                          width: '32px',
+                          width: '24px',
-                          height: '32px',
+                          height: '24px',
                           borderRadius: '50%',
                           border: 'none',
                           backgroundColor: 'rgba(0,0,0,0.6)',
@@ -499,8 +497,7 @@ export class VideoGenShape extends BaseBoxShapeUtil<IVideoGen> {
                           fontSize: '14px',
                           display: 'flex',
                           alignItems: 'center',
-                          justifyContent: 'center',
+                          justifyContent: 'center'
-                          touchAction: 'manipulation',
                         }}
                       >
                         ×
@@ -512,12 +509,6 @@ export class VideoGenShape extends BaseBoxShapeUtil<IVideoGen> {
                       <button
                         onClick={() => fileInputRef.current?.click()}
                         onPointerDown={(e) => e.stopPropagation()}
-                        onTouchStart={(e) => e.stopPropagation()}
-                        onTouchEnd={(e) => {
-                          e.stopPropagation()
-                          e.preventDefault()
-                          fileInputRef.current?.click()
-                        }}
                         disabled={isGenerating}
                         style={{
                           flex: 1,
@@ -531,9 +522,7 @@ export class VideoGenShape extends BaseBoxShapeUtil<IVideoGen> {
                           display: 'flex',
                           alignItems: 'center',
                           justifyContent: 'center',
-                          gap: '6px',
+                          gap: '6px'
-                          touchAction: 'manipulation',
-                          minHeight: '44px',
                         }}
                       >
                         📤 Upload Image
@@ -560,7 +549,6 @@ export class VideoGenShape extends BaseBoxShapeUtil<IVideoGen> {
                       placeholder="Or paste image URL..."
                       disabled={isGenerating}
                       onPointerDown={(e) => e.stopPropagation()}
-                      onTouchStart={(e) => e.stopPropagation()}
                       onMouseDown={(e) => e.stopPropagation()}
                       style={{
                         width: '100%',
@@ -570,9 +558,7 @@ export class VideoGenShape extends BaseBoxShapeUtil<IVideoGen> {
                         border: '1px solid #ddd',
                         borderRadius: '6px',
                         fontSize: '12px',
-                        boxSizing: 'border-box',
+                        boxSizing: 'border-box'
-                        touchAction: 'manipulation',
-                        minHeight: '44px',
                       }}
                     />
                   )}
@@ -592,7 +578,6 @@ export class VideoGenShape extends BaseBoxShapeUtil<IVideoGen> {
                     }
                     disabled={isGenerating}
                     onPointerDown={(e) => e.stopPropagation()}
-                    onTouchStart={(e) => e.stopPropagation()}
                     onMouseDown={(e) => e.stopPropagation()}
                     style={{
                       width: '100%',
@@ -605,8 +590,7 @@ export class VideoGenShape extends BaseBoxShapeUtil<IVideoGen> {
                       fontSize: '13px',
                       fontFamily: 'inherit',
                       resize: 'vertical',
-                      boxSizing: 'border-box',
+                      boxSizing: 'border-box'
-                      touchAction: 'manipulation',
                     }}
                   />
                 </div>
@@ -630,7 +614,6 @@ export class VideoGenShape extends BaseBoxShapeUtil<IVideoGen> {
                       }}
                       disabled={isGenerating}
                       onPointerDown={(e) => e.stopPropagation()}
-                      onTouchStart={(e) => e.stopPropagation()}
                       onMouseDown={(e) => e.stopPropagation()}
                       style={{
                         width: '100%',
@@ -640,9 +623,7 @@ export class VideoGenShape extends BaseBoxShapeUtil<IVideoGen> {
                         border: '1px solid #ddd',
                         borderRadius: '6px',
                         fontSize: '13px',
-                        boxSizing: 'border-box',
+                        boxSizing: 'border-box'
-                        touchAction: 'manipulation',
-                        minHeight: '44px',
                       }}
                     />
                   </div>
@@ -651,14 +632,6 @@ export class VideoGenShape extends BaseBoxShapeUtil<IVideoGen> {
                     onClick={handleGenerate}
                     disabled={isGenerating || !prompt.trim()}
                     onPointerDown={(e) => e.stopPropagation()}
-                    onTouchStart={(e) => e.stopPropagation()}
-                    onTouchEnd={(e) => {
-                      e.stopPropagation()
-                      e.preventDefault()
-                      if (!isGenerating && prompt.trim()) {
-                        handleGenerate()
-                      }
-                    }}
                     onMouseDown={(e) => e.stopPropagation()}
                     style={{
                       padding: '8px 20px',
@@ -671,9 +644,7 @@ export class VideoGenShape extends BaseBoxShapeUtil<IVideoGen> {
                       cursor: isGenerating ? 'not-allowed' : 'pointer',
                       transition: 'all 0.2s',
                       whiteSpace: 'nowrap',
-                      opacity: isGenerating || !prompt.trim() ? 0.6 : 1,
+                      opacity: isGenerating || !prompt.trim() ? 0.6 : 1
-                      touchAction: 'manipulation',
-                      minHeight: '44px',
                     }}
                   >
                     {isGenerating ? 'Generating...' : (mode === 'i2v' ? 'Animate Image' : 'Generate Video')}
@@ -726,17 +697,14 @@ export class VideoGenShape extends BaseBoxShapeUtil<IVideoGen> {
                   controls
                   autoPlay
                   loop
-                  playsInline
                   onPointerDown={(e) => e.stopPropagation()}
-                  onTouchStart={(e) => e.stopPropagation()}
                   onLoadedData={() => console.log('🎬 VideoGen: Video loaded successfully')}
                   onError={(e) => console.error('🎬 VideoGen: Video load error:', e)}
                   style={{
                     width: '100%',
                     maxHeight: '280px',
                     borderRadius: '6px',
-                    backgroundColor: '#000',
+                    backgroundColor: '#000'
-                    touchAction: 'manipulation',
                   }}
                 />
 
@@ -765,8 +733,6 @@ export class VideoGenShape extends BaseBoxShapeUtil<IVideoGen> {
                       })
                     }}
                     onPointerDown={(e) => e.stopPropagation()}
-                    onTouchStart={(e) => e.stopPropagation()}
-                    onTouchEnd={(e) => e.stopPropagation()}
                     onMouseDown={(e) => e.stopPropagation()}
                     style={{
                       flex: 1,
@@ -777,9 +743,7 @@ export class VideoGenShape extends BaseBoxShapeUtil<IVideoGen> {
                       borderRadius: '6px',
                       fontSize: '12px',
                       fontWeight: '500',
-                      cursor: 'pointer',
+                      cursor: 'pointer'
-                      touchAction: 'manipulation',
-                      minHeight: '44px',
                     }}
                   >
                     New Video
@@ -789,8 +753,6 @@ export class VideoGenShape extends BaseBoxShapeUtil<IVideoGen> {
                     href={videoUrl}
                     download="generated-video.mp4"
                     onPointerDown={(e) => e.stopPropagation()}
-                    onTouchStart={(e) => e.stopPropagation()}
-                    onTouchEnd={(e) => e.stopPropagation()}
                     onMouseDown={(e) => e.stopPropagation()}
                     style={{
                       flex: 1,
@@ -803,12 +765,7 @@ export class VideoGenShape extends BaseBoxShapeUtil<IVideoGen> {
                       fontWeight: '600',
                       textAlign: 'center',
                       textDecoration: 'none',
-                      cursor: 'pointer',
+                      cursor: 'pointer'
-                      touchAction: 'manipulation',
-                      minHeight: '44px',
-                      display: 'flex',
-                      alignItems: 'center',
-                      justifyContent: 'center',
                     }}
                   >
                     Download