\n \n

Loading Pathfinder...

\n \n \n \n \n \n \n\n\n",[],[167,275],"a71d69a0-65bb-11f0-b4b9-0224a6c84d84","favicon.svg","a71d6a68-65bb-11f0-b4b9-0224a6c84d84",20,["D",1753051708537],"\n",[],[167,283],"768a1cb6-7097-11f0-84b5-0224a6c84d84","TaskGrid.tsx","1584053e-65bc-11f0-9ce1-0224a6c84d84","3f9631fe-65bb-11f0-abc8-0224a6c84d84",448,["D",1754245627952],66,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useRef, useCallback } from \"https://esm.sh/react@18.2.0?deps=react@18.2.0\";\nimport type { Task, TaskCompletion, TaskGridWeek } from \"../../shared/types.ts\";\nimport { getWeekStart } from \"../../shared/types.ts\";\n\ninterface TaskGridProps {\n tasks: Task[];\n completions: TaskCompletion[];\n weeks: TaskGridWeek[];\n onTaskClick: (task: Task, weekStart: string) => void;\n onEditTask?: (task: Task) => void;\n showTaskNames?: boolean;\n dragMode?: boolean;\n onReorderTasks?: (taskIds: string[]) => void;\n}\n\n// Beautiful color palette for task rows\nconst TASK_COLORS = [\n { bg: 'from-red-500/20 to-pink-500/20', border: 'border-red-400/30', completed: 'bg-red-500', hover: 'hover:from-red-500/30 hover:to-pink-500/30' },\n { bg: 'from-orange-500/20 to-yellow-500/20', border: 'border-orange-400/30', completed: 'bg-orange-500', hover: 'hover:from-orange-500/30 hover:to-yellow-500/30' },\n { bg: 'from-green-500/20 to-emerald-500/20', border: 'border-green-400/30', completed: 'bg-green-500', hover: 'hover:from-green-500/30 hover:to-emerald-500/30' },\n { bg: 'from-blue-500/20 to-cyan-500/20', border: 'border-blue-400/30', completed: 'bg-blue-500', hover: 'hover:from-blue-500/30 hover:to-cyan-500/30' },\n { bg: 'from-purple-500/20 to-violet-500/20', border: 'border-purple-400/30', completed: 'bg-purple-500', hover: 'hover:from-purple-500/30 hover:to-violet-500/30' },\n { bg: 'from-indigo-500/20 to-blue-500/20', border: 'border-indigo-400/30', completed: 'bg-indigo-500', hover: 'hover:from-indigo-500/30 hover:to-blue-500/30' },\n { bg: 'from-pink-500/20 to-rose-500/20', border: 'border-pink-400/30', completed: 'bg-pink-500', hover: 'hover:from-pink-500/30 hover:to-rose-500/30' },\n { bg: 'from-teal-500/20 to-green-500/20', border: 'border-teal-400/30', completed: 'bg-teal-500', hover: 'hover:from-teal-500/30 hover:to-green-500/30' },\n { bg: 'from-amber-500/20 to-orange-500/20', border: 'border-amber-400/30', completed: 'bg-amber-500', hover: 'hover:from-amber-500/30 hover:to-orange-500/30' },\n { bg: 'from-lime-500/20 to-green-500/20', border: 'border-lime-400/30', completed: 'bg-lime-500', hover: 'hover:from-lime-500/30 hover:to-green-500/30' },\n { bg: 'from-sky-500/20 to-blue-500/20', border: 'border-sky-400/30', completed: 'bg-sky-500', hover: 'hover:from-sky-500/30 hover:to-blue-500/30' },\n { bg: 'from-violet-500/20 to-purple-500/20', border: 'border-violet-400/30', completed: 'bg-violet-500', hover: 'hover:from-violet-500/30 hover:to-purple-500/30' },\n];\n\n// Function to get consistent color for a task based on its ID\nconst getTaskColor = (taskId: string, index: number) => {\n // Use task ID hash for consistency, fall back to index\n let hash = 0;\n for (let i = 0; i < taskId.length; i++) {\n const char = taskId.charCodeAt(i);\n hash = ((hash << 5) - hash) + char;\n hash = hash & hash; // Convert to 32bit integer\n }\n const colorIndex = Math.abs(hash) % TASK_COLORS.length;\n return TASK_COLORS[colorIndex] || TASK_COLORS[index % TASK_COLORS.length];\n};\n\n// Helper function to check if a completion falls within a specific week\nconst isCompletionInWeek = (completion: TaskCompletion, weekStart: string): boolean => {\n const completionDate = new Date(completion.completed_at);\n const completionWeekStart = getWeekStart(completionDate);\n return completionWeekStart === weekStart;\n};\n\nexport function TaskGrid({ tasks, completions, weeks, onTaskClick, onEditTask, showTaskNames = false, dragMode = false, onReorderTasks }: TaskGridProps) {\n const [longPressTooltip, setLongPressTooltip] = useState<{\n show: boolean;\n task: Task | null;\n x: number;\n y: number;\n }>({ show: false, task: null, x: 0, y: 0 });\n const [draggedTask, setDraggedTask] = useState(null);\n const [dragOverIndex, setDragOverIndex] = useState(null);\n const longPressTimeoutRef = useRef(null);\n\n // Sort tasks by sort_order (if available), then by name\n const sortedTasks = [...tasks].sort((a, b) => {\n // First sort by sort_order if both have it\n if (a.sort_order !== undefined && b.sort_order !== undefined) {\n return a.sort_order - b.sort_order;\n }\n // If only one has sort_order, prioritize it\n if (a.sort_order !== undefined) return -1;\n if (b.sort_order !== undefined) return 1;\n // Fall back to alphabetical by name\n return a.name.localeCompare(b.name);\n });\n\n // Long press handlers\n const handleTouchStart = useCallback((task: Task, event: React.TouchEvent) => {\n const touch = event.touches[0];\n longPressTimeoutRef.current = setTimeout(() => {\n setLongPressTooltip({\n show: true,\n task,\n x: touch.clientX,\n y: touch.clientY\n });\n }, 500); // 500ms long press\n }, []);\n\n const handleTouchEnd = useCallback(() => {\n if (longPressTimeoutRef.current) {\n clearTimeout(longPressTimeoutRef.current);\n longPressTimeoutRef.current = null;\n }\n }, []);\n\n const handleTouchMove = useCallback(() => {\n if (longPressTimeoutRef.current) {\n clearTimeout(longPressTimeoutRef.current);\n longPressTimeoutRef.current = null;\n }\n }, []);\n\n const hideTooltip = useCallback(() => {\n setLongPressTooltip({ show: false, task: null, x: 0, y: 0 });\n }, []);\n\n // Drag and drop handlers\n const handleDragStart = useCallback((task: Task, e: React.DragEvent) => {\n setDraggedTask(task);\n e.dataTransfer.effectAllowed = 'move';\n e.dataTransfer.setData('text/plain', task.id);\n }, []);\n\n const handleDragOver = useCallback((e: React.DragEvent, index: number) => {\n e.preventDefault();\n e.dataTransfer.dropEffect = 'move';\n setDragOverIndex(index);\n }, []);\n\n const handleDragLeave = useCallback(() => {\n setDragOverIndex(null);\n }, []);\n\n const handleDrop = useCallback((e: React.DragEvent, dropIndex: number) => {\n e.preventDefault();\n \n if (!draggedTask || !onReorderTasks) return;\n \n const dragIndex = sortedTasks.findIndex(t => t.id === draggedTask.id);\n if (dragIndex === dropIndex) return;\n\n // Reorder tasks\n const newTasks = [...sortedTasks];\n const [removed] = newTasks.splice(dragIndex, 1);\n newTasks.splice(dropIndex, 0, removed);\n \n // Send the new order to parent\n onReorderTasks(newTasks.map(t => t.id));\n \n setDraggedTask(null);\n setDragOverIndex(null);\n }, [draggedTask, sortedTasks, onReorderTasks]);\n\n const handleDragEnd = useCallback(() => {\n setDraggedTask(null);\n setDragOverIndex(null);\n }, []);\n\n // Get completion count for a task in a specific week\n const getCompletionCount = (taskId: string, weekStart: string) => {\n return completions.filter(completion => \n completion.task_id === taskId && \n isCompletionInWeek(completion, weekStart) && \n !completion.is_deleted\n ).length;\n };\n \n // Check if a task is fully completed (legacy for single completion tasks)\n const _isTaskCompleted = (taskId: string, weekStart: string) => {\n return completions.some(completion => \n completion.task_id === taskId && \n isCompletionInWeek(completion, weekStart) && \n !completion.is_deleted\n );\n };\n \n // Get completion notes for a task in a specific week\n const getCompletionNotes = (taskId: string, weekStart: string) => {\n const taskCompletions = completions.filter(completion => \n completion.task_id === taskId && \n isCompletionInWeek(completion, weekStart) && \n !completion.is_deleted\n );\n return taskCompletions.map(c => c.notes).filter(Boolean).join(', ');\n };\n \n // Render progress indicator based on task frequency\n const renderProgressIndicator = (task: Task, weekStart: string, isCurrentWeek: boolean, taskIndex: number) => {\n const completionCount = getCompletionCount(task.id, weekStart);\n const target = task.frequency_per_week || 1; // Default to 1 if not set\n const isCompleted = completionCount >= target;\n const isOverCompleted = completionCount > target;\n const progress = completionCount / target; // Allow progress > 1 for over-completion\n const taskColor = getTaskColor(task.id, taskIndex);\n \n if ((task.frequency_per_week || 1) === 1) {\n // Single completion - but allow multiple if user adds more\n return (\n onTaskClick(task, weekStart)}\n disabled={!isCurrentWeek}\n className={`\n task-circle w-7 h-7 rounded-full border-2 flex items-center justify-center relative\n ${isOverCompleted \n ? `${taskColor.completed} border-current text-white ring-2 ring-yellow-400` \n : isCompleted \n ? `${taskColor.completed} border-current text-white` \n : isCurrentWeek \n ? `${taskColor.border} hover:${taskColor.completed}/20 bg-gray-800/50` \n : 'border-gray-500 bg-gray-800/30'\n }\n ${isCurrentWeek && !isCompleted ? `ring-2 ${taskColor.border.replace('border-', 'ring-')}` : ''}\n ${isCurrentWeek ? 'cursor-pointer hover:scale-105' : 'cursor-default'}\n transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400\n `}\n title={`${completionCount}/${target} completed ${getCompletionNotes(task.id, weekStart) ? `- ${getCompletionNotes(task.id, weekStart)}` : ''}`}\n >\n {isCompleted ? (\n <>\n \n {/* Show count if more than 1 completion */}\n {completionCount > 1 && (\n \n {completionCount}\n \n )}\n \n ) : (\n

\n )}\n \n );\n } else {\n // Multiple completions - show progress ring with count, allow over 100%\n const circumference = 2 * Math.PI * 12; // radius of 12 (reduced from 14)\n const strokeDasharray = circumference;\n const clampedProgress = Math.min(progress, 1); // Clamp visual progress to 100%\n const strokeDashoffset = circumference - (clampedProgress * circumference);\n \n return (\n onTaskClick(task, weekStart)}\n disabled={!isCurrentWeek}\n className={`\n task-circle relative w-7 h-7 flex items-center justify-center\n ${isCurrentWeek ? 'cursor-pointer hover:scale-105' : 'cursor-default'}\n transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400\n ${isCurrentWeek && !isCompleted ? `ring-2 ${taskColor.border.replace('border-', 'ring-')}` : ''}\n `}\n title={`${completionCount}/${target} completed ${getCompletionNotes(task.id, weekStart) ? `- ${getCompletionNotes(task.id, weekStart)}` : ''}`}\n >\n {/* Progress ring background */}\n \n \n {/* Count display */}\n 0 \n ? taskColor.completed.replace('bg-', 'text-')\n : 'text-gray-400'\n }`}>\n {completionCount}\n \n \n );\n }\n };\n \n if (tasks.length === 0) {\n return (\n

\n \n

No tasks yet

Add your first task or habit to start tracking!

\n );\n }\n \n // Get emoji for task based on custom emoji or name/category\n const getTaskEmoji = (task: Task): string => {\n // Use custom emoji if set\n if (task.emoji) {\n return task.emoji;\n }\n \n const name = task.name.toLowerCase();\n const category = task.category?.toLowerCase() || '';\n \n // Exercise/fitness\n if (name.includes('workout') || name.includes('exercise') || name.includes('gym') || name.includes('run') || category.includes('fitness')) return '💪';\n if (name.includes('walk') || name.includes('steps')) return '🚶';\n if (name.includes('bike') || name.includes('cycling')) return '🚴';\n if (name.includes('swim')) return '🏊';\n if (name.includes('yoga') || name.includes('stretch')) return '🧘';\n \n // Work/productivity\n if (name.includes('work') || name.includes('code') || name.includes('project') || category.includes('work')) return '💼';\n if (name.includes('meeting') || name.includes('call')) return '📞';\n if (name.includes('email') || name.includes('inbox')) return '📧';\n if (name.includes('plan') || name.includes('review')) return '📋';\n \n // Health/wellness\n if (name.includes('water') || name.includes('drink')) return '💧';\n if (name.includes('medicine') || name.includes('vitamin') || name.includes('supplement')) return '💊';\n if (name.includes('sleep') || name.includes('bed')) return '😴';\n if (name.includes('meditation') || name.includes('mindful')) return '🧘';\n if (name.includes('doctor') || name.includes('appointment')) return '👩‍⚕️';\n \n // Learning/reading\n if (name.includes('read') || name.includes('book') || category.includes('reading')) return '📖';\n if (name.includes('study') || name.includes('learn') || category.includes('learning')) return '📚';\n if (name.includes('course') || name.includes('lesson')) return '🎓';\n if (name.includes('practice') && (name.includes('language') || name.includes('guitar') || name.includes('piano'))) return '🎵';\n \n // Household/chores\n if (name.includes('clean') || name.includes('tidy') || category.includes('chores')) return '🧹';\n if (name.includes('laundry') || name.includes('wash')) return '🧺';\n if (name.includes('dishes') || name.includes('kitchen')) return '🍽️';\n if (name.includes('grocery') || name.includes('shopping')) return '🛒';\n if (name.includes('cook') || name.includes('meal')) return '👨‍🍳';\n \n // Social/relationships\n if (name.includes('call') && (name.includes('mom') || name.includes('dad') || name.includes('family'))) return '👨‍👩‍👧‍👦';\n if (name.includes('friend') || name.includes('social') || category.includes('social')) return '👥';\n if (name.includes('date') || name.includes('wife') || name.includes('partner')) return '💕';\n \n // Creative/hobbies\n if (name.includes('write') || name.includes('journal') || category.includes('writing')) return '✍️';\n if (name.includes('draw') || name.includes('art') || category.includes('art')) return '🎨';\n if (name.includes('photo') || name.includes('picture')) return '📸';\n if (name.includes('music') || name.includes('guitar') || name.includes('piano')) return '🎵';\n if (name.includes('garden') || name.includes('plant')) return '🌱';\n \n // Finance/admin\n if (name.includes('budget') || name.includes('finance') || name.includes('money') || category.includes('finance')) return '💰';\n if (name.includes('bill') || name.includes('payment')) return '💳';\n if (name.includes('tax') || name.includes('document')) return '📄';\n \n // Tech/digital\n if (name.includes('backup') || name.includes('update')) return '💾';\n if (name.includes('app') || name.includes('software')) return '📱';\n \n // Default fallbacks\n if (category) {\n if (category.includes('health')) return '❤️';\n if (category.includes('habit')) return '🔄';\n if (category.includes('goal')) return '🎯';\n }\n \n // Final fallback\n return '📝';\n };\n\n // Helper function to format week label across two lines\n const formatWeekLabel = (weekStart: string) => {\n const start = new Date(weekStart);\n const end = new Date(start);\n end.setDate(start.getDate() + 6);\n \n const startMonth = start.toLocaleDateString('en-US', { month: 'short' });\n const endMonth = end.toLocaleDateString('en-US', { month: 'short' });\n const startDay = start.getDate();\n const endDay = end.getDate();\n \n if (startMonth === endMonth) {\n return {\n line1: `${startMonth} ${startDay}`,\n line2: `${startMonth} ${endDay}`\n };\n } else {\n return {\n line1: `${startMonth} ${startDay}`,\n line2: `${endMonth} ${endDay}`\n };\n }\n };\n\n return (\n

\n {/* Header row with week labels */}\n

\n 📋\n

\n {weeks.map(week => {\n const weekLabel = formatWeekLabel(week.start_date);\n return (\n

{weekLabel.line1}

{weekLabel.line2}

\n );\n })}\n

