@pheem49/mint 1.8.2 → 1.10.0

package/src/renderer/src/components/DashboardSidebar.tsx

@@ -1,6 +1,6 @@
 import { useState, useEffect, useRef } from 'react'
 
-export type DashboardView = 'chat' | 'pictures' | 'model' | 'workspace' | 'imagine' | 'workflows'
+export type DashboardView = 'chat' | 'pictures' | 'model' | 'workspace' | 'imagine' | 'workflows' | 'veo'
 
 interface ChatSessionItem {
   id: string
@@ -181,7 +181,7 @@ export default function DashboardSidebar({
       </button>
 
       <div className="sidebar-more-container" ref={moreContainerRef}>
-        <button className={`sidebar-top-action ${isMoreOpen || view === 'imagine' || view === 'workflows' ? 'is-active' : ''}`} onClick={() => setIsMoreOpen(!isMoreOpen)}>
+        <button className={`sidebar-top-action ${isMoreOpen || view === 'imagine' || view === 'workflows' || view === 'veo' ? 'is-active' : ''}`} onClick={() => setIsMoreOpen(!isMoreOpen)}>
           <span aria-hidden="true" style={{ display: 'inline-flex', alignItems: 'center' }}>
             <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
               <circle cx="12" cy="12" r="1.5"></circle>
@@ -214,6 +214,15 @@ export default function DashboardSidebar({
               </span>
               <span>Workflow (Beta)</span>
             </button>
+            <button className={`popover-item ${view === 'veo' ? 'active' : ''}`} onClick={() => { onSetView('veo'); setIsMoreOpen(false); }}>
+              <span aria-hidden="true" style={{ display: 'inline-flex', alignItems: 'center' }}>
+                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+                  <polygon points="23 7 16 12 23 17 23 7"></polygon>
+                  <rect x="1" y="5" width="15" height="14" rx="2" ry="2"></rect>
+                </svg>
+              </span>
+              <span>Veo Studio</span>
+            </button>
           </div>
         )}
       </div>

package/src/renderer/src/components/ImageStudioPanel.tsx

@@ -55,9 +55,10 @@ const PROVIDER_MODELS: Record<string, { value: string; label: string }[]> = {
   ],
   replicate: [
     { value: 'black-forest-labs/flux-1.1-pro',          label: 'FLUX 1.1 Pro (Default)' },
+    { value: 'timbrooks/instruct-pix2pix',              label: 'InstructPix2Pix (Image Editing)' },
+    { value: 'black-forest-labs/flux-fill-dev',         label: 'FLUX Fill (Inpainting)' },
     { value: 'black-forest-labs/flux-schnell',          label: 'FLUX Schnell (fast)' },
     { value: 'stability-ai/sdxl',                       label: 'SDXL' },
-    { value: 'bytedance/sdxl-lightning-4step',          label: 'SDXL Lightning' },
   ],
 }
 
@@ -146,6 +147,36 @@ export default function ImageStudioPanel({ view, onRefreshPictures, onSendToChat
 
   const effectiveModel = selectedModel === 'custom' ? customModel.trim() : selectedModel
 
+  const [inputImage, setInputImage] = useState<string | null>(null)
+  const [isDragging, setIsDragging] = useState(false)
+  const fileInputRef = useRef<HTMLInputElement>(null)
+
+  const handleImageUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0]
+    if (!file) return
+    const reader = new FileReader()
+    reader.onload = (evt) => {
+      if (typeof evt.target?.result === 'string') {
+        setInputImage(evt.target.result)
+      }
+    }
+    reader.readAsDataURL(file)
+  }
+
+  const handleDrop = (e: React.DragEvent) => {
+    e.preventDefault()
+    setIsDragging(false)
+    const file = e.dataTransfer.files?.[0]
+    if (!file || !file.type.startsWith('image/')) return
+    const reader = new FileReader()
+    reader.onload = (evt) => {
+      if (typeof evt.target?.result === 'string') {
+        setInputImage(evt.target.result)
+      }
+    }
+    reader.readAsDataURL(file)
+  }
+
   const handleGenerate = useCallback(async () => {
     const trimmed = prompt.trim()
     if (!trimmed || generating) return
@@ -161,6 +192,8 @@ export default function ImageStudioPanel({ view, onRefreshPictures, onSendToChat
       numImages,
       model: effectiveModel || undefined,
       provider: selectedProvider,
+      imageDataUri: inputImage || undefined,
+      mode: inputImage ? 'edit' : 'generate',
     }
 
     try {
@@ -176,7 +209,7 @@ export default function ImageStudioPanel({ view, onRefreshPictures, onSendToChat
     } finally {
       setGenerating(false)
     }
-  }, [prompt, negativePrompt, aspectRatio, numImages, generating, onRefreshPictures, selectedProvider, effectiveModel])
+  }, [prompt, negativePrompt, aspectRatio, numImages, generating, onRefreshPictures, selectedProvider, effectiveModel, inputImage])
 
   const handleKeyDown = (e: React.KeyboardEvent) => {
     if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') {
@@ -299,11 +332,61 @@ export default function ImageStudioPanel({ view, onRefreshPictures, onSendToChat
             </div>
           )}
 
+          {/* Image Editing / Source Image Attachment */}
+          <div className="img-studio-field">
+            <label className="img-studio-label">
+              Source Image (Optional for Image Editing)
+              <span className="img-studio-label-hint">Upload an image to edit / inpaint</span>
+            </label>
+            {inputImage ? (
+              <div className="img-studio-preview-card">
+                <img src={inputImage} alt="Input source" className="img-studio-preview-thumb" />
+                <div className="img-studio-preview-info">
+                  <div className="img-studio-preview-title">
+                    <span>Source Image Attached</span>
+                  </div>
+                  <div className="img-studio-preview-subtitle">Ready for Image Editing</div>
+                </div>
+                <button
+                  type="button"
+                  className="img-studio-preview-remove"
+                  onClick={() => setInputImage(null)}
+                >
+                  ✕ Remove
+                </button>
+              </div>
+            ) : (
+              <div
+                className={`img-studio-dropzone ${isDragging ? 'is-dragging' : ''}`}
+                onClick={() => fileInputRef.current?.click()}
+                onDragOver={(e) => { e.preventDefault(); setIsDragging(true); }}
+                onDragLeave={() => setIsDragging(false)}
+                onDrop={handleDrop}
+              >
+                <input
+                  ref={fileInputRef}
+                  type="file"
+                  accept="image/*"
+                  onChange={handleImageUpload}
+                  disabled={generating}
+                  style={{ display: 'none' }}
+                />
+                <svg className="img-studio-dropzone-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                  <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
+                  <polyline points="17 8 12 3 7 8"/>
+                  <line x1="12" y1="3" x2="12" y2="15"/>
+                </svg>
+                <div className="img-studio-dropzone-text">Click or Drag & Drop image here</div>
+                <div className="img-studio-dropzone-subtext">PNG, JPG, WEBP up to 10MB</div>
+              </div>
+            )}
+          </div>
+
           {/* Prompt */}
           <div className="img-studio-field">
             <label className="img-studio-label" htmlFor="img-studio-prompt">
-              Prompt
-              <span className="img-studio-label-hint">Describe the image you want</span>
+              {inputImage ? 'Editing Instruction Prompt' : 'Prompt'}
+              <span className="img-studio-label-hint">{inputImage ? 'Describe what to edit or remove' : 'Describe the image you want'}</span>
             </label>
             <textarea
               id="img-studio-prompt"

package/src/renderer/src/components/MintDashboard.tsx

@@ -7,6 +7,7 @@ import {
   getRecentInteractions,
   saveSystemInteraction,
   getRuntimeStatus,
+  setActiveModel,
   listChatSessions,
   listSavedPictures,
   selectWorkspaceDirectory,
@@ -15,6 +16,7 @@ import {
   cancelChatMessage,
   submitToolApproval,
   listen,
+  readClipboardImage,
   type AgentProgress,
   type ChatResponse,
   type ChatSession,
@@ -22,9 +24,11 @@ import {
   type PictureEntry,
   type RuntimeStatus,
 } from '../tauri'
+
 import ChatPanel from './ChatPanel'
 import DashboardSidebar, { type DashboardView } from './DashboardSidebar'
 import ImageStudioPanel from './ImageStudioPanel'
+import VeoStudioPanel from './VeoStudioPanel'
 import ModelPanel from './ModelPanel'
 import type { ModelInteraction } from './ModelPanel'
 import PicturesLibrary from './PicturesLibrary'
@@ -37,6 +41,8 @@ import {
   createTrimmedImagePreview,
   applyThemeStyles,
 } from '../../shared/utils/ui'
+import { executeSlashCommand } from '../../shared/utils/slashCommandProcessor'
+
 
 const EXPRESSIONS = [
   "Default",
@@ -106,6 +112,7 @@ export default function MintDashboard() {
   const [sending, setSending] = useState(false)
   const [sendingMessage, setSendingMessage] = useState('')
   const [sendingImageCount, setSendingImageCount] = useState(0)
+  const [sendingVideoCount, setSendingVideoCount] = useState(0)
   const [streamedReply, setStreamedReply] = useState('')
   const [streamedResponse, setStreamedResponse] = useState<ChatResponse | null>(null)
   const [streamingConversationId, setStreamingConversationId] = useState<string | null>(null)
@@ -114,6 +121,7 @@ export default function MintDashboard() {
   const [thinkingExpanded, setThinkingExpanded] = useState<Record<string, boolean>>({})
   const liveThinkingOpenRef = useRef(true)
   const [imageAttachments, setImageAttachments] = useState<Array<{ dataUri: string; name: string; previewDataUri?: string }>>([])
+  const [videoAttachments, setVideoAttachments] = useState<Array<{ dataUri: string; name: string }>>([])
   const [documentAttachment, setDocumentAttachment] = useState<DocumentAttachment | null>(null)
   const [pendingApproval, setPendingApproval] = useState<any | null>(null)
   const [sessionAutoApproved, setSessionAutoApproved] = useState(false)
@@ -138,6 +146,7 @@ export default function MintDashboard() {
   const [conversationId, setConversationId] = useState(activeConversationId)
   const [chatSessions, setChatSessions] = useState<ChatSession[]>([])
   const chatEnd = useRef<HTMLDivElement | null>(null)
+  const lastNativePasteTimeRef = useRef(0)
   const startupReady = (dashboardDataReady && modelReady) || startupTimedOut
   const [proactiveSuggestion, setProactiveSuggestion] = useState<any>(null)
 
@@ -277,9 +286,21 @@ export default function MintDashboard() {
           setImageAttachments((current) => [...current, { dataUri: image, previewDataUri, name: 'Screen capture' }])
         })
     })
+    const handleWindowFocus = () => {
+      getRuntimeStatus().then(setStatus).catch(() => {})
+      window.settingsApi?.getSettings?.().then((loaded: any) => {
+        if (loaded) {
+          setSettingsConfig(loaded)
+          applyThemeStyles(loaded)
+        }
+      }).catch(() => {})
+    }
+    window.addEventListener('focus', handleWindowFocus)
+
     window.api?.onSettingsChanged?.((loaded: any) => {
       setSettingsConfig(loaded)
       applyThemeStyles(loaded)
+      getRuntimeStatus().then(setStatus).catch(() => {})
     })
 
     const unlistenPromise = listen<any>('tool-approval-requested', (event) => {
@@ -295,6 +316,7 @@ export default function MintDashboard() {
       setProactiveSuggestion(suggestion)
     })
     return () => {
+      window.removeEventListener('focus', handleWindowFocus)
       unlistenPromise?.then?.((unlisten) => unlisten?.())
       unlistenSpotlight?.then?.((unlisten) => unlisten?.())
       unlistenVision?.then?.((unlisten) => unlisten?.())
@@ -404,6 +426,7 @@ export default function MintDashboard() {
       setStreamingConversationId(null)
       setSendingMessage('')
       setSendingImageCount(0)
+      setSendingVideoCount(0)
     }
   }
 
@@ -411,6 +434,7 @@ export default function MintDashboard() {
     promptText: string,
     options: {
       imageAttachments?: Array<{ dataUri: string; name: string; previewDataUri?: string }>
+      videoAttachments?: Array<{ dataUri: string; name: string }>
       audioDataUri?: string | null
       documentAttachment?: DocumentAttachment | null
       systemInstruction?: string
@@ -419,14 +443,17 @@ export default function MintDashboard() {
   ) {
     if (sending) return
     const outgoingImages = options.imageAttachments ?? []
+    const outgoingVideos = options.videoAttachments ?? []
     const outgoingDocument = options.documentAttachment ?? null
     const shouldUseAgentMode = agentMode || promptText.toLowerCase().startsWith('search web:')
     const outgoingImage = outgoingImages.map((img) => img.dataUri).join(' ')
+    const outgoingVideo = outgoingVideos.map((vid) => vid.dataUri).join(' ')
     const outgoingImageCount = outgoingImages.length
     setSending(true)
     setStreamingConversationId(conversationId)
     setSendingMessage(promptText)
     setSendingImageCount(outgoingImageCount)
+    setSendingVideoCount(outgoingVideos.length)
     setError('')
     setStreamedReply('')
     setStreamedResponse(null)
@@ -437,6 +464,7 @@ export default function MintDashboard() {
     if (options.clearComposer) {
       setMessage('')
       setImageAttachments([])
+      setVideoAttachments([])
       setDocumentAttachment(null)
     }
 
@@ -446,6 +474,7 @@ export default function MintDashboard() {
         (chunk) => setStreamedReply((current) => `${current}${chunk}`),
         outgoingImage,
         options.audioDataUri ?? null,
+        outgoingVideo,
         options.systemInstruction ?? '',
         (progress) => {
           progressSnapshot.push(progress)
@@ -486,6 +515,7 @@ export default function MintDashboard() {
       setAgentActivitySnapshots((current) => mergeActivitySnapshots(current, enrichedHistory))
       await refreshChatSessions()
       await refreshPictures()
+      getRuntimeStatus().then(setStatus).catch(() => {})
       setStreamedReply('')
       setStreamedResponse(null)
     } catch (reason) {
@@ -495,6 +525,7 @@ export default function MintDashboard() {
       setStreamingConversationId(null)
       setSendingMessage('')
       setSendingImageCount(0)
+      setSendingVideoCount(0)
     }
   }
 
@@ -513,12 +544,91 @@ export default function MintDashboard() {
     event.preventDefault()
     const trimmed = message.trim()
     const currentImages = imageAttachments
+    const currentVideos = videoAttachments
     const currentDocument = documentAttachment
-    const hasAttachments = currentImages.length > 0 || Boolean(currentDocument)
+    const hasAttachments = currentImages.length > 0 || currentVideos.length > 0 || Boolean(currentDocument)
     if ((!trimmed && !hasAttachments) || sending) return
-    const promptText = trimmed || (currentImages.length > 1 ? 'Describe these images.' : currentImages.length === 1 ? 'Describe this image.' : 'Summarize this document.')
+
+    if (trimmed.startsWith('/')) {
+      const activeP = status?.activeProvider || ''
+      const activeM = settingsConfig?.model || ''
+      const slashResult = executeSlashCommand(trimmed, {
+        activeProvider: activeP,
+        activeModel: activeM,
+        availableProviders: status?.availableProviders || [],
+        workspacePath,
+        interactionsCount: interactions.length,
+        fastMode: settingsConfig?.fastMode ?? false,
+        multiAgent: settingsConfig?.multiAgent ?? false,
+      })
+
+      if (slashResult.handled) {
+        setMessage('')
+        setImageAttachments([])
+        setVideoAttachments([])
+        setDocumentAttachment(null)
+
+        if (slashResult.action === 'set_agent_mode') {
+          setAgentMode(true)
+          if (slashResult.payload?.prompt) {
+            await sendPrompt(slashResult.payload.prompt, { clearComposer: true })
+          }
+          return
+        }
+
+        if (slashResult.action === 'change_workspace') {
+          if (slashResult.payload?.path) {
+            setWorkspacePath(slashResult.payload.path)
+          } else {
+            selectWorkspaceDirectory().then((res) => {
+              if (res) setWorkspacePath(res)
+            }).catch(() => {})
+          }
+        } else if (slashResult.action === 'open_image_picker') {
+          document.getElementById('vision-file-input')?.click()
+          return
+        } else if (slashResult.action === 'paste_image') {
+          readClipboardImage().then((uri) => {
+            if (uri) setImageAttachments((curr) => [...curr, { dataUri: uri, name: 'Clipboard Image' }])
+          }).catch(() => {})
+          return
+        } else if (slashResult.action === 'open_plugins') {
+          setView('settings')
+          return
+        } else if (slashResult.action === 'generate_veo') {
+          setView('veo_studio')
+          return
+        } else if (slashResult.action === 'set_provider_model' && slashResult.payload?.target) {
+          const target = slashResult.payload.target
+          if (status?.availableProviders.includes(target)) {
+            setActiveModel(target).then(() => getRuntimeStatus().then(setStatus)).catch(() => {})
+          }
+        }
+
+        if (slashResult.systemText) {
+          const systemMsg = {
+            id: Date.now(),
+            userText: trimmed,
+            aiText: slashResult.systemText,
+            createdAt: new Date().toISOString(),
+            provider: 'system',
+            model: 'mint-cli',
+          }
+          setInteractions((prev) => [...prev, systemMsg])
+          saveSystemInteraction(conversationId, trimmed, slashResult.systemText || '', 'system', 'mint-cli').catch(() => {})
+        }
+        return
+      }
+    }
+
+    const promptText = trimmed || (
+      currentImages.length > 0 ? (currentImages.length > 1 ? 'Describe these images.' : 'Describe this image.') :
+      currentVideos.length > 0 ? (currentVideos.length > 1 ? 'Describe these videos.' : 'Describe this video.') :
+      'Summarize this document.'
+    )
     await sendPrompt(promptText, {
       imageAttachments: currentImages,
+      videoAttachments: currentVideos,
       documentAttachment: currentDocument,
       clearComposer: true,
     })
@@ -548,6 +658,28 @@ export default function MintDashboard() {
       event.target.value = ''
     }
   }
+  const MAX_VIDEO_BYTES = 25 * 1024 * 1024 // 25 MB
+  async function selectVideo(event: ChangeEvent<HTMLInputElement>) {
+    const file = event.target.files?.[0]
+    if (!file) return
+    try {
+      if (file.size > MAX_VIDEO_BYTES) {
+        setError(`Video is too large. Maximum allowed is ${Math.round(MAX_VIDEO_BYTES / (1024 * 1024))} MB.`)
+        return
+      }
+      const dataUri = await new Promise<string>((resolve, reject) => {
+        const reader = new FileReader()
+        reader.onload = () => resolve(reader.result as string)
+        reader.onerror = reject
+        reader.readAsDataURL(file)
+      })
+      setVideoAttachments((current) => [...current, { dataUri, name: file.name }])
+    } catch (reason) {
+      setError(errorMessage(reason))
+    } finally {
+      event.target.value = ''
+    }
+  }
 
   function pasteImage(clipboardData: DataTransfer) {
     let file: File | null = null
@@ -575,7 +707,28 @@ export default function MintDashboard() {
       }
     }
 
-    if (!file) return false
+    if (!file) {
+      // Fallback for Tauri desktop app where WebKitGTK/WebView clipboard paste events do not provide file handles
+      const now = Date.now()
+      if (now - lastNativePasteTimeRef.current > 100) {
+        lastNativePasteTimeRef.current = now
+        readClipboardImage().then((dataUri) => {
+          if (dataUri) {
+            const name = 'Pasted image'
+            createTrimmedImagePreview(dataUri)
+              .catch(() => dataUri)
+              .then((previewDataUri) => {
+                setImageAttachments((current) => [...current, { dataUri, previewDataUri, name }])
+              })
+          }
+        }).catch((err) => {
+          console.warn('Failed to read clipboard image via Tauri API:', err)
+        })
+      }
+      return false
+    }
+
+
 
     readImage(file)
       .then((dataUri) => {
@@ -591,6 +744,7 @@ export default function MintDashboard() {
   }
 
 
+
   async function selectDocument(event: ChangeEvent<HTMLInputElement>) {
     const file = event.target.files?.[0]
     if (!file) return
@@ -736,6 +890,11 @@ export default function MintDashboard() {
     else if (provider === 'huggingface') providerName = 'HF'
     else if (provider === 'local_openai') providerName = 'Local'
     else if (provider === 'ollama') providerName = 'Ollama'
+    else if (provider.startsWith('custom:')) {
+      const id = provider.replace(/^custom:/, '')
+      const cp = (settingsConfig?.customProviders ?? []).find((p: any) => p.id === id)
+      providerName = cp?.displayName || id
+    }
 
     if (providerName && providerName === provider) {
       providerName = providerName.charAt(0).toUpperCase() + providerName.slice(1)
@@ -753,13 +912,21 @@ export default function MintDashboard() {
       case 'huggingface': return config.hfModel || 'meta-llama/Meta-Llama-3-8B-Instruct'
       case 'local_openai': return config.localModelName || 'llama3'
       case 'ollama': return config.ollamaModel || 'llama3:latest'
-      default: return ''
+      default: {
+        if (provider.startsWith('custom:')) {
+          const id = provider.replace(/^custom:/, '')
+          const cp = (config.customProviders ?? []).find((p: any) => p.id === id)
+          return (config.customModelSelections ?? {})[id] ?? cp?.models[0]?.modelId ?? ''
+        }
+        return ''
+      }
     }
   }
 
   async function changeProvider(provider: string) {
     try {
       const config = await window.settingsApi.getSettings()
+      if (config.aiProvider === provider) return
       config.aiProvider = provider
       await window.settingsApi.saveSettings(config)
       setSettingsConfig(config)
@@ -768,7 +935,7 @@ export default function MintDashboard() {
       // Record system event in chat history
       const activeModel = getActiveModelName(config, provider)
       const displayName = formatProviderChangeText(provider, activeModel)
-      await saveSystemInteraction(conversationId, displayName, 'system', 'provider_change')
+      await saveSystemInteraction(conversationId, displayName, '', 'system', 'provider_change')
       await refreshHistory()
     } catch (reason) {
       setError(errorMessage(reason))
@@ -779,6 +946,8 @@ export default function MintDashboard() {
     try {
       const config = await window.settingsApi.getSettings()
       const provider = config.aiProvider
+      const currentModel = getActiveModelName(config, provider)
+      if (currentModel === modelName) return
       if (provider === 'gemini') {
         config.geminiModel = modelName
       } else if (provider === 'openai') {
@@ -795,6 +964,12 @@ export default function MintDashboard() {
         config.localModelName = modelName
       } else if (provider === 'ollama') {
         config.ollamaModel = modelName
+      } else if (provider.startsWith('custom:')) {
+        const id = provider.replace(/^custom:/, '')
+        config.customModelSelections = {
+          ...(config.customModelSelections ?? {}),
+          [id]: modelName
+        }
       }
       await window.settingsApi.saveSettings(config)
       setSettingsConfig(config)
@@ -802,7 +977,7 @@ export default function MintDashboard() {
 
       // Record system event in chat history
       const displayName = formatProviderChangeText(provider, modelName)
-      await saveSystemInteraction(conversationId, displayName, 'system', 'provider_change')
+      await saveSystemInteraction(conversationId, displayName, '', 'system', 'provider_change')
       await refreshHistory()
     } catch (reason) {
       setError(errorMessage(reason))
@@ -925,7 +1100,7 @@ export default function MintDashboard() {
             expressionIndex={expressionIndex}
             accessoryIndex={accessoryIndex}
             isLocked={isLocked}
-            isActive={modelVisible && view !== 'pictures' && view !== 'workspace' && view !== 'workflows'}
+            isActive={modelVisible && view !== 'pictures' && view !== 'workspace' && view !== 'workflows' && view !== 'imagine' && view !== 'veo'}
             layoutPreset={layoutPreset}
             sending={sending}
             interactionEnabled={interactionEnabled}
@@ -947,11 +1122,13 @@ export default function MintDashboard() {
             streamedReply={streamingConversationId === conversationId ? streamedReply : ''}
             streamedResponse={streamingConversationId === conversationId ? streamedResponse : null}
             agentProgress={streamingConversationId === conversationId ? agentProgress : []}
+            sendingVideoCount={streamingConversationId === conversationId ? sendingVideoCount : 0}
             agentActivitySnapshots={agentActivitySnapshots}
             thinkingExpanded={thinkingExpanded}
             onThinkingExpandedChange={handleThinkingExpandedChange}
             message={message}
             imageAttachments={imageAttachments}
+            videoAttachments={videoAttachments}
             documentName={documentAttachment?.filename ?? ''}
             pendingApproval={streamingConversationId === conversationId ? pendingApproval : null}
             smartContext={smartContext}
@@ -962,6 +1139,7 @@ export default function MintDashboard() {
             welcomeInteraction={MOCK_WELCOME_INTERACTION}
             onSubmit={handleSubmit}
             onSelectImage={selectImage}
+            onSelectVideo={selectVideo}
             onSelectDocument={selectDocument}
             onPasteImage={pasteImage}
             onSetMessage={setMessage}
@@ -969,6 +1147,9 @@ export default function MintDashboard() {
             onRemoveImage={(idx: number) => {
               setImageAttachments((current) => current.filter((_, i) => i !== idx))
             }}
+            onRemoveVideo={(idx: number) => {
+              setVideoAttachments((current) => current.filter((_, i) => i !== idx))
+            }}
             onRemoveDocument={() => setDocumentAttachment(null)}
             onStartWebSearch={startWebSearch}
             onCaptureScreen={captureScreen}
@@ -991,6 +1172,13 @@ export default function MintDashboard() {
             setMessage(imgPrompt)
           }}
         />
+        <VeoStudioPanel
+          view={view}
+          onSendToChat={(vidPrompt) => {
+            setView('chat')
+            setMessage(vidPrompt)
+          }}
+        />
         <WorkflowBuilderPanel
           view={view}
           onShowToast={showToast}