Project Context Tracker

\n \n \n \n \n \n

\n );\n}\n\n/**\n * CurrentPhase component\n * @param {{phase: string, onUpdate: Function}} props\n * @returns {React.ReactElement}\n */\nfunction CurrentPhase({ phase, onUpdate }) {\n const [newPhase, setNewPhase] = useState(phase);\n const [error, setError] = useState(\"\");\n\n /**\n * Handles form submission\n * @param {React.FormEvent} e - The form event\n */\n const handleSubmit = (e) => {\n e.preventDefault();\n if (!newPhase.trim()) {\n setError(\"Phase cannot be empty\");\n return;\n }\n setError(\"\");\n onUpdate({ currentPhase: newPhase });\n };\n\n return (\n

Current Phase

\n );\n}\n\n/**\n * ActiveBlocks component\n * @param {{blocks: string[], onUpdate: Function}} props\n * @returns {React.ReactElement}\n */\nfunction ActiveBlocks({ blocks, onUpdate }) {\n const [newBlock, setNewBlock] = useState(\"\");\n const [error, setError] = useState(\"\");\n\n /**\n * Handles form submission\n * @param {React.FormEvent} e - The form event\n */\n const handleSubmit = (e) => {\n e.preventDefault();\n if (!newBlock.trim()) {\n setError(\"Block cannot be empty\");\n return;\n }\n setError(\"\");\n onUpdate({ activeBlocks: [...blocks, newBlock] });\n setNewBlock(\"\");\n };\n\n /**\n * Handles block deletion\n * @param {number} index - The index of the block to delete\n */\n const handleDelete = (index) => {\n const updatedBlocks = blocks.filter((_, i) => i !== index);\n onUpdate({ activeBlocks: updatedBlocks });\n };\n\n return (\n

Active Blocks

\n {block}\n \n

\n );\n}\n\n/**\n * TaskList component\n * @param {{tasks: Task[], onUpdate: Function}} props\n * @returns {React.ReactElement}\n */\nfunction TaskList({ tasks, onUpdate }) {\n const [newTask, setNewTask] = useState({ description: \"\", priority: \"medium\", assignedTo: \"\" });\n const [error, setError] = useState(\"\");\n const [sortBy, setSortBy] = useState(\"id\");\n const [filterPriority, setFilterPriority] = useState(\"all\");\n\n /**\n * Handles form submission\n * @param {React.FormEvent} e - The form event\n */\n const handleSubmit = (e) => {\n e.preventDefault();\n if (!newTask.description.trim()) {\n setError(\"Description cannot be empty\");\n return;\n }\n setError(\"\");\n onUpdate({\n pendingTasks: [...tasks, { ...newTask, id: tasks.length + 1, created: new Date(), status: \"pending\" }],\n });\n setNewTask({ description: \"\", priority: \"medium\", assignedTo: \"\" });\n };\n\n /**\n * Handles task deletion\n * @param {number} id - The ID of the task to delete\n */\n const handleDelete = (id) => {\n const updatedTasks = tasks.filter(task => task.id !== id);\n onUpdate({ pendingTasks: updatedTasks });\n };\n\n /**\n * Handles task update\n * @param {number} id - The ID of the task to update\n * @param {Partial} update - The update to apply to the task\n */\n const handleUpdate = (id, update) => {\n const updatedTasks = tasks.map(task => task.id === id ? { ...task, ...update } : task);\n onUpdate({ pendingTasks: updatedTasks });\n };\n\n const sortedAndFilteredTasks = tasks\n .filter(task => filterPriority === \"all\" || task.priority === filterPriority)\n .sort((a, b) => {\n if (sortBy === \"priority\") {\n const priorityOrder = { low: 1, medium: 2, high: 3 };\n return priorityOrder[b.priority] - priorityOrder[a.priority];\n }\n return a[sortBy] > b[sortBy] ? 1 : -1;\n });\n\n return (\n

Pending Tasks

\n \n \n

\n handleUpdate(task.id, { description: e.target.value })}\n />\n handleUpdate(task.id, { priority: e.target.value })}\n >\n \n \n \n \n handleUpdate(task.id, { assignedTo: e.target.value })}\n placeholder=\"Assigned To\"\n />\n \n