\n \n {/* Task rows */}\n {sortedTasks.map((task, index) => {\n const taskColor = getTaskColor(task.id, index);\n return (\n

handleDragStart(task, e) : undefined}\n onDragOver={dragMode ? (e) => handleDragOver(e, index) : undefined}\n onDragLeave={dragMode ? handleDragLeave : undefined}\n onDrop={dragMode ? (e) => handleDrop(e, index) : undefined}\n onDragEnd={dragMode ? handleDragEnd : undefined}\n >\n {/* Task name background (when toggled on) */}\n {showTaskNames && (\n

\n \n {task.name}\n {task.frequency_per_week && task.frequency_per_week > 1 && (\n ({task.frequency_per_week}x/week)\n )}\n {task.category && (\n - {task.category}\n )}\n \n

\n )}\n \n {/* Task emoji column */}\n

\n onEditTask?.(task)}\n onTouchStart={(e) => handleTouchStart(task, e)}\n onTouchEnd={handleTouchEnd}\n onTouchMove={handleTouchMove}\n className=\"text-sm hover:scale-110 transition-transform cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-400 rounded px-2 py-0.5 w-full flex items-center justify-center group\"\n title={`${task.name}${task.frequency_per_week && task.frequency_per_week > 1 ? ` (${task.frequency_per_week}x/week)` : ''}${task.category ? ` - ${task.category}` : ''}\\n\\nClick to edit${dragMode ? ' • Drag to reorder' : ''}`}\n >\n \n {getTaskEmoji(task)}\n {/* Drag handle indicator */}\n {dragMode && (\n \n ⠿\n \n )}\n \n \n

\n \n {/* Week completion columns */}\n {weeks.map(week => {\n const isCurrentWeek = week.start_date === getWeekStart();\n \n return (\n

\n {renderProgressIndicator(task, week.start_date, isCurrentWeek, index)}\n

\n );\n })}\n

\n \n {/* Long press tooltip */}\n {longPressTooltip.show && longPressTooltip.task && (\n \n

{longPressTooltip.task.name}

\n {longPressTooltip.task.frequency_per_week && longPressTooltip.task.frequency_per_week > 1 && (\n

\n {longPressTooltip.task.frequency_per_week}x per week\n

\n )}\n {longPressTooltip.task.category && (\n

\n Category: {longPressTooltip.task.category}\n

\n )}\n {longPressTooltip.task.description && (\n

\n {longPressTooltip.task.description}\n

\n )}\n

\n )}\n \n {/* Touch overlay to hide tooltip */}\n {longPressTooltip.show && (\n \n )}\n

\n );\n}\n",[],[167,300,291],"components","fd45716a-6fca-11f0-b8af-0224a6c84d84","TaskCompletionModal.tsx","647dda84-65bc-11f0-8fb7-0224a6c84d84",318,["D",1754157807160],19,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from \"https://esm.sh/react@18.2.0?deps=react@18.2.0\";\nimport type { Task, TaskCompletion } from \"../../shared/types.ts\";\nimport { getWeekLabel } from \"../../shared/types.ts\";\n\ninterface TaskCompletionModalProps {\n task: Task;\n weekStart: string;\n currentCompletions: TaskCompletion[];\n onComplete: (task: Task, weekStart: string, notes?: string) => void;\n onRemoveCompletion?: (completionId: string) => void;\n onUpdateCompletion?: (completionId: string, notes: string, completedAt: string) => void;\n onClose: () => void;\n}\n\nexport function TaskCompletionModal({ \n task, \n weekStart, \n currentCompletions, \n onComplete, \n onRemoveCompletion,\n onUpdateCompletion,\n onClose \n}: TaskCompletionModalProps) {\n const [notes, setNotes] = useState('');\n const [working, setWorking] = useState(false);\n const [editingCompletion, setEditingCompletion] = useState(null);\n const [editNotes, setEditNotes] = useState('');\n const [editDateTime, setEditDateTime] = useState('');\n \n const weekLabel = getWeekLabel(weekStart);\n const completionCount = currentCompletions.length;\n const target = task.frequency_per_week || 1; // Default to 1 if not set\n const isOverCompleted = completionCount > target;\n \n const handleAddCompletion = async () => {\n setWorking(true);\n try {\n await onComplete(task, weekStart, notes.trim() || undefined);\n // Clear notes for next completion\n setNotes('');\n } finally {\n setWorking(false);\n }\n };\n \n const handleRemoveCompletion = async (completionId: string) => {\n if (!onRemoveCompletion) return;\n \n setWorking(true);\n try {\n await onRemoveCompletion(completionId);\n } finally {\n setWorking(false);\n }\n };\n \n const handleEditCompletion = (completion: TaskCompletion) => {\n setEditingCompletion(completion);\n setEditNotes(completion.notes || '');\n // Format datetime for input - convert to local timezone\n const date = new Date(completion.completed_at);\n // Format as YYYY-MM-DDTHH:MM for datetime-local input\n const localDateTime = new Date(date.getTime() - date.getTimezoneOffset() * 60000).toISOString().slice(0, 16);\n setEditDateTime(localDateTime);\n };\n \n const handleSaveEdit = async () => {\n if (!editingCompletion || !onUpdateCompletion) return;\n \n setWorking(true);\n try {\n // Convert back to UTC ISO string\n const utcDateTime = new Date(editDateTime).toISOString();\n await onUpdateCompletion(editingCompletion.id, editNotes.trim(), utcDateTime);\n setEditingCompletion(null);\n setEditNotes('');\n setEditDateTime('');\n } finally {\n setWorking(false);\n }\n };\n \n const handleCancelEdit = () => {\n setEditingCompletion(null);\n setEditNotes('');\n setEditDateTime('');\n };\n \n return (\n

\n {/* Header */}\n

\n {task.frequency_per_week === 1 ? 'Complete Task' : 'Track Progress'}\n

\n \n \n \n

\n \n {/* Content */}\n

\n {/* Task Info */}\n

\n {task.color && (\n

\n )}\n

{task.name}

\n \n

\n Week of {weekLabel}\n

\n \n {task.description && (\n

{task.description}

\n )}\n \n {task.category && (\n \n {task.category}\n \n )}\n

\n \n {/* Progress Display */}\n

\n \n Progress: {completionCount} / {target}\n \n \n {Math.round((completionCount / target) * 100)}%\n \n

\n \n {/* Progress bar */}\n

\n \n {completionCount >= target && (\n

\n {isOverCompleted \n ? `🎉 Over-achieved! (+${completionCount - target} extra)`\n : '✓ Target completed!'\n }\n

\n )}\n

\n \n {/* Existing Completions */}\n {currentCompletions.length > 0 && (\n

\n Completed this week ({currentCompletions.length}):\n

\n {currentCompletions.map((completion, index) => {\n const completedDate = new Date(completion.completed_at);\n const dayName = completedDate.toLocaleDateString('en-US', { weekday: 'short' });\n const dateStr = completedDate.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });\n const timeStr = completedDate.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit', hour12: true });\n \n const isEditing = editingCompletion?.id === completion.id;\n \n if (isEditing) {\n return (\n

\n \n Date & Time\n \n setEditDateTime(e.target.value)}\n className=\"w-full px-2 py-1 text-sm border border-gray-600 bg-gray-700 text-gray-100 rounded focus:outline-none focus:ring-2 focus:ring-blue-500\"\n />\n

\n \n Notes\n \n setEditNotes(e.target.value)}\n placeholder=\"Add notes about this completion...\"\n rows={2}\n className=\"w-full px-2 py-1 text-sm border border-gray-600 bg-gray-700 text-gray-100 placeholder-gray-400 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 resize-none\"\n />\n

\n \n Cancel\n \n \n Save\n \n

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

\n \n #{index + 1} - {dayName} {dateStr} at {timeStr}\n \n {completion.notes && (\n

\n {completion.notes}\n

\n )}\n

\n {onUpdateCompletion && (\n handleEditCompletion(completion)}\n disabled={working}\n className=\"text-blue-500 hover:text-blue-700 text-xs px-1 disabled:opacity-50\"\n title=\"Edit completion\"\n >\n Edit\n \n )}\n {onRemoveCompletion && (\n handleRemoveCompletion(completion.id)}\n disabled={working}\n className=\"text-red-500 hover:text-red-700 text-xs px-1 disabled:opacity-50\"\n title=\"Remove completion\"\n >\n Remove\n \n )}\n

\n );\n })}\n

\n )}\n \n {/* Add New Completion */}\n

\n \n Add completion #{completionCount + 1}\n {isOverCompleted && (\n (over target!)\n )}\n \n setNotes(e.target.value)}\n placeholder=\"Add any notes about this completion...\"\n rows={2}\n className=\"w-full px-3 py-2 border border-gray-600 bg-gray-700 text-gray-100 placeholder-gray-400 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none\"\n />\n

\n e.g., \"30 minute walk\", \"Read chapter 3\", \"Called mom\"\n

\n \n {/* Footer */}\n

\n \n Close\n \n \n \n {working ? (\n <>\n

\n Adding...\n \n ) : (\n <>\n \n Add Completion\n \n )}\n \n

\n );\n}\n",[],[167,300,302],"fb70c1a4-6fc6-11f0-a354-0224a6c84d84","MediaGrid.tsx","27f70900-65bc-11f0-9398-0224a6c84d84",271,["D",1754156086106],13,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0?deps=react@18.2.0\";\nimport type { MediaGridCell, MediaItem } from \"../../shared/types.ts\";\n\ninterface MediaGridProps {\n grid: MediaGridCell[];\n onCellClick: (group: string, status: string, items: MediaItem[]) => void;\n}\n\nconst STATUS_LABELS = {\n inbox: 'Inbox',\n upcoming: 'Upcoming',\n in_progress: 'In Progress',\n on_hold: 'On Hold',\n completed: 'Completed'\n};\n\nconst GROUP_LABELS = {\n ryi: 'Ryi',\n maini: 'MaiNi', \n ant: 'Ant',\n hanant: 'HanAnt',\n arj: 'Arj',\n arvina: 'Arvina',\n haka: 'Haka',\n shaw: 'Shaw',\n nadin: 'Nadin'\n};\n\nconst MEDIA_TYPE_ICONS = {\n book: '📚',\n movie: '🎬',\n tv_show: '📺',\n podcast: '🎧',\n game: '🎮',\n article: '📄',\n course: '🎓'\n};\n\nconst STATUS_COLORS = {\n inbox: 'bg-gray-700 border-gray-600',\n upcoming: 'bg-blue-800 border-blue-600',\n in_progress: 'bg-yellow-700 border-yellow-600',\n on_hold: 'bg-orange-700 border-orange-600',\n completed: 'bg-green-700 border-green-600'\n};\n\nexport function MediaGrid({ grid, onCellClick }: MediaGridProps) {\n const statuses = ['inbox', 'upcoming', 'in_progress', 'on_hold', 'completed'] as const;\n const groups = ['ryi', 'maini', 'ant', 'hanant', 'arj', 'arvina', 'haka', 'shaw', 'nadin'] as const;\n \n // Get cell for specific group and status\n const getCell = (group: string, status: string) => {\n return grid.find(cell => cell.group === group && cell.status === status) || {\n group,\n status,\n items: [],\n count: 0\n };\n };\n \n // Render media items as image collage with overlap\n const renderMediaCollage = (items: MediaItem[]) => {\n if (items.length === 0) {\n return (\n

\n );\n }\n \n const visibleItems = items.slice(0, 4); // Show max 4 items for smaller space\n const hasMore = items.length > 4;\n \n return (\n

\n {visibleItems.map((item, index) => (\n \n {item.cover_url ? (\n {\n // Fallback to type icon if image fails to load\n const target = e.target as HTMLImageElement;\n target.style.display = 'none';\n const fallback = target.nextElementSibling as HTMLElement;\n if (fallback) fallback.style.display = 'flex';\n }}\n />\n ) : null}\n

\n {MEDIA_TYPE_ICONS[item.type] || '📄'}\n

\n ))}\n {hasMore && (\n

\n +{items.length - 4}\n

\n )}\n

\n );\n };\n \n if (grid.length === 0) {\n return (\n

\n \n

No media tracked yet

Add books, shows, or games to start tracking!

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

\n {/* Header row with status labels (horizontal) */}\n

\n 👥\n

\n {statuses.map(status => (\n

\n {STATUS_LABELS[status]}\n

\n ))}\n

\n \n {/* Group rows */}\n {groups.map(group => (\n

\n {/* Group name column (vertical text) */}\n

\n {GROUP_LABELS[group]}\n

\n \n {/* Status columns */}\n {statuses.map(status => {\n const cell = getCell(group, status);\n \n return (\n

\n onCellClick(cell.group, cell.status, cell.items)}\n className={`\n media-item w-full h-16 rounded-lg border-2 p-1 text-left\n ${STATUS_COLORS[status]}\n hover:scale-105 transition-all duration-200 \n focus:outline-none focus:ring-2 focus:ring-blue-400\n ${cell.count > 0 ? 'cursor-pointer' : 'cursor-default'}\n `}\n >\n {renderMediaCollage(cell.items)}\n \n {/* Count badge */}\n {cell.count > 0 && (\n

\n \n {cell.count}\n \n {cell.items.some(item => item.progress) && (\n

\n )}\n

\n )}\n \n

\n );\n })}\n

\n ))}\n

\n );\n}\n",[],[167,300,311],"755c77c6-6764-11f0-a4d8-0224a6c84d84","MediaDetailModal_new.tsx","755c787a-6764-11f0-a4d8-0224a6c84d84",169,["D",1753234161179],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from \"https://esm.sh/react@18.2.0?deps=react@18.2.0\";\nimport type { MediaItem, MediaStatus } from \"../../shared/types.ts\";\n\ninterface MediaDetailModalProps {\n group: string;\n status: string;\n items: MediaItem[];\n onUpdate: (media: MediaItem) => void;\n onClose: () => void;\n}\n\nconst STATUS_LABELS = {\n inbox: 'Inbox',\n upcoming: 'Upcoming',\n in_progress: 'In Progress',\n on_hold: 'On Hold',\n completed: 'Completed',\n abandoned: 'Abandoned'\n};\n\nconst GROUP_LABELS = {\n ryi: 'Ryi',\n maini: 'MaiNi', \n ant: 'Ant',\n hanant: 'HanAnt',\n arj: 'Arj',\n arvina: 'Arvina',\n haka: 'Haka',\n shaw: 'Shaw',\n nadin: 'Nadin'\n};\n\nconst MEDIA_TYPE_ICONS = {\n book: '📚',\n movie: '🎬',\n tv_show: '📺',\n podcast: '🎧',\n game: '🎮',\n article: '📄',\n course: '🎓'\n};\n\nconst STATUS_COLORS = {\n inbox: 'bg-gray-100',\n upcoming: 'bg-blue-100',\n in_progress: 'bg-yellow-100',\n on_hold: 'bg-orange-100',\n completed: 'bg-green-100',\n abandoned: 'bg-red-100'\n};\n\nexport function MediaDetailModal({ group, status, items, onUpdate, onClose }: MediaDetailModalProps) {\n const [editingItem, setEditingItem] = useState(null);\n const [editForm, setEditForm] = useState({\n progress: '',\n notes: '',\n status: status as MediaStatus,\n rating: 0,\n cover_url: ''\n });\n \n const handleEditStart = (item: MediaItem) => {\n setEditingItem(item);\n setEditForm({\n progress: item.progress || '',\n notes: item.notes || '',\n status: item.status,\n rating: item.rating || 0,\n cover_url: item.cover_url || ''\n });\n };\n \n const handleEditSave = async () => {\n if (!editingItem) return;\n \n const updatedItem: MediaItem = {\n ...editingItem,\n progress: editForm.progress.trim() || undefined,\n notes: editForm.notes.trim() || undefined,\n cover_url: editForm.cover_url.trim() || undefined,\n status: editForm.status,\n rating: editForm.rating > 0 ? editForm.rating : undefined,\n updated_at: Date.now(),\n started_at: editForm.status === 'in_progress' && !editingItem.started_at \n ? Date.now() \n : editingItem.started_at,\n completed_at: editForm.status === 'completed' && !editingItem.completed_at \n ? Date.now() \n : editingItem.completed_at\n };\n \n await onUpdate(updatedItem);\n setEditingItem(null);\n };\n \n const handleStatusChange = async (item: MediaItem, newStatus: MediaStatus) => {\n const updatedItem: MediaItem = {\n ...item,\n status: newStatus,\n updated_at: Date.now(),\n started_at: newStatus === 'in_progress' && !item.started_at \n ? Date.now() \n : item.started_at,\n completed_at: newStatus === 'completed' && !item.completed_at \n ? Date.now() \n : item.completed_at\n };\n \n await onUpdate(updatedItem);\n };\n\n if (editingItem) {\n return (\n

\n {/* Edit Header */}\n

Edit {editingItem.title}

\n setEditingItem(null)}\n className=\"text-gray-400 hover:text-gray-600 focus:outline-none\"\n >\n \n \n

\n \n {/* Edit Form */}\n

\n Status\n setEditForm(prev => ({ ...prev, status: e.target.value as MediaStatus }))}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500\"\n >\n {Object.entries(STATUS_LABELS).map(([key, label]) => (\n \n ))}\n \n

\n \n

\n Progress\n setEditForm(prev => ({ ...prev, progress: e.target.value }))}\n placeholder=\"e.g., Chapter 5, Episode 3, 50%\"\n className=\"w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500\"\n />\n

