@pheem49/mint 1.15.0 → 1.17.0

package/src/renderer/shared/components/studio/VeoStudioPanel.tsx

@@ -0,0 +1,708 @@
+import SelectField from '../ui/SelectField'
+import React, { useState, useRef, useCallback, useEffect } from 'react'
+import '../../css/veo-studio.css'
+import { getActiveModel, setActiveModel, subscribeModelChange } from '../../utils/modelManager'
+import { catalogPlatform, mediaPlatform } from '../../platform'
+import type { VideoGenRequest, VideoGenResponse, VideoGenProviders, VideoGenEntry } from '../../types'
+
+const { generateVideo, getVideoGenProviders, fetchVideoProviderModels, convertFileSrc } = mediaPlatform
+const { getProfileValue, setProfileValue } = catalogPlatform
+
+type AspectRatio = '16:9' | '9:16' | '1:1'
+type Duration = 5 | 8
+
+interface VeoStudioPanelProps {
+  view: string
+  onSendToChat?: (prompt: string) => void
+}
+
+import { VIDEO_ASPECT_RATIOS, VIDEO_STYLE_PRESETS } from '../../constants/studio'
+
+const ASPECT_Options = VIDEO_ASPECT_RATIOS
+
+const DURATION_Options: { value: Duration; label: string }[] = [
+  { value: 5, label: '5s' },
+  { value: 8, label: '8s' },
+]
+
+const STYLE_SUGGESTIONS = VIDEO_STYLE_PRESETS
+
+import { VEO_STUDIO_MODELS } from '../../constants/models'
+const PROVIDER_MODELS = VEO_STUDIO_MODELS
+
+const PROVIDER_LABELS: Record<string, string> = {
+  veo: 'Google Veo (Gemini Videos)',
+}
+
+function providerLabel(key: string) {
+  return PROVIDER_LABELS[key] ?? key
+}
+
+function defaultModelForProvider(provider: string): string {
+  const models = PROVIDER_MODELS[provider]
+  return models?.[0]?.value ?? ''
+}
+
+function formatTimecode(seconds: number): string {
+  if (isNaN(seconds) || seconds < 0) return '00:00:00'
+  const hrs = Math.floor(seconds / 3600)
+  const mins = Math.floor((seconds % 3600) / 60)
+  const secs = Math.floor(seconds % 60)
+  const ms = Math.floor((seconds % 1) * 10)
+  if (hrs > 0) {
+    return `${hrs.toString().padStart(2, '0')}:${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}.${ms}`
+  }
+  return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}.${ms}`
+}
+
+function VideoSkeletonCard() {
+  return (
+    <div className="veo-studio-skeleton">
+      <div className="veo-studio-skeleton-shine" />
+      <div className="veo-studio-skeleton-icon" aria-hidden="true">
+        <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round">
+          <polygon points="23 7 16 12 23 17 23 7" />
+          <rect x="1" y="5" width="15" height="14" rx="2" ry="2" />
+        </svg>
+      </div>
+    </div>
+  )
+}
+
+export default function VeoStudioPanel({ view, onSendToChat }: VeoStudioPanelProps) {
+  const [prompt, setPrompt] = useState('')
+  const [negativePrompt, setNegativePrompt] = useState('')
+  const [showNegative, setShowNegative] = useState(false)
+  const [aspectRatio, setAspectRatio] = useState<AspectRatio>('16:9')
+  const [duration, setDuration] = useState<Duration>(5)
+  const [generating, setGenerating] = useState(false)
+  const [error, setError] = useState('')
+  const [result, setResult] = useState<VideoGenResponse | null>(null)
+  const [promptHistory, setPromptHistory] = useState<string[]>([])
+  const [historyVideos, setHistoryVideos] = useState<VideoGenEntry[]>([])
+
+  const [providers, setProviders] = useState<VideoGenProviders>({ active: 'veo', available: ['veo'] })
+  const [selectedProvider, setSelectedProvider] = useState('veo')
+  const [selectedModel, setSelectedModel] = useState(defaultModelForProvider('veo'))
+  const [dynamicOptions, setDynamicOptions] = useState<Record<string, Array<{ value: string; label: string }>>>({})
+
+  const promptRef = useRef<HTMLTextAreaElement>(null)
+
+  useEffect(() => {
+    let cancelled = false
+    getVideoGenProviders().then(async (data) => {
+      if (cancelled) return
+      setProviders(data)
+      setSelectedProvider(data.active)
+      const activeModel = await getActiveModel('veoModel')
+      if (activeModel && !cancelled) {
+        setSelectedModel(activeModel)
+      } else if (!cancelled) {
+        setSelectedModel(defaultModelForProvider(data.active))
+      }
+    }).catch(() => { /* keep defaults */ })
+
+    // Subscribe to real-time model changes from Settings or other components
+    const unsubscribe = subscribeModelChange((detail) => {
+      if (detail.provider === 'veoModel' || detail.category === 'video') {
+        setSelectedModel(detail.model)
+      }
+    })
+
+    return () => {
+      cancelled = true
+      unsubscribe()
+    }
+  }, [])
+
+  // Dynamically fetch models for selected provider
+  useEffect(() => {
+    let cancelled = false
+    fetchVideoProviderModels(selectedProvider)
+      .then((live) => {
+        if (cancelled || !live || live.length === 0) return
+        const presets = PROVIDER_MODELS[selectedProvider] ?? []
+        const presetMap = new Map<string, string>()
+        for (const p of presets) {
+          presetMap.set(p.value, p.label)
+        }
+        const merged: Array<{ value: string; label: string }> = []
+        const seen = new Set<string>()
+        for (const id of live) {
+          if (!seen.has(id)) {
+            seen.add(id)
+            merged.push({
+              value: id,
+              label: presetMap.get(id) ?? id,
+            })
+          }
+        }
+        for (const p of presets) {
+          if (!seen.has(p.value)) {
+            seen.add(p.value)
+            merged.push(p)
+          }
+        }
+        setDynamicOptions((prev) => ({ ...prev, [selectedProvider]: merged }))
+      })
+      .catch(() => { /* keep presets */ })
+    return () => { cancelled = true }
+  }, [selectedProvider])
+
+  const handleProviderChange = (provider: string) => {
+    setSelectedProvider(provider)
+    const opts = dynamicOptions[provider] ?? PROVIDER_MODELS[provider] ?? []
+    const def = opts[0]?.value || defaultModelForProvider(provider)
+    setSelectedModel(def)
+    setActiveModel('veoModel', def, 'video')
+  }
+
+  const handleModelChange = (model: string) => {
+    setSelectedModel(model)
+    setActiveModel('veoModel', model, 'video')
+  }
+
+  const handleGenerate = useCallback(async () => {
+    const trimmed = prompt.trim()
+    if (!trimmed || generating) return
+
+    setGenerating(true)
+    setError('')
+    setResult(null)
+
+    const request: VideoGenRequest = {
+      prompt: trimmed,
+      negativePrompt: negativePrompt.trim() || undefined,
+      aspectRatio,
+      duration,
+      model: selectedModel || undefined,
+      provider: selectedProvider,
+    }
+
+    try {
+      const response = await generateVideo(request)
+      setResult(response)
+      setPromptHistory((prev) =>
+        [trimmed, ...prev.filter((p) => p !== trimmed)].slice(0, 8),
+      )
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err))
+    } finally {
+      setGenerating(false)
+    }
+  }, [prompt, negativePrompt, aspectRatio, duration, generating, selectedProvider, selectedModel])
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') {
+      e.preventDefault()
+      handleGenerate()
+    }
+  }
+
+  const downloadVideo = (entry: VideoGenEntry, index: number) => {
+    const a = document.createElement('a')
+    a.href = entry.url || entry.path
+    a.download = `mint-veo-${index + 1}.mp4`
+    document.body.appendChild(a)
+    a.click()
+    document.body.removeChild(a)
+  }
+
+  const modelOptions = dynamicOptions[selectedProvider] ?? PROVIDER_MODELS[selectedProvider] ?? []
+
+  // ── Edit tab: video editing is delegated to the FableMint MCP server ────
+  const [activeTab, setActiveTab] = useState<'generate' | 'edit'>('generate')
+
+  return (
+    <div
+      className={`veo-studio ${view === 'veo' ? 'is-visible' : ''}`}
+      id="veo-studio-panel"
+      role="main"
+      aria-label="AI Video Editor"
+      aria-hidden={view !== 'veo'}
+    >
+      {/* Header */}
+      <header className="veo-studio-header">
+        <div className="veo-studio-header-title">
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+            <polygon points="23 7 16 12 23 17 23 7" />
+            <rect x="1" y="5" width="15" height="14" rx="2" ry="2" />
+          </svg>
+          <h1>Veo Studio</h1>
+          <span className="veo-studio-badge">
+            {activeTab === 'generate' ? providerLabel(selectedProvider) : 'FableMint'}
+          </span>
+        </div>
+
+        {/* Tab switcher */}
+        <div className="veo-studio-tabs" role="tablist" aria-label="Studio mode">
+          <button
+            id="veo-tab-generate"
+            role="tab"
+            type="button"
+            aria-selected={activeTab === 'generate'}
+            className={`veo-studio-tab ${activeTab === 'generate' ? 'is-active' : ''}`}
+            onClick={() => setActiveTab('generate')}
+          >
+            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+              <polygon points="23 7 16 12 23 17 23 7" /><rect x="1" y="5" width="15" height="14" rx="2" ry="2" />
+            </svg>
+            Generate
+          </button>
+          <button
+            id="veo-tab-edit"
+            role="tab"
+            type="button"
+            aria-selected={activeTab === 'edit'}
+            className={`veo-studio-tab ${activeTab === 'edit' ? 'is-active' : ''}`}
+            onClick={() => setActiveTab('edit')}
+          >
+            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+              <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
+            </svg>
+            Edit
+          </button>
+        </div>
+      </header>
+
+      {/* ── GENERATE TAB ─────────────────────────────────────────────── */}
+      {activeTab === 'generate' && (
+        <div className="veo-studio-content" role="tabpanel" aria-labelledby="veo-tab-generate">
+          {/* Left: controls */}
+          <section className="veo-studio-controls" aria-label="Video generation settings">
+
+            {/* Provider & Model side-by-side */}
+            <div className="veo-studio-field" style={{ display: 'flex', gap: '10px', width: '100%' }}>
+              <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: '4px' }}>
+                <label className="veo-studio-label" htmlFor="veo-studio-provider" style={{ display: 'flex', alignItems: 'center', width: '100%', height: '18px' }}>
+                  <span>Provider</span>
+                </label>
+                <SelectField aria-label="Provider"
+                  id="veo-studio-provider"
+                  className="veo-studio-textarea"
+
+                  value={selectedProvider}
+                  onValueChange={(nextValue) => handleProviderChange(nextValue)}
+                  disabled={generating}
+                >
+                  {providers.available.map((prov) => (
+                    <option key={prov} value={prov}>
+                      {providerLabel(prov).replace(/^[^a-zA-Z0-9]+/, '')}
+                    </option>
+                  ))}
+                </SelectField>
+              </div>
+
+              <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: '4px' }}>
+                <label className="veo-studio-label" htmlFor="veo-studio-model" style={{ display: 'flex', alignItems: 'center', height: '18px' }}>
+                  Model
+                </label>
+                <SelectField aria-label="Model"
+                  id="veo-studio-model"
+                  className="veo-studio-textarea"
+
+                  value={selectedModel}
+                  onValueChange={(nextValue) => handleModelChange(nextValue)}
+                  disabled={generating}
+                >
+                  {modelOptions.map(({ value, label }) => (
+                    <option key={value} value={value}>{label}</option>
+                  ))}
+                </SelectField>
+              </div>
+            </div>
+
+            {/* Prompt */}
+            <div className="veo-studio-field">
+              <label className="veo-studio-label" htmlFor="veo-studio-prompt">
+                Prompt
+                <span className="veo-studio-label-hint">Describe the video you want</span>
+              </label>
+              <textarea
+                id="veo-studio-prompt"
+                ref={promptRef}
+                className="veo-studio-textarea"
+                value={prompt}
+                onChange={(e) => setPrompt(e.target.value)}
+                onKeyDown={handleKeyDown}
+                placeholder="a golden eagle soaring over mountain peaks at sunset, cinematic 4K, slow motion..."
+                rows={4}
+                disabled={generating}
+                aria-required="true"
+              />
+              <div className="veo-studio-prompt-hint">⌘+Enter to generate</div>
+            </div>
+
+            {/* Style suggestion chips */}
+            <div className="veo-studio-field">
+              <span className="veo-studio-label">Style suggestions</span>
+              <div className="veo-studio-chips" role="group" aria-label="Style suggestions">
+                {STYLE_SUGGESTIONS.map((style) => (
+                  <button
+                    key={style}
+                    type="button"
+                    className="veo-studio-chip"
+                    onClick={() => setPrompt((p) => p.trim() ? `${p.trim()}, ${style}` : style)}
+                    disabled={generating}
+                    title={`Add "${style}" to prompt`}
+                  >
+                    {style}
+                  </button>
+                ))}
+              </div>
+            </div>
+
+            {/* Negative prompt (collapsible) */}
+            <div className="veo-studio-field">
+              <button
+                type="button"
+                className="veo-studio-toggle"
+                onClick={() => setShowNegative((v) => !v)}
+                aria-expanded={showNegative}
+                aria-controls="veo-studio-negative-wrap"
+              >
+                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"
+                  style={{ transform: showNegative ? 'rotate(90deg)' : 'none', transition: 'transform 0.2s' }}>
+                  <polyline points="9 18 15 12 9 6" />
+                </svg>
+                Negative prompt
+                {negativePrompt.trim() && <span className="veo-studio-badge-dot" aria-label="has content" />}
+              </button>
+              {showNegative && (
+                <div id="veo-studio-negative-wrap">
+                  <textarea
+                    id="veo-studio-negative"
+                    className="veo-studio-textarea veo-studio-textarea--sm"
+                    value={negativePrompt}
+                    onChange={(e) => setNegativePrompt(e.target.value)}
+                    placeholder="blurry, shaky camera, low quality, watermark..."
+                    rows={2}
+                    disabled={generating}
+                  />
+                </div>
+              )}
+            </div>
+
+            {/* Aspect ratio */}
+            <div className="veo-studio-field">
+              <span className="veo-studio-label">Aspect ratio</span>
+              <div className="veo-studio-aspect-group" role="radiogroup" aria-label="Aspect ratio">
+                {ASPECT_Options.map(({ value, label, icon }) => (
+                  <button
+                    key={value}
+                    type="button"
+                    role="radio"
+                    aria-checked={aspectRatio === value}
+                    className={`veo-studio-aspect-btn ${aspectRatio === value ? 'is-active' : ''}`}
+                    onClick={() => setAspectRatio(value)}
+                    disabled={generating}
+                    id={`veo-studio-aspect-${value.replace(':', 'x')}`}
+                  >
+                    <span className="veo-studio-aspect-icon" aria-hidden="true">{icon}</span>
+                    <span>{label}</span>
+                  </button>
+                ))}
+              </div>
+            </div>
+
+            {/* Duration */}
+            <div className="veo-studio-field">
+              <span className="veo-studio-label">Duration</span>
+              <div className="veo-studio-duration-group" role="radiogroup" aria-label="Video duration">
+                {DURATION_Options.map(({ value, label }) => (
+                  <button
+                    key={value}
+                    type="button"
+                    role="radio"
+                    aria-checked={duration === value}
+                    className={`veo-studio-duration-btn ${duration === value ? 'is-active' : ''}`}
+                    onClick={() => setDuration(value)}
+                    disabled={generating}
+                    id={`veo-studio-duration-${value}`}
+                  >
+                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+                      <circle cx="12" cy="12" r="10" /><polyline points="12 6 12 12 16 14" />
+                    </svg>
+                    {label}
+                  </button>
+                ))}
+              </div>
+            </div>
+
+            {/* Generate button */}
+            <button
+              id="veo-studio-generate-btn"
+              type="button"
+              className={`veo-studio-generate-btn ${generating ? 'is-loading' : ''}`}
+              onClick={handleGenerate}
+              disabled={!prompt.trim() || generating}
+              aria-busy={generating}
+            >
+              {generating ? (
+                <>
+                  <span className="veo-studio-spinner" aria-hidden="true" />
+                  Generating video...
+                </>
+              ) : (
+                <>
+                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+                    <polygon points="23 7 16 12 23 17 23 7" />
+                    <rect x="1" y="5" width="15" height="14" rx="2" ry="2" />
+                  </svg>
+                  Generate Video
+                </>
+              )}
+            </button>
+
+            {/* Error */}
+            {error && (
+              <div className="veo-studio-error" role="alert">
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+                  <circle cx="12" cy="12" r="10" /><line x1="12" y1="8" x2="12" y2="12" /><line x1="12" y1="16" x2="12.01" y2="16" />
+                </svg>
+                <span>{error}</span>
+                <button type="button" onClick={() => setError('')} aria-label="Dismiss error">×</button>
+              </div>
+            )}
+
+            {/* Prompt history */}
+            {promptHistory.length > 0 && (
+              <div className="veo-studio-field">
+                <span className="veo-studio-label">Recent prompts</span>
+                <div className="veo-studio-history">
+                  {promptHistory.map((p) => (
+                    <button
+                      key={p}
+                      type="button"
+                      className="veo-studio-history-item"
+                      onClick={() => { setPrompt(p); promptRef.current?.focus() }}
+                      disabled={generating}
+                      title={p}
+                    >
+                      <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+                        <circle cx="12" cy="12" r="10" /><polyline points="12 6 12 12 16 14" />
+                      </svg>
+                      <span>{p}</span>
+                    </button>
+                  ))}
+                </div>
+              </div>
+            )}
+          </section>
+
+          {/* Right: results */}
+          <section className="veo-studio-results" aria-label="Generated videos" aria-live="polite">
+            <div className="veo-studio-active-workspace">
+              {generating && (
+                <div className="veo-studio-skeleton-wrap">
+                  <VideoSkeletonCard />
+                  <p className="veo-studio-generating-label" aria-live="assertive">
+                    Generating {duration}s video with {providerLabel(selectedProvider)} — this may take a moment…
+                  </p>
+                </div>
+              )}
+
+              {!generating && result && (
+                <>
+                  {result.description && (
+                    <p className="veo-studio-description">{result.description}</p>
+                  )}
+                  <div className="veo-studio-video-grid">
+                    {result.videos.map((entry: any, idx: number) => (
+                      <article key={entry.id} className="veo-studio-card" aria-label={`Generated video ${idx + 1}`}>
+                        <div className="veo-studio-card-video-wrap">
+                          <video
+                            src={convertFileSrc(entry.url || entry.path)}
+                            className="veo-studio-card-video"
+                            controls
+                            preload="metadata"
+                            aria-label={entry.message || prompt}
+                          />
+                        </div>
+                        <div className="veo-studio-card-actions">
+                          <button
+                            type="button"
+                            className="veo-studio-action-btn"
+                            onClick={() => downloadVideo(entry, idx)}
+                            title="Download video"
+                            id={`veo-studio-download-${idx}`}
+                          >
+                            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+                              <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" /><polyline points="7 10 12 15 17 10" /><line x1="12" y1="15" x2="12" y2="3" />
+                            </svg>
+                            Download
+                          </button>
+                          {onSendToChat && (
+                            <button
+                              type="button"
+                              className="veo-studio-action-btn veo-studio-action-btn--primary"
+                              onClick={() => onSendToChat(prompt)}
+                              title="Send prompt to Chat"
+                              id={`veo-studio-send-${idx}`}
+                            >
+                              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+                                <line x1="22" y1="2" x2="11" y2="13" /><polygon points="22 2 15 22 11 13 2 9 22 2" />
+                              </svg>
+                              Send to chat
+                            </button>
+                          )}
+                        </div>
+                      </article>
+                    ))}
+                  </div>
+                  <p className="veo-studio-meta">
+                    Provider: <strong>{providerLabel(result.provider)}</strong> · Model: <strong>{result.model}</strong> · {result.videos.length} video{result.videos.length > 1 ? 's' : ''}
+                  </p>
+                </>
+              )}
+
+              {!generating && !result && (
+                <div className="veo-studio-active-empty">
+                  <div className="veo-studio-empty-icon" aria-hidden="true">
+                    <svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round">
+                      <polygon points="23 7 16 12 23 17 23 7" />
+                      <rect x="1" y="5" width="15" height="14" rx="2" ry="2" />
+                    </svg>
+                  </div>
+                  <p>No video generated yet</p>
+                  <span>Enter a prompt on the left and click Generate Video to begin.</span>
+                </div>
+              )}
+            </div>
+
+            {/* History gallery */}
+            <div className="veo-studio-history-header">
+              <div className="veo-studio-history-title">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                  <polygon points="23 7 16 12 23 17 23 7" />
+                  <rect x="1" y="5" width="15" height="14" rx="2" ry="2" />
+                </svg>
+                <span>Video history</span>
+                <span className="veo-studio-history-badge">{historyVideos.length}</span>
+              </div>
+            </div>
+            <div className="veo-studio-history-gallery">
+              {historyVideos.length === 0 ? (
+                <div className="veo-studio-gallery-empty">
+                  <p>Your video gallery is empty</p>
+                  <span>Generated videos will appear here once the backend is connected.</span>
+                </div>
+              ) : (
+                <div className="veo-studio-video-grid">
+                  {historyVideos.map((video, idx) => (
+                    <article key={video.id} className="veo-studio-card" aria-label={`Saved video ${idx + 1}`}>
+                      <div className="veo-studio-card-video-wrap">
+                        <video
+                          src={convertFileSrc(video.url || video.path)}
+                          className="veo-studio-card-video"
+                          controls
+                          preload="metadata"
+                        />
+                      </div>
+                      <div className="veo-studio-card-actions">
+                        <button
+                          type="button"
+                          className="veo-studio-action-btn"
+                          onClick={() => downloadVideo(video, idx)}
+                          title="Download video"
+                          id={`veo-studio-gallery-download-${idx}`}
+                        >
+                          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+                            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" /><polyline points="7 10 12 15 17 10" /><line x1="12" y1="15" x2="12" y2="3" />
+                          </svg>
+                          Download
+                        </button>
+                      </div>
+                    </article>
+                  ))}
+                </div>
+              )}
+            </div>
+          </section>
+        </div>
+      )}
+
+      {/* ── EDIT TAB (video editing delegated to FableMint via MCP) ────── */}
+      {activeTab === 'edit' && (
+        <div className="veo-studio-content veo-studio-content--single" role="tabpanel" aria-labelledby="veo-tab-edit">
+          <section className="veo-studio-fablemint-notice" aria-label="Video editing via FableMint">
+            <div className="veo-studio-empty-icon" aria-hidden="true">
+              <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+                <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
+                <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
+              </svg>
+            </div>
+            <h2>Video editing now runs through FableMint</h2>
+            <p>
+              Timeline edits are handled by{' '}
+              <a href="https://github.com/Pheem49/FableMint" target="_blank" rel="noreferrer">FableMint</a>
+              {' '}— a free, open-source, zero-dependency browser video editor connected to Mint over MCP.
+              Its whole project is one JSON timeline: Mint patches it directly and the open editor tab
+              live-reloads in ~150 ms, so you watch the edit happen in real time.
+            </p>
+
+            <div className="veo-studio-fablemint-step">
+              <span className="veo-studio-fablemint-step-num">1</span>
+              <div>
+                <strong>Clone FableMint</strong>
+                <span className="veo-studio-label-hint">
+                  Needs Node 18+ and a Chromium-based browser. <code>ffmpeg</code> on your PATH is optional
+                  but recommended for fast export.
+                </span>
+                <pre><code>git clone https://github.com/Pheem49/FableMint.git{'\n'}cd FableMint</code></pre>
+              </div>
+            </div>
+
+            <div className="veo-studio-fablemint-step">
+              <span className="veo-studio-fablemint-step-num">2</span>
+              <div>
+                <strong>Start the editor</strong>
+                <span className="veo-studio-label-hint">
+                  Opens the timeline UI at <code>http://localhost:7777</code>. Media dropped into the
+                  window (or <code>./media/</code>) is picked up automatically.
+                </span>
+                <pre><code>node server.js</code></pre>
+              </div>
+            </div>
+
+            <div className="veo-studio-fablemint-step">
+              <span className="veo-studio-fablemint-step-num">3</span>
+              <div>
+                <strong>Connect it to Mint as an MCP server</strong>
+                <pre><code>{`mint mcp add fablemint node --args "<path-to>/FableMint/mcp-server.js"\nmint mcp allow fablemint "*"\nmint mcp call fablemint fablecut_status --arguments '{}'  # sanity check`}</code></pre>
+                <span className="veo-studio-label-hint">
+                  The last line should report the editor is running (it auto-starts <code>server.js</code>{' '}
+                  for you if step 2 wasn't run yet). In Desktop/Web you can do the same from{' '}
+                  <strong>Settings → MCP servers → custom server</strong> — Name <code>fablemint</code>,
+                  Command <code>node</code>, Args <code>&lt;path-to&gt;/FableMint/mcp-server.js</code>.
+                </span>
+              </div>
+            </div>
+
+            <div className="veo-studio-fablemint-step">
+              <span className="veo-studio-fablemint-step-num">4</span>
+              <div>
+                <strong>Ask Mint to edit</strong>
+                <span className="veo-studio-label-hint">
+                  With the FableMint tab open, just describe the edit in chat — Mint calls its
+                  <code>fablecut_*</code> tools to patch the timeline and the tab updates live. Every
+                  agent write is checkpointed automatically, so a bad edit is always one revert away.
+                </span>
+              </div>
+            </div>
+
+            <a
+              className="veo-studio-action-btn veo-studio-action-btn--primary"
+              href="https://github.com/Pheem49/FableMint#driving-it-with-an-ai-agent"
+              target="_blank"
+              rel="noreferrer"
+              style={{ textDecoration: 'none', width: 'fit-content' }}
+            >
+              Full setup guide
+            </a>
+          </section>
+        </div>
+      )}
+    </div>
+  )
+}