Verifying credentials...

\n );\n }\n\n if (!isAuthenticated) {\n return (\n

\n {error && (\n \n )}\n \n

\n );\n }\n\n return (\n

\n ← Back to Videos\n \n

\n \n

\n );\n}\n",[],[239,246,253],{"_104":262,"_96":263,"_156":264,"_158":247,"_159":141,"_160":265,"_162":118,"_106":266,"_100":257,"_164":184,"_166":267,"_167":22,"_168":-5,"_169":268,"_99":269},"aae2d5e4-a444-11f0-9a8c-0224a6c84d84","AdminPanel.tsx","2382f660-a444-11f0-86b8-0224a6c84d84",421,["D",1759927528006],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport { PromptEditor } from \"./PromptEditor.tsx\";\nimport { VideoSelector } from \"./VideoSelector.tsx\";\nimport type { VideoData } from \"../../shared/types.ts\";\n\ninterface AdminPanelProps {\n password: string;\n}\n\nexport function AdminPanel({ password }: AdminPanelProps) {\n const [prompt, setPrompt] = useState(\"\");\n const [videos, setVideos] = useState([]);\n const [selectedVideos, setSelectedVideos] = useState>(new Set());\n const [loading, setLoading] = useState(true);\n const [saving, setSaving] = useState(false);\n const [reprocessing, setReprocessing] = useState(false);\n const [message, setMessage] = useState<{ type: \"success\" | \"error\"; text: string } | null>(null);\n\n useEffect(() => {\n loadData();\n }, []);\n\n const loadData = async () => {\n setLoading(true);\n try {\n // Fetch current prompt\n const promptResponse = await fetch(\"/api/admin/prompt\", {\n headers: {\n Authorization: `Bearer ${password}`,\n },\n });\n\n if (promptResponse.ok) {\n const data = await promptResponse.json();\n setPrompt(data.prompt);\n }\n\n // Fetch videos\n const videosResponse = await fetch(\"/api/admin/videos\", {\n headers: {\n Authorization: `Bearer ${password}`,\n },\n });\n\n if (videosResponse.ok) {\n const videosData = await videosResponse.json();\n setVideos(videosData);\n }\n } catch (error) {\n console.error(\"Error loading data:\", error);\n setMessage({ type: \"error\", text: \"Failed to load data\" });\n } finally {\n setLoading(false);\n }\n };\n\n const handleSavePrompt = async (newPrompt: string) => {\n setSaving(true);\n setMessage(null);\n\n try {\n const response = await fetch(\"/api/admin/prompt\", {\n method: \"PUT\",\n headers: {\n \"Content-Type\": \"application/json\",\n Authorization: `Bearer ${password}`,\n },\n body: JSON.stringify({ prompt: newPrompt }),\n });\n\n if (response.ok) {\n setPrompt(newPrompt);\n setMessage({ type: \"success\", text: \"Prompt updated successfully!\" });\n } else {\n const error = await response.json();\n setMessage({ type: \"error\", text: error.error || \"Failed to update prompt\" });\n }\n } catch (error) {\n console.error(\"Error saving prompt:\", error);\n setMessage({ type: \"error\", text: \"Failed to save prompt\" });\n } finally {\n setSaving(false);\n }\n };\n\n const handleReprocess = async (videoIds: string[]) => {\n setReprocessing(true);\n setMessage(null);\n\n try {\n const response = await fetch(\"/api/admin/reprocess\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n Authorization: `Bearer ${password}`,\n },\n body: JSON.stringify({ videoIds }),\n });\n\n if (response.ok) {\n const data = await response.json();\n setMessage({\n type: \"success\",\n text: `Started reprocessing ${data.reprocessedIds.length} videos`\n });\n setSelectedVideos(new Set());\n // Reload videos after a short delay\n setTimeout(loadData, 1000);\n } else {\n const error = await response.json();\n setMessage({ type: \"error\", text: error.error || \"Failed to reprocess videos\" });\n }\n } catch (error) {\n console.error(\"Error reprocessing:\", error);\n setMessage({ type: \"error\", text: \"Failed to reprocess videos\" });\n } finally {\n setReprocessing(false);\n }\n };\n\n const handleSelectVideo = (videoId: string) => {\n const newSelected = new Set(selectedVideos);\n if (newSelected.has(videoId)) {\n newSelected.delete(videoId);\n } else {\n newSelected.add(videoId);\n }\n setSelectedVideos(newSelected);\n };\n\n const handleSelectAll = () => {\n if (selectedVideos.size === videos.length) {\n setSelectedVideos(new Set());\n } else {\n setSelectedVideos(new Set(videos.map((v) => v.id)));\n }\n };\n\n if (loading) {\n return

Loading admin panel...

;\n }\n\n return (\n

Admin Panel

\n\n {message && (\n

\n {message.text}\n

\n )}\n\n

Default Video Prompt

\n \n

\n\n

Reprocess Videos

Select videos to regenerate with the updated prompt.

\n\n

\n \n {selectedVideos.size === videos.length ? \"Deselect All\" : \"Select All\"}\n \n handleReprocess(Array.from(selectedVideos))}\n class=\"admin-button admin-button-primary\"\n disabled={selectedVideos.size === 0 || reprocessing}\n >\n {reprocessing ? \"Reprocessing...\" : `Reprocess Selected (${selectedVideos.size})`}\n \n

\n\n \n

\n );\n}\n",[],[239,246,263],{"_104":271,"_96":272,"_156":273,"_158":247,"_159":141,"_160":101,"_162":118,"_106":274,"_100":275,"_164":184,"_166":276,"_167":22,"_168":-5,"_169":277,"_99":278},"04122500-c71f-11f0-97f8-42dde27851f2","App.tsx","7bd84178-9f79-11f0-b15c-0224a6c84d84",["D",1763759647459],12,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport VideoFeed from \"./VideoFeed.tsx\";\nimport URLInput from \"./URLInput.tsx\";\nimport { AdminPage } from \"./AdminPage.tsx\";\nimport { ProcessingPage } from \"./ProcessingPage.tsx\";\nimport { PasswordPrompt } from \"./PasswordPrompt.tsx\";\nimport type { VideoData } from \"../../shared/types.ts\";\n\nexport default function App() {\n const [currentPath, setCurrentPath] = useState(window.location.pathname);\n const [videos, setVideos] = useState([]);\n const [loading, setLoading] = useState(false);\n const [showUrlInput, setShowUrlInput] = useState(false);\n const [error, setError] = useState(null);\n const [adminPassword, setAdminPassword] = useState(null);\n const [showPasswordPrompt, setShowPasswordPrompt] = useState(false);\n\n const [offset, setOffset] = useState(0);\n const [hasMore, setHasMore] = useState(true);\n\n // Handle client-side routing\n useEffect(() => {\n const handlePopState = () => {\n setCurrentPath(window.location.pathname);\n };\n\n window.addEventListener('popstate', handlePopState);\n return () => window.removeEventListener('popstate', handlePopState);\n }, []);\n\n // Load initial data\n useEffect(() => {\n const initialData = (window as any).__INITIAL_DATA__;\n if (initialData?.videos) {\n setVideos(initialData.videos);\n // If initial data is less than limit (20), assume no more\n if (initialData.videos.length < 20) {\n setHasMore(false);\n }\n setOffset(initialData.videos.length);\n } else {\n loadVideos(true);\n }\n\n // Check for stored admin password\n const storedPassword = sessionStorage.getItem(\"adminPassword\");\n if (storedPassword) {\n setAdminPassword(storedPassword);\n }\n }, []);\n\n\n\n const loadVideos = async (reset = false) => {\n try {\n if (reset) {\n setLoading(true);\n setOffset(0);\n setHasMore(true);\n }\n\n const currentOffset = reset ? 0 : offset;\n const limit = 20;\n\n const response = await fetch(`/api/videos?limit=${limit}&offset=${currentOffset}`);\n if (!response.ok) throw new Error('Failed to load videos');\n\n const newVideos = await response.json();\n\n if (newVideos.length < limit) {\n setHasMore(false);\n }\n\n if (reset) {\n setVideos(newVideos);\n setOffset(newVideos.length);\n } else {\n setVideos(prev => [...prev, ...newVideos]);\n setOffset(prev => prev + newVideos.length);\n }\n\n setError(null);\n } catch (err) {\n console.error('Error loading videos:', err);\n setError('Failed to load videos');\n } finally {\n setLoading(false);\n }\n };\n\n const handleAddUrl = async (url: string, prompt?: string) => {\n try {\n setLoading(true);\n const response = await fetch('/api/videos/generate', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n 'Authorization': `Bearer ${adminPassword}`,\n },\n body: JSON.stringify({ url, prompt }),\n });\n\n if (!response.ok) throw new Error('Failed to generate video');\n\n const result = await response.json();\n setShowUrlInput(false);\n\n // Refresh videos to show the new processing video\n await loadVideos();\n\n\n\n } catch (err) {\n console.error('Error adding URL:', err);\n setError('Failed to generate video');\n } finally {\n setLoading(false);\n }\n };\n\n\n\n const handleDeleteVideo = async (videoId: string) => {\n try {\n const response = await fetch(`/api/videos/${videoId}`, {\n method: 'DELETE',\n });\n\n if (!response.ok) throw new Error('Failed to delete video');\n\n setVideos(prev => prev.filter(v => v.id !== videoId));\n } catch (err) {\n console.error('Error deleting video:', err);\n setError('Failed to delete video');\n }\n };\n\n // Route to admin page\n if (currentPath === '/admin') {\n return ;\n }\n\n // Route to processing page\n if (currentPath === '/processing') {\n return ;\n }\n\n return (\n

\n {/* Admin Link */}\n

\n {\n e.preventDefault();\n window.history.pushState({}, '', '/admin');\n setCurrentPath('/admin');\n }}\n >\n Admin\n \n {\n e.preventDefault();\n window.history.pushState({}, '', '/processing');\n setCurrentPath('/processing');\n }}\n >\n Processing\n \n

\n {/* URL Input Overlay */}\n setShowUrlInput(false)}\n onSubmit={handleAddUrl}\n loading={loading}\n />\n\n {/* Add URL Button */}\n {\n if (adminPassword) {\n setShowUrlInput(true);\n } else {\n setShowPasswordPrompt(true);\n }\n }}\n className=\"fixed top-4 right-4 z-40 bg-pink-500 hover:bg-pink-600 text-white p-3 rounded-full shadow-lg transition-all duration-200 hover:scale-110\"\n title=\"Add URL\"\n >\n \n \n\n {/* Password Prompt */}\n {showPasswordPrompt && (\n

\n setShowPasswordPrompt(false)}\n className=\"absolute top-2 right-2 text-gray-400 hover:text-white\"\n >\n ×\n \n {\n setAdminPassword(password);\n sessionStorage.setItem(\"adminPassword\", password);\n setShowPasswordPrompt(false);\n setShowUrlInput(true);\n }}\n />\n