\n \n

\n Cover Image URL\n

\n setEditForm(prev => ({ ...prev, cover_url: e.target.value }))}\n placeholder=\"https://example.com/cover.jpg\"\n className=\"w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500\"\n />\n {editForm.cover_url && (\n

\n {\n const target = e.target as HTMLImageElement;\n target.src = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDgiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA0OCA2NCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjQ4IiBoZWlnaHQ9IjY0IiBmaWxsPSIjRjNGNEY2Ii8+Cjx0ZXh0IHg9IjI0IiB5PSIzMiIgZm9udC1mYW1pbHk9InNhbnMtc2VyaWYiIGZvbnQtc2l6ZT0iMTIiIGZpbGw9IiM5Q0EzQUYiIHRleHQtYW5jaG9yPSJtaWRkbGUiPkVycm9yPC90ZXh0Pgo8L3N2Zz4=';\n }}\n />\n

\n )}\n

\n \n

\n Notes\n setEditForm(prev => ({ ...prev, notes: e.target.value }))}\n placeholder=\"Your thoughts, progress notes...\"\n rows={3}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 resize-none\"\n />\n

\n \n

\n Rating\n

\n {[1, 2, 3, 4, 5].map(star => (\n setEditForm(prev => ({ \n ...prev, \n rating: prev.rating === star ? 0 : star \n }))}\n className={`w-8 h-8 ${\n star <= editForm.rating \n ? 'text-yellow-400' \n : 'text-gray-300'\n } hover:text-yellow-300 transition-colors`}\n >\n ★\n \n ))}\n

\n \n {/* Edit Footer */}\n

\n setEditingItem(null)}\n className=\"px-4 py-2 text-gray-700 bg-gray-200 rounded-lg hover:bg-gray-300 transition-colors\"\n >\n Cancel\n \n \n Save Changes\n \n

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

\n {/* Header */}\n

\n {GROUP_LABELS[group as keyof typeof GROUP_LABELS]} - {STATUS_LABELS[status as keyof typeof STATUS_LABELS]}\n

{items.length} item{items.length !== 1 ? 's' : ''}

\n \n \n \n

\n \n {/* Items List */}\n

\n {items.map(item => (\n

\n {/* Cover Image or Type Icon */}\n

\n {item.cover_url ? (\n {\n const target = e.target as HTMLImageElement;\n target.style.display = 'none';\n const fallback = target.parentElement?.querySelector('.fallback-icon') as HTMLElement;\n if (fallback) fallback.style.display = 'flex';\n }}\n />\n ) : null}\n

\n {MEDIA_TYPE_ICONS[item.type]}\n

\n \n {/* Content */}\n

{item.title}

\n {item.metadata?.author && (\n

by {item.metadata.author}

\n )}\n

\n \n {item.description && (\n

{item.description}

\n )}\n \n {item.progress && (\n

\n Progress: {item.progress}\n

\n )}\n \n {item.rating && (\n

\n Rating:\n {[1, 2, 3, 4, 5].map(star => (\n \n ★\n \n ))}\n

\n )}\n \n {item.notes && (\n

\"{item.notes}\"

\n )}\n \n

\n {item.metadata?.genre && (\n {item.metadata.genre}\n )}\n {item.metadata?.year && (\n {item.metadata.year}\n )}\n

\n \n {/* Action Buttons */}\n

\n handleEditStart(item)}\n className=\"px-3 py-1 text-xs bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors\"\n >\n Edit\n \n \n {/* Quick status change buttons */}\n {item.status !== 'in_progress' && (\n handleStatusChange(item, 'in_progress')}\n className=\"px-3 py-1 text-xs bg-yellow-500 text-white rounded hover:bg-yellow-600 transition-colors\"\n >\n Start\n \n )}\n \n {item.status === 'in_progress' && (\n handleStatusChange(item, 'completed')}\n className=\"px-3 py-1 text-xs bg-green-500 text-white rounded hover:bg-green-600 transition-colors\"\n >\n Complete\n \n )}\n \n {item.status === 'in_progress' && (\n handleStatusChange(item, 'on_hold')}\n className=\"px-3 py-1 text-xs bg-orange-500 text-white rounded hover:bg-orange-600 transition-colors\"\n >\n Pause\n \n )}\n

\n ))}\n

\n \n {/* Footer */}\n

\n \n Close\n \n

\n );\n}\n",[],[167,300,320],"da36bb6c-6763-11f0-b6e5-0224a6c84d84","MediaDetailModal_backup.tsx","d1de90b6-6763-11f0-abac-0224a6c84d84",167,["D",1753233900878],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from \"https://esm.sh/react@18.2.0?deps=react@18.2.0\";\nimport type { MediaItem, MediaStatus } from \"../../shared/types.ts\";\n\ninterface MediaDetailModalProps {\n group: string;\n status: string;\n items: MediaItem[];\n onUpdate: (media: MediaItem) => void;\n onClose: () => void;\n}\n\nconst STATUS_LABELS = {\n inbox: 'Inbox',\n upcoming: 'Upcoming',\n in_progress: 'In Progress',\n on_hold: 'On Hold',\n completed: 'Completed',\n abandoned: 'Abandoned'\n};\n\nconst GROUP_LABELS = {\n ryi: 'Ryi',\n maini: 'MaiNi', \n ant: 'Ant',\n hanant: 'HanAnt',\n arj: 'Arj',\n arvina: 'Arvina',\n haka: 'Haka',\n shaw: 'Shaw',\n nadin: 'Nadin'\n};\n\nconst MEDIA_TYPE_ICONS = {\n book: '📚',\n movie: '🎬',\n tv_show: '📺',\n podcast: '🎧',\n game: '🎮',\n article: '📄',\n course: '🎓'\n};\n\nconst STATUS_COLORS = {\n inbox: 'bg-gray-100',\n upcoming: 'bg-blue-100',\n in_progress: 'bg-yellow-100',\n on_hold: 'bg-orange-100',\n completed: 'bg-green-100',\n abandoned: 'bg-red-100'\n};\n\nexport function MediaDetailModal({ group, status, items, onUpdate, onClose }: MediaDetailModalProps) {\n const [editingItem, setEditingItem] = useState(null);\n const [editForm, setEditForm] = useState({\n progress: '',\n notes: '',\n status: status as MediaStatus,\n rating: 0,\n cover_url: ''\n });\n const [imageError, setImageError] = useState(false);\n \n const handleEditStart = (item: MediaItem) => {\n setEditingItem(item);\n setEditForm({\n progress: item.progress || '',\n notes: item.notes || '',\n status: item.status,\n rating: item.rating || 0,\n cover_url: item.cover_url || ''\n });\n setImageError(false);\n };\n \n const handleEditSave = async () => {\n if (!editingItem) return;\n \n const updatedItem: MediaItem = {\n ...editingItem,\n progress: editForm.progress.trim() || undefined,\n notes: editForm.notes.trim() || undefined,\n cover_url: editForm.cover_url.trim() || undefined,\n status: editForm.status,\n rating: editForm.rating > 0 ? editForm.rating : undefined,\n updated_at: Date.now(),\n started_at: editForm.status === 'in_progress' && !editingItem.started_at \n ? Date.now() \n : editingItem.started_at,\n completed_at: editForm.status === 'completed' && !editingItem.completed_at \n ? Date.now() \n : editingItem.completed_at\n };\n \n await onUpdate(updatedItem);\n setEditingItem(null);\n };\n \n const handleStatusChange = async (item: MediaItem, newStatus: MediaStatus) => {\n const updatedItem: MediaItem = {\n ...item,\n status: newStatus,\n updated_at: Date.now(),\n started_at: newStatus === 'in_progress' && !item.started_at \n ? Date.now() \n : item.started_at,\n completed_at: newStatus === 'completed' && !item.completed_at \n ? Date.now() \n : item.completed_at\n };\n \n await onUpdate(updatedItem);\n };\n \n if (items.length === 0) {\n return (\n

\n {GROUP_LABELS[group as keyof typeof GROUP_LABELS]} - {STATUS_LABELS[status as keyof typeof STATUS_LABELS]}\n

\n \n \n \n

\n \n

No items in this category yet.

\n \n

\n \n Close\n \n

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

\n {/* Header */}\n

\n {GROUP_LABELS[group as keyof typeof GROUP_LABELS]} - {STATUS_LABELS[status as keyof typeof STATUS_LABELS]}\n

\n {items.length} item{items.length !== 1 ? 's' : ''}\n

\n \n \n \n

\n \n {/* Items List */}\n

\n {items.map(item => (\n

\n {/* Cover Image or Type Icon */}\n

\n {item.cover_url ? (\n {\n // Fallback to type icon if image fails\n const target = e.target as HTMLImageElement;\n target.style.display = 'none';\n const fallback = target.nextElementSibling as HTMLElement;\n if (fallback) fallback.style.display = 'block';\n }}\n />\n ) : null}\n

\n {MEDIA_TYPE_ICONS[item.type]}\n

\n \n {/* Content */}\n

{item.title}

\n {item.metadata?.author && (\n

by {item.metadata.author}

\n )}\n

\n \n {item.description && (\n

{item.description}

\n )}\n \n {item.progress && (\n

\n Progress: {item.progress}\n

\n )}\n \n {item.rating && (\n

\n Rating:\n {[1, 2, 3, 4, 5].map(star => (\n \n ★\n \n ))}\n

\n )}\n \n {item.notes && (\n

\"{item.notes}\"

\n )}\n

\n \n

\n {item.metadata?.genre && (\n {item.metadata.genre}\n )}\n {item.metadata?.year && (\n {item.metadata.year}\n )}\n

\n \n

\n handleEditStart(item)}\n className=\"px-3 py-1 text-xs bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors\"\n >\n Edit\n \n \n {/* Quick status change buttons */}\n {item.status !== 'in_progress' && (\n handleStatusChange(item, 'in_progress')}\n className=\"px-3 py-1 text-xs bg-yellow-500 text-white rounded hover:bg-yellow-600 transition-colors\"\n >\n Start\n \n )}\n \n {item.status === 'in_progress' && (\n handleStatusChange(item, 'completed')}\n className=\"px-3 py-1 text-xs bg-green-500 text-white rounded hover:bg-green-600 transition-colors\"\n >\n Complete\n \n )}\n \n {item.status !== 'on_hold' && item.status !== 'completed' && (\n handleStatusChange(item, 'on_hold')}\n className=\"px-3 py-1 text-xs bg-orange-500 text-white rounded hover:bg-orange-600 transition-colors\"\n >\n Pause\n \n )}\n

\n ))}\n

\n \n {/* Footer */}\n

\n \n Close\n \n

\n \n {/* Edit Modal */}\n {editingItem && (\n

Edit {editingItem.title}

\n \n

\n Cover Image URL\n

\n {\n setEditForm(prev => ({ ...prev, cover_url: e.target.value }));\n setImageError(false);\n }}\n placeholder=\"https://example.com/cover.jpg\"\n className=\"w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500\"\n />\n {editForm.cover_url && (\n

\n setImageError(true)}\n onLoad={() => setImageError(false)}\n />\n

\n )}\n

\n \n

\n Rating\n

\n \n

\n setEditingItem(null)}\n className=\"px-4 py-2 text-gray-700 bg-gray-200 rounded-lg hover:bg-gray-300 transition-colors\"\n >\n Cancel\n \n \n Save Changes\n \n

\n )}\n

\n );\n}\n",[],[167,300,328],"e6994f3c-6fce-11f0-8074-0224a6c84d84","MediaDetailModal.tsx","83ba41a8-65bc-11f0-964f-0224a6c84d84",343,["D",1754159487111],41,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0?deps=react@18.2.0\";\nimport type { MediaItem, MediaStatus } from \"../../shared/types.ts\";\nimport { setupClipboardListener } from \"../../shared/types.ts\";\n\ninterface MediaDetailModalProps {\n group: string;\n status: string;\n items: MediaItem[];\n onUpdate: (media: MediaItem) => void;\n onClose: () => void;\n onOpenImageSearch: (searchQuery: string, onSelectImage: (imageUrl: string) => void) => void;\n}\n\nconst STATUS_LABELS = {\n inbox: 'Inbox',\n upcoming: 'Upcoming',\n in_progress: 'In Progress',\n on_hold: 'On Hold',\n completed: 'Completed',\n abandoned: 'Abandoned'\n};\n\nconst GROUP_LABELS = {\n ryi: 'Ryi',\n maini: 'MaiNi', \n ant: 'Ant',\n hanant: 'HanAnt',\n arj: 'Arj',\n arvina: 'Arvina',\n haka: 'Haka',\n shaw: 'Shaw',\n nadin: 'Nadin'\n};\n\nconst MEDIA_TYPE_ICONS = {\n book: '📚',\n movie: '🎬',\n tv_show: '📺',\n podcast: '🎧',\n game: '🎮',\n article: '📄',\n course: '🎓'\n};\n\nconst STATUS_COLORS = {\n inbox: 'bg-gray-700 border-gray-600',\n upcoming: 'bg-blue-900/50 border-blue-700',\n in_progress: 'bg-yellow-900/50 border-yellow-700',\n on_hold: 'bg-orange-900/50 border-orange-700',\n completed: 'bg-green-900/50 border-green-700',\n abandoned: 'bg-red-100'\n};\n\nexport function MediaDetailModal({ group, status, items, onUpdate, onClose, onOpenImageSearch }: MediaDetailModalProps) {\n const [editingItem, setEditingItem] = useState(null);\n const [editForm, setEditForm] = useState({\n progress: '',\n notes: '',\n status: status as MediaStatus,\n rating: 0,\n cover_url: ''\n });\n \n const handleEditStart = (item: MediaItem) => {\n setEditingItem(item);\n setEditForm({\n progress: item.progress || '',\n notes: item.notes || '',\n status: item.status,\n rating: item.rating || 0,\n cover_url: item.cover_url || ''\n });\n };\n\n const handleImageSelect = (imageUrl: string) => {\n setEditForm(prev => ({ ...prev, cover_url: imageUrl }));\n };\n \n const handleEditSave = async () => {\n if (!editingItem) return;\n \n const updatedItem: MediaItem = {\n ...editingItem,\n progress: editForm.progress.trim() || undefined,\n notes: editForm.notes.trim() || undefined,\n cover_url: editForm.cover_url.trim() || undefined,\n status: editForm.status,\n rating: editForm.rating > 0 ? editForm.rating : undefined,\n updated_at: Date.now(),\n started_at: editForm.status === 'in_progress' && !editingItem.started_at \n ? Date.now() \n : editingItem.started_at,\n completed_at: editForm.status === 'completed' && !editingItem.completed_at \n ? Date.now() \n : editingItem.completed_at\n };\n \n await onUpdate(updatedItem);\n setEditingItem(null);\n };\n \n const handleStatusChange = async (item: MediaItem, newStatus: MediaStatus) => {\n const updatedItem: MediaItem = {\n ...item,\n status: newStatus,\n updated_at: Date.now(),\n started_at: newStatus === 'in_progress' && !item.started_at \n ? Date.now() \n : item.started_at,\n completed_at: newStatus === 'completed' && !item.completed_at \n ? Date.now() \n : item.completed_at\n };\n \n await onUpdate(updatedItem);\n };\n\n // Setup clipboard listener when in editing mode\n useEffect(() => {\n if (editingItem) {\n const cleanup = setupClipboardListener((imageData: string) => {\n setEditForm(prev => ({ ...prev, cover_url: imageData }));\n });\n return cleanup;\n }\n }, [editingItem]);\n\n if (editingItem) {\n return (\n

\n {/* Edit Header */}\n

Edit {editingItem.title}

\n setEditingItem(null)}\n className=\"text-gray-400 hover:text-gray-300 focus:outline-none\"\n >\n \n \n

\n \n {/* Edit Form */}\n

\n Status\n setEditForm(prev => ({ ...prev, status: e.target.value as MediaStatus }))}\n className=\"w-full px-3 py-2 border border-gray-600 bg-gray-700 text-gray-100 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500\"\n >\n {Object.entries(STATUS_LABELS).map(([key, label]) => (\n \n ))}\n \n

\n \n

\n Progress\n setEditForm(prev => ({ ...prev, progress: e.target.value }))}\n placeholder=\"e.g., Chapter 5, Episode 3, 50%\"\n className=\"w-full px-3 py-2 border border-gray-600 bg-gray-700 text-gray-100 placeholder-gray-400 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500\"\n />\n

\n \n

\n Cover Image URL\n

\n setEditForm(prev => ({ ...prev, cover_url: e.target.value }))}\n placeholder=\"https://example.com/cover.jpg\"\n className=\"flex-1 px-3 py-2 border border-gray-600 bg-gray-700 text-gray-100 placeholder-gray-400 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500\"\n />\n onOpenImageSearch(editingItem?.title || '', handleImageSelect)}\n className=\"px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors\"\n title=\"Search for images\"\n >\n 🔍\n \n

\n 📎 Paste an image from clipboard (Ctrl/Cmd+V) or search above\n

\n {editForm.cover_url && (\n

\n )}\n

\n \n

