setDescription(e.target.value)}\n            className=\"phone-input\"\n          />\n        );\n      case \"date\":\n        return (\n          <input \n            type=\"datetime-local\" \n            value={dueDate}\n            onChange={(e) => setDueDate(e.target.value)}\n            required \n            className=\"phone-input date-input\"\n          />\n        );\n      case \"priority\":\n        return (\n          <select \n            value={priority}\n            onChange={(e) => setPriority(e.target.value)}\n            className=\"phone-input\"\n          >\n            <option value=\"low\">🍃 Low Priority (Breeze)</option>\n            <option value=\"medium\">🌟 Medium Priority (Steady)</option>\n            <option value=\"high\">🔥 High Priority (Urgent)</option>\n          </select>\n        );\n    }\n  };\n\n  return (\n    <form onSubmit={handleSubmit} className=\"task-form\">\n      <div className=\"tab-navigation\">\n        {[\"title\", \"description\", \"date\", \"priority\"].map(tab => (\n          <button \n            key={tab} \n            type=\"button\"\n            className={activeTab === tab ? \"active\" : \"\"}\n            onClick={() => setActiveTab(tab)}\n          >\n            {tab.charAt(0).toUpperCase() + tab.slice(1)}\n          </button>\n        ))}\n      </div>\n      <div className=\"tab-content\">\n        {renderTabContent()}\n      </div>\n      <button type=\"submit\" className=\"submit-btn\">Create Task</button>\n    </form>\n  );\n}\n\nfunction TaskList() {\n  const [tasks, setTasks] = useState([]);\n\n  const fetchTasks = async () => {\n    const response = await fetch(\"/get-tasks\");\n    const data = await response.json();\n    setTasks(data);\n  };\n\n  const updateTaskStatus = async (taskId, newStatus) => {\n    const response = await fetch(\"/update-task-status\", {\n      method: \"POST\",\n      headers: { \"Content-Type\": \"application/json\" },\n      body: JSON.stringify({ id: taskId, status: newStatus })\n    });\n    if (response.ok) {\n      fetchTasks();\n    }\n  };\n\n  const deleteTask = async (taskId) => {\n    const response = await fetch(\"/delete-task\", {\n      method: \"POST\",\n      headers: { \"Content-Type\": \"application/json\" },\n      body: JSON.stringify({ id: taskId })\n    });\n    if (response.ok) {\n      fetchTasks();\n    }\n  };\n\n  useEffect(() => {\n    fetchTasks();\n  }, []);\n\n  const formatDate = (dateString) => {\n    return new Date(dateString).toLocaleString();\n  };\n\n  const getPriorityEmoji = (priority) => {\n    switch(priority) {\n      case 'low': return '🍃';\n      case 'medium': return '🌟';\n      case 'high': return '🔥';\n      default: return '';\n    }\n  };\n\n  return (\n    <div className=\"task-list\">\n      <h2>My Tasks</h2>\n      {tasks.map((task) => (\n        <div \n          key={task.id} \n          className={`task-card priority-${task.priority} status-${task.status}`}\n        >\n          <div className=\"task-header\">\n            <h3>{task.title}</h3>\n            <span className={`priority-badge ${task.priority}`}>\n              {getPriorityEmoji(task.priority)} {task.priority.charAt(0).toUpperCase() + task.priority.slice(1)}\n            </span>\n          </div>\n          <p>{task.description}</p>\n          <div className=\"task-footer\">\n            <span>Due: {formatDate(task.due_date)}</span>\n            <div className=\"task-actions\">\n              {task.status === \"pending\" && (\n                <button \n                  onClick={() => updateTaskStatus(task.id, \"completed\")}\n                  className=\"complete-btn\"\n                >\n                  ✓ Complete\n                </button>\n              )}\n              {task.status === \"completed\" && (\n                <button \n                  onClick={() => updateTaskStatus(task.id, \"pending\")}\n                  className=\"reopen-btn\"\n                >\n                  ↩ Reopen\n                </button>\n              )}\n              <button \n                onClick={() => deleteTask(task.id)}\n                className=\"delete-btn\"\n              >\n                🗑️ Delete\n              </button>\n            </div>\n          </div>\n        </div>\n      ))}\n    </div>\n  );\n}\n\nfunction App() {\n  const [refreshTasks, setRefreshTasks] = useState(0);\n\n  return (\n    <div className=\"phone-frame\">\n      <div className=\"phone-screen\">\n        <div className=\"phone-header\">\n          <span className=\"time\">9:41</span>\n          <div className=\"status-icons\">\n            <span>🔋</span>\n            <span>📶</span>\n          </div>\n        </div>\n        <div className=\"app-container\">\n          <h1>📱 E-Pulse</h1>\n          <TaskForm onSubmit={() => setRefreshTasks(prev => prev + 1)} />\n          <TaskList key={refreshTasks} />\n          <a \n            href={import.meta.url.replace(\"esm.town\", \"val.town\")} \n            target=\"_top\" \n            className=\"source-link\"\n          >\n            View Source\n          </a>\n        </div>\n        <div className=\"phone-home-indicator\"></div>\n      </div>\n    </div>\n  );\n}\n\nfunction client() {\n  createRoot(document.getElementById(\"root\")).render(<App />);\n}\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise<Response> {\n  const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n  const KEY = new URL(import.meta.url).pathname.split(\"/\").at(-1);\n  const SCHEMA_VERSION = 1;\n\n  // Create tasks table\n  await sqlite.execute(`\n    CREATE TABLE IF NOT EXISTS ${KEY}_tasks_${SCHEMA_VERSION} (\n      id INTEGER PRIMARY KEY AUTOINCREMENT,\n      title TEXT NOT NULL,\n      description TEXT,\n      due_date DATETIME NOT NULL,\n      priority TEXT NOT NULL DEFAULT 'medium',\n      status TEXT NOT NULL DEFAULT 'pending',\n      created_at DATETIME DEFAULT CURRENT_TIMESTAMP\n    )\n  `);\n\n  // Handle task submission\n  if (request.method === \"POST\" && new URL(request.url).pathname === \"/submit-task\") {\n    const { title, description, dueDate, priority, status } = await request.json();\n    await sqlite.execute(\n      `INSERT INTO ${KEY}_tasks_${SCHEMA_VERSION} \n      (title, description, due_date, priority, status) \n      VALUES (?, ?, ?, ?, ?)`,\n      [title, description, dueDate, priority, status]\n    );\n    return new Response(JSON.stringify({ success: true }), { \n      headers: { \"Content-Type\": \"application/json\" } \n    });\n  }\n\n  // Handle get tasks\n  if (request.method === \"GET\" && new URL(request.url).pathname === \"/get-tasks\") {\n    const tasks = await sqlite.execute(\n      `SELECT * FROM ${KEY}_tasks_${SCHEMA_VERSION} \n      ORDER BY \n        CASE status \n          WHEN 'pending' THEN 1 \n          WHEN 'completed' THEN 2 \n        END, \n      due_date ASC`\n    );\n    return new Response(JSON.stringify(tasks.rows), { \n      headers: { \"Content-Type\": \"application/json\" } \n    });\n  }\n\n  // Handle update task status\n  if (request.method === \"POST\" && new URL(request.url).pathname === \"/update-task-status\") {\n    const { id, status } = await request.json();\n    await sqlite.execute(\n      `UPDATE ${KEY}_tasks_${SCHEMA_VERSION} SET status = ? WHERE id = ?`,\n      [status, id]\n    );\n    return new Response(JSON.stringify({ success: true }), { \n      headers: { \"Content-Type\": \"application/json\" } \n    });\n  }\n\n  // Handle delete task\n  if (request.method === \"POST\" && new URL(request.url).pathname === \"/delete-task\") {\n    const { id } = await request.json();\n    await sqlite.execute(\n      `DELETE FROM ${KEY}_tasks_${SCHEMA_VERSION} WHERE id = ?`,\n      [id]\n    );\n    return new Response(JSON.stringify({ success: true }), { \n      headers: { \"Content-Type\": \"application/json\" } \n    });\n  }\n\n  // Serve HTML\n  return new Response(`\n    <html>\n      <head>\n        <title>E-Pulse</title>\n        <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n        <style>${css}</style>\n      </head>\n      <body>\n        <div id=\"root\"></div>\n        <script src=\"https://esm.town/v/std/catch\"></script>\n        <script type=\"module\" src=\"${import.meta.url}\"></script>\n      </body>\n    </html>\n  `, {\n    headers: { \"Content-Type\": \"text/html\" }\n  });\n}\n\nconst css = `\nbody {\n  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n  margin: 0;\n  padding: 0;\n  background-color: #f4f7f6;\n  color: #333;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  min-height: 100vh;\n}\n\n.phone-frame {\n  background-color: #000;\n  border-radius: 40px;\n  padding: 10px;\n  width: 375px;\n  height: 812px;\n  box-shadow: 0 20px 40px rgba(0,0,0,0.2);\n}\n\n.phone-screen {\n  background-color: white;\n  border-radius: 30px;\n  height: 100%;\n  overflow: hidden;\n  position: relative;\n}\n\n.phone-header {\n  display: flex;\n  justify-content: space-between;\n  padding: 10px 15px;\n  background-color: rgba(255,255,255,0.9);\n}\n\n.phone-header .time {\n  font-weight: bold;\n}\n\n.phone-header .status-icons {\n  display: flex;\n  gap: 5px;\n}\n\n.phone-home-indicator {\n  position: absolute;\n  bottom: 10px;\n  left: 50%;\n  transform: translateX(-50%);\n  width: 134px;\n  height: 5px;\n  background-color: #000;\n  border-radius: 5px;\n}\n\n.app-container {\n  max-width: 100%;\n  padding: 20px;\n  padding-bottom: 60px;\n  overflow-y: auto;\n  height: calc(100% - 100px);\n}\n\nh1 {\n  text-align: center;\n  color: #ff1493;\n  margin-bottom: 30px;\n}\n\n.task-form {\n  background: white;\n  padding: 20px;\n  border-radius: 8px;\n  box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n  margin-bottom: 20px;\n}\n\n.tab-navigation {\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: 20px;\n}\n\n.tab-navigation button {\n  flex: 1;\n  padding: 10px;\n  background-color: #e0e0e0;\n  border: none;\n  border-radius: 5px;\n  margin: 0 5px;\n  cursor: pointer;\n  transition: all 0.3s ease;\n}\n\n.tab-navigation button.active {\n  background-color: #ff1493;\n  color: white;\n}\n\n.tab-content {\n  margin-bottom: 20px;\n}\n\n.phone-input {\n  width: 100%;\n  margin-bottom: 15px;\n  padding: 10px;\n  border: 1px solid #ddd;\n  border-radius: 4px;\n}\n\n.date-input {\n  background-color: #4B0082; /* Indigo */\n  color: white;\n}\n\n.date-input::-webkit-calendar-picker-indicator {\n  filter: invert(1);\n}\n\n.form-row {\n  display: flex;\n  gap: 10px;\n}\n\n.form-row input,\n.form-row select {\n  flex: 1;\n}\n\n.task-list {\n  background: white;\n  border-radius: 8px;\n  box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n  padding: 20px;\n}\n\n.task-card {\n  background: #f9f9f9;\n  border-left: 5px solid;\n  margin-bottom: 15px;\n  padding: 15px;\n  border-radius: 4px;\n}\n\n.task-card.priority-low { border-color: #00ffff; } /* Neon Cyan */\n.task-card.priority-medium { border-color: #ff6fff; } /* Neon Pink */\n.task-card.priority-high { border-color: #ff1493; } /* Deep Pink */\n\n.task-card.status-completed {\n  opacity: 0.6;\n  text-decoration: line-through;\n}\n\n.task-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 10px;\n}\n\n.priority-badge {\n  padding: 3px 8px;\n  border-radius: 12px;\n  font-size: 0.8em;\n}\n\n.priority-badge.low { \n  background: #00ffff; \n  color: black; \n  text-shadow: 0 0 5px rgba(0,255,255,0.7);\n}\n.priority-badge.medium { \n  background: #ff6fff; \n  color: black; \n  text-shadow: 0 0 5px rgba(255,111,255,0.7);\n}\n.priority-badge.high { \n  background: #ff1493; \n  color: white; \n  text-shadow: 0 0 5px rgba(255,20,147,0.7);\n}\n\n.task-footer {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-top: 10px;\n}\n\n.task-actions button {\n  margin-left: 10px;\n  padding: 5px 10px;\n  border: none;\n  border-radius: 4px;\n  cursor: pointer;\n}\n\n.complete-btn {\n  background-color: #00ff00;\n  color: black;\n  text-shadow: 0 0 5px rgba(0,255,0,0.7);\n}\n\n.reopen-btn {\n  background-color: #00ffff;\n  color: black;\n  text-shadow: 0 0 5px rgba(0,255,255,0.7);\n}\n\n.delete-btn {\n  background-color: #ff4500;\n  color: white;\n  text-shadow: 0 0 5px rgba(255,69,0,0.7);\n}\n\n.submit-btn {\n  width: 100%;\n  padding: 10px;\n  background-color: #ff1493;\n  color: white;\n  border: none;\n  border-radius: 5px;\n  cursor: pointer;\n}\n\n.source-link {\n  display: block;\n  text-align: center;\n  margin-top: 20px;\n  color: #666;\n  text-decoration: none;\n}\n`;","createdAt",["D",1739895784212],"version",4,"currentUserHasLiked","likeCount","forkCount","referenceCount","dependencyCount",1,"commentCount","prCount","mergedPr",{"_129":130,"_131":132},"handle","DeeGemini","profileImageUrl","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18ydERkUENNTzNJNmV3ZXI0TklCRUMyR3RYMDMifQ","forkedVal","interval","slug","DeeGemini/taskManagerApp","description","@jsxImportSource https://esm.sh/react@18.2.0","versions",[141,144,148,151,154],{"_117":118,"_142":-5,"_115":143,"_112":110},"prId",["D",1739895784212],{"_117":145,"_142":-5,"_115":146,"_112":147},3,["D",1739895623713],"417d11a0-ee14-11ef-b6cd-e6cdfca9ef9f",{"_117":90,"_142":-5,"_115":149,"_112":150},["D",1739894926380],"a1da190a-ee12-11ef-94f7-e6cdfca9ef9f",{"_117":124,"_142":-5,"_115":152,"_112":153},["D",1739894681055],"0f9f6fc2-ee12-11ef-b359-e6cdfca9ef9f",{"_117":31,"_142":-5,"_115":155,"_112":156},["D",1739894134431],"c9cf745c-ee10-11ef-b3fc-e6cdfca9ef9f","recentThread","breadcrumbs","comments",[],"isOwner","routes/_app.v.$handle.$name.dependencies",{"_164":165,"_231":124,"_232":136,"_233":31,"_94":234},"dependenciesList",[166],{"_100":167,"_168":169},"08f95904-3584-11ef-8995-0e10024e3b32","initialData",{"_98":170,"_95":171,"_100":167,"_102":172,"_103":-5,"_104":105,"_106":173,"_107":174,"_109":175,"_111":26,"_112":175,"_113":176,"_115":177,"_117":178,"_119":26,"_120":179,"_122":180,"_123":124,"_125":124,"_121":181,"_126":31,"_127":-5,"_20":182,"_133":185,"_134":-7,"_137":190,"_191":-5,"_135":192,"_139":193},"sqlite","a0bf3b31-15a5-4d5c-880e-4b1e22c9bc18","76a8911e-393e-11ef-8e71-de64eea55b61","# LLM-Safe Fork of @std/sqlite\n\nWe found that LLMs have trouble with the inputs and outputs of our @std/sqlite method.\n\n1. It expects the input to be `(sql: string, args: any[])` but it's `{ sql: string, args: any[] }`\n2. It expects the output to be objects, but they are arrays\n\nInstead of struggling to teach it, we built this val to be a wrapper around @std/sqlite that adheres to what the LLMs expect. \n\nThis val is also backwards-compatible with @std/sqlite, so we're considering merging it in.","script","5631f2d0-dcb9-11ef-80ec-e6cdfca9ef9f","import { API_URL } from \"https://esm.town/v/std/API_URL\";\nimport { LibsqlError, type ResultSet, type Row, type TransactionMode } from \"npm:@libsql/client\";\nimport { z } from \"npm:zod\";\n\n/**\n * Every Val Town account comes with its own private\n * [SQLite database](https://www.sqlite.org/) that\n * is accessible from any of your vals.\n * ([Docs ↗](https://docs.val.town/std/sqlite))\n */\nexport const sqlite = {\n  /**\n   * Executes a SQLite statement.\n   *\n   * @param {InStatement} statement - The SQLite statement to execute.\n   * @example String query:\n   * `sqlite.execute(\"SELECT 1;\")`\n   * @example Query with arguments:\n   * `sqlite.execute({sql: \"SELECT * from books WHERE year > ?;\", args: [2020]})`\n   */\n  execute,\n\n  /**\n   * Executes a batch of SQLite statements.\n   *\n   * @param {InStatement[]} statements - An array of SQLite statements to execute.\n   * @param {TransactionMode} [mode] - The transaction mode for the batch execution.\n   */\n  batch,\n};\n\n// ------------\n// Functions\n// ------------\n\nasync function execute(statement: InStatement, args?: InArgs): Promise<ResultSet> {\n  const res = await fetch(`${API_URL}/v1/sqlite/execute`, {\n    method: \"POST\",\n    headers: {\n      Authorization: `Bearer ${Deno.env.get(\"valtown\")}`,\n    },\n    body: JSON.stringify({ statement: normalizeStatement(statement, args) }),\n  });\n  if (!res.ok) {\n    throw createResError(await res.text());\n  }\n  const resultSet = await res.json();\n  return upgradeResultSet(resultSet);\n}\n\nasync function batch(statements: InStatement[], mode?: TransactionMode): Promise<ResultSet[]> {\n  if (mode && ![\"write\", \"read\", \"deferred\"].includes(mode)) {\n    throw new Error(\"Invalid transaction mode provided to sqlite.batch. Must be 'write', 'read', or 'deferred.\");\n  }\n  const res = await fetch(`${API_URL}/v1/sqlite/batch`, {\n    method: \"POST\",\n    headers: {\n      Authorization: `Bearer ${Deno.env.get(\"valtown\")}`,\n    },\n    body: JSON.stringify({ statements: statements.map(s => normalizeStatement(s)), mode }),\n  });\n  if (!res.ok) {\n    throw createResError(await res.text());\n  }\n  const resultSets = await res.json();\n  return resultSets.map(upgradeResultSet);\n}\n\nfunction createResError(body: string) {\n  try {\n    const e = zLibsqlError.parse(JSON.parse(body));\n    // e.message already contains the code, and LibsqlError adds the\n    // code to the beginning, so we remove it here\n    const msg = e.message.replace(e.code, \"\").replace(/^:\\s+/, \"\");\n    return new LibsqlError(msg, e.code, e.rawCode);\n  } catch (_) {\n    // Failed to parse libsql error\n  }\n  return new Error(body);\n}\n\n/* Val Town's Turso Proxy returns rows as an array of values\n * Yet the LibSQL API has a Row type which behave as an array or object,\n * ie you can access it via numerical index or string\n */\ninterface ImpoverishedResultSet extends ResultSet {\n  rows: any[];\n}\n\nfunction normalizeStatement(statement: InStatement, args?: InArgs) {\n  if (Array.isArray(statement)) {\n    // for the case of an array of arrays\n    return normalizeStatement(statement[0], statement[1]);\n  }\n  if (typeof statement === \"string\") {\n    if (args) {\n      return { sql: statement, args };\n    } else return statement;\n  }\n  else if (typeof statement === \"object\") {\n    if (statement.args) {\n      return statement;\n    }\n    if (args) {\n      return { sql: statement.sql, args };\n    }\n    return statement.sql;\n  }\n  else throw new Error(\"Error normalizing sql input\");\n}\n\nfunction upgradeResultSet(results: ImpoverishedResultSet): ResultSet {\n  return {\n    ...results,\n    rows: results.rows.map(row => rowFromSql(row, results.columns)),\n  };\n}\n\n// adapted from\n// https://github.com/tursodatabase/libsql-client-ts/blob/17dd996b840c950dd22b871adfe4ba0eb4a5ead3/packages/libsql-client/src/sqlite3.ts#L314C1-L337C2\nfunction rowFromSql(\n  sqlRow: Array<unknown>,\n  columns: Array<string>,\n): Row {\n  const row = {};\n  // make sure that the \"length\" property is not enumerable\n  Object.defineProperty(row, \"length\", { value: sqlRow.length });\n  for (let i = 0; i < sqlRow.length; ++i) {\n    const value = sqlRow[i];\n    Object.defineProperty(row, i, { value });\n\n    const column = columns[i];\n    if (!Object.hasOwn(row, column)) {\n      Object.defineProperty(row, column, {\n        value,\n        enumerable: true,\n        configurable: true,\n        writable: true,\n      });\n    }\n  }\n  return row as Row;\n}\n\n// ------------\n// Helpers\n// ------------\n\nconst zLibsqlError = z.object({\n  message: z.string(),\n  code: z.string(),\n  rawCode: z.number().optional(),\n});\n\n// We patch these types to only support JSON values\nexport type InValue = null | string | number | boolean;\nexport type InArgs = Array<InValue> | Record<string, InValue>;\nexport type InStatement = {\n  /**\n   * The SQL statement to execute.\n   */\n  sql: string;\n\n  /**\n   * The arguments to bind to the SQL statement.\n   */\n  args: InArgs;\n} | string;",["D",1737987404484],13,10,14582,21,{"_129":183,"_131":184},"stevekrouse","https://images.clerk.dev/uploaded/img_2PqHa2Gsy93xQrjh2w78Xu0cChW.jpeg",{"_112":186,"_129":187,"_98":170,"_117":188,"_189":-5},"56c849ee-f1f8-11ee-9b87-cab58f78796a","std",6,"prDisabledHint","LLM-Safe Fork of @std/sqlite We found that LLMs have trouble with the inputs and outputs of our @std/sqlite method. It expects the input to be  (sql: string, args: any[])  but it's  { sql: string, args: any[] } It expects the output to be objects, but they are arrays Instead of struggling to teach it, we built this val to be a wrapper around @std/sqlite that adheres to what the LLMs expect. This val is also backwards-compatible with @std/sqlite, so we're considering merging it in.","latestEvaluation","stevekrouse/sqlite",[194,198,202,206,209,213,217,221,224,228],{"_115":195,"_117":178,"_196":197},["D",1737987404484],"n","1",{"_115":199,"_117":200,"_196":201},["D",1724087412304],12,"2",{"_115":203,"_117":204,"_196":205},["D",1724087404512],11,"3",{"_115":207,"_117":179,"_196":208},["D",1723494410142],"4",{"_115":210,"_117":211,"_196":212},["D",1723494389876],9,"5",{"_115":214,"_117":215,"_196":216},["D",1723494345363],8,"6",{"_115":218,"_117":219,"_196":220},["D",1723494323065],7,"7",{"_115":222,"_117":188,"_196":223},["D",1719604370206],"8",{"_115":225,"_117":226,"_196":227},["D",1719604260994],5,"9",{"_115":229,"_117":118,"_196":230},["D",1719604144103],"10","dependenciesCount","valname","page",{"_112":110,"_98":99,"_129":130,"_11":96,"_117":118,"_100":101,"_113":114,"_104":105,"_111":26,"_135":136},"routes/_app","actionData","errors"]
</article></body></html>