\n )}\n\n {/* Error Message */}\n {error && (\n

\n {error}\n setError(null)}\n className=\"ml-2 text-white hover:text-gray-200\"\n >\n ×\n \n

\n )}\n\n {/* Video Feed */}\n {videos.length > 0 ? (\n loadVideos(true)}\n onLoadMore={() => loadVideos(false)}\n hasMore={hasMore}\n />\n ) : (\n

🎬

Welcome to Video Feed

\n Add URLs to generate TikTok-style videos from web content\n

\n {\n if (adminPassword) {\n setShowUrlInput(true);\n } else {\n setShowPasswordPrompt(true);\n }\n }}\n className=\"bg-pink-500 hover:bg-pink-600 text-white px-6 py-3 rounded-full font-semibold transition-colors\"\n >\n Add Your First URL\n \n

\n )}\n\n {/* Loading Overlay */}\n {loading && (\n

Processing...

\n )}\n

\n );\n}\n",[],[239,246,272],{"_104":280,"_96":281,"_156":282,"_158":247,"_159":141,"_160":283,"_162":118,"_106":284,"_100":257,"_164":184,"_166":285,"_167":22,"_168":-5,"_169":286,"_99":287},"bced819e-a444-11f0-a1ad-0224a6c84d84","PasswordPrompt.tsx","40281282-a444-11f0-a92b-0224a6c84d84",424,["D",1759927558277],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from \"https://esm.sh/react@18.2.0\";\n\ninterface PasswordPromptProps {\n onAuthenticate: (password: string) => void;\n}\n\nexport function PasswordPrompt({ onAuthenticate }: PasswordPromptProps) {\n const [password, setPassword] = useState(\"\");\n const [error, setError] = useState(\"\");\n\n const handleSubmit = (e: Event) => {\n e.preventDefault();\n if (!password) {\n setError(\"Please enter a password\");\n return;\n }\n setError(\"\");\n onAuthenticate(password);\n };\n\n return (\n

Admin Authentication

Enter the admin password to continue

\n );\n}\n",[],[239,246,281],{"_104":289,"_96":290,"_156":291,"_158":247,"_159":141,"_160":292,"_162":118,"_106":293,"_100":32,"_164":184,"_166":294,"_167":22,"_168":-5,"_169":295,"_99":296},"aa1c024c-c71d-11f0-bb3a-42dde27851f2","ProcessingPage.tsx","aa1c031e-c71d-11f0-bb3a-42dde27851f2",447,["D",1763759067023],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport VideoFeed from \"./VideoFeed.tsx\";\nimport type { VideoData } from \"../../shared/types.ts\";\n\nexport function ProcessingPage() {\n const [videos, setVideos] = useState([]);\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(null);\n\n const loadProcessingVideos = async () => {\n try {\n setLoading(true);\n const response = await fetch('/api/videos?status=processing');\n if (!response.ok) throw new Error('Failed to load processing videos');\n\n const videosData = await response.json();\n setVideos(videosData);\n setError(null);\n } catch (err) {\n console.error('Error loading processing videos:', err);\n setError('Failed to load processing videos');\n } finally {\n setLoading(false);\n }\n };\n\n useEffect(() => {\n loadProcessingVideos();\n\n // Auto-refresh every 10 seconds\n const interval = setInterval(loadProcessingVideos, 10000);\n return () => clearInterval(interval);\n }, []);\n\n const handleDeleteVideo = async (videoId: string) => {\n try {\n const response = await fetch(`/api/videos/${videoId}`, {\n method: 'DELETE',\n });\n\n if (!response.ok) throw new Error('Failed to delete video');\n\n setVideos(prev => prev.filter(v => v.id !== videoId));\n } catch (err) {\n console.error('Error deleting video:', err);\n alert('Failed to delete video');\n }\n };\n\n return (\n

\n {/* Header */}\n

\n {\n e.preventDefault();\n window.history.pushState({}, '', '/');\n // This relies on App.tsx handling the popstate event or we need a way to notify it\n // For now, we'll just use the same navigation pattern as App.tsx\n window.dispatchEvent(new PopStateEvent('popstate'));\n }}\n >\n ← Back to Feed\n \n

Processing Videos ({videos.length})

{/* Spacer for centering */}\n

\n\n {loading && videos.length === 0 ? (\n

\n Loading...\n

\n ) : error ? (\n

\n {error}\n

\n ) : videos.length === 0 ? (\n

⏳

No videos currently processing

\n ) : (\n \n )}\n

\n );\n}\n",[],[239,246,290],{"_104":298,"_96":299,"_156":300,"_158":247,"_159":141,"_160":301,"_162":118,"_106":302,"_100":257,"_164":184,"_166":303,"_167":22,"_168":-5,"_169":304,"_99":305},"b0fc1cf6-a444-11f0-95fe-0224a6c84d84","PromptEditor.tsx","2ca39196-a444-11f0-8981-0224a6c84d84",422,["D",1759927538240],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from \"https://esm.sh/react@18.2.0\";\n\ninterface PromptEditorProps {\n prompt: string;\n onSave: (prompt: string) => Promise;\n saving: boolean;\n}\n\nexport function PromptEditor({ prompt, onSave, saving }: PromptEditorProps) {\n const [editedPrompt, setEditedPrompt] = useState(prompt);\n const [hasChanges, setHasChanges] = useState(false);\n\n const handleChange = (e: Event) => {\n const target = e.target as HTMLTextAreaElement;\n setEditedPrompt(target.value);\n setHasChanges(target.value !== prompt);\n };\n\n const handleSave = async () => {\n await onSave(editedPrompt);\n setHasChanges(false);\n };\n\n const handleReset = () => {\n setEditedPrompt(prompt);\n setHasChanges(false);\n };\n\n return (\n

\n \n

\n \n {saving ? \"Saving...\" : \"Save Prompt\"}\n \n \n Reset\n \n

\n {hasChanges && (\n

\n You have unsaved changes\n

\n )}\n

\n );\n}\n",[],[239,246,299],{"_104":307,"_96":308,"_156":309,"_158":247,"_159":141,"_160":310,"_162":118,"_106":311,"_100":32,"_164":184,"_166":312,"_167":22,"_168":-5,"_169":313,"_99":314},"afdf769e-9f79-11f0-b57c-0224a6c84d84","URLInput.tsx","afdf7770-9f79-11f0-b57c-0224a6c84d84",14,["D",1759400543894],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport { isValidUrl, DEFAULT_VIDEO_PROMPT } from \"../../shared/utils.ts\";\n\ninterface URLInputProps {\n isOpen: boolean;\n onClose: () => void;\n onSubmit: (url: string, prompt?: string) => void;\n loading: boolean;\n}\n\nexport default function URLInput({ isOpen, onClose, onSubmit, loading }: URLInputProps) {\n const [url, setUrl] = useState('');\n const [prompt, setPrompt] = useState(DEFAULT_VIDEO_PROMPT);\n const [showAdvanced, setShowAdvanced] = useState(false);\n const [error, setError] = useState('');\n\n useEffect(() => {\n if (isOpen) {\n setUrl('');\n setError('');\n // Focus on the URL input when opened\n setTimeout(() => {\n const input = document.getElementById('url-input');\n if (input) input.focus();\n }, 100);\n }\n }, [isOpen]);\n\n const handleSubmit = (e: React.FormEvent) => {\n e.preventDefault();\n \n if (!url.trim()) {\n setError('Please enter a URL');\n return;\n }\n\n if (!isValidUrl(url.trim())) {\n setError('Please enter a valid URL');\n return;\n }\n\n setError('');\n onSubmit(url.trim(), showAdvanced ? prompt : undefined);\n };\n\n const handleKeyDown = (e: React.KeyboardEvent) => {\n if (e.key === 'Escape') {\n onClose();\n }\n };\n\n if (!isOpen) return null;\n\n return (\n

Add URL to Generate Video

\n \n ×\n \n

\n\n

\n \n Website URL\n \n setUrl(e.target.value)}\n placeholder=\"https://example.com\"\n className=\"w-full px-4 py-3 bg-white bg-opacity-10 backdrop-blur-lg rounded-lg border border-gray-600 focus:border-pink-500 focus:outline-none text-white placeholder-gray-400\"\n disabled={loading}\n required\n />\n {error && (\n

{error}

\n )}\n

\n\n

\n setShowAdvanced(!showAdvanced)}\n className=\"text-sm text-gray-400 hover:text-white transition-colors\"\n >\n {showAdvanced ? '▼' : '▶'} Advanced Options\n \n

\n\n {showAdvanced && (\n

\n \n Video Generation Prompt\n \n setPrompt(e.target.value)}\n rows={6}\n className=\"w-full px-4 py-3 bg-white bg-opacity-10 backdrop-blur-lg rounded-lg border border-gray-600 focus:border-pink-500 focus:outline-none text-white placeholder-gray-400 resize-none\"\n placeholder=\"Describe how you want the video to be generated...\"\n disabled={loading}\n />\n

\n Customize how the AI generates your video. The prompt will be combined with the page summary and screenshot.\n

\n\n

\n setPrompt(DEFAULT_VIDEO_PROMPT)}\n className=\"text-sm px-3 py-1 bg-gray-600 hover:bg-gray-500 rounded transition-colors\"\n disabled={loading}\n >\n Reset to Default\n \n

\n )}\n\n

\n \n {loading ? (\n <>\n

\n Generating...\n \n ) : (\n 'Generate Video'\n )}\n \n \n Cancel\n \n

\n\n

How it works:

1. 📄 Fetch the page content as markdown
2. 📸 Take a screenshot of the page
3. 🤖 Generate an AI summary using Gemini
4. 🎬 Create a TikTok-style video using Veo AI

\n );\n}",[],[239,246,308],{"_104":316,"_96":317,"_156":318,"_158":247,"_159":141,"_160":319,"_162":22,"_106":320,"_100":321,"_164":184,"_166":322,"_167":22,"_168":-5,"_169":323,"_99":324},"1bbb621e-af20-11f0-9927-0224a6c84d84","VideoCard.tsx","9fd35b12-9f79-11f0-a8a5-0224a6c84d84",436,["D",1761121288720],28,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, {\n forwardRef,\n useEffect,\n useRef,\n useState,\n} from \"https://esm.sh/react@18.2.0\";\nimport type { VideoData } from \"../../shared/types.ts\";\nimport { formatDate, truncateText } from \"../../shared/utils.ts\";\n\ninterface VideoCardProps {\n video: VideoData;\n isActive: boolean;\n onDelete: () => void;\n}\n\nconst VideoCard = forwardRef(\n ({ video, isActive, onDelete }, ref) => {\n const [isPlaying, setIsPlaying] = useState(false);\n const [showDetails, setShowDetails] = useState(false);\n const [isMuted, setIsMuted] = useState(true); // Start muted for autoplay\n const videoRef = useRef(null);\n\n useEffect(() => {\n if (videoRef.current && video.status === \"completed\" && video.videoUrl) {\n if (isActive) {\n // Auto-play when video becomes active\n videoRef.current.play().then(() => {\n setIsMuted(false);\n setIsPlaying(true);\n }).catch((error) => {\n // Handle autoplay restrictions\n console.log(\"Autoplay prevented:\", error);\n setIsPlaying(false);\n });\n } else {\n // Pause when video becomes inactive\n videoRef.current.pause();\n setIsPlaying(false);\n }\n }\n }, [isActive, video.status, video.videoUrl]);\n\n // Update video muted state when isMuted changes\n useEffect(() => {\n if (videoRef.current) {\n videoRef.current.muted = isMuted;\n }\n }, [isMuted]);\n\n const togglePlay = () => {\n if (videoRef.current) {\n if (isPlaying) {\n videoRef.current.pause();\n } else {\n videoRef.current.play();\n }\n setIsPlaying(!isPlaying);\n }\n };\n\n const toggleMute = () => {\n setIsMuted(!isMuted);\n };\n\n const handleVideoClick = (e: React.MouseEvent) => {\n e.preventDefault();\n if (video.status === \"completed\" && video.videoUrl) {\n togglePlay();\n }\n };\n\n const renderVideoContent = () => {\n switch (video.status) {\n case \"processing\":\n return (\n