\n Notes\n setEditForm(prev => ({ ...prev, notes: e.target.value }))}\n placeholder=\"Your thoughts, progress notes...\"\n rows={3}\n className=\"w-full px-3 py-2 border border-gray-600 bg-gray-700 text-gray-100 placeholder-gray-400 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 resize-none\"\n />\n

\n \n

\n Rating\n

\n \n {/* Edit Footer */}\n

\n setEditingItem(null)}\n className=\"px-4 py-2 text-gray-300 bg-gray-700 border border-gray-600 rounded-lg hover:bg-gray-600 transition-colors\"\n >\n Cancel\n \n \n Save Changes\n \n

\n );\n }\n\n return (\n <>\n

\n {/* Header */}\n

\n {GROUP_LABELS[group as keyof typeof GROUP_LABELS]} - {STATUS_LABELS[status as keyof typeof STATUS_LABELS]}\n

{items.length} item{items.length !== 1 ? 's' : ''}

\n \n \n \n

\n \n {/* Items List */}\n

\n {items.map(item => (\n

\n {/* Cover Image or Type Icon */}\n

\n {MEDIA_TYPE_ICONS[item.type]}\n

\n \n {/* Content */}\n

{item.title}

\n {item.metadata?.author && (\n

by {item.metadata.author}

\n )}\n

\n \n {item.description && (\n

{item.description}

\n )}\n \n {item.progress && (\n

\n Progress: {item.progress}\n

\n )}\n \n {item.rating && (\n

\n Rating:\n {[1, 2, 3, 4, 5].map(star => (\n \n ★\n \n ))}\n

\n )}\n \n {item.notes && (\n

\"{item.notes}\"

\n )}\n \n

\n {item.metadata?.genre && (\n {item.metadata.genre}\n )}\n {item.metadata?.year && (\n {item.metadata.year}\n )}\n

\n \n {/* Action Buttons */}\n

\n ))}\n

\n \n {/* Footer */}\n

\n \n Close\n \n

\n \n );\n}\n",[],[167,300,336],"586af188-6fcf-11f0-b52f-0224a6c84d84","ImageSearchModal.tsx","b5999328-6764-11f0-aadc-0224a6c84d84",352,["D",1754159678064],38,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0?deps=react@18.2.0\";\nimport { downloadImageAsBase64, setupClipboardListener } from \"../../shared/types.ts\";\n\ninterface ImageSearchResult {\n url: string;\n thumbnail: string;\n title: string;\n source: string;\n}\n\ninterface ImageSearchModalProps {\n isOpen: boolean;\n onClose: () => void;\n onSelectImage: (imageUrl: string) => void;\n searchQuery?: string;\n}\n\nexport function ImageSearchModal({ isOpen, onClose, onSelectImage, searchQuery = '' }: ImageSearchModalProps) {\n const [query, setQuery] = useState(searchQuery);\n const [results, setResults] = useState([]);\n const [loading, setLoading] = useState(false);\n const [downloadingIndex, setDownloadingIndex] = useState(null);\n const [error, setError] = useState(null);\n\n // Setup clipboard listener when modal is open\n useEffect(() => {\n if (isOpen) {\n const cleanup = setupClipboardListener((imageData: string) => {\n // Directly use the pasted image\n onSelectImage(imageData);\n onClose();\n });\n return cleanup;\n }\n }, [isOpen, onSelectImage, onClose]);\n\n const searchImages = async (searchTerm: string) => {\n if (!searchTerm.trim()) return;\n \n setLoading(true);\n setError(null);\n \n try {\n const results: ImageSearchResult[] = [];\n \n // Try multiple sources for better media coverage\n \n // 1. Try Open Library for books (works well and is reliable)\n try {\n const openLibResponse = await fetch(\n `https://openlibrary.org/search.json?q=${encodeURIComponent(searchTerm)}&limit=12&fields=title,author_name,cover_i,first_publish_year`\n );\n if (openLibResponse.ok) {\n const openLibData = await openLibResponse.json();\n if (openLibData.docs) {\n openLibData.docs.forEach((book: any) => {\n if (book.cover_i) {\n const coverUrl = `https://covers.openlibrary.org/b/id/${book.cover_i}-L.jpg`;\n const thumbnailUrl = `https://covers.openlibrary.org/b/id/${book.cover_i}-M.jpg`;\n results.push({\n url: coverUrl,\n thumbnail: thumbnailUrl,\n title: `${book.title}${book.author_name ? ' by ' + book.author_name[0] : ''}${book.first_publish_year ? ' (' + book.first_publish_year + ')' : ''}`,\n source: 'Open Library'\n });\n }\n });\n }\n }\n } catch (_err) {\n console.log('Open Library search failed, continuing with other sources');\n }\n \n // 2. Try a different approach - search for movie/TV posters via a public API\n try {\n // Using The Movie Database (TMDB) public search - no key needed for basic search\n const tmdbResponse = await fetch(\n `https://api.themoviedb.org/3/search/multi?api_key=demo&query=${encodeURIComponent(searchTerm)}`\n );\n if (tmdbResponse.ok) {\n const tmdbData = await tmdbResponse.json();\n if (tmdbData.results) {\n tmdbData.results.slice(0, 8).forEach((item: any) => {\n if (item.poster_path) {\n const posterUrl = `https://image.tmdb.org/t/p/w500${item.poster_path}`;\n const thumbnailUrl = `https://image.tmdb.org/t/p/w300${item.poster_path}`;\n results.push({\n url: posterUrl,\n thumbnail: thumbnailUrl,\n title: `${item.title || item.name}${item.release_date || item.first_air_date ? ' (' + (item.release_date || item.first_air_date).substring(0, 4) + ')' : ''}`,\n source: 'TMDB'\n });\n }\n });\n }\n }\n } catch (_err) {\n console.log('TMDB search failed, continuing with other sources');\n }\n \n // 3. If we still don't have enough results, add some smart themed placeholder images\n if (results.length < 8) {\n const remainingSlots = 12 - results.length;\n \n for (let i = 0; i < remainingSlots; i++) {\n // Try to make more realistic looking covers\n const seed = `${searchTerm.replace(/\\s/g, '')}-${i}`;\n \n results.push({\n url: `https://picsum.photos/seed/${seed}/400/600?blur=1`,\n thumbnail: `https://picsum.photos/seed/${seed}/200/300?blur=1`,\n title: `${searchTerm} - Generated Cover ${i + 1}`,\n source: 'Generated'\n });\n }\n }\n \n setResults(results);\n \n } catch (err) {\n console.error('Image search failed:', err);\n setError('Failed to search for images. Please try again.');\n \n // Generate themed placeholder results as final fallback\n const searchTermClean = searchTerm.replace(/[^a-zA-Z0-9\\s]/g, '');\n const fallbackResults: ImageSearchResult[] = Array.from({ length: 8 }, (_, i) => ({\n url: `https://via.placeholder.com/400x600/e2e8f0/64748b?text=${encodeURIComponent(searchTermClean)}`,\n thumbnail: `https://via.placeholder.com/200x300/e2e8f0/64748b?text=${encodeURIComponent(searchTermClean)}`,\n title: `${searchTerm} - Placeholder ${i + 1}`,\n source: 'Placeholder'\n }));\n \n setResults(fallbackResults);\n } finally {\n setLoading(false);\n }\n };\n\n // Update query when modal opens with new searchQuery\n useEffect(() => {\n if (isOpen && searchQuery) {\n setQuery(searchQuery);\n // Auto-search when modal opens with a search query\n searchImages(searchQuery);\n }\n }, [isOpen, searchQuery]);\n\n const handleSearch = (e: React.FormEvent) => {\n e.preventDefault();\n searchImages(query);\n };\n\n const handleImageSelect = async (imageUrl: string, index: number) => {\n // Show loading state for this specific image\n setDownloadingIndex(index);\n \n try {\n // Download and convert the image to base64\n const base64Image = await downloadImageAsBase64(imageUrl, 500); // 500KB max\n \n if (base64Image) {\n // Pass the base64 data URL instead of the original URL\n onSelectImage(base64Image);\n onClose();\n } else {\n // If download failed, ask user if they want to use the URL anyway\n const useUrl = confirm(\n 'Unable to download and store this image locally (may be due to server restrictions). ' +\n 'Would you like to use the image URL instead? Note: it may not work offline.'\n );\n \n if (useUrl) {\n onSelectImage(imageUrl);\n onClose();\n }\n }\n } catch (error) {\n console.error('Error processing image:', error);\n \n // Ask user if they want to use the URL as fallback\n const useUrl = confirm(\n 'Error downloading image. Would you like to use the image URL instead? ' +\n 'Note: it may not work offline.'\n );\n \n if (useUrl) {\n onSelectImage(imageUrl);\n onClose();\n }\n } finally {\n setDownloadingIndex(null);\n }\n };\n\n if (!isOpen) return null;\n\n return (\n

\n {/* Header */}\n

Search for Cover Image

\n \n \n \n

\n\n {/* Search Form */}\n

\n\n {/* Results */}\n

\n {error && (\n

\n \n

{error}

\n )}\n\n {loading && (\n

Searching for images...

\n )}\n\n {!loading && !error && results.length === 0 && query && (\n

\n \n

No images found. Try a different search term.

\n )}\n\n {!loading && !error && results.length === 0 && !query && (\n

\n \n

Enter a search term to find cover images

\n )}\n\n {results.length > 0 && (\n

\n {results.map((image, index) => (\n handleImageSelect(image.url, index)}\n >\n

\n {\n const target = e.target as HTMLImageElement;\n target.src = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjMwMCIgdmlld0JveD0iMCAwIDIwMCAzMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIyMDAiIGhlaWdodD0iMzAwIiBmaWxsPSIjRjNGNEY2Ii8+Cjx0ZXh0IHg9IjEwMCIgeT0iMTUwIiBmb250LWZhbWlseT0ic2Fucy1zZXJpZiIgZm9udC1zaXplPSIxNCIgZmlsbD0iIzlDQTNBRiIgdGV4dC1hbmNob3I9Im1pZGRsZSI+SW1hZ2UgTm90IEZvdW5kPC90ZXh0Pgo8L3N2Zz4=';\n }}\n />\n {downloadingIndex === index ? (\n

\n \n

\n ) : (\n

\n \n

\n )}\n

\n {image.title}\n

\n via {image.source}\n

\n ))}\n

\n )}\n

\n\n {/* Footer */}\n

\n Click on any image to select it as your cover\n

\n \n Cancel\n \n

\n );\n}\n",[],[167,300,345],"17bffdda-6fcb-11f0-bb3f-0224a6c84d84","EditTaskModal.tsx","1d4e474e-65d9-11f0-b639-0224a6c84d84",321,["D",1754157851578],11,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0?deps=react@18.2.0\";\nimport type { Task } from \"../../shared/types.ts\";\n\ninterface EditTaskModalProps {\n task: Task;\n onSave: (task: Task) => void;\n onClose: () => void;\n}\n\nexport function EditTaskModal({ task, onSave, onClose }: EditTaskModalProps) {\n const [formData, setFormData] = useState({\n name: task.name,\n description: task.description || '',\n frequency_per_week: task.frequency_per_week,\n category: task.category || '',\n color: task.color || '#3B82F6',\n emoji: task.emoji || ''\n });\n\n // Common emojis for quick selection\n const commonEmojis = [\n '💪', '🏃', '🚶', '🚴', '🏊', '🧘', // Fitness\n '📚', '📖', '✍️', '🎓', '💻', '📝', // Learning/Work\n '💧', '💊', '😴', '🍎', '🥗', '❤️', // Health\n '🧹', '🧺', '🍽️', '🛒', '👨‍🍳', '🏠', // Household\n '👨‍👩‍👧‍👦', '👥', '💕', '📞', '💰', '📄', // Social/Admin\n '🎨', '🎵', '📸', '🌱', '🎮', '📱', // Creative/Hobbies\n '🎯', '🔄', '⭐', '🏆', '📈', '✅' // Goals/Progress\n ];\n\n const handleSubmit = (e: React.FormEvent) => {\n e.preventDefault();\n \n const updatedTask: Task = {\n ...task,\n name: formData.name.trim(),\n description: formData.description.trim() || undefined,\n frequency_per_week: formData.frequency_per_week,\n category: formData.category.trim() || undefined,\n color: formData.color || undefined,\n emoji: formData.emoji.trim() || undefined,\n updated_at: Date.now()\n };\n \n onSave(updatedTask);\n };\n\n const handleEmojiSelect = (emoji: string) => {\n setFormData(prev => ({ ...prev, emoji }));\n };\n\n const handleKeyDown = (e: React.KeyboardEvent) => {\n if (e.key === 'Escape') {\n onClose();\n }\n };\n\n useEffect(() => {\n document.addEventListener('keydown', handleKeyDown as any);\n return () => document.removeEventListener('keydown', handleKeyDown as any);\n }, []);\n\n return (\n

Edit Task

\n \n ×\n \n

\n \n

\n {/* Task Name */}\n

\n \n Task Name *\n \n setFormData(prev => ({ ...prev, name: e.target.value }))}\n className=\"w-full px-3 py-2 border border-gray-600 bg-gray-700 text-gray-100 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent\"\n required\n autoFocus\n />\n

\n\n {/* Custom Emoji */}\n

\n \n Custom Emoji\n \n

\n setFormData(prev => ({ ...prev, emoji: e.target.value.slice(0, 2) }))}\n className=\"w-16 px-2 py-2 border border-gray-600 bg-gray-700 text-gray-100 rounded-lg text-center text-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent\"\n placeholder=\"😊\"\n maxLength={2}\n />\n or pick from below\n

\n \n {/* Emoji Grid */}\n

\n {commonEmojis.map((emoji, index) => (\n handleEmojiSelect(emoji)}\n className={`\n w-8 h-8 flex items-center justify-center text-lg rounded hover:bg-blue-100 transition-colors\n ${formData.emoji === emoji ? 'bg-blue-200 ring-2 ring-blue-400' : ''}\n `}\n >\n {emoji}\n \n ))}\n

\n\n {/* Frequency */}\n

\n \n Frequency per Week\n \n setFormData(prev => ({ ...prev, frequency_per_week: parseInt(e.target.value) }))}\n className=\"w-full px-3 py-2 border border-gray-600 bg-gray-700 text-gray-100 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent\"\n >\n {[1, 2, 3, 4, 5, 6, 7].map(freq => (\n \n ))}\n \n

\n\n {/* Category */}\n

\n \n Category\n \n setFormData(prev => ({ ...prev, category: e.target.value }))}\n className=\"w-full px-3 py-2 border border-gray-600 bg-gray-700 text-gray-100 placeholder-gray-400 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent\"\n placeholder=\"e.g., Health, Work, Learning\"\n />\n

\n\n {/* Color */}\n

\n \n Color\n \n

\n setFormData(prev => ({ ...prev, color: e.target.value }))}\n className=\"w-12 h-10 border border-gray-600 bg-gray-700 rounded cursor-pointer\"\n />\n

\n\n {/* Description */}\n

\n \n Description\n \n setFormData(prev => ({ ...prev, description: e.target.value }))}\n className=\"w-full px-3 py-2 border border-gray-600 bg-gray-700 text-gray-100 placeholder-gray-400 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent\"\n rows={3}\n placeholder=\"Optional description...\"\n />\n

\n\n {/* Actions */}\n

\n \n Cancel\n \n \n Save Changes\n \n

\n \n