\n );\n}\n\n/**\n * StepList component\n * @param {{steps: Step[], onUpdate: Function}} props\n * @returns {React.ReactElement}\n */\nfunction StepList({ steps, onUpdate }) {\n const [newStep, setNewStep] = useState({ description: \"\", priority: \"medium\" });\n const [error, setError] = useState(\"\");\n const [sortBy, setSortBy] = useState(\"id\");\n const [filterPriority, setFilterPriority] = useState(\"all\");\n\n /**\n * Handles form submission\n * @param {React.FormEvent} e - The form event\n */\n const handleSubmit = (e) => {\n e.preventDefault();\n if (!newStep.description.trim()) {\n setError(\"Description cannot be empty\");\n return;\n }\n setError(\"\");\n onUpdate({ nextSteps: [...steps, { ...newStep, id: steps.length + 1, created: new Date(), status: \"pending\" }] });\n setNewStep({ description: \"\", priority: \"medium\" });\n };\n\n /**\n * Handles step deletion\n * @param {number} id - The ID of the step to delete\n */\n const handleDelete = (id) => {\n const updatedSteps = steps.filter(step => step.id !== id);\n onUpdate({ nextSteps: updatedSteps });\n };\n\n /**\n * Handles step update\n * @param {number} id - The ID of the step to update\n * @param {Partial} update - The update to apply to the step\n */\n const handleUpdate = (id, update) => {\n const updatedSteps = steps.map(step => step.id === id ? { ...step, ...update } : step);\n onUpdate({ nextSteps: updatedSteps });\n };\n\n const sortedAndFilteredSteps = steps\n .filter(step => filterPriority === \"all\" || step.priority === filterPriority)\n .sort((a, b) => {\n if (sortBy === \"priority\") {\n const priorityOrder = { low: 1, medium: 2, high: 3 };\n return priorityOrder[b.priority] - priorityOrder[a.priority];\n }\n return a[sortBy] > b[sortBy] ? 1 : -1;\n });\n\n return (\n

Next Steps

\n \n \n

\n handleUpdate(step.id, { description: e.target.value })}\n />\n handleUpdate(step.id, { priority: e.target.value })}\n >\n \n \n \n \n \n

\n );\n}\n\n/**\n * ChangeList component\n * @param {{changes: Change[]}} props\n * @returns {React.ReactElement}\n */\nfunction ChangeList({ changes }) {\n return (\n

Recent Changes

\n {change.type}: {change.description} - {new Date(change.timestamp).toLocaleString()}\n

\n );\n}\n\n/**\n * Client-side initialization\n */\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\n\nif (typeof document !== \"undefined\") {\n client();\n}\n\n// Server-side code\n/**\n * Handles server requests\n * @param {Request} req - The incoming request\n * @returns {Promise} The server response\n */\nexport default async function server(req: Request): Promise {\n const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n const { blob } = await import(\"https://esm.town/v/std/blob\");\n\n const SCHEMA_VERSION = 1;\n const KEY = new URL(import.meta.url).pathname.split(\"/\").at(-1);\n\n // Initialize database\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${KEY}_project_state_${SCHEMA_VERSION} (\n id INTEGER PRIMARY KEY,\n state TEXT NOT NULL\n )\n `);\n\n /**\n * Authenticates the request\n * @param {Request} req - The incoming request\n * @throws {Error} If authentication fails\n */\n const authenticate = async (req: Request) => {\n const authHeader = req.headers.get(\"Authorization\");\n if (!authHeader || !authHeader.startsWith(\"Basic \")) {\n throw new Error(\"Authentication required\");\n }\n const base64Credentials = authHeader.split(\" \")[1];\n const credentials = atob(base64Credentials);\n const [username, password] = credentials.split(\":\");\n // TODO: Implement proper authentication logic\n if (username !== \"admin\" || password !== \"password\") {\n throw new Error(\"Invalid credentials\");\n }\n };\n\n /**\n * Validates the input data\n * @param {any} data - The input data to validate\n * @throws {Error} If validation fails\n */\n const validateInput = (data: any) => {\n if (typeof data !== \"object\" || data === null) {\n throw new Error(\"Invalid input: must be an object\");\n }\n // Add more specific validation rules here\n };\n\n /**\n * Retrieves the current state\n * @returns {Promise} The current state or null if not found\n */\n const getState = async () => {\n const result = await sqlite.execute(`SELECT state FROM ${KEY}_project_state_${SCHEMA_VERSION} WHERE id = 1`);\n return result.rows[0] ? JSON.parse(result.rows[0].state) : null;\n };\n\n /**\n * Saves the current state\n * @param {ProjectState} state - The state to save\n */\n const saveState = async (state: any) => {\n const stateJson = JSON.stringify(state);\n await sqlite.execute(\n `\n INSERT OR REPLACE INTO ${KEY}_project_state_${SCHEMA_VERSION} (id, state)\n VALUES (1, ?)\n `,\n [stateJson],\n );\n };\n\n /**\n * Notifies the webhook of a change\n * @param {Change} change - The change to notify about\n */\n const notifyWebhook = async (change: any) => {\n const webhookUrl = await blob.get(\"webhook_url\");\n if (webhookUrl) {\n try {\n await fetch(webhookUrl, {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify(change),\n });\n } catch (error) {\n console.error(\"Failed to notify webhook:\", error);\n }\n }\n };\n\n try {\n await authenticate(req);\n\n if (req.method === \"GET\" && req.url.endsWith(\"/api/state\")) {\n const state = await getState();\n return Response.json(state || {});\n } else if (req.method === \"POST\" && req.url.endsWith(\"/api/state\")) {\n const update = await req.json();\n validateInput(update);\n let state = await getState() || {};\n state = { ...state, ...update, lastUpdate: new Date() };\n await saveState(state);\n await notifyWebhook({ type: \"state_update\", description: \"State updated\" });\n return Response.json(state);\n } else if (req.method === \"GET\") {\n return new Response(\n `\n \n \n Project Context Tracker\n \n \n \n \n

\n \n \n \n \n `,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n },\n );\n } else {\n return new Response(\"Not Found\", { status: 404 });\n }\n } catch (error) {\n console.error(error);\n return new Response(error.message, { status: 500 });\n }\n}\n\nconst css = `\nbody {\n font-family: Arial, sans-serif;\n line-height: 1.6;\n margin: 0;\n padding: 20px;\n background-color: #f4f4f4;\n}\n\n.app-container {\n max-width: 800px;\n margin: 0 auto;\n}\n\nh1, h2 {\n color: #333;\n}\n\n.section {\n background: #fff;\n padding: 15px;\n border-radius: 5px;\n margin-bottom: 20px;\n}\n\ninput, select, button {\n margin: 5px;\n padding: 5px;\n}\n\nul {\n list-style-type: none;\n padding: 0;\n}\n\nli {\n background: #fff;\n margin: 5px 0;\n padding: 10px;\n border-radius: 5px;\n display: flex;\n align-items: center;\n}\n\n.delete-btn {\n background-color: #ff4d4d;\n color: white;\n border: none;\n padding: 5px 10px;\n border-radius: 3px;\n cursor: pointer;\n}\n\n.error {\n border: 1px solid red;\n}\n\n.error-message {\n color: red;\n font-size: 0.9em;\n}\n\n.controls {\n margin-bottom: 10px;\n}\n\n@media (max-width: 600px) {\n body {\n padding: 10px;\n }\n\n li {\n flex-direction: column;\n align-items: flex-start;\n }\n\n input, select, button {\n width: 100%;\n margin: 5px 0;\n }\n}\n`;","deleted","label",[98],"permalink","https://www.val.town/x/toowired/Windsurf/code/projectcontext","extension","actionData","errors"]