Generating Video...

\n Creating a funky overview of: {truncateText(video.title, 60)}\n

\n \n

\n );\n\n case \"failed\":\n return (\n

❌

Generation Failed

\n {video.error ||\n \"Something went wrong while generating the video\"}\n

\n \n Remove\n \n

\n );\n\n case \"completed\":\n if (!video.videoUrl) {\n return (\n

🎬

Video Ready

\n {video.title}\n

\n );\n }\n\n return (\n

\n \n \n Your browser does not support the video tag.\n \n\n {/* Play/Pause Overlay */}\n {!isPlaying && (\n

\n \n \n \n

\n )}\n

\n );\n\n default:\n return null;\n }\n };\n\n return (\n

\n {renderVideoContent()}\n\n {/* Video Overlay */}\n

\n {truncateText(video.title, 120)}\n

\n {showDetails ? video.summary : truncateText(video.summary, 120)}\n

\n {formatDate(video.createdAt)}\n \n View Original\n \n {video.summary.length > 120 && (\n setShowDetails(!showDetails)}\n className=\"hover:text-white transition-colors\"\n >\n {showDetails ? \"Less\" : \"More\"}\n \n )}\n

\n\n {/* Video Controls */}\n

\n {video.status === \"completed\" && video.videoUrl && (\n <>\n \n {isPlaying\n ? (\n \n \n \n )\n : (\n \n \n \n )}\n \n\n \n {isMuted\n ? (\n \n \n \n \n )\n : (\n \n \n \n )}\n \n \n )}\n\n setShowDetails(!showDetails)}\n className=\"control-button\"\n title=\"Toggle Details\"\n >\n \n \n \n \n\n \n \n \n \n \n

\n );\n },\n);\n\nexport default VideoCard;",[],[239,246,317],{"_104":326,"_96":327,"_156":328,"_158":247,"_159":141,"_160":329,"_162":22,"_106":330,"_100":183,"_164":184,"_166":331,"_167":22,"_168":-5,"_169":332,"_99":333},"04072452-c71f-11f0-8937-42dde27851f2","VideoFeed.tsx","8658c97e-9f79-11f0-9eac-0224a6c84d84",454,["D",1763759647374],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useRef, useEffect, useState } from \"https://esm.sh/react@18.2.0\";\nimport VideoCard from \"./VideoCard.tsx\";\nimport type { VideoData } from \"../../shared/types.ts\";\n\ninterface VideoFeedProps {\n videos: VideoData[];\n onDeleteVideo: (id: string) => void;\n onRefresh: () => void;\n onLoadMore: () => void;\n hasMore: boolean;\n}\n\nexport default function VideoFeed({ videos, onDeleteVideo, onRefresh, onLoadMore, hasMore }: VideoFeedProps) {\n const feedRef = useRef(null);\n const [activeVideoIndex, setActiveVideoIndex] = useState(0);\n const videoRefs = useRef<(HTMLDivElement | null)[]>([]);\n const loadMoreRef = useRef(null);\n\n useEffect(() => {\n // Auto-scroll to top when videos change ONLY if it's a fresh load (videos length is small)\n // or if we are at the very top. This is a heuristic.\n // Better: App.tsx handles scroll reset on full refresh.\n if (feedRef.current && videos.length > 0 && activeVideoIndex === 0) {\n // feedRef.current.scrollTop = 0; \n }\n }, [videos]);\n\n // Intersection Observer to detect which video is in view\n useEffect(() => {\n const observer = new IntersectionObserver(\n (entries) => {\n entries.forEach((entry) => {\n if (entry.isIntersecting) {\n const index = videoRefs.current.findIndex(ref => ref === entry.target);\n if (index !== -1) {\n setActiveVideoIndex(index);\n }\n }\n });\n },\n {\n root: feedRef.current,\n threshold: 0.5, // Video needs to be 50% visible to be considered active\n rootMargin: '0px'\n }\n );\n\n // Observe all video cards\n videoRefs.current.forEach((ref) => {\n if (ref) {\n observer.observe(ref);\n }\n });\n\n return () => {\n observer.disconnect();\n };\n }, [videos]);\n\n // Intersection Observer for Load More\n useEffect(() => {\n const observer = new IntersectionObserver(\n (entries) => {\n if (entries[0].isIntersecting && hasMore) {\n onLoadMore();\n }\n },\n {\n root: feedRef.current,\n threshold: 0.1,\n rootMargin: '100px' // Load before reaching the exact bottom\n }\n );\n\n if (loadMoreRef.current) {\n observer.observe(loadMoreRef.current);\n }\n\n return () => {\n observer.disconnect();\n };\n }, [hasMore, onLoadMore]);\n\n const handleKeyDown = (e: KeyboardEvent) => {\n if (!feedRef.current) return;\n\n const currentScroll = feedRef.current.scrollTop;\n const cardHeight = window.innerHeight;\n\n switch (e.key) {\n case 'ArrowDown':\n case ' ':\n e.preventDefault();\n feedRef.current.scrollTo({\n top: currentScroll + cardHeight,\n behavior: 'smooth'\n });\n break;\n case 'ArrowUp':\n e.preventDefault();\n feedRef.current.scrollTo({\n top: currentScroll - cardHeight,\n behavior: 'smooth'\n });\n break;\n case 'Home':\n e.preventDefault();\n feedRef.current.scrollTo({\n top: 0,\n behavior: 'smooth'\n });\n break;\n case 'End':\n e.preventDefault();\n feedRef.current.scrollTo({\n top: feedRef.current.scrollHeight,\n behavior: 'smooth'\n });\n break;\n }\n };\n\n useEffect(() => {\n document.addEventListener('keydown', handleKeyDown);\n return () => document.removeEventListener('keydown', handleKeyDown);\n }, []);\n\n return (\n \n {videos.map((video, index) => (\n (videoRefs.current[index] = el)}\n video={video}\n isActive={index === activeVideoIndex}\n onDelete={() => onDeleteVideo(video.id)}\n />\n ))}\n\n {/* Load more indicator */}\n

\n {hasMore ? (\n

Loading more videos...

\n ) : (\n \n

🔄

Refresh Feed

You've reached the end

\n \n )}\n

\n \n );\n}",[],[239,246,327],{"_104":335,"_96":336,"_156":337,"_158":247,"_159":141,"_160":338,"_162":118,"_106":339,"_100":257,"_164":184,"_166":340,"_167":22,"_168":-5,"_169":341,"_99":342},"b71104ee-a444-11f0-80ac-0224a6c84d84","VideoSelector.tsx","34cfce98-a444-11f0-8464-0224a6c84d84",423,["D",1759927548447],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport type { VideoData } from \"../../shared/types.ts\";\nimport { formatDate } from \"../../shared/utils.ts\";\n\ninterface VideoSelectorProps {\n videos: VideoData[];\n selectedVideos: Set;\n onSelectVideo: (videoId: string) => void;\n disabled: boolean;\n}\n\nexport function VideoSelector({\n videos,\n selectedVideos,\n onSelectVideo,\n disabled,\n}: VideoSelectorProps) {\n return (\n

\n {videos.length === 0 ? (\n

No videos available

\n ) : (\n

\n {videos.map((video) => (\n \n \n onSelectVideo(video.id)}\n disabled={disabled}\n class=\"video-selector-checkbox\"\n />\n

{video.title}

\n {video.status}\n \n {formatDate(video.createdAt)}\n \n {video.version && video.version > 1 && (\n \n v{video.version}\n \n )}\n

{video.url}

\n \n

\n ))}\n

\n )}\n \n );\n}\n",[],[239,246,336],[239,246],{"_104":345,"_96":346,"_156":347,"_158":240,"_159":141,"_160":348,"_162":118,"_106":349,"_100":32,"_164":350,"_166":351,"_167":22,"_168":-5,"_169":352,"_99":353},"4ae03f5a-9fea-11f0-a3cb-0224a6c84d84","favicon.svg","4ae03ff0-9fea-11f0-a3cb-0224a6c84d84",353,["D",1759448907577],"file","",[],[239,346],{"_104":355,"_96":356,"_156":357,"_158":240,"_159":141,"_160":358,"_162":22,"_106":359,"_100":257,"_164":350,"_166":360,"_167":22,"_168":-5,"_169":361,"_99":362},"519c6f6c-9fea-11f0-8a0b-0224a6c84d84","index.html","5e3eb2b4-9f79-11f0-bf81-0224a6c84d84",354,["D",1759448918873],"\n\n\n \n \n TikTok-Style Video Feed\n \n \n \n \n\n\n