\n );\n}\n",[],[167,300,354],"5300a7fa-6fee-11f0-a845-0224a6c84d84","App.tsx","eb2ae0b4-65bb-11f0-beb8-0224a6c84d84",420,["D",1754172983383],58,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0?deps=react@18.2.0\";\nimport { TaskGrid } from \"./TaskGrid.tsx\";\nimport { MediaGrid } from \"./MediaGrid.tsx\";\nimport { AddTaskModal } from \"./AddTaskModal.tsx\";\nimport { EditTaskModal } from \"./EditTaskModal.tsx\";\nimport { AddMediaModal } from \"./AddMediaModal.tsx\";\nimport { TaskCompletionModal } from \"./TaskCompletionModal.tsx\";\nimport { MediaDetailModal } from \"./MediaDetailModal.tsx\";\nimport { ImageSearchModal } from \"./ImageSearchModal.tsx\";\nimport type { \n Task, \n TaskCompletion, \n MediaItem, \n TaskGridWeek,\n MediaGridCell\n} from \"../../shared/types.ts\";\nimport { getWeekStart, getWeekLabel } from \"../../shared/types.ts\";\n\n// Helper function to check if a completion falls within a specific week\nconst isCompletionInWeek = (completion: TaskCompletion, weekStart: string): boolean => {\n const completionDate = new Date(completion.completed_at);\n const completionWeekStart = getWeekStart(completionDate);\n return completionWeekStart === weekStart;\n};\n\ninterface AppProps {\n initialData?: {\n tasks: Task[];\n completions: TaskCompletion[];\n mediaItems: MediaItem[];\n currentWeek: string;\n };\n}\n\nexport function App({ initialData }: AppProps) {\n // State management\n const [tasks, setTasks] = useState(initialData?.tasks || []);\n const [completions, setCompletions] = useState(initialData?.completions || []);\n const [mediaItems, setMediaItems] = useState(initialData?.mediaItems || []);\n const [loading, setLoading] = useState(!initialData);\n const [syncing, setSyncing] = useState(false);\n const [deviceId, setDeviceId] = useState('');\n const [showTaskNames, setShowTaskNames] = useState(false);\n const [dragMode, setDragMode] = useState(false);\n \n // Modal states\n const [showAddTask, setShowAddTask] = useState(false);\n const [showAddMedia, setShowAddMedia] = useState(false);\n const [editTaskModal, setEditTaskModal] = useState(null);\n const [taskCompletionModal, setTaskCompletionModal] = useState<{\n task: Task;\n weekStart: string;\n } | null>(null);\n const [mediaDetailModal, setMediaDetailModal] = useState<{\n group: string;\n status: string;\n items: MediaItem[];\n } | null>(null);\n const [imageSearchModal, setImageSearchModal] = useState<{\n searchQuery: string;\n onSelectImage: (imageUrl: string) => void;\n } | null>(null);\n \n // Generate device ID and register device\n useEffect(() => {\n let id = localStorage.getItem('pathfinder-device-id');\n if (!id) {\n id = `device-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;\n localStorage.setItem('pathfinder-device-id', id);\n }\n setDeviceId(id);\n \n // Register device with server\n fetch('/api/devices/register', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({\n device_id: id,\n name: navigator.userAgent.includes('iPhone') ? 'iPhone' : 'Device'\n })\n }).catch(console.error);\n }, []);\n \n // Load initial data if not provided or empty, and also refresh to get latest schema\n useEffect(() => {\n if (deviceId) {\n if (!initialData || !initialData.tasks || initialData.tasks.length === 0) {\n console.log('Loading data from server, deviceId:', deviceId, 'initialData:', initialData);\n loadData();\n } else {\n console.log('Using initial data, tasks:', initialData.tasks.map((t: Task) => ({ id: t.id, name: t.name, sort_order: t.sort_order })));\n // Check if initial data has sort_order, if not, refresh from API\n const hasValidSortOrder = initialData.tasks.some(t => t.sort_order !== undefined);\n if (!hasValidSortOrder) {\n console.log('Initial data missing sort_order, refreshing from API...');\n loadData();\n }\n }\n }\n }, [deviceId, initialData]);\n \n // Periodic sync every 30 seconds when online\n useEffect(() => {\n if (!deviceId) return;\n \n const interval = setInterval(() => {\n if (navigator.onLine) {\n syncData();\n }\n }, 30000);\n \n return () => clearInterval(interval);\n }, [deviceId]);\n \n // Handle online/offline events\n useEffect(() => {\n const handleOnline = () => {\n console.log('Device is online, syncing...');\n syncData();\n };\n \n const handleOffline = () => {\n console.log('Device is offline');\n };\n \n globalThis.addEventListener('online', handleOnline);\n globalThis.addEventListener('offline', handleOffline);\n \n return () => {\n globalThis.removeEventListener('online', handleOnline);\n globalThis.removeEventListener('offline', handleOffline);\n };\n }, []);\n \n const loadData = async () => {\n try {\n setLoading(true);\n const [tasksRes, completionsRes, mediaRes] = await Promise.all([\n fetch('/api/tasks', { headers: { 'X-Device-ID': deviceId } }),\n fetch('/api/completions', { headers: { 'X-Device-ID': deviceId } }),\n fetch('/api/media', { headers: { 'X-Device-ID': deviceId } })\n ]);\n \n const [tasksData, completionsData, mediaData] = await Promise.all([\n tasksRes.json(),\n completionsRes.json(),\n mediaRes.json()\n ]);\n \n console.log('Loaded tasks:', tasksData.map((t: Task) => ({ id: t.id, name: t.name, sort_order: t.sort_order })));\n \n setTasks(tasksData);\n setCompletions(completionsData);\n setMediaItems(mediaData);\n } catch (error) {\n console.error('Failed to load data:', error);\n } finally {\n setLoading(false);\n }\n };\n \n const syncData = () => {\n if (!deviceId || syncing) return;\n \n try {\n setSyncing(true);\n // Implement CRDT sync logic here\n console.log('Syncing data...');\n } catch (error) {\n console.error('Sync failed:', error);\n } finally {\n setSyncing(false);\n }\n };\n \n const addTask = async (taskData: Partial) => {\n try {\n // Find the highest sort_order and add 1, or use 0 if no tasks exist\n const maxSortOrder = tasks.reduce((max, task) => {\n return Math.max(max, task.sort_order ?? -1);\n }, -1);\n \n const taskWithOrder = {\n ...taskData,\n sort_order: maxSortOrder + 1\n };\n \n const response = await fetch('/api/tasks', {\n method: 'POST',\n headers: { \n 'Content-Type': 'application/json',\n 'X-Device-ID': deviceId\n },\n body: JSON.stringify(taskWithOrder)\n });\n \n const newTask = await response.json();\n setTasks(prev => [...prev, newTask]);\n setShowAddTask(false);\n } catch (error) {\n console.error('Failed to add task:', error);\n }\n };\n\n const updateTask = async (task: Task) => {\n try {\n const response = await fetch(`/api/tasks/${task.id}`, {\n method: 'PUT',\n headers: { \n 'Content-Type': 'application/json',\n 'X-Device-ID': deviceId\n },\n body: JSON.stringify(task)\n });\n \n const updatedTask = await response.json();\n setTasks(prev => prev.map(t => t.id === task.id ? updatedTask : t));\n setEditTaskModal(null);\n } catch (error) {\n console.error('Failed to update task:', error);\n }\n };\n\n const reorderTasks = async (orderedTaskIds: string[]) => {\n console.log('reorderTasks called with:', orderedTaskIds);\n try {\n // Update tasks with new sort_order values (starting from 1)\n const tasksToUpdate = orderedTaskIds.map((taskId, index) => {\n const task = tasks.find(t => t.id === taskId);\n if (!task) return null;\n return { ...task, sort_order: index + 1 };\n }).filter(Boolean) as Task[];\n\n console.log('Tasks to update:', tasksToUpdate.map(t => ({ id: t.id, name: t.name, sort_order: t.sort_order })));\n\n // Optimistically update the UI\n setTasks(prev => {\n const updated = [...prev];\n tasksToUpdate.forEach(updatedTask => {\n const index = updated.findIndex(t => t.id === updatedTask.id);\n if (index !== -1) {\n updated[index] = updatedTask;\n }\n });\n return updated;\n });\n\n // Update each task on the server\n await Promise.all(\n tasksToUpdate.map(async task => {\n console.log('Updating task on server:', { id: task.id, sort_order: task.sort_order });\n const response = await fetch(`/api/tasks/${task.id}`, {\n method: 'PUT',\n headers: { \n 'Content-Type': 'application/json',\n 'X-Device-ID': deviceId\n },\n body: JSON.stringify(task)\n });\n const result = await response.json();\n console.log('Server response for task', task.id, ':', result);\n return result;\n })\n );\n console.log('All tasks updated successfully');\n } catch (error) {\n console.error('Failed to reorder tasks:', error);\n // Reload data to restore correct state\n loadData();\n }\n };\n \n const completeTask = async (task: Task, _weekStart: string, notes?: string) => {\n try {\n const response = await fetch('/api/completions', {\n method: 'POST',\n headers: { \n 'Content-Type': 'application/json',\n 'X-Device-ID': deviceId\n },\n body: JSON.stringify({\n task_id: task.id,\n notes,\n user_action: 'mark_task_complete'\n })\n });\n \n const newCompletion = await response.json();\n setCompletions(prev => [...prev, newCompletion]);\n setTaskCompletionModal(null);\n } catch (error) {\n console.error('Failed to complete task:', error);\n }\n };\n\n const removeTaskCompletion = async (completionId: string) => {\n try {\n const response = await fetch(`/api/completions/${completionId}`, {\n method: 'DELETE',\n headers: {\n 'X-Device-ID': deviceId\n }\n });\n \n if (response.ok) {\n setCompletions(prev => prev.filter(c => c.id !== completionId));\n }\n } catch (error) {\n console.error('Failed to remove completion:', error);\n }\n };\n \n const updateTaskCompletion = async (completionId: string, notes: string, completedAt: string) => {\n try {\n const response = await fetch(`/api/completions/${completionId}`, {\n method: 'PUT',\n headers: {\n 'Content-Type': 'application/json',\n 'X-Device-ID': deviceId\n },\n body: JSON.stringify({\n notes,\n completed_at: completedAt\n })\n });\n \n if (response.ok) {\n // Update the completion in local state\n setCompletions(prev => prev.map(c => \n c.id === completionId \n ? { ...c, notes, completed_at: new Date(completedAt).getTime() }\n : c\n ));\n }\n } catch (error) {\n console.error('Failed to update completion:', error);\n }\n };\n \n const addMedia = async (mediaData: Partial) => {\n try {\n const response = await fetch('/api/media', {\n method: 'POST',\n headers: { \n 'Content-Type': 'application/json',\n 'X-Device-ID': deviceId\n },\n body: JSON.stringify(mediaData)\n });\n \n const newMedia = await response.json();\n setMediaItems(prev => [...prev, newMedia]);\n setShowAddMedia(false);\n } catch (error) {\n console.error('Failed to add media:', error);\n }\n };\n \n const updateMedia = async (media: MediaItem) => {\n try {\n const response = await fetch(`/api/media/${media.id}`, {\n method: 'PUT',\n headers: { \n 'Content-Type': 'application/json',\n 'X-Device-ID': deviceId\n },\n body: JSON.stringify(media)\n });\n \n const updatedMedia = await response.json();\n setMediaItems(prev => prev.map(item => \n item.id === media.id ? updatedMedia : item\n ));\n } catch (error) {\n console.error('Failed to update media:', error);\n }\n };\n\n const handleOpenImageSearch = (searchQuery: string, onSelectImage: (imageUrl: string) => void) => {\n setImageSearchModal({ searchQuery, onSelectImage });\n };\n \n // Generate weeks for task grid (3 weeks back + current week)\n const generateWeeks = (): TaskGridWeek[] => {\n const weeks: TaskGridWeek[] = [];\n \n // Get current Monday\n const today = new Date();\n const currentWeekStart = getWeekStart(today);\n \n // Create exactly 4 consecutive weeks ending with current week\n const weekStartDates: string[] = [];\n \n // Start with current week Monday\n const currentMondayDate = new Date(currentWeekStart);\n \n // Generate 4 weeks: 3 previous + current\n for (let i = 3; i >= 0; i--) {\n const weekDate = new Date(currentMondayDate);\n weekDate.setDate(weekDate.getDate() - (i * 7));\n const weekStart = weekDate.toISOString().split('T')[0];\n weekStartDates.push(weekStart);\n }\n \n // Convert to week objects\n weekStartDates.forEach(weekStart => {\n const endDate = new Date(weekStart);\n endDate.setDate(endDate.getDate() + 6);\n \n weeks.push({\n start_date: weekStart,\n end_date: endDate.toISOString().split('T')[0],\n label: getWeekLabel(weekStart)\n });\n });\n \n return weeks;\n };\n \n // Group media items by status and group\n const generateMediaGrid = (): MediaGridCell[] => {\n const grid: MediaGridCell[] = [];\n const statuses = ['inbox', 'upcoming', 'in_progress', 'on_hold', 'completed'] as const;\n const groups = ['ryi', 'maini', 'ant', 'hanant', 'arj', 'arvina', 'haka', 'shaw', 'nadin'] as const;\n \n for (const group of groups) {\n for (const status of statuses) {\n const items = mediaItems.filter(item => \n item.group === group && item.status === status && !item.is_deleted\n );\n \n grid.push({\n group,\n status,\n items,\n count: items.length\n });\n }\n }\n \n return grid;\n };\n \n if (loading) {\n return (\n

Loading Pathfinder...

\n );\n }\n \n const weeks = generateWeeks();\n const mediaGrid = generateMediaGrid();\n \n return (\n

\n {/* Header */}\n

Pathfinder

\n {navigator.onLine ? (syncing ? 'Syncing...' : 'Online') : 'Offline'}\n

\n \n

\n setShowAddTask(true)}\n className=\"px-3 py-1.5 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700 transition-colors\"\n >\n + Task\n \n setShowAddMedia(true)}\n className=\"px-3 py-1.5 bg-green-600 text-white text-sm font-medium rounded-lg hover:bg-green-700 transition-colors\"\n >\n + Media\n \n

\n \n {/* Main Content */}\n

\n {/* Tasks & Habits Section */}\n

Tasks

Weekly completion tracking

\n setShowTaskNames(!showTaskNames)}\n className={`px-3 py-1 text-sm rounded-lg transition-colors ${\n showTaskNames \n ? 'bg-blue-600 text-white' \n : 'bg-gray-700 text-gray-300 hover:bg-gray-600'\n }`}\n title={showTaskNames ? 'Hide task names' : 'Show task names'}\n >\n {showTaskNames ? '👁️ Hide Names' : '👁️‍🗨️ Show Names'}\n \n setDragMode(!dragMode)}\n className={`px-3 py-1 text-sm rounded-lg transition-colors ${\n dragMode \n ? 'bg-green-600 text-white' \n : 'bg-gray-700 text-gray-300 hover:bg-gray-600'\n }`}\n title={dragMode ? 'Disable drag reordering' : 'Enable drag reordering'}\n >\n {dragMode ? '🔒 Lock Order' : '↕️ Drag Mode'}\n \n

\n \n

\n setTaskCompletionModal({ task, weekStart })}\n onEditTask={(task) => setEditTaskModal(task)}\n showTaskNames={showTaskNames}\n dragMode={dragMode}\n onReorderTasks={reorderTasks}\n />\n

\n \n {/* Media Tracking Section */}\n

Media

Books, shows, games by status

\n \n

\n \n setMediaDetailModal({ group, status, items })\n }\n />\n

\n \n {/* Modals */}\n {showAddTask && (\n setShowAddTask(false)}\n />\n )}\n\n {editTaskModal && (\n setEditTaskModal(null)}\n />\n )}\n \n {showAddMedia && (\n setShowAddMedia(false)}\n onOpenImageSearch={handleOpenImageSearch}\n />\n )}\n \n {taskCompletionModal && (\n \n c.task_id === taskCompletionModal.task.id && \n isCompletionInWeek(c, taskCompletionModal.weekStart)\n )}\n onComplete={completeTask}\n onRemoveCompletion={removeTaskCompletion}\n onUpdateCompletion={updateTaskCompletion}\n onClose={() => setTaskCompletionModal(null)}\n />\n )}\n \n {mediaDetailModal && (\n setMediaDetailModal(null)}\n onOpenImageSearch={handleOpenImageSearch}\n />\n )}\n \n {imageSearchModal && (\n setImageSearchModal(null)}\n onSelectImage={imageSearchModal.onSelectImage}\n searchQuery={imageSearchModal.searchQuery}\n />\n )}\n

\n );\n}\n",[],[167,300,363],"120883bc-6fcb-11f0-b63c-0224a6c84d84","AddTaskModal.tsx","3ade5c26-65bc-11f0-a6fa-0224a6c84d84",320,["D",1754157841995],10,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from \"https://esm.sh/react@18.2.0?deps=react@18.2.0\";\nimport type { Task } from \"../../shared/types.ts\";\n\ninterface AddTaskModalProps {\n onSave: (task: Partial) => void;\n onClose: () => void;\n}\n\nconst PRESET_COLORS = [\n '#ef4444', // red-500\n '#f97316', // orange-500\n '#eab308', // yellow-500\n '#22c55e', // green-500\n '#3b82f6', // blue-500\n '#8b5cf6', // violet-500\n '#ec4899', // pink-500\n '#6b7280' // gray-500\n];\n\nconst PRESET_CATEGORIES = [\n 'Health',\n 'Family',\n 'Work',\n 'Learning',\n 'Social',\n 'Hobby',\n 'Fitness',\n 'Creative'\n];\n\nexport function AddTaskModal({ onSave, onClose }: AddTaskModalProps) {\n const [formData, setFormData] = useState({\n name: '',\n description: '',\n frequency_per_week: 1,\n category: '',\n color: PRESET_COLORS[4], // Default to blue\n emoji: ''\n });\n \n // Common emojis for quick selection\n const commonEmojis = [\n '💪', '🏃', '🚶', '🚴', '🏊', '🧘', // Fitness\n '📚', '📖', '✍️', '🎓', '💻', '📝', // Learning/Work\n '💧', '💊', '😴', '🍎', '🥗', '❤️', // Health\n '🧹', '🧺', '🍽️', '🛒', '👨‍🍳', '🏠', // Household\n '👨‍👩‍👧‍👦', '👥', '💕', '📞', '💰', '📄', // Social/Admin\n '🎨', '🎵', '📸', '🌱', '🎮', '📱', // Creative/Hobbies\n '🎯', '🔄', '⭐', '🏆', '📈', '✅' // Goals/Progress\n ];\n \n const [saving, setSaving] = useState(false);\n \n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n \n if (!formData.name.trim()) return;\n \n setSaving(true);\n try {\n await onSave({\n ...formData,\n name: formData.name.trim(),\n description: formData.description.trim() || undefined,\n category: formData.category.trim() || undefined,\n emoji: formData.emoji.trim() || undefined\n });\n } finally {\n setSaving(false);\n }\n };\n \n return (\n

