/** @jsxImportSource https://esm.sh/react@18.2.0 */ import React, { useState, useEffect } from "https://esm.sh/react@18.2.0"; import { createRoot } from "https://esm.sh/react-dom@18.2.0/client"; // API Documentation /** * @typedef {Object} ProjectState * @property {Date} lastUpdate - The last update timestamp * @property {string} currentPhase - The current project phase * @property {string[]} activeBlocks - List of active blocks * @property {Task[]} pendingTasks - List of pending tasks * @property {Step[]} nextSteps - List of next steps * @property {Change[]} recentChanges - List of recent changes */ /** * @typedef {Object} Task * @property {number} id - Task ID * @property {string} description - Task description * @property {string} priority - Task priority (low, medium, high) * @property {string} assignedTo - Person assigned to the task * @property {Date} created - Creation date * @property {string} status - Task status */ /** * @typedef {Object} Step * @property {number} id - Step ID * @property {string} description - Step description * @property {string} priority - Step priority (low, medium, high) * @property {Date} created - Creation date * @property {string} status - Step status */ /** * @typedef {Object} Change * @property {number} id - Change ID * @property {string} type - Change type * @property {string} description - Change description * @property {Date} timestamp - Change timestamp */ /** * Main App component * @returns {React.ReactElement} */ function App() { const [state, setState] = useState(null); const [error, setError] = useState(null); const [isLoading, setIsLoading] = useState(false); useEffect(() => { fetchState(); }, []); /** * Fetches the current state from the server */ const fetchState = async () => { setIsLoading(true); setError(null); try { const response = await fetch("/api/state"); if (!response.ok) throw new Error("Failed to fetch state"); const data = await response.json(); setState(data); } catch (err) { setError(err.message); } finally { setIsLoading(false); } }; /** * Handles state updates * @param {Partial} update - The update to apply to the state */ const handleUpdate = async (update) => { setIsLoading(true); setError(null); try { const response = await fetch("/api/state", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(update), }); if (!response.ok) throw new Error("Failed to update state"); await fetchState(); } catch (err) { setError(err.message); } finally { setIsLoading(false); } }; if (isLoading) return

; if (error) return

Error: {error}

; if (!state) return null; return (

Project Context Tracker

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

Current Phase

{error &&

{error}

}

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

Active Blocks

{block}

{error &&

{error}

}

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

Pending Tasks

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

{error &&

{error}

}

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

Next Steps

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

{error &&

{error}

}

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

Recent Changes

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

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

`, { headers: { "content-type": "text/html", }, }); } else { return new Response("Not Found", { status: 404 }); } } catch (error) { console.error(error); return new Response(error.message, { status: 500 }); } } const css = ` body { font-family: Arial, sans-serif; line-height: 1.6; margin: 0; padding: 20px; background-color: #f4f4f4; } .app-container { max-width: 800px; margin: 0 auto; } h1, h2 { color: #333; } .section { background: #fff; padding: 15px; border-radius: 5px; margin-bottom: 20px; } input, select, button { margin: 5px; padding: 5px; } ul { list-style-type: none; padding: 0; } li { background: #fff; margin: 5px 0; padding: 10px; border-radius: 5px; display: flex; align-items: center; } .delete-btn { background-color: #ff4d4d; color: white; border: none; padding: 5px 10px; border-radius: 3px; cursor: pointer; } .error { border: 1px solid red; } .error-message { color: red; font-size: 0.9em; } .controls { margin-bottom: 10px; } @media (max-width: 600px) { body { padding: 10px; } li { flex-direction: column; align-items: flex-start; } input, select, button { width: 100%; margin: 5px 0; } } `;

toowired