@assistkick/create 1.7.0 → 1.8.0

package/templates/assistkick-product-system/packages/frontend/src/components/VideoGallery.tsx

@@ -0,0 +1,313 @@
+import React, { useState, useEffect, useCallback, useRef } from 'react';
+import {
+  Film,
+  Download,
+  Trash2,
+  Play,
+  X,
+  Clock,
+  HardDrive,
+  Loader2,
+  AlertCircle,
+  CheckCircle2,
+  CircleDot,
+} from 'lucide-react';
+import { apiClient } from '../api/client';
+import type { VideoRenderStatus } from '../api/client';
+import { IconButton } from './ds/IconButton';
+
+const POLL_INTERVAL_MS = 3000;
+
+interface VideoGalleryProps {
+  projectId: string;
+}
+
+const formatFileSize = (bytes: number | null): string => {
+  if (bytes === null || bytes === 0) return '—';
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+};
+
+const formatDuration = (seconds: number | null): string => {
+  if (seconds === null) return '—';
+  const m = Math.floor(seconds / 60);
+  const s = Math.round(seconds % 60);
+  return m > 0 ? `${m}m ${s}s` : `${s}s`;
+};
+
+const formatDate = (iso: string): string => {
+  const d = new Date(iso);
+  return d.toLocaleDateString(undefined, {
+    month: 'short',
+    day: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+  });
+};
+
+const statusConfig: Record<VideoRenderStatus['status'], { icon: React.ReactNode; label: string; color: string }> = {
+  queued: {
+    icon: <Clock size={12} />,
+    label: 'Queued',
+    color: 'text-content-muted',
+  },
+  rendering: {
+    icon: <Loader2 size={12} className="animate-spin" />,
+    label: 'Rendering',
+    color: 'text-amber-500',
+  },
+  complete: {
+    icon: <CheckCircle2 size={12} />,
+    label: 'Complete',
+    color: 'text-emerald-500',
+  },
+  failed: {
+    icon: <AlertCircle size={12} />,
+    label: 'Failed',
+    color: 'text-error',
+  },
+};
+
+export const VideoGallery = ({ projectId }: VideoGalleryProps) => {
+  const [renders, setRenders] = useState<VideoRenderStatus[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [playingId, setPlayingId] = useState<string | null>(null);
+  const [deletingId, setDeletingId] = useState<string | null>(null);
+  const pollRef = useRef<ReturnType<typeof setInterval> | null>(null);
+
+  const fetchRenders = useCallback(async () => {
+    try {
+      const data = await apiClient.fetchVideoRenders(projectId);
+      setRenders(data.renders);
+      setError(null);
+    } catch (err: any) {
+      setError(err.message);
+    } finally {
+      setLoading(false);
+    }
+  }, [projectId]);
+
+  // Initial fetch
+  useEffect(() => {
+    setLoading(true);
+    fetchRenders();
+  }, [fetchRenders]);
+
+  // Poll when there are in-progress renders
+  const hasActiveRenders = renders.some(r => r.status === 'queued' || r.status === 'rendering');
+
+  useEffect(() => {
+    if (hasActiveRenders) {
+      pollRef.current = setInterval(fetchRenders, POLL_INTERVAL_MS);
+    }
+    return () => {
+      if (pollRef.current) {
+        clearInterval(pollRef.current);
+        pollRef.current = null;
+      }
+    };
+  }, [hasActiveRenders, fetchRenders]);
+
+  const handleDelete = useCallback(async (renderId: string) => {
+    setDeletingId(renderId);
+    try {
+      await apiClient.deleteVideoRender(renderId);
+      setRenders(prev => prev.filter(r => r.id !== renderId));
+      if (playingId === renderId) setPlayingId(null);
+    } catch (err: any) {
+      setError(err.message);
+    } finally {
+      setDeletingId(null);
+    }
+  }, [playingId]);
+
+  const handleDownload = useCallback((renderId: string) => {
+    const url = apiClient.getVideoFileUrl(renderId);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `${renderId}.mp4`;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+  }, []);
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center py-8 text-content-muted">
+        <Loader2 size={20} className="animate-spin mr-2" />
+        <span className="text-sm">Loading renders...</span>
+      </div>
+    );
+  }
+
+  if (error && renders.length === 0) {
+    return (
+      <div className="flex flex-col items-center gap-2 py-8 text-content-muted">
+        <AlertCircle size={20} />
+        <span className="text-sm">{error}</span>
+        <button
+          onClick={fetchRenders}
+          className="mt-1 px-3 py-1.5 rounded-md border border-edge bg-surface text-xs text-content hover:bg-surface-hover transition-colors"
+        >
+          Retry
+        </button>
+      </div>
+    );
+  }
+
+  if (renders.length === 0) {
+    return (
+      <div className="flex flex-col items-center gap-2 py-8 text-content-muted">
+        <Film size={32} strokeWidth={1} />
+        <span className="text-sm font-medium">No rendered videos yet</span>
+        <span className="text-xs text-center max-w-xs">
+          Start a render from the workflow pipeline to see your videos here.
+        </span>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-2">
+      {error && (
+        <div className="text-xs text-error px-2 py-1 rounded bg-error/10 border border-error/20">
+          {error}
+        </div>
+      )}
+
+      {renders.map(render => {
+        const cfg = statusConfig[render.status];
+        const isPlaying = playingId === render.id;
+        const isDeleting = deletingId === render.id;
+        const isComplete = render.status === 'complete';
+        const isActive = render.status === 'queued' || render.status === 'rendering';
+
+        return (
+          <div
+            key={render.id}
+            className="rounded-lg border border-edge bg-surface p-3 transition-colors hover:bg-surface-alt"
+          >
+            {/* Inline video player */}
+            {isPlaying && isComplete && (
+              <div className="mb-3 rounded-md overflow-hidden bg-black relative">
+                <video
+                  src={apiClient.getVideoFileUrl(render.id)}
+                  controls
+                  autoPlay
+                  className="w-full max-h-[400px]"
+                />
+                <button
+                  onClick={() => setPlayingId(null)}
+                  className="absolute top-2 right-2 flex h-7 w-7 items-center justify-center rounded-full bg-black/60 text-white hover:bg-black/80 transition-colors"
+                >
+                  <X size={14} />
+                </button>
+              </div>
+            )}
+
+            <div className="flex items-center justify-between gap-3">
+              {/* Left side: status + info */}
+              <div className="flex items-center gap-3 min-w-0 flex-1">
+                {/* Status icon */}
+                <div className={`flex items-center gap-1.5 shrink-0 ${cfg.color}`}>
+                  {cfg.icon}
+                  <span className="text-[11px] font-medium">{cfg.label}</span>
+                </div>
+
+                {/* Composition name */}
+                <span className="text-[12px] font-mono text-content truncate">
+                  {render.compositionId}
+                </span>
+
+                {/* Progress for active renders */}
+                {isActive && (
+                  <div className="flex items-center gap-2 shrink-0">
+                    <div className="w-20 h-1.5 rounded-full bg-surface-alt overflow-hidden">
+                      <div
+                        className="h-full rounded-full bg-amber-500 transition-all duration-300"
+                        style={{ width: `${render.progress}%` }}
+                      />
+                    </div>
+                    <span className="text-[11px] text-content-muted">{render.progress}%</span>
+                  </div>
+                )}
+
+                {/* Metadata for completed renders */}
+                {isComplete && (
+                  <div className="flex items-center gap-3 text-[11px] text-content-muted shrink-0">
+                    {render.resolution && (
+                      <span className="flex items-center gap-1">
+                        <CircleDot size={10} />
+                        {render.resolution}
+                      </span>
+                    )}
+                    {render.durationSeconds !== null && (
+                      <span className="flex items-center gap-1">
+                        <Clock size={10} />
+                        {formatDuration(render.durationSeconds)}
+                      </span>
+                    )}
+                    {render.fileSize !== null && (
+                      <span className="flex items-center gap-1">
+                        <HardDrive size={10} />
+                        {formatFileSize(render.fileSize)}
+                      </span>
+                    )}
+                  </div>
+                )}
+
+                {/* Error message */}
+                {render.status === 'failed' && render.error && (
+                  <span className="text-[11px] text-error truncate" title={render.error}>
+                    {render.error}
+                  </span>
+                )}
+              </div>
+
+              {/* Right side: date + actions */}
+              <div className="flex items-center gap-2 shrink-0">
+                <span className="text-[11px] text-content-muted">
+                  {formatDate(render.createdAt)}
+                </span>
+
+                {isComplete && (
+                  <>
+                    <IconButton
+                      variant="ghost"
+                      size="sm"
+                      label={isPlaying ? 'Stop playback' : 'Play video'}
+                      onClick={() => setPlayingId(isPlaying ? null : render.id)}
+                    >
+                      {isPlaying ? <X size={13} /> : <Play size={13} />}
+                    </IconButton>
+
+                    <IconButton
+                      variant="ghost"
+                      size="sm"
+                      label="Download MP4"
+                      onClick={() => handleDownload(render.id)}
+                    >
+                      <Download size={13} />
+                    </IconButton>
+                  </>
+                )}
+
+                <IconButton
+                  variant="danger"
+                  size="sm"
+                  label="Delete render"
+                  disabled={isDeleting}
+                  onClick={() => handleDelete(render.id)}
+                >
+                  {isDeleting ? <Loader2 size={13} className="animate-spin" /> : <Trash2 size={13} />}
+                </IconButton>
+              </div>
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+};

package/templates/assistkick-product-system/packages/frontend/src/components/VideographyView.tsx

@@ -0,0 +1,250 @@
+import React, { useState, useEffect, useCallback, useMemo } from 'react';
+import { Player } from '@remotion/player';
+import { ChevronDown, RefreshCw, Video, AlertCircle, Film, Library } from 'lucide-react';
+import { apiClient } from '../api/client';
+import type { VideoCompositionMeta, VideoBundleStatus } from '../api/client';
+import { CompositionPlaceholder } from './CompositionPlaceholder';
+import { VideoGallery } from './VideoGallery';
+import { findCompositionModuleKey } from '../utils/composition_matcher';
+
+/**
+ * Discover composition modules from the video package at build time.
+ * Each matching file becomes a lazy-loaded chunk via Vite's code splitting.
+ * The Remotion Player requires the same React instance as the host page,
+ * so compositions must be loaded through the build system rather than
+ * fetched as standalone scripts from a separate bundle.
+ *
+ * When the Video Composition Agent creates a new composition and it's merged,
+ * the auto-rebuild produces both the Remotion bundle (for server-side rendering)
+ * and the frontend build (picking up new compositions via this glob).
+ */
+const compositionModules = import.meta.glob<{
+  component?: React.FC<Record<string, unknown>>;
+  default?: React.FC<Record<string, unknown>>;
+}>('../../../video/compositions/*/index.tsx');
+
+interface VideographyViewProps {
+  projectId: string | null;
+}
+
+export const VideographyView = ({ projectId }: VideographyViewProps) => {
+  const [compositions, setCompositions] = useState<VideoCompositionMeta[]>([]);
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const [bundleStatus, setBundleStatus] = useState<VideoBundleStatus | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [rebuilding, setRebuilding] = useState(false);
+
+  const fetchData = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const [compositionsData, statusData] = await Promise.all([
+        apiClient.fetchVideoCompositions(),
+        apiClient.fetchVideoBundleStatus(),
+      ]);
+      setCompositions(compositionsData.compositions);
+      setBundleStatus(statusData);
+      if (compositionsData.compositions.length > 0 && !selectedId) {
+        setSelectedId(compositionsData.compositions[0].id);
+      }
+    } catch (err: any) {
+      setError(err.message);
+    } finally {
+      setLoading(false);
+    }
+  }, [selectedId]);
+
+  useEffect(() => {
+    fetchData();
+  }, [projectId]);
+
+  const handleRebuild = useCallback(async () => {
+    setRebuilding(true);
+    try {
+      const status = await apiClient.rebuildVideoBundle();
+      setBundleStatus(status);
+      await fetchData();
+    } catch (err: any) {
+      setError(err.message);
+    } finally {
+      setRebuilding(false);
+    }
+  }, [fetchData]);
+
+  const selected = compositions.find(c => c.id === selectedId);
+
+  /**
+   * Create a stable lazyComponent loader for the Remotion Player.
+   * Loads the actual composition from the video package when available,
+   * falls back to CompositionPlaceholder otherwise.
+   */
+  const compositionLoader = useMemo(() => {
+    if (!selectedId || !selected) {
+      return () => Promise.resolve({
+        default: CompositionPlaceholder as React.FC<Record<string, unknown>>,
+      });
+    }
+
+    // Match composition module by directory name (equals composition ID by convention)
+    const moduleKey = findCompositionModuleKey(Object.keys(compositionModules), selectedId);
+
+    if (moduleKey) {
+      return async () => {
+        try {
+          const mod = await compositionModules[moduleKey]();
+          const comp = mod.component || mod.default;
+          if (comp) return { default: comp };
+        } catch {
+          // Composition failed to load — fall through to placeholder
+        }
+        return {
+          default: CompositionPlaceholder as React.FC<Record<string, unknown>>,
+        };
+      };
+    }
+
+    // Composition exists in API but not in the build — use placeholder
+    return () => Promise.resolve({
+      default: CompositionPlaceholder as React.FC<Record<string, unknown>>,
+    });
+  }, [selectedId, selected]);
+
+  if (loading) {
+    return (
+      <div className="flex h-full items-center justify-center">
+        <div className="flex flex-col items-center gap-3 text-content-muted">
+          <Film size={32} strokeWidth={1.5} className="animate-pulse" />
+          <span className="text-sm font-medium">Loading compositions...</span>
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="flex h-full items-center justify-center">
+        <div className="flex flex-col items-center gap-3 text-content-muted">
+          <AlertCircle size={32} strokeWidth={1.5} />
+          <span className="text-sm font-medium">Failed to load video data</span>
+          <span className="text-xs">{error}</span>
+          <button
+            onClick={fetchData}
+            className="mt-2 px-3 py-1.5 rounded-md border border-edge bg-surface text-xs text-content hover:bg-surface-hover transition-colors"
+          >
+            Retry
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col h-full w-full overflow-y-auto p-4 gap-4">
+      {/* Header bar */}
+      <div className="flex items-center justify-between gap-4 shrink-0">
+        <div className="flex items-center gap-3">
+          <Video size={18} strokeWidth={1.5} className="text-content-muted" />
+          <h2 className="text-sm font-semibold text-content">Remotion Preview</h2>
+        </div>
+
+        <div className="flex items-center gap-3">
+          {/* Composition selector */}
+          {compositions.length > 0 && (
+            <div className="relative">
+              <select
+                value={selectedId || ''}
+                onChange={(e) => setSelectedId(e.target.value)}
+                className="px-3 py-1.5 rounded-md border border-edge bg-surface text-[12px] text-content appearance-none pr-7 min-w-[200px]"
+              >
+                {compositions.map(c => (
+                  <option key={c.id} value={c.id}>
+                    {c.id} ({c.width}x{c.height} @ {c.fps}fps)
+                  </option>
+                ))}
+              </select>
+              <ChevronDown size={12} className="absolute right-2 top-1/2 -translate-y-1/2 text-content-muted pointer-events-none" />
+            </div>
+          )}
+
+          {/* Bundle status + rebuild */}
+          <div className="flex items-center gap-2">
+            {bundleStatus && (
+              <span className="text-[11px] text-content-muted">
+                {bundleStatus.ready ? 'Bundle ready' : 'No bundle'}
+                {bundleStatus.lastBuiltAt && (
+                  <> &middot; {new Date(bundleStatus.lastBuiltAt).toLocaleString()}</>
+                )}
+              </span>
+            )}
+            <button
+              onClick={handleRebuild}
+              disabled={rebuilding}
+              title="Rebuild Remotion bundle"
+              className="flex h-7 w-7 items-center justify-center rounded-md border border-edge text-content-muted hover:text-content hover:border-content/20 transition-all disabled:opacity-50"
+            >
+              <RefreshCw size={13} strokeWidth={2} className={rebuilding ? 'animate-spin' : ''} />
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {/* Player area */}
+      <div className="flex-1 flex items-center justify-center rounded-lg border border-edge bg-black/5 dark:bg-white/5 overflow-hidden min-h-0">
+        {compositions.length === 0 ? (
+          <div className="flex flex-col items-center gap-3 text-content-muted">
+            <Video size={48} strokeWidth={1} />
+            <span className="text-sm font-medium">No compositions available</span>
+            <span className="text-xs text-center max-w-sm">
+              Compositions are created by the Video Composition Agent.
+              Run the agent workflow to generate your first composition.
+            </span>
+          </div>
+        ) : selected ? (
+          <div className="w-full h-full flex items-center justify-center p-4">
+            <Player
+              lazyComponent={compositionLoader}
+              inputProps={{
+                compositionId: selected.id,
+                width: selected.width,
+                height: selected.height,
+              }}
+              durationInFrames={selected.durationInFrames}
+              compositionWidth={selected.width}
+              compositionHeight={selected.height}
+              fps={selected.fps}
+              controls
+              style={{
+                width: '100%',
+                maxHeight: '100%',
+                aspectRatio: `${selected.width} / ${selected.height}`,
+              }}
+            />
+          </div>
+        ) : null}
+      </div>
+
+      {/* Composition metadata */}
+      {selected && (
+        <div className="flex items-center gap-4 text-[11px] text-content-muted shrink-0">
+          <span>ID: <span className="font-mono text-content">{selected.id}</span></span>
+          <span>Resolution: <span className="font-mono text-content">{selected.width}x{selected.height}</span></span>
+          <span>FPS: <span className="font-mono text-content">{selected.fps}</span></span>
+          <span>Duration: <span className="font-mono text-content">{selected.durationInFrames} frames ({(selected.durationInFrames / selected.fps).toFixed(1)}s)</span></span>
+          {selected.folder && <span>Folder: <span className="font-mono text-content">{selected.folder}</span></span>}
+        </div>
+      )}
+
+      {/* Video Gallery */}
+      {projectId && (
+        <div className="flex flex-col gap-3 shrink-0">
+          <div className="flex items-center gap-2">
+            <Library size={16} strokeWidth={1.5} className="text-content-muted" />
+            <h3 className="text-sm font-semibold text-content">Rendered Videos</h3>
+          </div>
+          <VideoGallery projectId={projectId} />
+        </div>
+      )}
+    </div>
+  );
+};