\n {/* Header */}\n

Add Task or Habit

\n \n \n \n

\n \n {/* Form Content */}\n

\n {/* Task Name */}\n

\n \n Task or Habit Name *\n \n setFormData(prev => ({ ...prev, name: e.target.value }))}\n placeholder=\"e.g., Check in with family, Exercise, Read\"\n className=\"w-full px-3 py-2 border border-gray-600 bg-gray-700 text-gray-100 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent\"\n required\n autoFocus\n />\n

\n\n {/* Custom Emoji */}\n

\n \n Custom Emoji (optional)\n \n

\n \n {/* Emoji Grid */}\n

\n {commonEmojis.map((emoji, index) => (\n setFormData(prev => ({ ...prev, emoji }))}\n className={`\n w-8 h-8 flex items-center justify-center text-lg rounded hover:bg-blue-100 transition-colors\n ${formData.emoji === emoji ? 'bg-blue-200 ring-2 ring-blue-400' : ''}\n `}\n >\n {emoji}\n \n ))}\n

\n \n {/* Description */}\n

\n \n Description (optional)\n \n setFormData(prev => ({ ...prev, description: e.target.value }))}\n placeholder=\"Additional details about this task...\"\n rows={2}\n className=\"w-full px-3 py-2 border border-gray-600 bg-gray-700 text-gray-100 placeholder-gray-400 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none\"\n />\n

\n \n {/* Frequency */}\n

\n \n Times per week\n \n setFormData(prev => ({ ...prev, frequency_per_week: parseInt(e.target.value) }))}\n className=\"w-full px-3 py-2 border border-gray-600 bg-gray-700 text-gray-100 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent\"\n >\n \n \n \n \n \n \n \n \n

\n \n {/* Category */}\n

\n \n Category (optional)\n \n

\n setFormData(prev => ({ ...prev, category: e.target.value }))}\n placeholder=\"Custom category...\"\n className=\"w-full px-3 py-2 border border-gray-600 bg-gray-700 text-gray-100 placeholder-gray-400 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent\"\n />\n

\n {PRESET_CATEGORIES.map(category => (\n setFormData(prev => ({ ...prev, category }))}\n className=\"px-2 py-1 text-xs bg-gray-700 text-gray-300 border border-gray-600 rounded-full hover:bg-gray-600 transition-colors\"\n >\n {category}\n \n ))}\n

\n \n {/* Color */}\n

\n \n Color\n \n

\n {PRESET_COLORS.map(color => (\n setFormData(prev => ({ ...prev, color }))}\n className={`w-8 h-8 rounded-full border-2 ${\n formData.color === color ? 'border-gray-900' : 'border-gray-300'\n }`}\n style={{ backgroundColor: color }}\n title={color}\n />\n ))}\n

\n \n {/* Footer */}\n

\n \n Cancel\n \n \n {saving ? 'Adding...' : 'Add Task'}\n \n

\n );\n}\n",[],[167,300,372],"0694e684-6fcf-11f0-b30c-0224a6c84d84","AddMediaModal.tsx","55d5f674-65bc-11f0-ba88-0224a6c84d84",346,["D",1754159540736],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0?deps=react@18.2.0\";\nimport { MediaItem, MediaType, MediaStatus, MediaGroup } from \"../../shared/types.ts\";\nimport { setupClipboardListener } from \"../../shared/types.ts\";\n\ninterface AddMediaModalProps {\n isOpen: boolean;\n onClose: () => void;\n onAdd: (media: Omit) => void;\n onOpenImageSearch: (searchQuery: string, onSelectImage: (imageUrl: string) => void) => void;\n}\n\nconst MEDIA_TYPES: { value: MediaType; label: string; icon: string }[] = [\n { value: 'book', label: 'Book', icon: '📚' },\n { value: 'movie', label: 'Movie', icon: '🎬' },\n { value: 'tv_show', label: 'TV Show', icon: '📺' },\n { value: 'podcast', label: 'Podcast', icon: '🎧' },\n { value: 'game', label: 'Game', icon: '🎮' },\n { value: 'article', label: 'Article', icon: '📄' },\n { value: 'course', label: 'Course', icon: '🎓' }\n];\n\nconst MEDIA_GROUPS: { value: MediaGroup; label: string }[] = [\n { value: 'ryi', label: 'Ryi' },\n { value: 'maini', label: 'MaiNi' },\n { value: 'ant', label: 'Ant' },\n { value: 'hanant', label: 'HanAnt' },\n { value: 'arj', label: 'Arj' },\n { value: 'arvina', label: 'Arvina' },\n { value: 'haka', label: 'Haka' },\n { value: 'shaw', label: 'Shaw' },\n { value: 'nadin', label: 'Nadin' }\n];\n\nconst MEDIA_STATUSES: { value: MediaStatus; label: string }[] = [\n { value: 'inbox', label: 'Inbox' },\n { value: 'upcoming', label: 'Upcoming' },\n { value: 'in_progress', label: 'In Progress' },\n { value: 'on_hold', label: 'On Hold' },\n { value: 'completed', label: 'Completed' }\n];\n\nexport function AddMediaModal({ isOpen, onClose, onAdd, onOpenImageSearch }: AddMediaModalProps) {\n const [formData, setFormData] = useState({\n title: '',\n type: 'book' as MediaType,\n status: 'inbox' as MediaStatus,\n group: 'ryi' as MediaGroup,\n description: '',\n cover_url: '',\n progress: '',\n rating: 0,\n metadata: {\n author: '',\n genre: '',\n year: undefined as number | undefined\n }\n });\n \n const [saving, setSaving] = useState(false);\n const [imageError, setImageError] = useState(false);\n \n // Setup clipboard listener when modal is open\n useEffect(() => {\n if (isOpen) {\n const cleanup = setupClipboardListener((imageData: string) => {\n setFormData(prev => ({ ...prev, cover_url: imageData }));\n setImageError(false);\n });\n return cleanup;\n }\n }, [isOpen]);\n \n const handleImageUrlChange = (url: string) => {\n setFormData(prev => ({ ...prev, cover_url: url }));\n setImageError(false);\n };\n \n const handleImageError = () => {\n setImageError(true);\n };\n\n const handleImageSelect = (imageUrl: string) => {\n handleImageUrlChange(imageUrl);\n };\n \n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n \n if (!formData.title.trim()) return;\n \n setSaving(true);\n try {\n const mediaData = {\n ...formData,\n title: formData.title.trim(),\n description: formData.description.trim() || undefined,\n cover_url: formData.cover_url.trim() || undefined,\n progress: formData.progress.trim() || undefined,\n rating: formData.rating > 0 ? formData.rating : undefined,\n metadata: {\n ...formData.metadata,\n author: formData.metadata.author.trim() || undefined,\n genre: formData.metadata.genre.trim() || undefined\n }\n };\n \n // Clean up empty metadata\n if (!mediaData.metadata?.author && !mediaData.metadata?.genre && !mediaData.metadata?.year) {\n mediaData.metadata = undefined;\n }\n \n await onAdd({\n ...mediaData,\n is_deleted: false\n });\n } finally {\n setSaving(false);\n }\n };\n\n if (!isOpen) return null;\n \n return (\n <>\n

\n {/* Header */}\n

Add Media

\n \n \n \n

\n \n {/* Form Content */}\n

\n {/* Title */}\n

\n \n Title *\n \n setFormData(prev => ({ ...prev, title: e.target.value }))}\n placeholder=\"e.g., The Great Gatsby, Avengers, The Office\"\n className=\"w-full px-3 py-2 border border-gray-600 bg-gray-700 text-gray-100 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent placeholder-gray-400\"\n required\n autoFocus\n />\n

\n \n {/* Cover Image URL */}\n

\n \n Cover Image URL (optional)\n \n

\n handleImageUrlChange(e.target.value)}\n placeholder=\"https://example.com/cover-image.jpg\"\n className=\"flex-1 px-3 py-2 border border-gray-600 bg-gray-700 text-gray-100 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent placeholder-gray-400\"\n />\n onOpenImageSearch(formData.title || '', handleImageSelect)}\n className=\"px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors\"\n title=\"Search for images\"\n >\n 🔍\n \n

\n 📎 Paste an image from clipboard (Ctrl/Cmd+V) or search above\n

\n {formData.cover_url && (\n

\n setImageError(false)}\n />\n {imageError && (\n

\n Invalid URL\n

\n )}\n

\n Add a square image URL to represent this media item in the grid, or click the search button to find one\n

\n \n {/* Type */}\n

\n \n Type\n \n

\n {MEDIA_TYPES.map(type => (\n setFormData(prev => ({ ...prev, type: type.value }))}\n className={`p-3 rounded-lg border-2 text-center transition-colors ${\n formData.type === type.value\n ? 'border-blue-500 bg-blue-800 text-blue-300'\n : 'border-gray-600 hover:border-gray-500 text-gray-300'\n }`}\n >\n

{type.icon}

{type.label}

\n \n ))}\n

\n \n {/* Group and Status */}\n

\n \n Group\n \n setFormData(prev => ({ ...prev, group: e.target.value as MediaGroup }))}\n className=\"w-full px-3 py-2 border border-gray-600 bg-gray-700 text-gray-100 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent\"\n >\n {MEDIA_GROUPS.map(group => (\n \n ))}\n \n

\n \n

\n \n Status\n \n setFormData(prev => ({ ...prev, status: e.target.value as MediaStatus }))}\n className=\"w-full px-3 py-2 border border-gray-600 bg-gray-700 text-gray-100 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent\"\n >\n {MEDIA_STATUSES.map(status => (\n \n ))}\n \n

\n \n {/* Description */}\n

\n \n Description (optional)\n \n setFormData(prev => ({ ...prev, description: e.target.value }))}\n placeholder=\"What's this about? Why are you interested?\"\n rows={2}\n className=\"w-full px-3 py-2 border border-gray-600 bg-gray-700 text-gray-100 placeholder-gray-400 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none\"\n />\n

\n \n {/* Progress */}\n

\n \n Current Progress (optional)\n \n setFormData(prev => ({ ...prev, progress: e.target.value }))}\n placeholder=\"e.g., Chapter 5, Episode 3, 50%\"\n className=\"w-full px-3 py-2 border border-gray-600 bg-gray-700 text-gray-100 placeholder-gray-400 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent\"\n />\n

\n \n {/* Additional Metadata */}\n

Additional Info (optional)

\n \n

\n setFormData(prev => ({ \n ...prev, \n metadata: { ...prev.metadata, author: e.target.value }\n }))}\n placeholder=\"Author/Creator\"\n className=\"w-full px-3 py-2 border border-gray-600 bg-gray-700 text-gray-100 placeholder-gray-400 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent\"\n />\n

\n \n

\n setFormData(prev => ({ \n ...prev, \n metadata: { ...prev.metadata, year: e.target.value ? parseInt(e.target.value) : undefined }\n }))}\n placeholder=\"Year\"\n className=\"w-full px-3 py-2 border border-gray-600 bg-gray-700 text-gray-100 placeholder-gray-400 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent\"\n />\n

\n \n

\n setFormData(prev => ({ \n ...prev, \n metadata: { ...prev.metadata, genre: e.target.value }\n }))}\n placeholder=\"Genre\"\n className=\"w-full px-3 py-2 border border-gray-600 bg-gray-700 text-gray-100 placeholder-gray-400 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent\"\n />\n

\n \n {/* Rating */}\n

\n \n Rating (optional)\n \n

\n {[1, 2, 3, 4, 5].map(star => (\n setFormData(prev => ({ \n ...prev, \n rating: prev.rating === star ? 0 : star \n }))}\n className={`w-8 h-8 ${\n star <= formData.rating \n ? 'text-yellow-400' \n : 'text-gray-300'\n } hover:text-yellow-300 transition-colors`}\n >\n ★\n \n ))}\n

\n \n {/* Footer */}\n

\n \n Cancel\n \n \n {saving ? 'Adding...' : 'Add Media'}\n \n

