) {\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",[],[182,189,196],{"_103":206,"_95":207,"_152":208,"_154":190,"_155":137,"_156":136,"_158":159,"_105":209,"_100":210,"_161":201,"_163":211,"_164":22,"_165":-5,"_166":212,"_98":213},"7691726a-7162-11f0-93a1-0224a6c84d84","queries.ts","70732804-65bb-11f0-82c4-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 ",[],[182,189,207],[182,189],{"_103":216,"_95":217,"_152":218,"_154":183,"_155":137,"_156":219,"_158":159,"_105":220,"_100":221,"_161":201,"_163":222,"_164":22,"_165":-5,"_166":223,"_98":224},"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",[],[182,217],[182],{"_103":227,"_95":228,"_152":229,"_154":-5,"_155":137,"_156":230,"_158":159,"_105":231,"_100":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_166":232,"_98":392},"3c10a47e-65bb-11f0-8867-0224a6c84d84","frontend","3c10a55a-65bb-11f0-8867-0224a6c84d84",8,["D",1753051528942],[233,346,355,365,374,383],{"_103":234,"_95":235,"_152":236,"_154":229,"_155":137,"_156":237,"_158":159,"_105":238,"_100":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_166":239,"_98":345},"3f963140-65bb-11f0-abc8-0224a6c84d84","components","3f9631fe-65bb-11f0-abc8-0224a6c84d84",11,["D",1753051534852],[240,250,259,269,278,288,297,306,315,325,335],{"_103":241,"_95":242,"_152":243,"_154":236,"_155":137,"_156":244,"_158":159,"_105":245,"_100":246,"_161":201,"_163":247,"_164":22,"_165":-5,"_166":248,"_98":249},"0694e684-6fcf-11f0-b30c-0224a6c84d84","AddMediaModal.tsx","55d5f674-65bc-11f0-ba88-0224a6c84d84",346,["D",1754159540736],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 { 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",[],[228,235,242],{"_103":251,"_95":252,"_152":253,"_154":236,"_155":137,"_156":254,"_158":159,"_105":255,"_100":191,"_161":201,"_163":256,"_164":22,"_165":-5,"_166":257,"_98":258},"120883bc-6fcb-11f0-b63c-0224a6c84d84","AddTaskModal.tsx","3ade5c26-65bc-11f0-a6fa-0224a6c84d84",320,["D",1754157841995],"/** @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 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 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",[],[228,235,252],{"_103":260,"_95":261,"_152":262,"_154":236,"_155":137,"_156":263,"_158":159,"_105":264,"_100":265,"_161":201,"_163":266,"_164":22,"_165":-5,"_166":267,"_98":268},"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",[],[228,235,261],{"_103":270,"_95":271,"_152":272,"_154":236,"_155":137,"_156":273,"_158":159,"_105":274,"_100":237,"_161":201,"_163":275,"_164":22,"_165":-5,"_166":276,"_98":277},"17bffdda-6fcb-11f0-bb3f-0224a6c84d84","EditTaskModal.tsx","1d4e474e-65d9-11f0-b639-0224a6c84d84",321,["D",1754157851578],"/** @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 \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",[],[228,235,271],{"_103":279,"_95":280,"_152":281,"_154":236,"_155":137,"_156":282,"_158":159,"_105":283,"_100":284,"_161":201,"_163":285,"_164":22,"_165":-5,"_166":286,"_98":287},"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",[],[228,235,280],{"_103":289,"_95":290,"_152":291,"_154":236,"_155":137,"_156":292,"_158":159,"_105":293,"_100":246,"_161":201,"_163":294,"_164":22,"_165":-5,"_166":295,"_98":296},"e6994f3c-6fce-11f0-8074-0224a6c84d84","MediaDetailModal.tsx","83ba41a8-65bc-11f0-964f-0224a6c84d84",343,["D",1754159487111],"/** @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 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-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 {[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-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 {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}\n",[],[228,235,290],{"_103":298,"_95":299,"_152":300,"_154":236,"_155":137,"_156":301,"_158":159,"_105":302,"_100":174,"_161":201,"_163":303,"_164":22,"_165":-5,"_166":304,"_98":305},"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 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(([value, 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 {\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 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 \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}\n",[],[228,235,299],{"_103":307,"_95":308,"_152":309,"_154":236,"_155":137,"_156":310,"_158":159,"_105":311,"_100":32,"_161":201,"_163":312,"_164":22,"_165":-5,"_166":313,"_98":314},"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 \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

\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 \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 {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",[],[228,235,308],{"_103":316,"_95":317,"_152":318,"_154":236,"_155":137,"_156":319,"_158":159,"_105":320,"_100":321,"_161":201,"_163":322,"_164":22,"_165":-5,"_166":323,"_98":324},"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",[],[228,235,317],{"_103":326,"_95":327,"_152":328,"_154":236,"_155":137,"_156":329,"_158":159,"_105":330,"_100":331,"_161":201,"_163":332,"_164":22,"_165":-5,"_166":333,"_98":334},"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",[],[228,235,327],{"_103":336,"_95":337,"_152":338,"_154":236,"_155":137,"_156":339,"_158":159,"_105":340,"_100":341,"_161":201,"_163":342,"_164":22,"_165":-5,"_166":343,"_98":344},"768a1cb6-7097-11f0-84b5-0224a6c84d84","TaskGrid.tsx","1584053e-65bc-11f0-9ce1-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",[],[228,235,337],[228,235],{"_103":347,"_95":348,"_152":349,"_154":229,"_155":137,"_156":350,"_158":159,"_105":351,"_100":32,"_161":175,"_163":352,"_164":22,"_165":-5,"_166":353,"_98":354},"a71d69a0-65bb-11f0-b4b9-0224a6c84d84","favicon.svg","a71d6a68-65bb-11f0-b4b9-0224a6c84d84",20,["D",1753051708537],"\n",[],[228,348],{"_103":356,"_95":357,"_152":358,"_154":229,"_155":137,"_156":359,"_158":159,"_105":360,"_100":361,"_161":175,"_163":362,"_164":22,"_165":-5,"_166":363,"_98":364},"857c8dde-6fc6-11f0-890b-0224a6c84d84","index.html","9b0baad2-65bb-11f0-99ff-0224a6c84d84",260,["D",1754155888212],12,"\n\n\n \n \n Pathfinder\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n\n

\n \n

Loading Pathfinder...

\n \n \n \n \n \n \n\n\n",[],[228,357],{"_103":366,"_95":367,"_152":368,"_154":229,"_155":137,"_156":369,"_158":159,"_105":370,"_100":174,"_161":201,"_163":371,"_164":22,"_165":-5,"_166":372,"_98":373},"f28eb092-6fc5-11f0-8014-0224a6c84d84","index.tsx","8b6f5352-65bc-11f0-9d49-0224a6c84d84",251,["D",1754155641705],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0?deps=react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client?deps=react@18.2.0\";\nimport { App } from \"./components/App.tsx\";\n\n// Get initial data injected by the server\nconst initialData = (globalThis as any).__INITIAL_DATA__;\n\n// Create root and render app\nconst root = createRoot(document.getElementById('root')!);\nroot.render();\n\n// Register for updates\nif ('serviceWorker' in navigator) {\n navigator.serviceWorker.addEventListener('message', (event) => {\n if (event.data?.type === 'CACHE_UPDATED') {\n console.log('App cache updated, consider refreshing');\n }\n });\n}\n\n// Handle install prompt for PWA\nlet deferredPrompt: any;\n\nglobalThis.addEventListener('beforeinstallprompt', (e) => {\n // Prevent Chrome 67 and earlier from automatically showing the prompt\n e.preventDefault();\n // Stash the event so it can be triggered later\n deferredPrompt = e;\n \n // Show custom install UI if desired\n console.log('PWA install prompt available');\n});\n\nglobalThis.addEventListener('appinstalled', () => {\n console.log('PWA was installed');\n deferredPrompt = null;\n});\n\n// Add to home screen helper function (can be called from UI)\n(globalThis as any).installPWA = async () => {\n if (deferredPrompt) {\n deferredPrompt.prompt();\n const { outcome } = await deferredPrompt.userChoice;\n console.log('User choice:', outcome);\n deferredPrompt = null;\n }\n};\n\nconsole.log('Pathfinder PWA loaded successfully');\n",[],[228,367],{"_103":375,"_95":376,"_152":377,"_154":229,"_155":137,"_156":378,"_158":159,"_105":379,"_100":174,"_161":175,"_163":380,"_164":22,"_165":-5,"_166":381,"_98":382},"0ac0c4a2-6fc6-11f0-af35-0224a6c84d84","manifest.json","a2eeefb6-65bb-11f0-b4b9-0224a6c84d84",252,["D",1754155682302],"{\n \"name\": \"Pathfinder\",\n \"short_name\": \"Pathfinder\",\n \"description\": \"Ryi's personal dashboard for tasks, habits, and media tracking\",\n \"start_url\": \"/\",\n \"display\": \"standalone\",\n \"background_color\": \"#1f2937\",\n \"theme_color\": \"#1f2937\",\n \"orientation\": \"portrait-primary\",\n \"scope\": \"/\",\n \"icons\": [\n {\n \"src\": \"/frontend/favicon.svg\",\n \"sizes\": \"any\",\n \"type\": \"image/svg+xml\",\n \"purpose\": \"any maskable\"\n }\n ],\n \"categories\": [\"productivity\", \"lifestyle\"],\n \"screenshots\": [\n {\n \"src\": \"/frontend/screenshot-mobile.jpg\",\n \"sizes\": \"390x844\",\n \"type\": \"image/jpeg\",\n \"form_factor\": \"narrow\",\n \"label\": \"Task and habit tracking on mobile\"\n }\n ],\n \"shortcuts\": [\n {\n \"name\": \"Add Task\",\n \"short_name\": \"Add Task\",\n \"description\": \"Quickly add a new task or habit\",\n \"url\": \"/?action=add-task\",\n \"icons\": [\n {\n \"src\": \"/frontend/favicon.svg\",\n \"sizes\": \"96x96\"\n }\n ]\n },\n {\n \"name\": \"Add Media\",\n \"short_name\": \"Add Media\",\n \"description\": \"Add new media to track\",\n \"url\": \"/?action=add-media\",\n \"icons\": [\n {\n \"src\": \"/frontend/favicon.svg\",\n \"sizes\": \"96x96\"\n }\n ]\n }\n ]\n}\n",[],[228,376],{"_103":384,"_95":385,"_152":386,"_154":229,"_155":137,"_156":387,"_158":159,"_105":388,"_100":230,"_161":201,"_163":389,"_164":22,"_165":-5,"_166":390,"_98":391},"332dfe64-6fc6-11f0-828d-0224a6c84d84","sw.js","bc028a4e-65bb-11f0-ae09-0224a6c84d84",255,["D",1754155750124],"// Service Worker for Pathfinder PWA\nconst _CACHE_NAME = 'pathfinder-v1';\nconst STATIC_CACHE = 'pathfinder-static-v1';\nconst DATA_CACHE = 'pathfinder-data-v1';\n\n// Files to cache for offline use\nconst STATIC_FILES = [\n '/',\n '/frontend/index.html',\n '/frontend/index.tsx',\n '/frontend/components/App.tsx',\n '/frontend/favicon.svg',\n '/frontend/manifest.json',\n '/shared/types.ts',\n 'https://cdn.twind.style',\n 'https://esm.sh/react@18.2.0',\n 'https://esm.sh/react-dom@18.2.0'\n];\n\n// API endpoints to cache\nconst _API_ENDPOINTS = [\n '/api/tasks',\n '/api/completions',\n '/api/media',\n '/api/health'\n];\n\n// Install event - cache static files\nself.addEventListener('install', (event) => {\n console.log('Service Worker: Installing...');\n \n event.waitUntil(\n Promise.all([\n caches.open(STATIC_CACHE).then((cache) => {\n console.log('Service Worker: Caching static files');\n return cache.addAll(STATIC_FILES.map(url => new Request(url, { cache: 'reload' })));\n }),\n caches.open(DATA_CACHE)\n ]).then(() => {\n console.log('Service Worker: Installation complete');\n return self.skipWaiting();\n })\n );\n});\n\n// Activate event - clean up old caches\nself.addEventListener('activate', (event) => {\n console.log('Service Worker: Activating...');\n \n event.waitUntil(\n caches.keys().then((cacheNames) => {\n return Promise.all(\n cacheNames.map((cacheName) => {\n if (cacheName !== STATIC_CACHE && cacheName !== DATA_CACHE) {\n console.log('Service Worker: Deleting old cache:', cacheName);\n return caches.delete(cacheName);\n }\n })\n );\n }).then(() => {\n console.log('Service Worker: Activation complete');\n return self.clients.claim();\n })\n );\n});\n\n// Fetch event - serve from cache when offline\nself.addEventListener('fetch', (event) => {\n const { request } = event;\n const url = new URL(request.url);\n \n // Handle API requests\n if (url.pathname.startsWith('/api/')) {\n event.respondWith(handleApiRequest(request));\n return;\n }\n \n // Handle static files\n if (request.method === 'GET') {\n event.respondWith(handleStaticRequest(request));\n return;\n }\n});\n\n// Handle API requests with network-first strategy\nasync function handleApiRequest(request) {\n const _url = new URL(request.url);\n \n try {\n // Try network first\n const networkResponse = await fetch(request.clone());\n \n if (networkResponse.ok) {\n // Cache successful GET requests\n if (request.method === 'GET') {\n const cache = await caches.open(DATA_CACHE);\n cache.put(request.url, networkResponse.clone());\n }\n \n // Sync any pending operations after successful network request\n if (request.method === 'POST' || request.method === 'PUT') {\n self.registration.sync.register('sync-operations');\n }\n }\n \n return networkResponse;\n } catch (_error) {\n console.log('Service Worker: Network request failed, trying cache');\n \n // For GET requests, try to serve from cache\n if (request.method === 'GET') {\n const cachedResponse = await caches.match(request);\n if (cachedResponse) {\n return cachedResponse;\n }\n }\n \n // For POST/PUT requests when offline, store in IndexedDB for later sync\n if (request.method === 'POST' || request.method === 'PUT') {\n await storeOfflineOperation(request);\n \n // Return a success response to keep the UI working\n return new Response(JSON.stringify({ \n success: true, \n offline: true,\n message: 'Operation stored for sync when online'\n }), {\n status: 200,\n headers: { 'Content-Type': 'application/json' }\n });\n }\n \n // Return offline response\n return new Response(JSON.stringify({ \n error: 'Offline', \n message: 'No cached data available' \n }), {\n status: 503,\n headers: { 'Content-Type': 'application/json' }\n });\n }\n}\n\n// Handle static requests with cache-first strategy\nasync function handleStaticRequest(request) {\n try {\n // Try cache first\n const cachedResponse = await caches.match(request);\n if (cachedResponse) {\n return cachedResponse;\n }\n \n // Fallback to network\n const networkResponse = await fetch(request);\n \n // Cache the response for future use\n if (networkResponse.ok) {\n const cache = await caches.open(STATIC_CACHE);\n cache.put(request, networkResponse.clone());\n }\n \n return networkResponse;\n } catch (_error) {\n console.log('Service Worker: Failed to fetch static resource:', request.url);\n \n // For HTML requests, return the cached index page\n if (request.headers.get('Accept')?.includes('text/html')) {\n const cachedPage = await caches.match('/');\n if (cachedPage) {\n return cachedPage;\n }\n }\n \n // Return a basic offline response\n return new Response('Offline', { status: 503 });\n }\n}\n\n// Store offline operations in IndexedDB\nasync function storeOfflineOperation(request) {\n try {\n const body = await request.text();\n const operation = {\n url: request.url,\n method: request.method,\n headers: Object.fromEntries(request.headers.entries()),\n body: body,\n timestamp: Date.now()\n };\n \n // Store in IndexedDB for background sync\n const db = await openDB();\n const tx = db.transaction(['offline_operations'], 'readwrite');\n await tx.objectStore('offline_operations').add(operation);\n await tx.complete;\n \n console.log('Service Worker: Stored offline operation for sync');\n } catch (error) {\n console.error('Service Worker: Failed to store offline operation:', error);\n }\n}\n\n// Open IndexedDB for offline storage\nfunction openDB() {\n return new Promise((resolve, reject) => {\n const request = indexedDB.open('PathfinderDB', 1);\n\n request.onerror = () => reject(request.error);\n request.onsuccess = () => resolve(request.result);\n \n request.onupgradeneeded = (event) => {\n const db = event.target.result;\n \n if (!db.objectStoreNames.contains('offline_operations')) {\n const store = db.createObjectStore('offline_operations', { \n keyPath: 'id', \n autoIncrement: true \n });\n store.createIndex('timestamp', 'timestamp');\n }\n };\n });\n}\n\n// Background sync event\nself.addEventListener('sync', (event) => {\n if (event.tag === 'sync-operations') {\n event.waitUntil(syncOfflineOperations());\n }\n});\n\n// Sync offline operations when back online\nasync function syncOfflineOperations() {\n try {\n const db = await openDB();\n const tx = db.transaction(['offline_operations'], 'readonly');\n const operations = await tx.objectStore('offline_operations').getAll();\n \n for (const operation of operations) {\n try {\n const response = await fetch(operation.url, {\n method: operation.method,\n headers: operation.headers,\n body: operation.body\n });\n \n if (response.ok) {\n // Remove successfully synced operation\n const deleteTx = db.transaction(['offline_operations'], 'readwrite');\n await deleteTx.objectStore('offline_operations').delete(operation.id);\n console.log('Service Worker: Synced offline operation:', operation.url);\n }\n } catch (error) {\n console.error('Service Worker: Failed to sync operation:', error);\n }\n }\n } catch (error) {\n console.error('Service Worker: Failed to sync offline operations:', error);\n }\n}\n\n// Push notification support (for future use)\nself.addEventListener('push', (event) => {\n const options = {\n body: event.data ? event.data.text() : 'New update available',\n icon: '/frontend/favicon.svg',\n badge: '/frontend/favicon.svg',\n vibrate: [100, 50, 100],\n data: {\n dateOfArrival: Date.now(),\n primaryKey: 1\n }\n };\n \n event.waitUntil(\n self.registration.showNotification('Pathfinder', options)\n );\n});\n\nconsole.log('Service Worker: Loaded successfully');\n",[],[228,385],[228],{"_103":394,"_95":395,"_152":396,"_154":-5,"_155":137,"_156":397,"_158":159,"_105":398,"_100":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_166":399,"_98":409},"3c2890ac-65bb-11f0-8588-0224a6c84d84","shared","3c289160-65bb-11f0-8588-0224a6c84d84",9,["D",1753051529098],[400],{"_103":401,"_95":402,"_152":403,"_154":396,"_155":137,"_156":404,"_158":159,"_105":405,"_100":361,"_161":201,"_163":406,"_164":22,"_165":-5,"_166":407,"_98":408},"3aae4e64-6fda-11f0-a769-0224a6c84d84","types.ts","4dcaf8ae-65bb-11f0-974b-0224a6c84d84",371,["D",1754164352644],"// Shared types for the Pathfinder PWA\n\nexport interface CRDTOperation {\n id: string;\n timestamp: number;\n deviceId: string;\n operation: 'create' | 'update' | 'delete';\n entity: 'task' | 'habit' | 'media' | 'completion';\n entityId: string;\n data: any;\n vector_clock: Record;\n}\n\nexport interface AuditLogEntry {\n id: string;\n timestamp: number;\n deviceId: string;\n operation: CRDTOperation;\n user_action?: string;\n notes?: string;\n}\n\n// Task/Habit tracking types\nexport interface Task {\n id: string;\n name: string;\n description?: string;\n frequency_per_week: number; // e.g., 1 = once a week, 3 = three times\n created_at: number;\n updated_at: number;\n is_deleted: boolean;\n category?: string;\n color?: string;\n emoji?: string; // Custom emoji for the task\n sort_order?: number; // Manual ordering, lower numbers appear first\n}\n\nexport interface TaskCompletion {\n id: string;\n task_id: string;\n completed_at: number;\n notes?: string;\n created_at: number;\n is_deleted: boolean;\n}\n\n// Media tracking types\nexport type MediaStatus = 'inbox' | 'upcoming' | 'in_progress' | 'on_hold' | 'completed' | 'abandoned';\nexport type MediaType = 'book' | 'movie' | 'tv_show' | 'podcast' | 'game' | 'article' | 'course';\nexport type MediaGroup = 'ryi' | 'maini' | 'ant' | 'hanant' | 'arj' | 'arvina' | 'haka' | 'shaw' | 'nadin';\n\nexport interface MediaItem {\n id: string;\n title: string;\n type: MediaType;\n status: MediaStatus;\n group: MediaGroup;\n description?: string;\n cover_url?: string;\n progress?: string; // e.g., \"Chapter 5\", \"Episode 3\", \"50%\"\n rating?: number; // 1-5 stars\n notes?: string;\n started_at?: number;\n completed_at?: number;\n created_at: number;\n updated_at: number;\n is_deleted: boolean;\n metadata?: {\n author?: string;\n director?: string;\n genre?: string;\n year?: number;\n duration?: string;\n isbn?: string;\n imdb_id?: string;\n };\n}\n\n// Sync and device management\nexport interface DeviceInfo {\n id: string;\n name: string;\n last_sync: number;\n vector_clock: Record;\n}\n\nexport interface SyncPayload {\n device_id: string;\n operations: CRDTOperation[];\n vector_clock: Record;\n}\n\nexport interface SyncResponse {\n operations: CRDTOperation[];\n vector_clock: Record;\n conflicts?: CRDTOperation[];\n}\n\n// UI State types\nexport interface TaskGridWeek {\n start_date: string; // ISO date string for Monday\n end_date: string; // ISO date string for Sunday\n label: string; // e.g., \"Dec 16-22\"\n}\n\nexport interface MediaGridCell {\n group: MediaGroup;\n status: MediaStatus;\n items: MediaItem[];\n count: number;\n}\n\n// Week utilities\nexport function getWeekStart(date: Date = new Date()): string {\n const d = new Date(date);\n \n // Ensure we're working in local timezone\n const year = d.getFullYear();\n const month = d.getMonth();\n const dateNum = d.getDate();\n \n // Create a new date to avoid timezone issues\n const localDate = new Date(year, month, dateNum);\n const day = localDate.getDay(); // 0 = Sunday, 1 = Monday, etc.\n \n // Calculate days to subtract to get to the Monday of this week\n // If it's Sunday (0), go back 6 days to get the Monday of this week\n // If it's Monday (1), go back 0 days (it's already Monday)\n // If it's Tuesday (2), go back 1 day to get Monday, etc.\n const daysToSubtract = day === 0 ? 6 : day - 1;\n \n localDate.setDate(localDate.getDate() - daysToSubtract);\n \n // Format as YYYY-MM-DD\n const year2 = localDate.getFullYear();\n const month2 = String(localDate.getMonth() + 1).padStart(2, '0');\n const date2 = String(localDate.getDate()).padStart(2, '0');\n \n return `${year2}-${month2}-${date2}`;\n}\n\nexport function getWeekLabel(weekStart: string): 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 `${startMonth} ${startDay}-${endDay}`;\n } else {\n return `${startMonth} ${startDay} - ${endMonth} ${endDay}`;\n }\n}\n\nexport function generateId(): string {\n return `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;\n}\n\nexport function createVectorClock(deviceId: string, existingClock: Record = {}): Record {\n return {\n ...existingClock,\n [deviceId]: (existingClock[deviceId] || 0) + 1\n };\n}\n\nexport function compareVectorClocks(a: Record, b: Record): 'before' | 'after' | 'concurrent' {\n const allDevices = new Set([...Object.keys(a), ...Object.keys(b)]);\n \n let aGreater = false;\n let bGreater = false;\n \n for (const device of allDevices) {\n const aCount = a[device] || 0;\n const bCount = b[device] || 0;\n \n if (aCount > bCount) aGreater = true;\n if (bCount > aCount) bGreater = true;\n }\n \n if (aGreater && !bGreater) return 'after';\n if (bGreater && !aGreater) return 'before';\n return 'concurrent';\n}\n\n// Image utility functions\nexport async function downloadImageAsBase64(imageUrl: string, maxSizeKB: number = 500): Promise {\n try {\n // Fetch the image\n const response = await fetch(imageUrl, {\n mode: 'cors'\n });\n \n if (!response.ok) {\n throw new Error(`HTTP error! status: ${response.status}`);\n }\n \n // Get the blob\n const blob = await response.blob();\n \n // Check file size (convert KB to bytes)\n if (blob.size > maxSizeKB * 1024) {\n console.warn(`Image too large: ${blob.size} bytes (max: ${maxSizeKB * 1024} bytes)`);\n return null;\n }\n \n // Convert to base64\n return new Promise((resolve, reject) => {\n const reader = new FileReader();\n reader.onload = () => {\n const result = reader.result as string;\n resolve(result);\n };\n reader.onerror = () => reject(reader.error);\n reader.readAsDataURL(blob);\n });\n } catch (error) {\n console.error('Error downloading image:', error);\n return null;\n }\n}\n\nexport function isDataUrl(url: string): boolean {\n return url.startsWith('data:');\n}\n\nexport function validateImageUrl(url: string): boolean {\n if (!url) return false;\n \n // Allow data URLs (base64 images)\n if (isDataUrl(url)) return true;\n \n // Allow HTTP/HTTPS URLs\n try {\n const parsed = new URL(url);\n return parsed.protocol === 'http:' || parsed.protocol === 'https:';\n } catch {\n return false;\n }\n}\n\n// Clipboard image utility functions\nexport function handleClipboardPaste(event: ClipboardEvent): Promise {\n return new Promise((resolve) => {\n const items = event.clipboardData?.items;\n if (!items) {\n resolve(null);\n return;\n }\n\n for (let i = 0; i < items.length; i++) {\n const item = items[i];\n \n // Check if the item is an image\n if (item.type.startsWith('image/')) {\n const file = item.getAsFile();\n if (!file) continue;\n \n // Check file size (500KB max)\n if (file.size > 500 * 1024) {\n console.warn(`Image too large: ${file.size} bytes (max: 500KB)`);\n continue;\n }\n \n // Convert to base64\n const reader = new FileReader();\n reader.onload = () => {\n const result = reader.result as string;\n resolve(result);\n };\n reader.onerror = () => resolve(null);\n reader.readAsDataURL(file);\n return;\n }\n }\n \n resolve(null);\n });\n}\n\nexport function setupClipboardListener(onImagePaste: (imageData: string) => void): () => void {\n const handlePaste = async (event: ClipboardEvent) => {\n const imageData = await handleClipboardPaste(event);\n if (imageData) {\n event.preventDefault();\n onImagePaste(imageData);\n }\n };\n \n document.addEventListener('paste', handlePaste);\n \n // Return cleanup function\n return () => {\n document.removeEventListener('paste', handlePaste);\n };\n}\n",[],[395,402],[395],{"_103":411,"_95":412,"_152":413,"_154":-5,"_155":137,"_156":414,"_158":159,"_105":415,"_100":32,"_161":175,"_163":416,"_164":22,"_165":-5,"_166":417,"_98":418},"ac69f678-65b9-11f0-9de2-0224a6c84d84",".vtignore","ac69f722-65b9-11f0-9de2-0224a6c84d84",3,["D",1753050858403],".git\n.vscode\n.cursorrules\n.DS_Store\nnode_modules\nvendor",[],[412],{"_103":420,"_95":421,"_152":422,"_154":-5,"_155":137,"_156":423,"_158":159,"_105":424,"_100":425,"_161":175,"_163":426,"_164":22,"_165":-5,"_166":427,"_98":428},"16d0db1c-6fc4-11f0-aa73-0224a6c84d84","README.md","5f56fa8c-65c0-11f0-bb0d-0224a6c84d84",246,["D",1754154843500],2,"# Pathfinder PWA\n\n(Pathfinder - Life & Goal Status At a Glance) A personal dashboard for tracking tasks, habits, and media consumption with offline support and syncing capabilities.\n\n## Features\n\n### ✅ Tasks & Habits Tracking\n- Weekly grid view showing completion status\n- Support for multiple completions per week\n- Visual indicators with color coding\n- Notes for each completion\n\n### 📚 Media Progress Tracking\n- Organize by status: inbox, upcoming, in progress, on hold, completed\n- Group by social context: solo, with wife, with friends, etc.\n- Support for books, movies, TV shows, podcasts, games, articles, courses\n- Progress tracking and ratings\n\n### 🔄 Offline & Sync\n- PWA with offline functionality\n- CRDT-based conflict resolution\n- Audit logging for data integrity\n- Background sync when online\n\n### 📱 Mobile Optimized\n- Responsive design for iPhone use\n- Touch-friendly interface\n- PWA installable on home screen\n- Smooth animations and interactions\n\n## Project Structure\n\n```\n├── backend/\n│ ├── database/\n│ │ ├── migrations.ts # Database schema\n│ │ └── queries.ts # Database operations\n│ └── index.ts # Hono API server\n├── frontend/\n│ ├── components/ # React components\n│ │ ├── App.tsx # Main app component\n│ │ ├── TaskGrid.tsx # Task tracking grid\n│ │ ├── MediaGrid.tsx # Media tracking grid\n│ │ └── *.tsx # Modal components\n│ ├── index.html # PWA manifest\n│ ├── index.tsx # React entry point\n│ ├── manifest.json # PWA manifest\n│ └── sw.js # Service worker\n├── shared/\n│ └── types.ts # Shared TypeScript types\n└── main.tsx # Val Town entry point\n```\n\n## API Endpoints\n\n- `GET /api/tasks` - Get all tasks\n- `POST /api/tasks` - Create new task\n- `GET /api/completions` - Get task completions\n- `POST /api/completions` - Mark task as complete\n- `GET /api/media` - Get all media items\n- `POST /api/media` - Create new media item\n- `PUT /api/media/:id` - Update media item\n- `POST /api/sync` - CRDT sync endpoint\n- `POST /api/devices/register` - Register device\n\n## Technology Stack\n\n- **Backend**: Hono + SQLite (Val Town)\n- **Frontend**: React 18 + TypeScript\n- **Styling**: Tailwind CSS\n- **PWA**: Service Worker + Manifest\n- **Sync**: CRDT with vector clocks\n- **Storage**: SQLite with audit logging\n\n## Usage\n\n1. **Add Tasks/Habits**: Click \"+ Task\" to add new recurring tasks\n2. **Track Completion**: Tap circles in current week to mark complete\n3. **Add Media**: Click \"+ Media\" to track books, shows, etc.\n4. **Organize Media**: Drag items between status columns\n5. **Offline Use**: App works offline and syncs when back online\n\n## Data Model\n\n### Tasks\n- Support for weekly frequency (1x, 2x, 3x per week)\n- Color coding and categorization\n- Completion tracking with notes\n\n### Media\n- Type: book, movie, TV show, podcast, game, article, course\n- Status: inbox → upcoming → in progress → on hold → completed/abandoned\n- Social groups: solo, with wife, with friends, with family\n- Metadata: author, director, genre, progress, ratings\n\n### Sync\n- CRDT operations for conflict-free replication\n- Vector clocks for ordering\n- Audit logs for debugging\n- Device registration and management\n\nThe app is designed to be information-dense yet beautiful, perfect for quick daily check-ins on your life status.\n",[],[421],{"_103":430,"_95":431,"_152":432,"_154":-5,"_155":137,"_156":425,"_158":159,"_105":433,"_100":32,"_161":175,"_163":434,"_164":22,"_165":-5,"_166":435,"_98":436},"ac63d7d4-65b9-11f0-b392-0224a6c84d84","deno.json","ac63d9fa-65b9-11f0-b392-0224a6c84d84",["D",1753050858402],"{\n \"$schema\": \"https://raw.githubusercontent.com/denoland/deno/348900b8b79f4a434cab4c74b3bc8d4d2fa8ee74/cli/schemas/config-file.v1.json\",\n \"lock\": false,\n \"compilerOptions\": {\n \"noImplicitAny\": false,\n \"strict\": false,\n \"types\": [\n \"https://www.val.town/types/valtown.d.ts\"\n ],\n \"lib\": [\n \"dom\",\n \"dom.iterable\",\n \"dom.asynciterable\",\n \"deno.ns\",\n \"deno.unstable\"\n ]\n },\n \"lint\": {\n \"files\": {\n \"include\": [\n \"deno:/https/esm.town/**/*\"\n ]\n },\n \"rules\": {\n \"exclude\": [\n \"no-explicit-any\"\n ]\n }\n },\n \"node_modules_dir\": false,\n \"experimental\": {\n \"unstable-node-globals\": true,\n \"unstable-temporal\": true,\n \"unstable-worker-options\": true,\n \"unstable-sloppy-imports\": true\n }\n}",[],[431],{"_103":438,"_95":99,"_152":439,"_154":-5,"_155":137,"_156":440,"_158":159,"_105":441,"_100":157,"_161":442,"_163":443,"_164":22,"_165":444,"_166":445,"_98":446},"fe49628a-6fc3-11f0-aa73-0224a6c84d84","1bb34030-65b9-11f0-b477-0224a6c84d84",245,["D",1754154802386],"http","// Pathfinder PWA - Val Town Entry Point\nimport app from \"./backend/index.ts\";\n\n// Export the Hono app as the default HTTP handler\nexport default app;\n","ryi-pathfinder",[],[99],"files",[149,168,180,187,194,205,215,226,233,240,250,259,269,278,288,297,306,315,325,335,346,355,365,374,383,393,400,410,419,429,437],"counts",{"_451":32,"_452":174,"_453":32,"_454":32},"pulls","branches","forks","envVars","contents",[],{"_103":438,"_155":137,"_152":439,"_95":99,"_163":443,"_161":442,"_100":157,"_154":-5,"_105":458,"_156":440,"_165":444,"_98":459},["D",1754154802386],[99],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.history_.$",{"_93":94,"_95":96,"_97":43,"_98":99,"_101":468,"_175":473,"_476":477,"_497":498,"_505":-7,"_506":32,"_507":22},{"_103":104,"_95":96,"_105":469,"_107":-5,"_108":22,"_109":110,"_111":-5,"_112":-5,"_14":113,"_114":-5,"_115":22,"_116":-5,"_117":32,"_16":118,"_119":120,"_121":120,"_122":123,"_124":123,"_125":123,"_126":120,"_127":120,"_23":470,"_131":471,"_134":472,"_146":22},["D",1753050615637],{"_93":94,"_129":130},{"_93":94,"_133":130},{"_100":136,"_95":43,"_103":137,"_138":104,"_139":-5,"_140":-5,"_141":-5,"_142":-5,"_143":-5,"_144":96,"_145":94},{"_103":438,"_95":99,"_152":439,"_154":-5,"_155":137,"_156":440,"_158":159,"_105":474,"_100":157,"_161":442,"_163":443,"_164":22,"_165":444,"_98":475},["D",1754154802386],[99],"history",[478,480,485,490,494],{"_103":438,"_155":137,"_152":439,"_95":99,"_163":443,"_161":442,"_100":157,"_154":-5,"_105":479,"_156":440,"_165":444},["D",1754154802386],{"_103":481,"_155":137,"_152":439,"_95":99,"_163":482,"_161":442,"_100":414,"_154":-5,"_105":483,"_156":484,"_165":444},"1942a3b8-65cd-11f0-ba39-0224a6c84d84","// Life Status PWA - Val Town Entry Point\nimport app from \"./backend/index.ts\";\n\n// Export the Hono app as the default HTTP handler\nexport default app;\n",["D",1753059201487],42,{"_103":486,"_155":137,"_152":439,"_95":99,"_163":487,"_161":442,"_100":425,"_154":-5,"_105":488,"_156":489,"_165":444},"fe711306-65bf-11f0-bb3f-0224a6c84d84","// Life Status PWA - Val Town Entry Point\nimport app from \"./backend/index.ts\";\n\n// Export the Hono app as the default HTTP handler\nexport default app;",["D",1753053573037],40,{"_103":491,"_155":137,"_152":439,"_95":99,"_163":487,"_161":201,"_100":174,"_154":-5,"_105":492,"_156":493,"_165":444},"9022cac8-65bc-11f0-8d54-0224a6c84d84",["D",1753052099484],39,{"_103":495,"_155":137,"_152":439,"_95":99,"_163":72,"_161":201,"_100":32,"_154":-5,"_105":496,"_156":174,"_165":444},"1bb33f90-65b9-11f0-b477-0224a6c84d84",["D",1753050615652],"versions",[499,501,502,503,504],{"_175":478,"_500":480},"previous",{"_175":480,"_500":485},{"_175":485,"_500":490},{"_175":490,"_500":494},{"_175":494,"_500":-5},"versionNumber","page","hasNext","actionData","errors"]

History for main.tsx