\n \n\n",[],[239,356],{"_104":364,"_96":365,"_156":366,"_158":240,"_159":141,"_160":367,"_162":118,"_106":368,"_100":32,"_164":184,"_166":369,"_167":22,"_168":-5,"_169":370,"_99":371},"6aa5e400-9f79-11f0-816c-0224a6c84d84","index.tsx","6aa5e4aa-9f79-11f0-816c-0224a6c84d84",10,["D",1759400427756],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport App from \"./components/App.tsx\";\n\nconst root = createRoot(document.getElementById('root')!);\nroot.render();",[],[239,365],{"_104":373,"_96":374,"_156":375,"_158":240,"_159":141,"_160":376,"_162":118,"_106":377,"_100":257,"_164":350,"_166":378,"_167":22,"_168":-5,"_169":379,"_99":380},"6f056f14-a444-11f0-b41d-0224a6c84d84","style.css","6747f744-9f79-11f0-a15e-0224a6c84d84",418,["D",1759927427570],"/* TikTok-style video feed styles */\n\n.video-feed {\n height: 100vh;\n overflow-y: scroll;\n scroll-snap-type: y mandatory;\n scrollbar-width: none; /* Firefox */\n -ms-overflow-style: none; /* IE and Edge */\n}\n\n.video-feed::-webkit-scrollbar {\n display: none; /* Chrome, Safari, Opera */\n}\n\n.video-card {\n height: 100vh;\n scroll-snap-align: start;\n scroll-snap-stop: always;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.video-player {\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n\n.video-overlay {\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));\n padding: 2rem 1rem 1rem;\n z-index: 10;\n}\n\n.video-controls {\n position: absolute;\n right: 1rem;\n bottom: 50%;\n transform: translateY(50%);\n display: flex;\n flex-direction: column;\n gap: 1rem;\n z-index: 10;\n}\n\n.control-button {\n width: 48px;\n height: 48px;\n border-radius: 50%;\n background: rgba(255, 255, 255, 0.2);\n backdrop-filter: blur(10px);\n border: none;\n color: white;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.control-button:hover {\n background: rgba(255, 255, 255, 0.3);\n transform: scale(1.1);\n}\n\n.url-input-overlay {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n z-index: 50;\n background: rgba(0, 0, 0, 0.8);\n backdrop-filter: blur(10px);\n padding: 1rem;\n transform: translateY(-100%);\n transition: transform 0.3s ease;\n}\n\n.url-input-overlay.open {\n transform: translateY(0);\n}\n\n.loading-spinner {\n border: 2px solid rgba(255, 255, 255, 0.3);\n border-radius: 50%;\n border-top: 2px solid white;\n width: 24px;\n height: 24px;\n animation: spin 1s linear infinite;\n}\n\n@keyframes spin {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n}\n\n.fade-in {\n animation: fadeIn 0.5s ease-in;\n}\n\n@keyframes fadeIn {\n from {\n opacity: 0;\n transform: translateY(20px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n/* Mobile optimizations */\n@media (max-width: 768px) {\n .video-overlay {\n padding: 1rem 0.5rem 0.5rem;\n }\n\n .video-controls {\n right: 0.5rem;\n gap: 0.75rem;\n }\n\n .control-button {\n width: 40px;\n height: 40px;\n }\n}\n\n/* Admin Panel Styles */\n.admin-page {\n min-height: 100vh;\n background: #1a1a1a;\n color: white;\n padding: 2rem;\n}\n\n.admin-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 2rem;\n}\n\n.admin-back-link {\n color: #60a5fa;\n text-decoration: none;\n transition: color 0.2s;\n}\n\n.admin-back-link:hover {\n color: #93c5fd;\n}\n\n.admin-panel {\n max-width: 1200px;\n margin: 0 auto;\n}\n\n.admin-panel h1 {\n font-size: 2rem;\n margin-bottom: 2rem;\n}\n\n.admin-section {\n background: #2a2a2a;\n border-radius: 8px;\n padding: 2rem;\n margin-bottom: 2rem;\n}\n\n.admin-section h2 {\n font-size: 1.5rem;\n margin-bottom: 1rem;\n}\n\n.admin-section p {\n color: #9ca3af;\n margin-bottom: 1rem;\n}\n\n.admin-message {\n padding: 1rem;\n border-radius: 8px;\n margin-bottom: 2rem;\n}\n\n.admin-message-success {\n background: #10b981;\n color: white;\n}\n\n.admin-message-error {\n background: #ef4444;\n color: white;\n}\n\n.admin-button {\n background: #374151;\n color: white;\n border: none;\n padding: 0.75rem 1.5rem;\n border-radius: 6px;\n cursor: pointer;\n transition: background 0.2s;\n font-size: 1rem;\n}\n\n.admin-button:hover:not(:disabled) {\n background: #4b5563;\n}\n\n.admin-button:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.admin-button-primary {\n background: #ec4899;\n}\n\n.admin-button-primary:hover:not(:disabled) {\n background: #db2777;\n}\n\n.admin-actions {\n display: flex;\n gap: 1rem;\n margin-bottom: 1.5rem;\n}\n\n.admin-loading {\n text-align: center;\n padding: 2rem;\n font-size: 1.2rem;\n color: #9ca3af;\n}\n\n.admin-error-banner {\n background: #ef4444;\n color: white;\n padding: 1rem;\n border-radius: 8px;\n margin-bottom: 1rem;\n}\n\n/* Prompt Editor */\n.prompt-editor {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n}\n\n.prompt-textarea {\n width: 100%;\n min-height: 200px;\n padding: 1rem;\n background: #1a1a1a;\n border: 1px solid #4b5563;\n border-radius: 6px;\n color: white;\n font-family: monospace;\n font-size: 0.9rem;\n resize: vertical;\n}\n\n.prompt-textarea:focus {\n outline: none;\n border-color: #ec4899;\n}\n\n.prompt-editor-actions {\n display: flex;\n gap: 1rem;\n}\n\n.prompt-editor-notice {\n color: #fbbf24;\n font-size: 0.9rem;\n}\n\n/* Video Selector */\n.video-selector {\n max-height: 600px;\n overflow-y: auto;\n}\n\n.video-selector-empty {\n text-align: center;\n color: #9ca3af;\n padding: 2rem;\n}\n\n.video-selector-list {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n}\n\n.video-selector-item {\n background: #1a1a1a;\n border: 2px solid #374151;\n border-radius: 6px;\n padding: 1rem;\n transition: all 0.2s;\n}\n\n.video-selector-item.selected {\n border-color: #ec4899;\n background: #2a1a2a;\n}\n\n.video-selector-label {\n display: flex;\n gap: 1rem;\n cursor: pointer;\n align-items: start;\n}\n\n.video-selector-checkbox {\n margin-top: 0.25rem;\n width: 18px;\n height: 18px;\n cursor: pointer;\n}\n\n.video-selector-info {\n flex: 1;\n}\n\n.video-selector-title {\n font-weight: 600;\n margin-bottom: 0.5rem;\n}\n\n.video-selector-meta {\n display: flex;\n gap: 1rem;\n font-size: 0.875rem;\n color: #9ca3af;\n margin-bottom: 0.25rem;\n}\n\n.video-selector-status {\n color: #60a5fa;\n}\n\n.video-selector-version {\n color: #fbbf24;\n}\n\n.video-selector-url {\n font-size: 0.8rem;\n color: #6b7280;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n/* Password Prompt */\n.password-prompt-overlay {\n position: fixed;\n inset: 0;\n background: rgba(0, 0, 0, 0.8);\n backdrop-filter: blur(10px);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 50;\n}\n\n.password-prompt {\n background: #2a2a2a;\n border-radius: 8px;\n padding: 2rem;\n max-width: 400px;\n width: 90%;\n}\n\n.password-prompt h2 {\n font-size: 1.5rem;\n margin-bottom: 0.5rem;\n}\n\n.password-prompt p {\n color: #9ca3af;\n margin-bottom: 1.5rem;\n}\n\n.password-prompt form {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n}\n\n.password-input {\n width: 100%;\n padding: 0.75rem;\n background: #1a1a1a;\n border: 1px solid #4b5563;\n border-radius: 6px;\n color: white;\n font-size: 1rem;\n}\n\n.password-input:focus {\n outline: none;\n border-color: #ec4899;\n}\n\n.password-error {\n color: #ef4444;\n font-size: 0.875rem;\n}\n\n/* Scrollbar styling for admin panel */\n.video-selector::-webkit-scrollbar {\n width: 8px;\n}\n\n.video-selector::-webkit-scrollbar-track {\n background: #1a1a1a;\n}\n\n.video-selector::-webkit-scrollbar-thumb {\n background: #4b5563;\n border-radius: 4px;\n}\n\n.video-selector::-webkit-scrollbar-thumb:hover {\n background: #6b7280;\n}\n",[],[239,374],[239],{"_104":383,"_96":384,"_156":385,"_158":-5,"_159":141,"_160":386,"_162":118,"_106":387,"_100":32,"_164":165,"_166":-5,"_167":22,"_168":-5,"_169":388,"_99":407},"2d01f774-9f79-11f0-afea-0224a6c84d84","shared","2731a98d-fb22-49d8-8087-70c6de5d76e1",2,["D",1759400324322],[389,399],{"_104":390,"_96":391,"_156":392,"_158":385,"_159":141,"_160":393,"_162":118,"_106":394,"_100":395,"_164":184,"_166":396,"_167":22,"_168":-5,"_169":397,"_99":398},"ddac6d88-a443-11f0-988c-0224a6c84d84","types.ts","2d01eebe-9f79-11f0-afea-0224a6c84d84",406,["D",1759927183724],3,"// Shared types for the TikTok-style video feed application\n\nexport interface VideoData {\n id: string;\n url: string;\n title: string;\n summary: string;\n screenshotUrl: string;\n videoUrl?: string;\n status: \"processing\" | \"completed\" | \"failed\";\n createdAt: string;\n updatedAt: string;\n prompt?: string;\n error?: string;\n veoOperationId?: string; // Store VEO operation ID for polling\n parentId?: string; // Reference to original video for re-processed versions\n version?: number; // Version number (1 for original, increments for re-processed)\n}\n\nexport interface GenerateVideoRequest {\n url: string;\n prompt?: string;\n}\n\nexport interface GenerateVideoResponse {\n id: string;\n status: \"processing\" | \"completed\" | \"failed\";\n message: string;\n}\n\nexport interface MarkdownResponse {\n markdown: string;\n title: string;\n}\n\nexport interface VideoGenerationJob {\n id: string;\n url: string;\n markdown: string;\n title: string;\n summary: string;\n screenshotUrl: string;\n prompt: string;\n status: \"pending\" | \"processing\" | \"completed\" | \"failed\";\n videoUrl?: string;\n error?: string;\n}\n",[],[384,391],{"_104":400,"_96":401,"_156":402,"_158":385,"_159":141,"_160":395,"_162":118,"_106":403,"_100":32,"_164":184,"_166":404,"_167":22,"_168":-5,"_169":405,"_99":406},"32fc299c-9f79-11f0-99da-0224a6c84d84","utils.ts","32fc2a46-9f79-11f0-99da-0224a6c84d84",["D",1759400334365],"// Shared utility functions\n\nexport function generateId(): string {\n return Math.random().toString(36).substring(2) + Date.now().toString(36);\n}\n\nexport function isValidUrl(string: string): boolean {\n try {\n new URL(string);\n return true;\n } catch (_) {\n return false;\n }\n}\n\nexport function formatDate(dateString: string): string {\n const date = new Date(dateString);\n return date.toLocaleDateString('en-US', {\n year: 'numeric',\n month: 'short',\n day: 'numeric',\n hour: '2-digit',\n minute: '2-digit'\n });\n}\n\nexport function truncateText(text: string, maxLength: number): string {\n if (text.length <= maxLength) return text;\n return text.substring(0, maxLength).trim() + '...';\n}\n\nexport const DEFAULT_VIDEO_PROMPT = `Create a funky, engaging video overview of this web page content. \nMake it visually interesting with dynamic transitions, colorful graphics, and modern design elements. \nThe video should be vertical (9:16 aspect ratio) like a TikTok video. \nInclude text overlays highlighting key points from the summary. \nUse the screenshot as a reference for the original page design but make it more dynamic and engaging.\nKeep it under 30 seconds and make it scroll-friendly for social media.`;",[],[384,401],[384],{"_104":409,"_96":410,"_156":411,"_158":-5,"_159":141,"_160":412,"_162":118,"_106":413,"_100":32,"_164":350,"_166":414,"_167":22,"_168":-5,"_169":415,"_99":416},"86eb1176-a442-11f0-bd3b-0224a6c84d84",".vtignore","86eb1248-a442-11f0-bd3b-0224a6c84d84",402,["D",1759926608600],".git\n.vscode\n.cursorrules\n.DS_Store\nnode_modules\nvendor",[],[410],{"_104":418,"_96":419,"_156":420,"_158":-5,"_159":141,"_160":421,"_162":118,"_106":422,"_100":32,"_164":350,"_166":423,"_167":22,"_168":-5,"_169":424,"_99":425},"86e24172-a442-11f0-8035-0224a6c84d84","AGENTS.md","86e24226-a442-11f0-8035-0224a6c84d84",401,["D",1759926608603],"You are an advanced assistant specialized in generating Val Town code.\n\n## Core Guidelines\n\n- Ask clarifying questions when requirements are ambiguous\n- Provide complete, functional solutions rather than skeleton implementations\n- Test your logic against edge cases before presenting the final solution\n- Ensure all code follows Val Town's specific platform requirements\n- If a section of code that you're working on is getting too complex, consider refactoring it into subcomponents\n\n## Code Standards\n\n- Generate code in TypeScript or TSX\n- Add appropriate TypeScript types and interfaces for all data structures\n- Prefer official SDKs or libraries than writing API calls directly\n- Ask the user to supply API or library documentation if you are at all unsure about it\n- **Never bake in secrets into the code** - always use environment variables\n- Include comments explaining complex logic (avoid commenting obvious operations)\n- Follow modern ES6+ conventions and functional programming practices if possible\n\n## Types of triggers\n\n### 1. HTTP Trigger\n\n- Create web APIs and endpoints\n- Handle HTTP requests and responses\n- Example structure:\n\n```ts\nexport default async function (req: Request) {\n return new Response(\"Hello World\");\n}\n```\n\nFiles that are HTTP triggers have http in their name like `foobar.http.tsx`\n\n### 2. Cron Triggers\n\n- Run on a schedule\n- Use cron expressions for timing\n- Example structure:\n\n```ts\nexport default async function () {\n // Scheduled task code\n}\n```\n\nFiles that are Cron triggers have cron in their name like `foobar.cron.tsx`\n\n### 3. Email Triggers\n\n- Process incoming emails\n- Handle email-based workflows\n- Example structure:\n\n```ts\nexport default async function (email: Email) {\n // Process email\n}\n```\n\nFiles that are Email triggers have email in their name like `foobar.email.tsx`\n\n\n## Val Town Standard Libraries\n\nVal Town provides several hosted services and utility functions.\n\n### Blob Storage\n\n```ts\nimport { blob } from \"https://esm.town/v/std/blob\";\nawait blob.setJSON(\"myKey\", { hello: \"world\" });\nlet blobDemo = await blob.getJSON(\"myKey\");\nlet appKeys = await blob.list(\"app_\");\nawait blob.delete(\"myKey\");\n```\n\n### SQLite\n\n```ts\nimport { sqlite } from \"https://esm.town/v/stevekrouse/sqlite\";\nconst TABLE_NAME = 'todo_app_users_2';\n// Create table - do this before usage and change table name when modifying schema\nawait sqlite.execute(`CREATE TABLE IF NOT EXISTS ${TABLE_NAME} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n name TEXT NOT NULL\n)`);\n// Query data\nconst result = await sqlite.execute(`SELECT * FROM ${TABLE_NAME} WHERE id = ?`, [1]);\n```\n\nNote: When changing a SQLite table's schema, change the table's name (e.g., add _2 or _3) to create a fresh table.\n\n### OpenAI\n\n```ts\nimport { OpenAI } from \"https://esm.town/v/std/openai\";\nconst openai = new OpenAI();\nconst completion = await openai.chat.completions.create({\n messages: [\n { role: \"user\", content: \"Say hello in a creative way\" },\n ],\n model: \"gpt-4o-mini\",\n max_tokens: 30,\n});\n```\n\n### Email\n\n```ts\nimport { email } from \"https://esm.town/v/std/email\";\n// By default emails the owner of the val\nawait email({ \n subject: \"Hi\", \n text: \"Hi\", \n html: \"