\n \n );\n}\n",[],[167,300,381],"3f963140-65bb-11f0-abc8-0224a6c84d84",["D",1753051534852],[202,203,204,205,206,207,208,209,210,211,212],[167,300],["D",1753051528942],[201,213,214,215,216,217],[167],"198e8326-6ff2-11f0-a233-0224a6c84d84","index.ts","8b8a4604-65bb-11f0-91d8-0224a6c84d84",431,["D",1754174604990],15,"import { Hono } from \"https://esm.sh/hono@4.0.8\";\nimport { cors } from \"https://esm.sh/hono@4.0.8/cors\";\nimport { runMigrations } from \"./database/migrations.ts\";\nimport { \n getTasks, \n createTask, \n getTaskCompletions, \n createTaskCompletion,\n deleteTaskCompletion,\n updateTaskCompletion,\n getMediaItems,\n createMediaItem,\n updateMediaItem,\n storeCRDTOperation,\n getCRDTOperations,\n registerDevice,\n getDevice,\n updateDeviceSync,\n logAuditEntry\n} from \"./database/queries.ts\";\nimport { \n generateId, \n createVectorClock, \n getWeekStart,\n type Task,\n type TaskCompletion,\n type MediaItem,\n type CRDTOperation,\n type AuditLogEntry,\n type SyncPayload,\n type SyncResponse\n} from \"../shared/types.ts\";\nimport { readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\n\nconst app = new Hono();\n\n// Unwrap Hono errors to see original error details\napp.onError((err, _c) => {\n console.error('API Error:', err);\n throw err;\n});\n\n// Enable CORS for PWA\napp.use('*', cors({\n origin: '*',\n allowMethods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],\n allowHeaders: ['Content-Type', 'Authorization']\n}));\n\n// Initialize database on startup\nconsole.log('Running database migrations (idx)...');\nawait runMigrations();\nconsole.log('Database migrations completed (idx)');\n\n// Serve static files\napp.get(\"/frontend/*\", c => serveFile(c.req.path, import.meta.url));\napp.get(\"/shared/*\", c => serveFile(c.req.path, import.meta.url));\n\n// Serve main app with initial data injection\napp.get(\"/\", async c => {\n let html = await readFile(\"/frontend/index.html\", import.meta.url);\n \n // Inject initial data to avoid extra round-trips\n const [tasks, completions, mediaItems] = await Promise.all([\n getTasks(),\n getTaskCompletions(),\n getMediaItems()\n ]);\n \n const initialData = {\n tasks,\n completions,\n mediaItems,\n currentWeek: getWeekStart()\n };\n \n const dataScript = ``;\n \n html = html.replace(\"\", `${dataScript}`);\n return c.html(html);\n});\n\n// API Routes\n\n// Tasks API\napp.get(\"/api/tasks\", async c => {\n const tasks = await getTasks();\n return c.json(tasks);\n});\n\napp.post(\"/api/tasks\", async c => {\n const body = await c.req.json();\n const deviceId = c.req.header('X-Device-ID') || 'unknown';\n \n const task: Task = {\n id: generateId(),\n name: body.name,\n description: body.description,\n frequency_per_week: body.frequency_per_week || 1,\n created_at: Date.now(),\n updated_at: Date.now(),\n is_deleted: false,\n category: body.category,\n color: body.color,\n emoji: body.emoji\n };\n \n // Create CRDT operation\n const vectorClock = createVectorClock(deviceId);\n const operation: CRDTOperation = {\n id: generateId(),\n timestamp: Date.now(),\n deviceId,\n operation: 'create',\n entity: 'task',\n entityId: task.id,\n data: task,\n vector_clock: vectorClock\n };\n \n await Promise.all([\n createTask(task, deviceId, vectorClock),\n storeCRDTOperation(operation)\n ]);\n \n // Log audit entry\n if (body.user_action || body.notes) {\n const auditEntry: AuditLogEntry = {\n id: generateId(),\n timestamp: Date.now(),\n deviceId,\n operation,\n user_action: body.user_action,\n notes: body.notes\n };\n await logAuditEntry(auditEntry);\n }\n \n return c.json(task);\n});\n\napp.put(\"/api/tasks/:id\", async c => {\n const taskId = c.req.param('id');\n const body = await c.req.json();\n const deviceId = c.req.header('X-Device-ID') || 'unknown';\n \n const task: Task = {\n ...body,\n id: taskId,\n updated_at: Date.now()\n };\n \n // Create CRDT operation\n const vectorClock = createVectorClock(deviceId);\n const operation: CRDTOperation = {\n id: generateId(),\n timestamp: Date.now(),\n deviceId,\n operation: 'update',\n entity: 'task',\n entityId: task.id,\n data: task,\n vector_clock: vectorClock\n };\n \n await Promise.all([\n createTask(task, deviceId, vectorClock), // createTask handles upserts\n storeCRDTOperation(operation)\n ]);\n \n return c.json(task);\n});\n\n// Task Completions API\napp.get(\"/api/completions\", async c => {\n const taskIds = c.req.query('task_ids')?.split(',');\n const weekStart = c.req.query('week_start');\n const completions = await getTaskCompletions(taskIds, weekStart);\n return c.json(completions);\n});\n\napp.post(\"/api/completions\", async c => {\n const body = await c.req.json();\n const deviceId = c.req.header('X-Device-ID') || 'unknown';\n \n const completion: TaskCompletion = {\n id: generateId(),\n task_id: body.task_id,\n completed_at: Date.now(),\n notes: body.notes,\n created_at: Date.now(),\n is_deleted: false\n };\n \n // Create CRDT operation\n const vectorClock = createVectorClock(deviceId);\n const operation: CRDTOperation = {\n id: generateId(),\n timestamp: Date.now(),\n deviceId,\n operation: 'create',\n entity: 'completion',\n entityId: completion.id,\n data: completion,\n vector_clock: vectorClock\n };\n \n await Promise.all([\n createTaskCompletion(completion, deviceId, vectorClock),\n storeCRDTOperation(operation)\n ]);\n \n // Log audit entry\n if (body.user_action || body.notes) {\n const auditEntry: AuditLogEntry = {\n id: generateId(),\n timestamp: Date.now(),\n deviceId,\n operation,\n user_action: body.user_action,\n notes: body.notes\n };\n await logAuditEntry(auditEntry);\n }\n \n return c.json(completion);\n});\n\napp.put(\"/api/completions/:id\", async c => {\n const completionId = c.req.param('id');\n const body = await c.req.json();\n const deviceId = c.req.header('X-Device-ID') || 'unknown';\n \n // Validate input\n if (!body.notes && body.notes !== '') {\n return c.json({ error: 'Notes field is required' }, 400);\n }\n \n if (!body.completed_at) {\n return c.json({ error: 'completed_at field is required' }, 400);\n }\n \n // Create CRDT operation for update\n const vectorClock = createVectorClock(deviceId);\n const operation: CRDTOperation = {\n id: generateId(),\n timestamp: Date.now(),\n deviceId,\n operation: 'update',\n entity: 'completion',\n entityId: completionId,\n data: { \n notes: body.notes,\n completed_at: body.completed_at\n },\n vector_clock: vectorClock\n };\n \n await Promise.all([\n updateTaskCompletion(completionId, body.notes, body.completed_at, deviceId, vectorClock),\n storeCRDTOperation(operation)\n ]);\n \n // Log audit entry if notes provided\n if (body.notes) {\n const auditEntry: AuditLogEntry = {\n id: generateId(),\n timestamp: Date.now(),\n deviceId,\n operation,\n user_action: 'EDIT_COMPLETION',\n notes: `Updated completion notes: ${body.notes}`\n };\n await logAuditEntry(auditEntry);\n }\n \n return c.json({ success: true });\n});\n\napp.delete(\"/api/completions/:id\", async c => {\n const completionId = c.req.param('id');\n const deviceId = c.req.header('X-Device-ID') || 'unknown';\n \n // Create CRDT operation for deletion\n const vectorClock = createVectorClock(deviceId);\n const operation: CRDTOperation = {\n id: generateId(),\n timestamp: Date.now(),\n deviceId,\n operation: 'delete',\n entity: 'completion',\n entityId: completionId,\n data: { is_deleted: true },\n vector_clock: vectorClock\n };\n \n await Promise.all([\n deleteTaskCompletion(completionId, deviceId, vectorClock),\n storeCRDTOperation(operation)\n ]);\n \n // Log audit entry\n const auditEntry: AuditLogEntry = {\n id: generateId(),\n timestamp: Date.now(),\n deviceId,\n operation,\n user_action: 'remove_completion'\n };\n await logAuditEntry(auditEntry);\n \n return c.json({ success: true });\n});\n\n// Media API\napp.get(\"/api/media\", async c => {\n const media = await getMediaItems();\n return c.json(media);\n});\n\napp.post(\"/api/media\", async c => {\n const body = await c.req.json();\n const deviceId = c.req.header('X-Device-ID') || 'unknown';\n \n const media: MediaItem = {\n id: generateId(),\n title: body.title,\n type: body.type,\n status: body.status || 'inbox',\n group: body.group,\n description: body.description,\n cover_url: body.cover_url,\n progress: body.progress,\n rating: body.rating,\n notes: body.notes,\n started_at: body.started_at,\n completed_at: body.completed_at,\n created_at: Date.now(),\n updated_at: Date.now(),\n is_deleted: false,\n metadata: body.metadata\n };\n \n // Create CRDT operation\n const vectorClock = createVectorClock(deviceId);\n const operation: CRDTOperation = {\n id: generateId(),\n timestamp: Date.now(),\n deviceId,\n operation: 'create',\n entity: 'media',\n entityId: media.id,\n data: media,\n vector_clock: vectorClock\n };\n \n await Promise.all([\n createMediaItem(media, deviceId, vectorClock),\n storeCRDTOperation(operation)\n ]);\n \n return c.json(media);\n});\n\napp.put(\"/api/media/:id\", async c => {\n const id = c.req.param('id');\n const body = await c.req.json();\n const deviceId = c.req.header('X-Device-ID') || 'unknown';\n \n const media: MediaItem = {\n ...body,\n id,\n updated_at: Date.now()\n };\n \n // Create CRDT operation\n const vectorClock = createVectorClock(deviceId);\n const operation: CRDTOperation = {\n id: generateId(),\n timestamp: Date.now(),\n deviceId,\n operation: 'update',\n entity: 'media',\n entityId: media.id,\n data: media,\n vector_clock: vectorClock\n };\n \n await Promise.all([\n updateMediaItem(media, deviceId, vectorClock),\n storeCRDTOperation(operation)\n ]);\n \n return c.json(media);\n});\n\n// Sync API\napp.post(\"/api/sync\", async c => {\n const payload: SyncPayload = await c.req.json();\n const deviceId = payload.device_id;\n \n // Register/update device\n const existingDevice = await getDevice(deviceId);\n if (!existingDevice) {\n await registerDevice({\n id: deviceId,\n name: `Device ${deviceId.slice(-6)}`,\n last_sync: Date.now(),\n vector_clock: payload.vector_clock\n });\n }\n \n // Store incoming operations\n for (const operation of payload.operations) {\n await storeCRDTOperation(operation);\n }\n \n // Get operations to send back\n const lastSync = existingDevice?.last_sync || 0;\n const outgoingOps = await getCRDTOperations(deviceId, lastSync);\n \n // Update device sync time\n await updateDeviceSync(deviceId, Date.now(), payload.vector_clock);\n \n const response: SyncResponse = {\n operations: outgoingOps,\n vector_clock: payload.vector_clock\n };\n \n return c.json(response);\n});\n\n// Device registration\napp.post(\"/api/devices/register\", async c => {\n const body = await c.req.json();\n const deviceId = body.device_id || generateId();\n \n const device = {\n id: deviceId,\n name: body.name || `Device ${deviceId.slice(-6)}`,\n last_sync: Date.now(),\n vector_clock: { [deviceId]: 0 }\n };\n \n await registerDevice(device);\n return c.json(device);\n});\n\n// Health check\napp.get(\"/api/health\", c => {\n return c.json({ status: \"ok\", timestamp: Date.now() });\n});\n\nexport default app.fetch; // This is the entry point for HTTP vals\n",[],[173,396],"7691726a-7162-11f0-93a1-0224a6c84d84","queries.ts","70732804-65bb-11f0-82c4-0224a6c84d84","3da51248-65bb-11f0-b3e0-0224a6c84d84",["D",1754332815832],37,"import { sqlite } from \"https://esm.town/v/stevekrouse/sqlite\";\nimport { TABLES } from \"./migrations.ts\";\nimport type { Task, TaskCompletion, CRDTOperation, AuditLogEntry, MediaItem } from \"../../shared/types.ts\";\nimport { getWeekStart } from \"../../shared/types.ts\";\n\nexport async function getTasks() {\n const result = await sqlite.execute(\n `SELECT * FROM ${TABLES.TASKS} WHERE is_deleted = 0 ORDER BY sort_order ASC, name ASC`\n );\n \n return result.rows.map(row => ({\n id: row.id as string,\n name: row.name as string,\n description: row.description as string || undefined,\n frequency_per_week: row.frequency_per_week as number,\n created_at: row.created_at as number,\n updated_at: row.updated_at as number,\n is_deleted: false,\n category: row.category as string || undefined,\n color: row.color as string || undefined,\n emoji: row.emoji as string || undefined,\n sort_order: row.sort_order as number || undefined\n }));\n}\n\nexport async function createTask(task: Task, deviceId: string, vectorClock: Record): Promise {\n await sqlite.execute(\n `INSERT OR REPLACE INTO ${TABLES.TASKS} (\n id, name, description, frequency_per_week, created_at, updated_at, \n is_deleted, category, color, emoji, sort_order, device_id, vector_clock\n ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`,\n [\n task.id,\n task.name,\n task.description || null,\n task.frequency_per_week,\n task.created_at,\n task.updated_at,\n task.is_deleted ? 1 : 0,\n task.category || null,\n task.color || null,\n task.emoji || null,\n task.sort_order || null,\n deviceId,\n JSON.stringify(vectorClock)\n ]\n );\n}\n\n// Task completion queries\nexport async function getTaskCompletions(taskIds?: string[], weekStart?: string): Promise {\n let query = `SELECT * FROM ${TABLES.TASK_COMPLETIONS} WHERE is_deleted = 0`;\n const params: any[] = [];\n \n if (taskIds?.length) {\n query += ` AND task_id IN (${taskIds.map(() => '?').join(',')})`;\n params.push(...taskIds);\n }\n \n // If weekStart is provided, filter by completed_at timestamp falling within that week\n if (weekStart) {\n const weekStartDate = new Date(weekStart);\n const weekEndDate = new Date(weekStartDate);\n weekEndDate.setDate(weekEndDate.getDate() + 7); // Next Monday\n \n query += ` AND completed_at >= ? AND completed_at < ?`;\n params.push(weekStartDate.getTime(), weekEndDate.getTime());\n }\n \n query += ` ORDER BY completed_at DESC`;\n \n const result = await sqlite.execute(query, params);\n \n return result.rows.map(row => ({\n id: row.id as string,\n task_id: row.task_id as string,\n completed_at: row.completed_at as number,\n notes: row.notes as string || undefined,\n created_at: row.created_at as number,\n is_deleted: false\n }));\n}\n\nexport async function createTaskCompletion(completion: TaskCompletion, deviceId: string, vectorClock: Record): Promise {\n // Calculate week_start from the completion date\n const completionDate = new Date(completion.completed_at);\n const weekStart = getWeekStart(completionDate);\n \n await sqlite.execute(\n `INSERT INTO ${TABLES.TASK_COMPLETIONS} (\n id, task_id, week_start, completed_at, notes, created_at, \n is_deleted, device_id, vector_clock\n ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)`,\n [\n completion.id,\n completion.task_id,\n weekStart,\n completion.completed_at,\n completion.notes || null,\n completion.created_at,\n completion.is_deleted ? 1 : 0,\n deviceId,\n JSON.stringify(vectorClock)\n ]\n );\n}\n\nexport async function deleteTaskCompletion(completionId: string, _deviceId: string, vectorClock: Record): Promise {\n await sqlite.execute(\n `UPDATE ${TABLES.TASK_COMPLETIONS} \n SET is_deleted = 1, vector_clock = ?\n WHERE id = ?`,\n [JSON.stringify(vectorClock), completionId]\n );\n}\n\nexport async function updateTaskCompletion(\n completionId: string, \n notes: string, \n completedAt: string, \n _deviceId: string, \n vectorClock: Record\n): Promise {\n await sqlite.execute(\n `UPDATE ${TABLES.TASK_COMPLETIONS} \n SET notes = ?, completed_at = ?, vector_clock = ?\n WHERE id = ? AND is_deleted = 0`,\n [notes || null, new Date(completedAt).getTime(), JSON.stringify(vectorClock), completionId]\n );\n}\n\n// Media queries\nexport async function getMediaItems(): Promise {\n const result = await sqlite.execute(\n `SELECT * FROM ${TABLES.MEDIA_ITEMS} WHERE is_deleted = 0 ORDER BY updated_at DESC`\n );\n \n return result.rows.map(row => ({\n id: row.id as string,\n title: row.title as string,\n type: row.type as any,\n status: row.status as any,\n group: row.media_group as any,\n description: row.description as string || undefined,\n cover_url: row.cover_url as string || undefined,\n progress: row.progress as string || undefined,\n rating: row.rating as number || undefined,\n notes: row.notes as string || undefined,\n started_at: row.started_at as number || undefined,\n completed_at: row.completed_at as number || undefined,\n created_at: row.created_at as number,\n updated_at: row.updated_at as number,\n is_deleted: false,\n metadata: row.metadata ? JSON.parse(row.metadata as string) : undefined\n }));\n}\n\nexport async function createMediaItem(item: MediaItem, deviceId: string, vectorClock: Record): Promise {\n await sqlite.execute(\n `INSERT INTO ${TABLES.MEDIA_ITEMS} (\n id, title, type, status, media_group, description, cover_url, \n progress, rating, notes, started_at, completed_at, created_at, \n updated_at, is_deleted, metadata, device_id, vector_clock\n ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`,\n [\n item.id,\n item.title,\n item.type,\n item.status,\n item.group,\n item.description || null,\n item.cover_url || null,\n item.progress || null,\n item.rating || null,\n item.notes || null,\n item.started_at || null,\n item.completed_at || null,\n item.created_at,\n item.updated_at,\n item.is_deleted ? 1 : 0,\n item.metadata ? JSON.stringify(item.metadata) : null,\n deviceId,\n JSON.stringify(vectorClock)\n ]\n );\n}\n\nexport async function updateMediaItem(item: MediaItem, deviceId: string, vectorClock: Record): Promise {\n await sqlite.execute(\n `UPDATE ${TABLES.MEDIA_ITEMS} SET \n title = ?, type = ?, status = ?, media_group = ?, description = ?, \n cover_url = ?, progress = ?, rating = ?, notes = ?, started_at = ?, \n completed_at = ?, updated_at = ?, is_deleted = ?, metadata = ?, \n device_id = ?, vector_clock = ?\n WHERE id = ?`,\n [\n item.title,\n item.type,\n item.status,\n item.group,\n item.description || null,\n item.cover_url || null,\n item.progress || null,\n item.rating || null,\n item.notes || null,\n item.started_at || null,\n item.completed_at || null,\n item.updated_at,\n item.is_deleted ? 1 : 0,\n item.metadata ? JSON.stringify(item.metadata) : null,\n deviceId,\n JSON.stringify(vectorClock),\n item.id\n ]\n );\n}\n\n// CRDT and sync queries\nexport async function storeCRDTOperation(operation: CRDTOperation): Promise {\n await sqlite.execute(\n `INSERT OR REPLACE INTO ${TABLES.CRDT_OPERATIONS} (\n id, timestamp, device_id, operation, entity, entity_id, \n data, vector_clock, processed\n ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)`,\n [\n operation.id,\n operation.timestamp,\n operation.deviceId,\n operation.operation,\n operation.entity,\n operation.entityId,\n JSON.stringify(operation.data),\n JSON.stringify(operation.vector_clock),\n 0\n ]\n );\n}\n\nexport async function getCRDTOperations(deviceId: string, since?: number): Promise {\n let query = `SELECT * FROM ${TABLES.CRDT_OPERATIONS} WHERE device_id != ?`;\n const params: any[] = [deviceId];\n \n if (since) {\n query += ` AND timestamp > ?`;\n params.push(since);\n }\n \n query += ` ORDER BY timestamp ASC`;\n \n const result = await sqlite.execute(query, params);\n \n return result.rows.map(row => ({\n id: row.id as string,\n timestamp: row.timestamp as number,\n deviceId: row.device_id as string,\n operation: row.operation as any,\n entity: row.entity as any,\n entityId: row.entity_id as string,\n data: JSON.parse(row.data as string),\n vector_clock: JSON.parse(row.vector_clock as string)\n }));\n}\n\nexport async function markCRDTOperationProcessed(operationId: string): Promise {\n await sqlite.execute(\n `UPDATE ${TABLES.CRDT_OPERATIONS} SET processed = 1 WHERE id = ?`,\n [operationId]\n );\n}\n\n// Device management\nexport async function registerDevice(device: any): Promise {\n await sqlite.execute(\n `INSERT OR REPLACE INTO ${TABLES.DEVICES} (id, name, last_sync, vector_clock) VALUES (?, ?, ?, ?)`,\n [device.id, device.name, device.last_sync, JSON.stringify(device.vector_clock)]\n );\n}\n\nexport async function getDevice(deviceId: string): Promise {\n const result = await sqlite.execute(\n `SELECT * FROM ${TABLES.DEVICES} WHERE id = ?`,\n [deviceId]\n );\n \n if (!result.rows.length) return null;\n \n const row = result.rows[0];\n return {\n id: row.id as string,\n name: row.name as string,\n last_sync: row.last_sync as number,\n vector_clock: JSON.parse(row.vector_clock as string)\n };\n}\n\nexport async function updateDeviceSync(deviceId: string, lastSync: number, vectorClock: Record): Promise {\n await sqlite.execute(\n `UPDATE ${TABLES.DEVICES} SET last_sync = ?, vector_clock = ? WHERE id = ?`,\n [lastSync, JSON.stringify(vectorClock), deviceId]\n );\n}\n\n// Audit logging\nexport async function logAuditEntry(entry: AuditLogEntry): Promise {\n await sqlite.execute(\n `INSERT INTO ${TABLES.AUDIT_LOG} (id, timestamp, device_id, operation_id, user_action, notes) VALUES (?, ?, ?, ?, ?, ?)`,\n [entry.id, entry.timestamp, entry.deviceId, entry.operation.id, entry.user_action || null, entry.notes || null]\n );\n}\n ",[],[173,413,405],"database","18d7d3b2-708b-11f0-8d4a-0224a6c84d84","migrations.ts","5a6a799a-65bb-11f0-974b-0224a6c84d84",441,["D",1754240316790],27,"import { sqlite } from \"https://esm.town/v/stevekrouse/sqlite\";\n\n// Database table names with versioning for schema changes\nexport const TABLES = {\n TASKS: 'pathfinder_tasks_v4',\n TASK_COMPLETIONS: 'pathfinder_task_completions_v1', \n MEDIA_ITEMS: 'pathfinder_media_items_v1',\n CRDT_OPERATIONS: 'pathfinder_crdt_operations_v1',\n AUDIT_LOG: 'pathfinder_audit_log_v1',\n DEVICES: 'pathfinder_devices_v1',\n SYNC_STATE: 'pathfinder_sync_state_v1'\n};\n\nexport async function runMigrations() {\n console.log('Running database migrations (mig)...');\n \n // Enable foreign key constraints (SQLite has them disabled by default)\n await sqlite.execute('PRAGMA foreign_keys = ON');\n console.log('Foreign key constraints enabled');\n \n // Ensure migration markers table exists first\n await ensureMigrationMarkersTable();\n \n // Run all migrations in order\n await runMigration('create_v4_tables', createV4Tables);\n await runMigration('migrate_v3_to_v4_data', migrateV3ToV4Data);\n await runMigration('assign_initial_sort_order', assignInitialSortOrder);\n await runMigration('create_indexes', createIndexes);\n await runMigration('fix_foreign_key_constraints', fixForeignKeyConstraints);\n \n console.log('Database migrations completed (mig)');\n}\n\n// Helper function to ensure migration markers table exists\nasync function ensureMigrationMarkersTable() {\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS pathfinder_migration_markers (\n id TEXT PRIMARY KEY,\n completed_at INTEGER NOT NULL\n )\n `);\n}\n\n// Helper function to run a migration only if it hasn't been completed\nasync function runMigration(migrationId: string, migrationFn: () => Promise) {\n const check = await sqlite.execute(`\n SELECT id FROM pathfinder_migration_markers WHERE id = ?\n `, [migrationId]);\n \n if (check.rows.length > 0) {\n console.log(`Migration ${migrationId} already completed, skipping...`);\n return;\n }\n \n console.log(`Running migration: ${migrationId}`);\n await migrationFn();\n \n await sqlite.execute(`\n INSERT INTO pathfinder_migration_markers (id, completed_at)\n VALUES (?, ?)\n `, [migrationId, Date.now()]);\n \n console.log(`Migration ${migrationId} completed`);\n}\n\n// Migration 1: Create all v4 tables\nasync function createV4Tables() {\n // Tasks table\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${TABLES.TASKS} (\n id TEXT PRIMARY KEY,\n name TEXT NOT NULL,\n description TEXT,\n frequency_per_week INTEGER NOT NULL DEFAULT 1,\n created_at INTEGER NOT NULL,\n updated_at INTEGER NOT NULL,\n is_deleted INTEGER NOT NULL DEFAULT 0,\n category TEXT,\n color TEXT,\n emoji TEXT,\n sort_order INTEGER,\n device_id TEXT NOT NULL,\n vector_clock TEXT NOT NULL\n )\n `);\n\n // Task completions table\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${TABLES.TASK_COMPLETIONS} (\n id TEXT PRIMARY KEY,\n task_id TEXT NOT NULL,\n week_start TEXT NOT NULL,\n completed_at INTEGER NOT NULL,\n notes TEXT,\n created_at INTEGER NOT NULL,\n is_deleted INTEGER NOT NULL DEFAULT 0,\n device_id TEXT NOT NULL,\n vector_clock TEXT NOT NULL,\n FOREIGN KEY (task_id) REFERENCES ${TABLES.TASKS} (id)\n )\n `);\n\n // Media items table\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${TABLES.MEDIA_ITEMS} (\n id TEXT PRIMARY KEY,\n title TEXT NOT NULL,\n type TEXT NOT NULL,\n status TEXT NOT NULL,\n media_group TEXT NOT NULL,\n description TEXT,\n cover_url TEXT,\n progress TEXT,\n rating INTEGER,\n notes TEXT,\n started_at INTEGER,\n completed_at INTEGER,\n created_at INTEGER NOT NULL,\n updated_at INTEGER NOT NULL,\n is_deleted INTEGER NOT NULL DEFAULT 0,\n metadata TEXT, -- JSON string\n device_id TEXT NOT NULL,\n vector_clock TEXT NOT NULL\n )\n `);\n\n // CRDT operations for syncing\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${TABLES.CRDT_OPERATIONS} (\n id TEXT PRIMARY KEY,\n timestamp INTEGER NOT NULL,\n device_id TEXT NOT NULL,\n operation TEXT NOT NULL,\n entity TEXT NOT NULL,\n entity_id TEXT NOT NULL,\n data TEXT NOT NULL, -- JSON string\n vector_clock TEXT NOT NULL,\n processed INTEGER NOT NULL DEFAULT 0\n )\n `);\n\n // Audit log for debugging\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${TABLES.AUDIT_LOG} (\n id TEXT PRIMARY KEY,\n timestamp INTEGER NOT NULL,\n device_id TEXT NOT NULL,\n operation_id TEXT NOT NULL,\n user_action TEXT,\n notes TEXT,\n FOREIGN KEY (operation_id) REFERENCES ${TABLES.CRDT_OPERATIONS} (id)\n )\n `);\n\n // Device registry\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${TABLES.DEVICES} (\n id TEXT PRIMARY KEY,\n name TEXT NOT NULL,\n last_sync INTEGER NOT NULL,\n vector_clock TEXT NOT NULL\n )\n `);\n\n // Sync state tracking\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${TABLES.SYNC_STATE} (\n key TEXT PRIMARY KEY,\n value TEXT NOT NULL,\n updated_at INTEGER NOT NULL\n )\n `);\n}\n\n// Migration 2: Migrate data from old tables to v4\nasync function migrateV3ToV4Data() {\n // Migrate data from v3 tasks table if it exists\n try {\n const oldTasks = await sqlite.execute(`SELECT * FROM pathfinder_tasks_v3 WHERE is_deleted = 0`);\n if (oldTasks.rows.length > 0) {\n console.log(`Migrating ${oldTasks.rows.length} tasks from v3 to v4...`);\n for (const row of oldTasks.rows) {\n await sqlite.execute(`\n INSERT OR REPLACE INTO ${TABLES.TASKS} (\n id, name, description, frequency_per_week, created_at, updated_at,\n is_deleted, category, color, emoji, sort_order, device_id, vector_clock\n ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)\n `, [\n row.id as string,\n row.name as string,\n row.description as string,\n row.frequency_per_week as number,\n row.created_at as number,\n row.updated_at as number,\n row.is_deleted as number,\n row.category as string,\n row.color as string,\n row.emoji as string,\n null, // sort_order will be populated later\n row.device_id as string,\n row.vector_clock as string\n ]);\n }\n console.log('Task migration from v3 to v4 completed successfully');\n }\n } catch (_error) {\n // v3 table doesn't exist, try v2\n console.log('No v3 tasks table found, checking for v2...');\n }\n\n // Migrate data from v2 tasks table if it exists\n try {\n const oldTasks = await sqlite.execute(`SELECT * FROM pathfinder_tasks_v2 WHERE is_deleted = 0`);\n if (oldTasks.rows.length > 0) {\n console.log(`Migrating ${oldTasks.rows.length} tasks from v2 to v4...`);\n for (const row of oldTasks.rows) {\n await sqlite.execute(`\n INSERT OR REPLACE INTO ${TABLES.TASKS} (\n id, name, description, frequency_per_week, created_at, updated_at,\n is_deleted, category, color, emoji, sort_order, device_id, vector_clock\n ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)\n `, [\n row.id as string,\n row.name as string,\n row.description as string,\n row.frequency_per_week as number,\n row.created_at as number,\n row.updated_at as number,\n row.is_deleted as number,\n row.category as string,\n row.color as string,\n row.emoji as string,\n null, // sort_order - new field, start as null\n row.device_id as string,\n row.vector_clock as string\n ]);\n }\n console.log('Task migration from v2 to v4 completed successfully');\n }\n } catch (_error) {\n // v2 table doesn't exist, try v1\n console.log('No v2 tasks table found, checking for v1...');\n }\n\n // Migrate data from v1 tasks table if it exists (fallback)\n try {\n const oldTasks = await sqlite.execute(`SELECT * FROM pathfinder_tasks_v1 WHERE is_deleted = 0`);\n if (oldTasks.rows.length > 0) {\n console.log(`Migrating ${oldTasks.rows.length} tasks from v1 to v4...`);\n for (const row of oldTasks.rows) {\n await sqlite.execute(`\n INSERT OR REPLACE INTO ${TABLES.TASKS} (\n id, name, description, frequency_per_week, created_at, updated_at,\n is_deleted, category, color, emoji, sort_order, device_id, vector_clock\n ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)\n `, [\n row.id as string,\n row.name as string,\n row.description as string,\n row.frequency_per_week as number,\n row.created_at as number,\n row.updated_at as number,\n row.is_deleted as number,\n row.category as string,\n row.color as string,\n null, // emoji - new field in v2, start as null\n null, // sort_order - new field in v4, start as null\n row.device_id as string,\n row.vector_clock as string\n ]);\n }\n console.log('Task migration from v1 to v4 completed successfully');\n }\n } catch (_error) {\n // Old table doesn't exist, that's fine\n console.log('No v1 tasks table found, starting fresh');\n }\n}\n\n// Migration 3: Assign initial sort_order values\nasync function assignInitialSortOrder() {\n const tasksWithoutOrder = await sqlite.execute(`\n SELECT COUNT(*) as count FROM ${TABLES.TASKS} \n WHERE is_deleted = 0 AND sort_order IS NULL\n `);\n \n const count = tasksWithoutOrder.rows[0]?.count as number || 0;\n if (count > 0) {\n console.log(`Found ${count} tasks without sort_order, assigning default values...`);\n \n // Get all tasks without sort_order, ordered by name for consistent ordering\n const unorderedTasks = await sqlite.execute(`\n SELECT id FROM ${TABLES.TASKS} \n WHERE is_deleted = 0 AND sort_order IS NULL \n ORDER BY name ASC\n `);\n \n // Assign sort_order values starting from 1\n for (let i = 0; i < unorderedTasks.rows.length; i++) {\n const taskId = unorderedTasks.rows[i].id as string;\n const sortOrder = i + 1;\n await sqlite.execute(`\n UPDATE ${TABLES.TASKS} \n SET sort_order = ? \n WHERE id = ?\n `, [sortOrder, taskId]);\n }\n \n console.log(`Assigned sort_order values to ${unorderedTasks.rows.length} tasks`);\n } else {\n console.log('All tasks already have sort_order values');\n }\n}\n\n// Migration 4: Create database indexes\nasync function createIndexes() {\n // Task indexes\n await sqlite.execute(`CREATE INDEX IF NOT EXISTS idx_tasks_deleted ON ${TABLES.TASKS} (is_deleted)`);\n await sqlite.execute(`CREATE INDEX IF NOT EXISTS idx_tasks_updated ON ${TABLES.TASKS} (updated_at)`);\n await sqlite.execute(`CREATE INDEX IF NOT EXISTS idx_tasks_sort_order ON ${TABLES.TASKS} (sort_order)`);\n \n // Task completion indexes\n await sqlite.execute(`CREATE INDEX IF NOT EXISTS idx_completions_task_week ON ${TABLES.TASK_COMPLETIONS} (task_id, week_start)`);\n await sqlite.execute(`CREATE INDEX IF NOT EXISTS idx_completions_deleted ON ${TABLES.TASK_COMPLETIONS} (is_deleted)`);\n \n // Media indexes\n await sqlite.execute(`CREATE INDEX IF NOT EXISTS idx_media_status_group ON ${TABLES.MEDIA_ITEMS} (status, media_group)`);\n await sqlite.execute(`CREATE INDEX IF NOT EXISTS idx_media_deleted ON ${TABLES.MEDIA_ITEMS} (is_deleted)`);\n \n // CRDT indexes\n await sqlite.execute(`CREATE INDEX IF NOT EXISTS idx_crdt_device_timestamp ON ${TABLES.CRDT_OPERATIONS} (device_id, timestamp)`);\n await sqlite.execute(`CREATE INDEX IF NOT EXISTS idx_crdt_processed ON ${TABLES.CRDT_OPERATIONS} (processed)`);\n \n // Audit log indexes\n await sqlite.execute(`CREATE INDEX IF NOT EXISTS idx_audit_timestamp ON ${TABLES.AUDIT_LOG} (timestamp)`);\n \n console.log('Database indexes created');\n}\n\n// Migration 5: Fix foreign key constraints pointing to old table versions\nasync function fixForeignKeyConstraints() {\n console.log('Fixing foreign key constraints...');\n \n // Check if task_completions table has the wrong foreign key constraint\n const fkInfo = await sqlite.execute(`PRAGMA foreign_key_list(${TABLES.TASK_COMPLETIONS})`);\n console.log('Current foreign key constraints:', fkInfo.rows);\n \n // If the foreign key points to the wrong table, we need to recreate the table\n const wrongFk = fkInfo.rows.find(fk => fk.table !== TABLES.TASKS);\n if (wrongFk) {\n console.log(`Found incorrect foreign key pointing to ${wrongFk.table}, should be ${TABLES.TASKS}`);\n \n // Create new table with correct foreign key\n const newTableName = `${TABLES.TASK_COMPLETIONS}_new`;\n await sqlite.execute(`\n CREATE TABLE ${newTableName} (\n id TEXT PRIMARY KEY,\n task_id TEXT NOT NULL,\n week_start TEXT NOT NULL,\n completed_at INTEGER NOT NULL,\n notes TEXT,\n created_at INTEGER NOT NULL,\n is_deleted INTEGER NOT NULL DEFAULT 0,\n device_id TEXT NOT NULL,\n vector_clock TEXT NOT NULL,\n FOREIGN KEY (task_id) REFERENCES ${TABLES.TASKS} (id)\n )\n `);\n \n // Copy data from old table\n await sqlite.execute(`\n INSERT INTO ${newTableName} \n SELECT * FROM ${TABLES.TASK_COMPLETIONS}\n `);\n \n // Drop old table and rename new one\n await sqlite.execute(`DROP TABLE ${TABLES.TASK_COMPLETIONS}`);\n await sqlite.execute(`ALTER TABLE ${newTableName} RENAME TO ${TABLES.TASK_COMPLETIONS}`);\n \n console.log('Task completions table recreated with correct foreign key');\n } else {\n console.log('Foreign key constraints are already correct');\n }\n}\n",[],[173,413,415],"3da5119e-65bb-11f0-b3e0-0224a6c84d84",["D",1753051531594],[197,198],[173,413],["D",1753051524683],[196,199],[173],"ebc7ba1c-65b9-11f0-96e6-0224a6c84d84","copilot-instructions.md","e8199f7a-65b9-11f0-b2b2-0224a6c84d84",6,["D",1753050964748],"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",[],[179,431],["D",1753050954036],[194],[179],["D",1753050615637],{"_11":12,"_87":83},{"_11":12,"_81":-5,"_82":83,"_44":45,"_84":85,"_86":38},{"_29":30,"_13":26,"_20":21,"_27":28,"_31":-5,"_32":-5,"_76":-5,"_77":-5,"_78":-5,"_79":14,"_80":12},"ctx",{"_69":-5,"_109":478,"_479":480,"_481":482,"_483":38,"_484":38,"_485":38,"_486":49,"_487":-5,"_488":-7,"_489":-7,"_490":53,"_491":38,"_492":38,"_493":-5,"_494":38,"_495":38,"_496":38,"_497":-5},"ENV",{"_449":450,"_451":452,"_453":26,"_454":455,"_456":457,"_458":459,"_460":461,"_462":463,"_464":465,"_466":467,"_468":469,"_470":471,"_472":473,"_474":475,"_476":477},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Branches1

Branches
1