Hi

\"\n});\n```\n\n## Val Town Utility Functions\n\nVal Town provides several utility functions to help with common project tasks.\n\n### Importing Utilities\n\nAlways import utilities with version pins to avoid breaking changes:\n\n```ts\nimport { parseProject, readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\n```\n\n### Available Utilities\n\n\n#### **serveFile** - Serve project files with proper content types\n\nFor example, in Hono:\n\n```ts\n// serve all files in frontend/ and shared/\napp.get(\"/frontend/*\", c => serveFile(c.req.path, import.meta.url));\napp.get(\"/shared/*\", c => serveFile(c.req.path, import.meta.url));\n```\n\n#### **readFile** - Read files from within the project:\n\n```ts\n// Read a file from the project\nconst fileContent = await readFile(\"/frontend/index.html\", import.meta.url);\n```\n\n#### **listFiles** - List all files in the project\n\n```ts\nconst files = await listFiles(import.meta.url);\n```\n\n#### **parseProject** - Extract information about the current project from import.meta.url\n\nThis is useful for including info for linking back to a val, ie in \"view source\" urls:\n\n```ts\nconst projectVal = parseProject(import.meta.url);\nconsole.log(projectVal.username); // Owner of the project\nconsole.log(projectVal.name); // Project name\nconsole.log(projectVal.version); // Version number\nconsole.log(projectVal.branch); // Branch name\nconsole.log(projectVal.links.self.project); // URL to the project page\n```\n\nHowever, it's *extremely importing* to note that `parseProject` and other Standard Library utilities ONLY RUN ON THE SERVER.\nIf you need access to this data on the client, run it in the server and pass it to the client by splicing it into the HTML page\nor by making an API request for it.\n\n## Val Town Platform Specifics\n\n- **Redirects:** Use `return new Response(null, { status: 302, headers: { Location: \"/place/to/redirect\" }})` instead of `Response.redirect` which is broken\n- **Images:** Avoid external images or base64 images. Use emojis, unicode symbols, or icon fonts/libraries instead\n- **AI Image:** To inline generate an AI image use: `

`\n- **Storage:** DO NOT use the Deno KV module for storage\n- **Browser APIs:** DO NOT use the `alert()`, `prompt()`, or `confirm()` methods\n- **Weather Data:** Use open-meteo for weather data (doesn't require API keys) unless otherwise specified\n- **View Source:** Add a view source link by importing & using `import.meta.url.replace(\"ems.sh\", \"val.town)\"` (or passing this data to the client) and include `target=\"_top\"` attribute\n- **Error Debugging:** Add `` to HTML to capture client-side errors\n- **Error Handling:** Only use try...catch when there's a clear local resolution; Avoid catches that merely log or return 500s. Let errors bubble up with full context\n- **Environment Variables:** Use `Deno.env.get('keyname')` when you need to, but generally prefer APIs that don't require keys\n- **Imports:** Use `https://esm.sh` for npm and Deno dependencies to ensure compatibility on server and browser\n- **Storage Strategy:** Only use backend storage if explicitly required; prefer simple static client-side sites\n- **React Configuration:** When using React libraries, pin versions with `?deps=react@18.2.0,react-dom@18.2.0` and start the file with `/** @jsxImportSource https://esm.sh/react@18.2.0 */`\n- Ensure all React dependencies and sub-dependencies are pinned to the same version\n- **Styling:** Default to using TailwindCSS via `` unless otherwise specified\n\n## Project Structure and Design Patterns\n\n### Recommended Directory Structure\n```\n├── backend/\n│ ├── database/\n│ │ ├── migrations.ts # Schema definitions\n│ │ ├── queries.ts # DB query functions\n│ │ └── README.md\n│ └── routes/ # Route modules\n│ ├── [route].ts\n│ └── static.ts # Static file serving\n│ ├── index.ts # Main entry point\n│ └── README.md\n├── frontend/\n│ ├── components/\n│ │ ├── App.tsx\n│ │ └── [Component].tsx\n│ ├── favicon.svg\n│ ├── index.html # Main HTML template\n│ ├── index.tsx # Frontend JS entry point\n│ ├── README.md\n│ └── style.css\n├── README.md\n└── shared/\n ├── README.md\n └── utils.ts # Shared types and functions\n```\n\n### Backend (Hono) Best Practices\n\n- Hono is the recommended API framework\n- Main entry point should be `backend/index.ts`\n- **Static asset serving:** Use the utility functions to read and serve project files:\n ```ts\n import { readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\n \n // serve all files in frontend/ and shared/\n app.get(\"/frontend/*\", c => serveFile(c.req.path, import.meta.url));\n app.get(\"/shared/*\", c => serveFile(c.req.path, import.meta.url));\n \n // For index.html, often you'll want to bootstrap with initial data\n app.get(\"/\", async c => {\n let html = await readFile(\"/frontend/index.html\", import.meta.url);\n \n // Inject data to avoid extra round-trips\n const initialData = await fetchInitialData();\n const dataScript = ``;\n \n html = html.replace(\"\", `${dataScript}`);\n return c.html(html);\n });\n ```\n- Create RESTful API routes for CRUD operations\n- Always include this snippet at the top-level Hono app to re-throwing errors to see full stack traces:\n ```ts\n // Unwrap Hono errors to see original error details\n app.onError((err, c) => {\n throw err;\n });\n ```\n\n### Database Patterns\n- Run migrations on startup or comment out for performance\n- Change table names when modifying schemas rather than altering\n- Export clear query functions with proper TypeScript typing\n\n## Common Gotchas and Solutions\n\n1. **Environment Limitations:** \n - Val Town runs on Deno in a serverless context, not Node.js\n - Code in `shared/` must work in both frontend and backend environments\n - Cannot use `Deno` keyword in shared code\n - Use `https://esm.sh` for imports that work in both environments\n\n2. **SQLite Peculiarities:**\n - Limited support for ALTER TABLE operations\n - Create new tables with updated schemas and copy data when needed\n - Always run table creation before querying\n\n3. **React Configuration:**\n - All React dependencies must be pinned to 18.2.0\n - Always include `@jsxImportSource https://esm.sh/react@18.2.0` at the top of React files\n - Rendering issues often come from mismatched React versions\n\n4. **File Handling:**\n - Val Town only supports text files, not binary\n - Use the provided utilities to read files across branches and forks\n - For files in the project, use `readFile` helpers\n\n5. **API Design:**\n - `fetch` handler is the entry point for HTTP vals\n - Run the Hono app with `export default app.fetch // This is the entry point for HTTP vals`\n\n",[],[419],{"_104":427,"_96":428,"_156":429,"_158":-5,"_159":141,"_160":430,"_162":118,"_106":431,"_100":257,"_164":350,"_166":432,"_167":22,"_168":-5,"_169":433,"_99":434},"158dd48a-aec6-11f0-815e-0224a6c84d84","HACKERNEWS_CRON_SETUP.md","5d89b940-aec4-11f0-bc93-0224a6c84d84",434,["D",1761082623670],"# HackerNews Cron Job Setup Guide\n\nThis document explains how to set up the HackerNews cron job on Val.Town.\n\n## Overview\n\nThe `hackernews-cron.ts` file contains a cron job that:\n\n- Runs every hour\n- Fetches the top 10 HackerNews stories\n- Automatically generates videos for new URLs (no duplicates)\n- Uses your default video generation prompt\n- Skips text posts (Ask HN, Show HN, etc.) - only processes external URLs\n\n## Setup Instructions\n\n### 1. Upload the Cron Job to Val.Town\n\n1. Go to [Val.Town](https://val.town)\n2. Create a new Val\n3. Copy the contents of `hackernews-cron.ts` into the Val\n4. Save the Val\n\n### 2. Configure Environment Variables\n\nThe cron job directly imports and uses your existing video generation logic, so it requires the same environment variables as your main application:\n\n**Required:**\n\n- `GEMINI_API_KEY` - Your Google Gemini API key (required for video generation)\n\n**Optional:**\n\n- `ADMIN_PASSWORD` - Your admin password (if you want to use the admin interface)\n\n**Note:** No additional environment variables are needed! The cron job directly calls the `generateVideoAsync` function instead of making HTTP requests, making it simpler and more efficient.\n\n### 3. Set Up the Cron Schedule\n\nIn Val.Town:\n\n1. Click on the \"Schedule\" button in your Val\n2. Set the schedule to run every hour: `0 * * * *` (cron syntax)\n3. Save the schedule\n\n### 4. Configuration Options\n\nYou can easily adjust the number of stories to process by editing the constant at the top of the file:\n\n```typescript\nconst TOP_STORIES_LIMIT = 10; // Change this to process more or fewer stories\n```\n\nCommon values:\n\n- `10` - Top 10 stories (default, recommended for cost control)\n- `20` - Top 20 stories\n- `50` - Top 50 stories\n- `100` - Top 100 stories\n\n## How It Works\n\n### Workflow\n\n1. **Fetch Stories**: The cron job fetches the list of top story IDs from HackerNews\n2. **Get Story Details**: For each story (up to TOP_STORIES_LIMIT), it fetches the full story details\n3. **Filter**: It filters out:\n - Stories without external URLs (text posts, Ask HN, Show HN)\n - URLs that already exist in the database (duplicates)\n4. **Generate Videos**: For each new URL, it directly calls the `generateVideoAsync()` function with the default prompt\n5. **Log Results**: It logs a summary of processed, skipped, and failed stories\n\n### Duplicate Prevention\n\nThe cron job uses the `getVideoByUrl()` database query to check if a URL has already been processed. This ensures:\n\n- **Cost control**: You don't regenerate videos for the same URL\n- **Efficiency**: No wasted API calls or processing time\n- **Data integrity**: Each URL is only processed once\n\nNote: If you want to regenerate a video for a URL, you can do so through the admin interface.\n\n### External URL Filter\n\nThe cron job only processes stories with external URLs. It skips:\n\n- Ask HN posts (text-only discussions)\n- Show HN posts without URLs\n- Job postings without URLs\n- Any other text-only content\n\nThis ensures you only generate videos for stories that have actual web content to summarize.\n\n## Monitoring\n\nThe cron job logs detailed information about its execution:\n\n```\n[HN Cron] Starting HackerNews processing at 2025-10-21T22:00:00.000Z\n[HN Cron] Processing top 10 stories\n[HN Cron] Retrieved 500 total story IDs\n[HN Cron] Processing 10 stories\n[HN Cron] Story 12345: Generating video for https://example.com\n[HN Cron] Story 12345: Video generation started successfully\n[HN Cron] Story 12346: URL already processed, skipping\n[HN Cron] Story 12347: No external URL, skipping\n[HN Cron] Processing complete:\n[HN Cron] - Processed: 3\n[HN Cron] - Skipped: 7\n[HN Cron] - Errors: 0\n```\n\nYou can view these logs in Val.Town's execution logs.\n\n## Testing\n\nBefore setting up the cron schedule, you can test the job manually:\n\n1. In Val.Town, open your cron job Val\n2. Click the \"Run\" button to execute it immediately\n3. Check the logs to see the results\n4. Verify that videos are being generated in your application\n\n## Troubleshooting\n\n### \"No videos are being generated\"\n\n**Possible causes**:\n\n1. All URLs might already be in the database (check logs for \"duplicate\" messages)\n2. All stories might be text posts without URLs (check logs for \"no URL\" messages)\n3. The `GEMINI_API_KEY` might be missing or invalid\n\n**Solution**: Check the execution logs for specific error messages.\n\n### \"Too many videos being generated\"\n\n**Solution**: Reduce the `TOP_STORIES_LIMIT` constant to a lower number (e.g., 5 instead of 10).\n\n## Cost Management\n\nThe cron job is designed with cost control in mind:\n\n1. **Configurable limit**: Easy to adjust the number of stories processed\n2. **Duplicate prevention**: Never processes the same URL twice\n3. **Efficient filtering**: Skips text posts before making API calls\n4. **Batched processing**: All video generations are triggered at once, then processed asynchronously\n\nTo further control costs:\n\n- Set `TOP_STORIES_LIMIT` to a lower number\n- Run the cron less frequently (e.g., every 2-3 hours instead of hourly)\n- Monitor the logs to see how many new stories are typically found\n\n## Integration with Existing System\n\nThe cron job integrates seamlessly with your existing system:\n\n- Uses the same video generation endpoint (`/api/videos/generate`)\n- Leverages the existing database schema and queries\n- Works with the existing polling mechanism for video completion\n- Respects the default video prompt from your configuration\n- Videos can be managed through the admin interface like any other video\n\nNo changes to your existing code are required - the cron job is completely standalone.\n",[],[428],{"_104":436,"_96":437,"_156":438,"_158":-5,"_159":141,"_160":439,"_162":118,"_106":440,"_100":441,"_164":350,"_166":442,"_167":22,"_168":-5,"_169":443,"_99":444},"5da4b7f4-aec4-11f0-bea0-0224a6c84d84","README.md","26148c06-9f79-11f0-97db-0224a6c84d84",431,["D",1761081885462],27,"# TikTok-Style Video Feed Generator\n\nA web application that converts URLs into TikTok-style videos using AI-generated summaries and screenshots.\n\n## Features\n\n- Convert any URL into a video using Veo AI\n- Fetch markdown content and screenshots from URLs\n- Generate AI summaries using Gemini API\n- TikTok-style scrolling feed with scroll-snap\n- **Auto-play videos when scrolled into view**\n- **Audio controls with mute/unmute toggle**\n- **Admin interface for prompt management**\n- Configurable video generation prompts (no redeploy required)\n- Video re-processing with updated prompts\n- Version tracking for reprocessed videos\n- **HackerNews integration** - Automated cron job to generate videos for top stories\n\n## Project Structure\n\n```\n├── backend/\n│ ├── index.ts # Main Hono server\n│ ├── routes/\n│ │ ├── videos.ts # Video generation endpoints\n│ │ └── static.ts # Static file serving\n│ └── database/\n│ ├── migrations.ts # SQLite schema\n│ └── queries.ts # Database operations\n├── frontend/\n│ ├── index.html # Main HTML template\n│ ├── index.tsx # React app entry point\n│ ├── components/\n│ │ ├── App.tsx # Main app component\n│ │ ├── VideoFeed.tsx # TikTok-style feed\n│ │ ├── VideoCard.tsx # Individual video component\n│ │ └── URLInput.tsx # URL input form\n│ └── style.css # Custom styles\n└── shared/\n ├── types.ts # Shared TypeScript types\n └── utils.ts # Shared utility functions\n```\n\n## API Endpoints\n\n### Public Endpoints\n\n- `POST /api/videos/generate` - Generate video from URL\n- `GET /api/videos` - Get all generated videos\n- `GET /api/videos/:id` - Get specific video\n- `DELETE /api/videos/:id` - Delete video\n- `POST /api/videos/poll` - Poll for processing video updates\n\n### Admin Endpoints (Password Protected)\n\n- `GET /api/admin/prompt` - Get current default video prompt\n- `PUT /api/admin/prompt` - Update default video prompt\n- `GET /api/admin/videos` - Get all videos for admin management\n- `POST /api/admin/reprocess` - Reprocess selected videos with new prompt\n\n## Environment Variables\n\n- `GEMINI_API_KEY` - Google Gemini API key for summaries (required)\n- `ADMIN_PASSWORD` - Password for admin interface access (required for admin features)\n- `VEO_API_KEY` - Veo API key for video generation (optional - currently using placeholder)\n\n## Setup Instructions\n\n1. Get a Gemini API key from [Google AI Studio](https://makersuite.google.com/app/apikey)\n2. Add the `GEMINI_API_KEY` environment variable in Val Town\n3. The Veo integration is currently a placeholder - you'll need to implement the actual Veo API calls\n4. The application uses external services:\n - `https://markdownify.val.run/` for converting web pages to markdown\n - `https://screenshot.val.run/` for taking page screenshots\n\n## Usage\n\n### Video Generation\n\n1. Enter URLs in the input form\n2. Videos are generated automatically using:\n - Markdown content from the URL\n - Screenshot of the page\n - AI-generated summary\n - Configurable video generation prompt\n3. Scroll through the TikTok-style feed to view videos\n\n### Admin Interface\n\n1. Navigate to `/admin` in your browser\n2. Enter the admin password (set via `ADMIN_PASSWORD` environment variable)\n3. Edit the default video generation prompt\n4. Select videos to reprocess with the updated prompt\n5. Track video versions and regenerations\n\n#### Admin Features\n\n- **Prompt Editor**: Edit the default video generation prompt without redeploying\n- **Video Selector**: Choose specific videos or all videos to reprocess\n- **Version Tracking**: Each reprocessed video creates a new version while preserving the original\n- **Bulk Operations**: Reprocess multiple videos at once with the updated prompt\n\n## ⚠️ CRITICAL TECHNICAL REQUIREMENTS\n\n### Google Generative AI Package\n\n- **NEVER USE**: `https://esm.sh/@google/generative-ai@0.1.3`\n- **ALWAYS USE**: `https://esm.sh/@google/genai`\n- **Correct Import**:\n `import { GoogleGenAI } from \"https://esm.sh/@google/genai\";`\n- **Correct Initialization**:\n ```typescript\n const genAI = new GoogleGenAI({\n apiKey: Deno.env.get(\"GEMINI_API_KEY\") || \"\",\n });\n ```\n- **Correct API Call**:\n ```typescript\n const result = await genAI.models.generateContent({\n model: \"gemini-flash-latest\",\n contents: summaryPrompt,\n });\n const summary = result.text;\n ```\n\n### External Services\n\n- **Markdown Service**:\n `https://markdownifyurl.val.run/?url=${encodeURIComponent(url)}`\n- **Screenshot Service**:\n `https://screenshot.val.run/?url=${encodeURIComponent(url)}`\n\n### Original prompt\n\n```\nCreate a funky, engaging video overview of this web page content.\nMake it visually interesting with dynamic transitions, colorful graphics, and modern design elements.\nThe video should be vertical (9:16 aspect ratio) like a TikTok video.\nInclude text overlays highlighting key points from the summary.\nUse the screenshot as a reference for the original page design but make it more dynamic and engaging.\nKeep it under 30 seconds and make it scroll-friendly for social media.\n```\n\n## HackerNews Integration\n\nThis project includes an automated cron job that fetches top HackerNews stories and generates videos for them.\n\n### Features\n\n- Runs every hour automatically\n- Processes top 10 stories (configurable)\n- Only processes external URLs (skips Ask HN, Show HN text posts)\n- Prevents duplicates - never processes the same URL twice\n- Uses your default video generation prompt\n- Cost-controlled with configurable limits\n\n### Setup\n\nFor detailed setup instructions, see [HACKERNEWS_CRON_SETUP.md](HACKERNEWS_CRON_SETUP.md)\n\n**Quick Start:**\n\n1. Upload `hackernews-cron.ts` to Val.Town as a new Val\n2. Set the `BASE_URL` environment variable to your deployed application URL\n3. Schedule the Val to run every hour (`0 * * * *`)\n4. Adjust `TOP_STORIES_LIMIT` in the code to control how many stories to process\n\nThe cron job will automatically:\n\n- Fetch the latest HackerNews top stories\n- Filter for new URLs not already in your database\n- Trigger video generation for each new URL\n- Log detailed processing results\n\nVideos generated by the cron job appear in your feed just like manually submitted URLs.\n",[],[437],{"_104":446,"_96":447,"_156":448,"_158":-5,"_159":141,"_160":449,"_162":118,"_106":450,"_100":32,"_164":451,"_166":452,"_167":22,"_168":-5,"_169":453,"_99":454},"3ef846f0-c71e-11f0-8f58-42dde27851f2","cleanup-cron.ts","3ef8490c-c71e-11f0-8f58-42dde27851f2",452,["D",1763759316702],"interval","import { deleteStaleVideos } from \"./backend/database/queries.ts\";\n\n/**\n * Cleanup Cron Job\n *\n * Runs daily (or more frequently) to delete videos that have been processing\n * for more than 3 days (72 hours), as Veo only keeps them for that long.\n */\nexport default async function cleanupVideos(): Promise {\n try {\n console.log(`[Cleanup Cron] Starting video cleanup...`);\n \n // Delete videos processing for more than 72 hours (3 days)\n const deletedCount = await deleteStaleVideos(72);\n \n console.log(\n `[Cleanup Cron] Deleted ${deletedCount} stale videos (processing > 3 days)`\n );\n } catch (error: any) {\n console.error(\"[Cleanup Cron] Error cleaning up videos:\", error);\n }\n}\n",[],[447],{"_104":456,"_96":457,"_156":458,"_158":-5,"_159":141,"_160":459,"_162":118,"_106":460,"_100":32,"_164":350,"_166":461,"_167":22,"_168":-5,"_169":462,"_99":463},"86de2aa6-a442-11f0-8528-0224a6c84d84","deno.json","86de2b5a-a442-11f0-8528-0224a6c84d84",400,["D",1759926608591],"{\n \"$schema\": \"https://raw.githubusercontent.com/denoland/deno/348900b8b79f4a434cab4c74b3bc8d4d2fa8ee74/cli/schemas/config-file.v1.json\",\n \"lock\": false,\n \"compilerOptions\": {\n \"noImplicitAny\": false,\n \"strict\": false,\n \"types\": [\n \"https://www.val.town/types/valtown.d.ts\"\n ],\n \"lib\": [\n \"dom\",\n \"dom.iterable\",\n \"dom.asynciterable\",\n \"deno.ns\",\n \"deno.unstable\"\n ]\n },\n \"lint\": {\n \"files\": {\n \"include\": [\n \"deno:/https/esm.town/**/*\"\n ]\n },\n \"rules\": {\n \"exclude\": [\n \"no-explicit-any\"\n ]\n }\n },\n \"node_modules_dir\": false,\n \"experimental\": {\n \"unstable-node-globals\": true,\n \"unstable-temporal\": true,\n \"unstable-worker-options\": true,\n \"unstable-sloppy-imports\": true\n }\n}",[],[457],{"_104":465,"_96":466,"_156":467,"_158":-5,"_159":141,"_160":468,"_162":22,"_106":469,"_100":395,"_164":451,"_166":470,"_167":22,"_168":-5,"_169":471,"_99":472},"97f2b6a2-c71c-11f0-9959-42dde27851f2","hackernews-cron.ts","5dbda552-aec4-11f0-b200-0224a6c84d84",446,["D",1763758607066],"/**\n * HackerNews Cron Job\n *\n * Runs every hour to fetch top HackerNews stories and generate videos for new URLs.\n *\n * Configuration:\n * - TOP_STORIES_LIMIT: Number of top stories to process (default: 10)\n *\n * Features:\n * - Fetches top N stories from HackerNews API\n * - Filters for external URLs only (skips Ask HN, Show HN, etc.)\n * - Prevents duplicates by checking existing URLs in database\n * - Uses default video generation prompt from config\n * - Logs processing results for monitoring\n */\n\nimport { getVideoByUrl } from \"./backend/database/queries.ts\";\nimport { generateVideoAsync } from \"./backend/routes/videos.ts\";\nimport { generateId } from \"./shared/utils.ts\";\n\n// Configuration: Easily adjustable number of stories to process\nconst TOP_STORIES_LIMIT = 10;\n\n// HackerNews API endpoints\nconst HN_TOP_STORIES_URL =\n \"https://hacker-news.firebaseio.com/v0/topstories.json\";\nconst HN_ITEM_URL = \"https://hacker-news.firebaseio.com/v0/item\";\n\ninterface HNStory {\n id: number;\n title: string;\n url?: string;\n type: string;\n by: string;\n time: number;\n score: number;\n}\n\ninterface ProcessingResult {\n processed: string[];\n skipped: string[];\n errors: Array<{ url: string; error: string }>;\n}\n\n/**\n * Main cron job function\n */\nexport async function processHackerNewsStories(): Promise {\n const result: ProcessingResult = {\n processed: [],\n skipped: [],\n errors: [],\n };\n\n try {\n console.log(\n `[HN Cron] Starting HackerNews processing at ${new Date().toISOString()}`\n );\n console.log(`[HN Cron] Processing top ${TOP_STORIES_LIMIT} stories`);\n\n // Step 1: Fetch top story IDs\n const topStoryIds = await fetchTopStoryIds();\n console.log(`[HN Cron] Retrieved ${topStoryIds.length} total story IDs`);\n\n // Step 2: Limit to TOP_STORIES_LIMIT\n const storyIdsToProcess = topStoryIds.slice(0, TOP_STORIES_LIMIT);\n console.log(`[HN Cron] Processing ${storyIdsToProcess.length} stories`);\n\n // Step 3: Process each story\n for (const storyId of storyIdsToProcess) {\n try {\n const story = await fetchStoryDetails(storyId);\n\n // Skip if no story data\n if (!story) {\n console.log(`[HN Cron] Story ${storyId}: No data returned, skipping`);\n result.skipped.push(`Story ${storyId} (no data)`);\n continue;\n }\n\n // Skip if no URL (text posts, Ask HN, etc.)\n if (!story.url) {\n console.log(`[HN Cron] Story ${storyId}: No external URL, skipping`);\n result.skipped.push(`${story.title} (no URL)`);\n continue;\n }\n\n // Check if URL already exists in database\n const existingVideo = await getVideoByUrl(story.url);\n if (existingVideo) {\n console.log(\n `[HN Cron] Story ${storyId}: URL already processed, skipping`\n );\n result.skipped.push(`${story.title} (duplicate)`);\n continue;\n }\n\n // Generate video for this URL\n console.log(\n `[HN Cron] Story ${storyId}: Generating video for ${story.url}`\n );\n await triggerVideoGeneration(story.url);\n result.processed.push(story.title);\n console.log(\n `[HN Cron] Story ${storyId}: Video generation started successfully`\n );\n } catch (error: any) {\n console.error(`[HN Cron] Error processing story ${storyId}:`, error);\n result.errors.push({\n url: `Story ${storyId}`,\n error: error.message || \"Unknown error\",\n });\n }\n }\n\n // Log summary\n console.log(`[HN Cron] Processing complete:`);\n console.log(`[HN Cron] - Processed: ${result.processed.length}`);\n console.log(`[HN Cron] - Skipped: ${result.skipped.length}`);\n console.log(`[HN Cron] - Errors: ${result.errors.length}`);\n\n return result;\n } catch (error: any) {\n console.error(\"[HN Cron] Fatal error in cron job:\", error);\n result.errors.push({\n url: \"N/A\",\n error: error.message || \"Fatal error in cron job\",\n });\n return result;\n }\n}\n\n/**\n * Fetch top story IDs from HackerNews API\n */\nasync function fetchTopStoryIds(): Promise {\n try {\n const response = await fetch(HN_TOP_STORIES_URL);\n if (!response.ok) {\n throw new Error(\n `HackerNews API returned ${response.status}: ${response.statusText}`\n );\n }\n const storyIds: number[] = await response.json();\n return storyIds;\n } catch (error: any) {\n console.error(\"[HN Cron] Error fetching top story IDs:\", error);\n throw new Error(`Failed to fetch top stories: ${error.message}`);\n }\n}\n\n/**\n * Fetch story details for a given story ID\n */\nasync function fetchStoryDetails(storyId: number): Promise {\n try {\n const response = await fetch(`${HN_ITEM_URL}/${storyId}.json`);\n if (!response.ok) {\n throw new Error(\n `HackerNews API returned ${response.status}: ${response.statusText}`\n );\n }\n const story: HNStory = await response.json();\n return story;\n } catch (error) {\n console.error(`[HN Cron] Error fetching story ${storyId}:`, error);\n return null;\n }\n}\n\n/**\n * Trigger video generation by directly calling the generation function\n */\nasync function triggerVideoGeneration(url: string): Promise {\n // Generate a unique video ID\n const videoId = generateId();\n\n // Call the video generation function directly (null = use default prompt)\n await generateVideoAsync(videoId, url, null);\n\n console.log(`[HN Cron] Video generation started for ${videoId}`);\n}\n\n// Export the main function for val.town cron\nexport default processHackerNewsStories;\n",[],[466],{"_104":474,"_96":475,"_156":476,"_158":-5,"_159":141,"_160":477,"_162":118,"_106":478,"_100":32,"_164":184,"_166":479,"_167":22,"_168":-5,"_169":480,"_99":481},"1ce7c53e-9f7a-11f0-9f00-0224a6c84d84","test-db.ts","1ce7c5e8-9f7a-11f0-9f00-0224a6c84d84",22,["D",1759400726821],"import { sqlite } from \"https://esm.town/v/stevekrouse/sqlite/main.tsx\";\n\n// Test database connection and table creation\nasync function testDatabase() {\n console.log('Testing database...');\n \n try {\n // Check if table exists\n const { rows } = await sqlite.execute(\"SELECT name FROM sqlite_master WHERE type='table' AND name LIKE 'tiktok_videos%'\");\n console.log('Tables found:', rows);\n \n // Try to create a test record\n const testId = 'test-' + Date.now();\n await sqlite.execute(`INSERT INTO tiktok_videos_1 (id, url, title, summary, screenshot_url, status) VALUES (?, ?, ?, ?, ?, ?)`, [\n testId,\n 'https://test.com',\n 'Test Title',\n 'Test Summary',\n 'https://test.com/screenshot.png',\n 'processing'\n ]);\n \n console.log('Test record created');\n \n // Query the record back\n const { rows: testRows } = await sqlite.execute(\"SELECT * FROM tiktok_videos_1 WHERE id = ?\", [testId]);\n console.log('Test record retrieved:', testRows);\n \n // Clean up\n await sqlite.execute(\"DELETE FROM tiktok_videos_1 WHERE id = ?\", [testId]);\n console.log('Test record deleted');\n \n } catch (error) {\n console.error('Database test failed:', error);\n }\n}\n\nexport default async function() {\n await testDatabase();\n return new Response('Database test completed - check logs');\n}",[],[475],{"_104":483,"_96":484,"_156":485,"_158":-5,"_159":141,"_160":486,"_162":118,"_106":487,"_100":32,"_164":184,"_166":488,"_167":22,"_168":-5,"_169":489,"_99":490},"92b2a5a2-9fbd-11f0-871f-0224a6c84d84","test-polling.ts","92b2a656-9fbd-11f0-871f-0224a6c84d84",167,["D",1759429700722],"// Test script to demonstrate polling functionality\nimport { createVideo } from \"./backend/database/queries.ts\";\nimport type { VideoData } from \"./shared/types.ts\";\n\n// Create a test video with VEO operation ID\nconst testVideo: VideoData = {\n id: \"test_video_123\",\n url: \"https://example.com\",\n title: \"Test Video for Polling\",\n summary: \"This is a test video to demonstrate the polling functionality.\",\n screenshotUrl: \"https://screenshot.val.run/?url=https%3A%2F%2Fexample.com\",\n status: \"processing\",\n prompt: \"Create a test video\",\n veoOperationId: \"operation_test_123456789\",\n createdAt: new Date().toISOString(),\n updatedAt: new Date().toISOString(),\n};\n\ntry {\n await createVideo(testVideo);\n console.log(\"Test video created successfully!\");\n console.log(\"You can now test the polling functionality:\");\n console.log(\"1. Visit the main page to see the processing video\");\n console.log(\"2. The frontend will automatically start polling\");\n console.log(\"3. After 30 seconds, the video should be marked as completed\");\n console.log(\"4. You can also manually test: POST /api/videos/poll\");\n} catch (error) {\n console.error(\"Error creating test video:\", error);\n}",[],[484],{"_104":492,"_96":493,"_156":494,"_158":-5,"_159":141,"_160":495,"_162":118,"_106":496,"_100":257,"_164":451,"_166":497,"_167":22,"_168":-5,"_169":498,"_99":499},"3ef0608e-c71e-11f0-9acc-42dde27851f2","video-processing-cron.ts","97eca28a-c71c-11f0-96c7-42dde27851f2",451,["D",1763759316715],"import { getProcessingVideos } from \"./backend/database/queries.ts\";\nimport { checkVeoOperationStatus } from \"./backend/routes/videos.ts\";\n\n/**\n * Video Processing Cron Job\n *\n * Runs frequently (e.g. every minute) to check the status of pending videos\n * and download them when completed.\n */\nexport default async function processPendingVideos(): Promise {\n try {\n console.log(`[Video Cron] Checking for pending videos...`);\n const processingVideos = await getProcessingVideos();\n console.log(\n `[Video Cron] Found ${processingVideos.length} videos processing`\n );\n\n for (const video of processingVideos) {\n try {\n const updatedVideo = await checkVeoOperationStatus(video);\n if (updatedVideo) {\n console.log(\n `[Video Cron] Video ${video.id} completed and downloaded`\n );\n }\n } catch (error: any) {\n console.error(\n `[Video Cron] Error checking status for video ${video.id}:`,\n error\n );\n \n // If it's a 404 or other fatal error, mark as failed so we don't keep retrying forever\n // For now, we'll just log it, but in a real system we might want to update the status\n // await updateVideo(video.id, { status: \"failed\", error: error.message });\n \n // Note: We are NOT marking as failed here automatically to avoid transient errors \n // causing failures. The cleanup cron will handle stuck videos.\n }\n }\n } catch (error: any) {\n console.error(\"[Video Cron] Error processing pending videos:\", error);\n }\n}\n",[],[493],"files",[153,171,177,188,199,206,215,226,237,244,251,261,270,279,288,297,306,315,325,334,344,354,363,372,382,389,399,408,417,426,435,445,455,464,473,482,491],"counts",{"_504":32,"_505":257,"_506":32,"_507":508},"pulls","branches","forks","envVars",{"_509":161,"_510":32},"count","emptyCount","contents",[513,516,519,522,525,528,531,534,537,540,543,546,549],{"_104":154,"_96":155,"_156":157,"_158":-5,"_159":141,"_160":161,"_162":118,"_106":514,"_100":32,"_164":165,"_166":-5,"_167":22,"_168":-5,"_99":515},["D",1759400341386],[155],{"_104":238,"_96":239,"_156":240,"_158":-5,"_159":141,"_160":241,"_162":118,"_106":517,"_100":32,"_164":165,"_166":-5,"_167":22,"_168":-5,"_99":518},["D",1759400406916],[239],{"_104":383,"_96":384,"_156":385,"_158":-5,"_159":141,"_160":386,"_162":118,"_106":520,"_100":32,"_164":165,"_166":-5,"_167":22,"_168":-5,"_99":521},["D",1759400324322],[384],{"_104":409,"_96":410,"_156":411,"_158":-5,"_159":141,"_160":412,"_162":118,"_106":523,"_100":32,"_164":350,"_166":414,"_167":22,"_168":-5,"_99":524},["D",1759926608600],[410],{"_104":418,"_96":419,"_156":420,"_158":-5,"_159":141,"_160":421,"_162":118,"_106":526,"_100":32,"_164":350,"_166":423,"_167":22,"_168":-5,"_99":527},["D",1759926608603],[419],{"_104":427,"_96":428,"_156":429,"_158":-5,"_159":141,"_160":430,"_162":118,"_106":529,"_100":257,"_164":350,"_166":432,"_167":22,"_168":-5,"_99":530},["D",1761082623670],[428],{"_104":436,"_96":437,"_156":438,"_158":-5,"_159":141,"_160":439,"_162":118,"_106":532,"_100":441,"_164":350,"_166":442,"_167":22,"_168":-5,"_99":533},["D",1761081885462],[437],{"_104":446,"_96":447,"_156":448,"_158":-5,"_159":141,"_160":449,"_162":118,"_106":535,"_100":32,"_164":451,"_166":452,"_167":22,"_168":-5,"_99":536},["D",1763759316702],[447],{"_104":456,"_96":457,"_156":458,"_158":-5,"_159":141,"_160":459,"_162":118,"_106":538,"_100":32,"_164":350,"_166":461,"_167":22,"_168":-5,"_99":539},["D",1759926608591],[457],{"_104":465,"_96":466,"_156":467,"_158":-5,"_159":141,"_160":468,"_162":22,"_106":541,"_100":395,"_164":451,"_166":470,"_167":22,"_168":-5,"_99":542},["D",1763758607066],[466],{"_104":474,"_96":475,"_156":476,"_158":-5,"_159":141,"_160":477,"_162":118,"_106":544,"_100":32,"_164":184,"_166":479,"_167":22,"_168":-5,"_99":545},["D",1759400726821],[475],{"_104":483,"_96":484,"_156":485,"_158":-5,"_159":141,"_160":486,"_162":118,"_106":547,"_100":32,"_164":184,"_166":488,"_167":22,"_168":-5,"_99":548},["D",1759429700722],[484],{"_104":492,"_96":493,"_156":494,"_158":-5,"_159":141,"_160":495,"_162":118,"_106":550,"_100":257,"_164":451,"_166":497,"_167":22,"_168":-5,"_99":551},["D",1763759316715],[493],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_102":560,"_100":101,"_565":566},{"_104":105,"_96":97,"_106":561,"_108":-5,"_109":22,"_110":111,"_112":-5,"_113":-5,"_14":114,"_115":116,"_117":118,"_119":118,"_120":-5,"_121":32,"_16":122,"_123":124,"_125":124,"_126":127,"_128":127,"_129":127,"_130":124,"_131":124,"_23":562,"_135":563,"_138":564,"_150":22},["D",1759399868007],{"_94":95,"_133":134},{"_94":95,"_137":134,"_14":114},{"_100":140,"_96":44,"_104":141,"_142":105,"_143":-5,"_144":-5,"_145":-5,"_146":-5,"_147":-5,"_148":97,"_149":95},"changes",[567],{"_350":568,"_570":571,"_167":22,"_99":573,"_574":573},{"_156":273,"_96":272,"_164":184,"_166":276,"_106":569,"_160":101,"_159":141},["D",1763759647459],"previous",{"_156":273,"_96":272,"_164":184,"_166":572},"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport VideoFeed from \"./VideoFeed.tsx\";\nimport URLInput from \"./URLInput.tsx\";\nimport { AdminPage } from \"./AdminPage.tsx\";\nimport { ProcessingPage } from \"./ProcessingPage.tsx\";\nimport { PasswordPrompt } from \"./PasswordPrompt.tsx\";\nimport type { VideoData } from \"../../shared/types.ts\";\n\nexport default function App() {\n const [currentPath, setCurrentPath] = useState(window.location.pathname);\n const [videos, setVideos] = useState([]);\n const [loading, setLoading] = useState(false);\n const [showUrlInput, setShowUrlInput] = useState(false);\n const [error, setError] = useState(null);\n const [adminPassword, setAdminPassword] = useState(null);\n const [showPasswordPrompt, setShowPasswordPrompt] = useState(false);\n\n // Handle client-side routing\n useEffect(() => {\n const handlePopState = () => {\n setCurrentPath(window.location.pathname);\n };\n\n window.addEventListener('popstate', handlePopState);\n return () => window.removeEventListener('popstate', handlePopState);\n }, []);\n\n // Load initial data\n useEffect(() => {\n const initialData = (window as any).__INITIAL_DATA__;\n if (initialData?.videos) {\n setVideos(initialData.videos);\n }\n loadVideos();\n\n // Check for stored admin password\n const storedPassword = sessionStorage.getItem(\"adminPassword\");\n if (storedPassword) {\n setAdminPassword(storedPassword);\n }\n }, []);\n\n\n\n const loadVideos = async () => {\n try {\n setLoading(true);\n const response = await fetch('/api/videos');\n if (!response.ok) throw new Error('Failed to load videos');\n\n const videosData = await response.json();\n setVideos(videosData);\n setError(null);\n } catch (err) {\n console.error('Error loading videos:', err);\n setError('Failed to load videos');\n } finally {\n setLoading(false);\n }\n };\n\n const handleAddUrl = async (url: string, prompt?: string) => {\n try {\n setLoading(true);\n const response = await fetch('/api/videos/generate', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n 'Authorization': `Bearer ${adminPassword}`,\n },\n body: JSON.stringify({ url, prompt }),\n });\n\n if (!response.ok) throw new Error('Failed to generate video');\n\n const result = await response.json();\n setShowUrlInput(false);\n\n // Refresh videos to show the new processing video\n await loadVideos();\n\n\n\n } catch (err) {\n console.error('Error adding URL:', err);\n setError('Failed to generate video');\n } finally {\n setLoading(false);\n }\n };\n\n\n\n const handleDeleteVideo = async (videoId: string) => {\n try {\n const response = await fetch(`/api/videos/${videoId}`, {\n method: 'DELETE',\n });\n\n if (!response.ok) throw new Error('Failed to delete video');\n\n setVideos(prev => prev.filter(v => v.id !== videoId));\n } catch (err) {\n console.error('Error deleting video:', err);\n setError('Failed to delete video');\n }\n };\n\n // Route to admin page\n if (currentPath === '/admin') {\n return ;\n }\n\n // Route to processing page\n if (currentPath === '/processing') {\n return ;\n }\n\n return (\n

\n {/* Admin Link */}\n

\n )}\n\n {/* Error Message */}\n {error && (\n

\n {error}\n setError(null)}\n className=\"ml-2 text-white hover:text-gray-200\"\n >\n ×\n \n

\n )}\n\n {/* Video Feed */}\n {videos.length > 0 ? (\n \n ) : (\n

🎬

Welcome to Video Feed

\n Add URLs to generate TikTok-style videos from web content\n

\n )}\n\n {/* Loading Overlay */}\n {loading && (\n

Processing...

\n )}\n

\n );\n}\n","frontend/components/App.tsx","latestPath","actionData","errors"]

paulkinlan

veo-feed