[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_288":289,"_290":291},"routes/_app.x.$handle.$name",{"_110":109,"_38":50,"_119":96,"_33":120,"_13":14,"_121":-5,"_11":122,"_123":124,"_125":126,"_127":128,"_129":130,"_26":-5,"_131":132,"_133":134,"_135":31,"_136":137,"_138":65,"_139":-5,"_140":-5,"_141":142},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":18,"_19":-5},"project",{"_48":49,"_38":50,"_43":51,"_52":-5,"_53":31,"_54":55,"_56":55,"_57":58,"_59":60,"_19":61,"_62":63,"_64":65,"_66":-5,"_67":-5,"_68":69,"_70":71,"_72":73,"_74":75,"_76":77,"_78":-5,"_79":80,"_81":80,"_82":83,"_84":83,"_85":83,"_86":80,"_87":80,"_88":89,"_90":91,"_92":93,"_94":31},"version",9,"changes",[25],"aiChatInfo",{"_20":21,"_22":-5,"_23":-5,"_24":-5},"userId","aiChatMessageId","1a05305b-63dd-4f15-8c38-b3dc1ea50b04","aiChatThreadId","aiChatThreadUserId","aiChatThreadTitle",{"_26":27,"_28":29,"_30":31,"_32":31,"_33":34,"_35":34},"file",{"_36":37,"_38":34,"_39":26,"_40":42,"_43":44,"_45":14,"_46":47,"_30":31},"previous",{"_36":37,"_38":34,"_39":26,"_40":41},"deleted",false,"deletedHere","path","README.md","latestPath","fileId","019f468b-b4f0-7369-b149-dfc02b3ec667","name","fileType","content","# React + Hono Starter\n\nA minimal starter template for building client-side React apps with a Hono\nbackend on Val Town. Click **Remix** to get your own copy.\n\n## Picking a starter\n\n| Starter | When to pick it |\n| --- | --- |\n| [`basic-html-starter`](https://www.val.town/x/templates/basic-html-starter) | Static HTML pages. Sprinkle of vanilla JS. No server-side rendering. |\n| [`hono-jsx-starter`](https://www.val.town/x/templates/hono-jsx-starter) | Dynamic server-rendered HTML with JSX. API routes. No React, no SPA. |\n| **[`react-hono-starter`](https://www.val.town/x/templates/react-hono-starter)** *(you're here)* | Client-side React SPA with a Hono API backend. |\n\n**Want to build UI?** Start writing React components in\n[`frontend/components/`](/frontend/components/). Import them into `App.tsx` and\nyou're good to go. Styling is [Twind](https://twind.style/) — just use Tailwind\nutility classes, zero config.\n\n**Want to add an API?** Add routes in [`index.ts`](/index.ts) (there's a\ncommented-out example). Fetch them from your React components.\n\n## Architecture\n\n```mermaid\ngraph LR\n Browser -->|\"GET /\"| Hono[\"index.ts
(Hono server)\"]\n Hono -->|serves| HTML[\"index.html\"]\n HTML -->|loads| Entry[\"index.tsx\"]\n Entry -->|renders| App[\"App.tsx\"]\n App -->|renders| Counter[\"Counter.tsx\"]\n```\n\n## File structure\n\n```\nindex.ts ← Hono backend (serves frontend + API routes)\nfrontend/\n index.html ← HTML shell (loads Twind + React)\n index.tsx ← React entrypoint (mounts )\n favicon.svg ← App icon\n components/\n App.tsx ← Root component (layout + view source link)\n Counter.tsx ← Example component with state\n```\n\n## How it works\n\n1. **`index.ts`** is the HTTP entrypoint — a Hono server that serves the\n frontend and any API routes you add.\n2. **`frontend/index.html`** loads Twind and the React entrypoint.\n3. **`frontend/index.tsx`** mounts the React app.\n4. **`frontend/components/App.tsx`** is the root layout — add new components\n alongside it.\n5. **`frontend/components/Counter.tsx`** is an example stateful component —\n replace it with your own!\n\n## Next steps\n\n- Add API routes in `index.ts`\n- Add new components in `frontend/components/`\n- Add a SQLite database — see the\n [React Hono Example](https://www.val.town/x/stevekrouse/reactHonoExample) for\n a full-stack example with database, queries, and shared types\n","# WhatsApp Kanban\n\nA cron job that fetches your WhatsApp messages via [Unipile](https://developer.unipile.com/) and turns them into a todo kanban board.\n\n## How it works\n\n```mermaid\ngraph LR\n WA[WhatsApp] -->|Unipile API| Sync[\"sync.ts
(cron every 6h)\"]\n Sync -->|stores todos| DB[(SQLite)]\n UI[\"index.ts
(Hono server)\"] -->|reads/writes| DB\n Browser -->|loads kanban UI| UI\n```\n\n1. **`sync.ts`** (interval cron) — runs every 6 hours, fetches new WhatsApp messages from Unipile's `GET /api/v1/messages` endpoint, and stores them as todo cards in the \"Inbox\" column.\n2. **`index.ts`** (HTTP) — serves the React kanban UI and API routes for moving/deleting cards.\n3. **SQLite** — stores todos with 4 statuses: `inbox → todo → doing → done`.\n\n## Setup\n\n### 1. Connect your WhatsApp account to Unipile\n\nFollow the [Unipile WhatsApp guide](https://developer.unipile.com/docs/whatsapp.md) to connect your WhatsApp account. Note your **account ID** from the Unipile dashboard.\n\n### 2. Set environment variables\n\n| Env var | Description |\n| --- | --- |\n| `UNIPILE_DSN` | Your Unipile data source URL (e.g. `https://xxx.unipile.com`) |\n| `UNIPILE_API_KEY` | Your Unipile access token |\n| `UNIPILE_ACCOUNT_ID` | The WhatsApp account ID linked in Unipile |\n| `BOARD_PASSPHRASE` | A passphrase to protect your kanban board (since the val is public on free tier) |\n\n👉 Add UNIPILE_DSN here: https://www.val.town/x/pc_style/whatsapp-kanban/environment-variables?key=UNIPILE_DSN\n👉 Add UNIPILE_API_KEY here: https://www.val.town/x/pc_style/whatsapp-kanban/environment-variables?key=UNIPILE_API_KEY\n👉 Add UNIPILE_ACCOUNT_ID here: https://www.val.town/x/pc_style/whatsapp-kanban/environment-variables?key=UNIPILE_ACCOUNT_ID\n👉 Add BOARD_PASSPHRASE here: https://www.val.town/x/pc_style/whatsapp-kanban/environment-variables?key=BOARD_PASSPHRASE\n\n### 3. Test the sync\n\nRun `sync.ts` manually from the Val Town editor to pull your first batch of messages.\n\n## File structure\n\n```\nsync.ts ← Cron job (every 6h) — fetches WhatsApp messages\nindex.ts ← Hono server — serves UI + API routes\nlib/\n db.ts ← SQLite schema + todo CRUD helpers\n unipile.ts ← Unipile API client\nfrontend/\n index.html ← HTML shell\n index.tsx ← React entrypoint\n components/App.tsx ← Kanban board UI\n```\n\n## API endpoints\n\n| Method | Path | Description |\n| --- | --- | --- |\n| `GET` | `/api/todos` | List all todos |\n| `PATCH` | `/api/todos/:id` | Move a card (`{ status: \"inbox\\|todo\\|doing\\|done\" }`) |\n| `DELETE` | `/api/todos/:id` | Delete a card |\n","createdAt",["D",1783595094729],"branchVersion","branchId","a52da4fb-15ea-4f30-bbe0-39f3771bb4ad","id","b692b696-2b15-441d-a326-d712abe74fe4","whatsapp-kanban",["D",1783594988490],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","WhatsApp messages to kanban board via Unipile API","imageUrl","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/64dc00cc-94d9-47dd-81b1-dde02610d900/square512?exp=1789534799&sig=2fe932419d898cd124d0961cab25a5a9c3bd76c8b30cb3b9e71257c7b34e60a2","0910d18e-3719-43e3-9e3f-2f3a7688390c","pinnedFileId","019f468b-b4f0-7369-b149-e27a1d885fbe","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","019f447f-11d2-72d3-9ef7-3fd5b5a0910e","tursoName","b692b6962b15441da326d712abe74fe4","tursoHostname","b692b6962b15441da326d712abe74fe4-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789438272026],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_110":109,"_118":114},"org",{"_110":109,"_111":112,"_113":114,"_19":61,"_115":116,"_117":31},"branch",{"_13":95,"_38":96,"_48":47,"_97":49,"_98":99,"_100":101,"_102":55,"_103":104,"_105":106,"_107":50,"_108":109},"isOwned",18,"main","projectId","forkedBranchId","961078ea-f528-11ef-aa68-569c3dd06744","forkedBranchVersion",89,"forkedProjectPrivacy","forkedProjectId","96102714-f528-11ef-aa68-569c3dd06744","forkedProjectOrgId","019aa807-52c2-709c-928b-2029bae9a558","projectName","userHandle","pc_style","handle","displayName","Adam","avatar","https://lh3.googleusercontent.com/a/ACg8ocKezdd7dJ4xoybqc1M7fdCby5p64ImbU5Jg7JpmalJ4ktU1Bw=s96-c","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_48":49,"_38":50,"_43":283,"_52":-5,"_53":31,"_54":55,"_56":55,"_57":58,"_59":60,"_19":61,"_62":63,"_64":65,"_66":-5,"_67":-5,"_68":69,"_70":71,"_72":73,"_74":75,"_76":284,"_78":-5,"_79":80,"_81":80,"_82":83,"_84":83,"_85":83,"_86":80,"_87":80,"_88":285,"_90":286,"_92":287,"_94":31},"tree",[203,209,212,213,214],"files",[203,204,205,206,207,208,209,210,211,212,213,214],"counts",{"_193":69,"_194":174,"_195":69,"_196":197,"_198":199},"contents",[154,155,156,157,158],"upstreamProject",{"_48":104,"_38":150,"_57":151,"_59":60,"_54":55,"_88":152},"upstreamBranch",{"_48":99,"_43":143,"_144":145,"_38":96,"_97":104,"_13":146,"_98":-5,"_100":-5,"_147":148,"_52":-5,"_94":31,"_54":55,"_108":149,"_70":106,"_107":150},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1740674013689],"updatedAt",["D",1785420707976],91,"lockfileKey","1785420708123-esm.town_v_templates_react-hono-starter@91-main","templates","react-hono-starter","Starter template with client-side React & Hono server",{"_110":149,"_118":153},"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/129cab32-3bd7-4c3e-f39b-f12900c76100/square512?exp=1789534799&sig=94d49ad984a50880ef894a3794e08842e7b9b626be771ff48da114d7d9a149ed",{"_48":188,"_38":189,"_36":190,"_162":-5,"_46":47,"_45":174,"_164":65,"_43":191,"_13":69,"_39":186,"_40":-5,"_30":31,"_168":-5,"_33":192},{"_48":181,"_38":182,"_36":183,"_162":-5,"_46":47,"_45":184,"_164":65,"_43":185,"_13":69,"_39":186,"_40":-5,"_30":31,"_168":-5,"_33":187},{"_48":178,"_38":34,"_36":37,"_162":-5,"_46":47,"_45":14,"_164":31,"_43":179,"_13":174,"_39":26,"_40":42,"_30":31,"_168":-5,"_33":180},{"_48":170,"_38":171,"_36":63,"_162":-5,"_46":47,"_45":172,"_164":31,"_43":173,"_13":174,"_39":175,"_40":176,"_30":31,"_168":-5,"_33":177},{"_48":159,"_38":160,"_36":161,"_162":-5,"_46":47,"_45":163,"_164":31,"_43":165,"_13":69,"_39":166,"_40":167,"_30":31,"_168":-5,"_33":169},"a612924f-75ec-40dd-928e-df9af686a27c","sync.ts","dfb90b4e-7b85-11f1-989d-1607ee4eb77e","parentId",4,"latest",["D",1783595033908],"interval","/**\n * Cron job — runs every 6 hours, fetches new WhatsApp messages from Unipile\n * and stores them as todo cards in the \"inbox\" column.\n *\n * Schedule: every 6 hours (UTC): 00:00, 06:00, 12:00, 18:00\n */\nimport { initDB, insertTodo, todoExists } from \"./lib/db.ts\";\nimport { getChatMap, getMessagesSince } from \"./lib/unipile.ts\";\n\nexport default async function(interval: Interval) {\n await initDB();\n\n // Use lastRunAt for incremental sync, or 24h ago on first run\n const since = interval.lastRunAt ?? new Date(Date.now() - 24 * 60 * 60 * 1000);\n\n console.log(`Syncing WhatsApp messages since ${since.toISOString()}…`);\n\n // Fetch chat names so we can label each todo\n let chatMap: Map;\n try {\n chatMap = await getChatMap();\n } catch (e) {\n console.error(\"Failed to fetch chat map:\", e);\n chatMap = new Map();\n }\n\n // Fetch messages since last run\n const messages = await getMessagesSince(since);\n console.log(`Found ${messages.length} messages since last sync`);\n\n let newCount = 0;\n for (const msg of messages) {\n // Skip messages we already have (dedup by message_id)\n const exists = await todoExists(msg.message_id);\n if (exists) continue;\n\n const chatName = chatMap.get(msg.chat_id) ?? null;\n\n await insertTodo({\n message_id: msg.message_id,\n chat_id: msg.chat_id,\n chat_name: chatName,\n sender_id: msg.sender_id,\n text: msg.text,\n message_timestamp: msg.timestamp,\n });\n newCount++;\n }\n\n console.log(`Sync complete. ${newCount} new todos added.`);\n}\n","label",[160],"d3cd6483-7953-4bf5-8a37-6dd651f48b16","index.ts",5,["D",1783595052723],1,"http","import { parseVal, serveFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Hono } from \"npm:hono\";\nimport { cors } from \"npm:hono/cors\";\nimport {\n deleteTodo,\n getAllTodos,\n initDB,\n updateTodoStatus,\n type TodoStatus,\n} from \"./lib/db.ts\";\n\nconst app = new Hono();\n\n// --- Simple passphrase auth ---\nconst PASSPHRASE = Deno.env.get(\"BOARD_PASSPHRASE\");\n\nfunction checkAuth(c: any): boolean {\n if (!PASSPHRASE) return true; // no passphrase set = open access\n const auth = c.req.header(\"Authorization\") ?? \"\";\n return auth === `Bearer ${PASSPHRASE}`;\n}\n\n// --- Static frontend ---\napp.get(\"/\", () => serveFile(\"/frontend/index.html\"));\napp.get(\"/frontend/**/*\", (c) => serveFile(c.req.path));\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\n// --- API routes ---\napp.use(\"/api/*\", cors());\n\napp.get(\"/api/todos\", async (c) => {\n if (!checkAuth(c)) return c.json({ error: \"Unauthorized\" }, 401);\n await initDB();\n const todos = await getAllTodos();\n return c.json({ todos });\n});\n\napp.patch(\"/api/todos/:id\", async (c) => {\n if (!checkAuth(c)) return c.json({ error: \"Unauthorized\" }, 401);\n const id = Number(c.req.param(\"id\"));\n const body = await c.req.json();\n const status = body.status as TodoStatus;\n const valid: TodoStatus[] = [\"inbox\", \"todo\", \"doing\", \"done\"];\n if (!valid.includes(status)) {\n return c.json({ error: \"Invalid status\" }, 400);\n }\n await updateTodoStatus(id, status);\n return c.json({ ok: true });\n});\n\napp.delete(\"/api/todos/:id\", async (c) => {\n if (!checkAuth(c)) return c.json({ error: \"Unauthorized\" }, 401);\n const id = Number(c.req.param(\"id\"));\n await deleteTodo(id);\n return c.json({ ok: true });\n});\n\napp.onError((err) => Promise.reject(err));\n\nexport default app.fetch;\n",[171],"b7ef73e1-0270-4051-ac29-3e78eeb64879",["D",1783595094729],[34],"8ad64489-dc06-480b-a0c6-bc25388b4983","lib","2e91bb20-4ddb-46a1-baac-39eaf20965ba",2,["D",1783595012387],"directory",[182],"d9efa8a0-aa61-481d-8bb5-65332a0ea515","frontend","019f468b-b4f0-7369-b149-d8843be286ad",["D",1783594988490],[189],"pulls","branches","forks","envVars",{"_200":172,"_202":69},"connections",{"_200":69,"_201":69},"count","unfilledCount","emptyCount",{"_48":188,"_38":189,"_36":190,"_162":-5,"_46":47,"_45":174,"_164":65,"_43":280,"_13":69,"_39":186,"_40":-5,"_30":31,"_168":-5,"_216":281,"_33":282},{"_48":276,"_38":275,"_36":269,"_162":190,"_46":47,"_45":174,"_164":65,"_43":277,"_13":69,"_39":186,"_40":-5,"_30":31,"_168":-5,"_216":278,"_33":279},{"_48":266,"_38":267,"_36":268,"_162":269,"_46":47,"_45":270,"_164":31,"_43":271,"_13":174,"_39":230,"_40":272,"_30":31,"_168":-5,"_216":273,"_33":274},{"_48":259,"_38":260,"_36":261,"_162":190,"_46":47,"_45":174,"_164":65,"_43":262,"_13":69,"_39":26,"_40":263,"_30":31,"_168":-5,"_216":264,"_33":265},{"_48":251,"_38":252,"_36":253,"_162":190,"_46":47,"_45":254,"_164":65,"_43":255,"_13":174,"_39":26,"_40":256,"_30":31,"_168":-5,"_216":257,"_33":258},{"_48":244,"_38":245,"_36":246,"_162":190,"_46":47,"_45":174,"_164":65,"_43":247,"_13":69,"_39":230,"_40":248,"_30":31,"_168":-5,"_216":249,"_33":250},{"_48":181,"_38":182,"_36":183,"_162":-5,"_46":47,"_45":184,"_164":65,"_43":241,"_13":69,"_39":186,"_40":-5,"_30":31,"_168":-5,"_216":242,"_33":243},{"_48":234,"_38":235,"_36":236,"_162":183,"_46":47,"_45":184,"_164":31,"_43":237,"_13":69,"_39":230,"_40":238,"_30":31,"_168":-5,"_216":239,"_33":240},{"_48":225,"_38":226,"_36":227,"_162":183,"_46":47,"_45":228,"_164":31,"_43":229,"_13":69,"_39":230,"_40":231,"_30":31,"_168":-5,"_216":232,"_33":233},{"_48":178,"_38":34,"_36":37,"_162":-5,"_46":47,"_45":14,"_164":31,"_43":222,"_13":174,"_39":26,"_40":42,"_30":31,"_168":-5,"_216":223,"_33":224},{"_48":170,"_38":171,"_36":63,"_162":-5,"_46":47,"_45":172,"_164":31,"_43":219,"_13":174,"_39":175,"_40":176,"_30":31,"_168":-5,"_216":220,"_33":221},{"_48":159,"_38":160,"_36":161,"_162":-5,"_46":47,"_45":163,"_164":31,"_43":215,"_13":69,"_39":166,"_40":167,"_30":31,"_168":-5,"_216":217,"_33":218},["D",1783595033908],"children",[],[160],["D",1783595052723],[],[171],["D",1783595094729],[],[34],"8ed0bf35-5aa4-4a86-8125-10cf5858d183","unipile.ts","dfb3650e-7b85-11f1-bc53-1607ee4eb77e",3,["D",1783595033907],"script","/**\n * Unipile API client — fetches WhatsApp messages and chat metadata.\n * Docs: https://developer.unipile.com/docs/get-messages\n *\n * Required env vars:\n * UNIPILE_DSN — your Unipile data source name (e.g. https://xxx.unipile.com)\n * UNIPILE_API_KEY — your Unipile access token\n * UNIPILE_ACCOUNT_ID — the WhatsApp account ID linked in Unipile\n */\n\nexport interface UnipileMessage {\n message_id: string;\n chat_id: string;\n sender_id: string;\n text: string | null;\n timestamp: string;\n account_id: string;\n}\n\nfunction baseUrl(): string {\n const dsn = Deno.env.get(\"UNIPILE_DSN\");\n if (!dsn) throw new Error(\"UNIPILE_DSN env var not set\");\n return dsn.replace(/\\/$/, \"\");\n}\n\nfunction headers(): Record {\n const key = Deno.env.get(\"UNIPILE_API_KEY\");\n if (!key) throw new Error(\"UNIPILE_API_KEY env var not set\");\n return {\n \"X-API-KEY\": key,\n \"accept\": \"application/json\",\n };\n}\n\nfunction accountId(): string {\n const id = Deno.env.get(\"UNIPILE_ACCOUNT_ID\");\n if (!id) throw new Error(\"UNIPILE_ACCOUNT_ID env var not set\");\n return id;\n}\n\n/**\n * Fetch all WhatsApp chats to build a chat_id → name map.\n */\nexport async function getChatMap(): Promise> {\n const url = new URL(`${baseUrl()}/api/v1/chats`);\n url.searchParams.set(\"account_id\", accountId());\n url.searchParams.set(\"account_type\", \"WHATSAPP\");\n url.searchParams.set(\"limit\", \"250\");\n\n const res = await fetch(url, { headers: headers() });\n if (!res.ok) {\n throw new Error(`Unipile chats API error: ${res.status} ${await res.text()}`);\n }\n\n const data = await res.json();\n const map = new Map();\n for (const chat of data.items ?? []) {\n if (chat.id && chat.name) {\n map.set(chat.id, chat.name);\n }\n }\n return map;\n}\n\n/**\n * Fetch messages since a given date. Uses the \"after\" parameter\n * and handles cursor pagination.\n */\nexport async function getMessagesSince(\n since: Date,\n): Promise {\n const allMessages: UnipileMessage[] = [];\n let cursor: string | null = null;\n\n // Fetch a slightly wider window than strictly necessary to catch\n // any messages missed during previous runs\n const after = new Date(since.getTime() - 60 * 60 * 1000); // 1h buffer\n\n for (let page = 0; page < 10; page++) {\n const url = new URL(`${baseUrl()}/api/v1/messages`);\n url.searchParams.set(\"account_id\", accountId());\n url.searchParams.set(\"after\", after.toISOString());\n url.searchParams.set(\"limit\", \"250\");\n if (cursor) url.searchParams.set(\"cursor\", cursor);\n\n const res = await fetch(url, { headers: headers() });\n if (!res.ok) {\n throw new Error(\n `Unipile messages API error: ${res.status} ${await res.text()}`,\n );\n }\n\n const data = await res.json();\n for (const msg of data.items ?? []) {\n if (msg.message_id && msg.text) {\n allMessages.push({\n message_id: msg.message_id,\n chat_id: msg.chat_id,\n sender_id: msg.sender_id,\n text: msg.text,\n timestamp: msg.timestamp,\n account_id: msg.account_id,\n });\n }\n }\n\n cursor = data.cursor;\n if (!cursor) break;\n }\n\n return allMessages;\n}\n",[],[182,226],"8a3d137d-113a-42a9-ad8c-3f75e2687da6","db.ts","d2e06c5a-7b85-11f1-88fa-1607ee4eb77e",["D",1783595012387],"import { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\n\nexport type TodoStatus = \"inbox\" | \"todo\" | \"doing\" | \"done\";\n\nexport interface Todo {\n id: number;\n message_id: string;\n chat_id: string | null;\n chat_name: string | null;\n sender_id: string | null;\n sender_name: string | null;\n text: string | null;\n status: TodoStatus;\n message_timestamp: string | null;\n created_at: string;\n updated_at: string;\n}\n\nexport const COLUMNS: { key: TodoStatus; label: string; color: string }[] = [\n { key: \"inbox\", label: \"📥 Inbox\", color: \"bg-gray-100\" },\n { key: \"todo\", label: \"📋 To Do\", color: \"bg-blue-100\" },\n { key: \"doing\", label: \"🔄 In Progress\", color: \"bg-amber-100\" },\n { key: \"done\", label: \"✅ Done\", color: \"bg-green-100\" },\n];\n\nexport async function initDB() {\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS todos (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n message_id TEXT UNIQUE NOT NULL,\n chat_id TEXT,\n chat_name TEXT,\n sender_id TEXT,\n sender_name TEXT,\n text TEXT,\n status TEXT NOT NULL DEFAULT 'inbox',\n message_timestamp TEXT,\n created_at TEXT NOT NULL DEFAULT (datetime('now')),\n updated_at TEXT NOT NULL DEFAULT (datetime('now'))\n )\n `);\n\n await sqlite.execute(`\n CREATE INDEX IF NOT EXISTS idx_todos_status ON todos(status)\n `);\n}\n\nexport async function insertTodo(\n msg: {\n message_id: string;\n chat_id?: string | null;\n chat_name?: string | null;\n sender_id?: string | null;\n sender_name?: string | null;\n text?: string | null;\n message_timestamp?: string | null;\n },\n): Promise {\n try {\n await sqlite.execute({\n sql: `INSERT OR IGNORE INTO todos (message_id, chat_id, chat_name, sender_id, sender_name, text, message_timestamp)\n VALUES (?, ?, ?, ?, ?, ?, ?)`,\n args: [\n msg.message_id,\n msg.chat_id ?? null,\n msg.chat_name ?? null,\n msg.sender_id ?? null,\n msg.sender_name ?? null,\n msg.text ?? null,\n msg.message_timestamp ?? null,\n ],\n });\n return true;\n } catch (e) {\n console.error(\"Failed to insert todo:\", e);\n return false;\n }\n}\n\nexport async function getAllTodos(): Promise {\n await initDB();\n const result = await sqlite.execute(\n \"SELECT * FROM todos ORDER BY message_timestamp DESC\",\n );\n return result.rows as unknown as Todo[];\n}\n\nexport async function updateTodoStatus(\n id: number,\n status: TodoStatus,\n): Promise {\n await sqlite.execute({\n sql: \"UPDATE todos SET status = ?, updated_at = datetime('now') WHERE id = ?\",\n args: [status, id],\n });\n}\n\nexport async function deleteTodo(id: number): Promise {\n await sqlite.execute({\n sql: \"DELETE FROM todos WHERE id = ?\",\n args: [id],\n });\n}\n\nexport async function todoExists(messageId: string): Promise {\n const result = await sqlite.execute({\n sql: \"SELECT 1 FROM todos WHERE message_id = ? LIMIT 1\",\n args: [messageId],\n });\n return result.rows.length > 0;\n}\n",[],[182,235],["D",1783595012387],[210,211],[182],"16df641a-01b7-4b1f-ba39-d4de7794f77a","index.tsx","019f468b-b4f0-7369-b149-d5eb81405e19",["D",1783594988490],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { App } from \"./components/App.tsx\";\n\nconst root = document.getElementById(\"root\");\nif (!root) {\n throw new Error(\"No root element found\");\n}\n\ncreateRoot(root).render();",[],[189,245],"f856b6ca-00de-4f73-8a82-47ce9611659f","index.html","019f468b-b4f0-7369-b149-d2dba6a9cd16",7,["D",1783595082382],"\n\n \n \n \n WhatsApp Kanban\n \n \n \n \n

\n \n \n \n\n",[],[189,252],"ecfda0a3-6b59-4c95-a760-16dae247d012","favicon.svg","019f468b-b4f0-7369-b149-cf47cce5f1ec",["D",1783594988490],"\n",[],[189,260],"a8dc0f62-be0f-4867-bdbd-5484b0c835b8","App.tsx","019f468b-b4f0-7369-b149-c3f2f6f7a406","019f468b-b4f0-7369-b149-cbac2c950bf8",6,["D",1783595082368],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useState, useCallback } from \"https://esm.sh/react@18.2.0\";\n\ninterface Todo {\n id: number;\n message_id: string;\n chat_id: string | null;\n chat_name: string | null;\n sender_id: string | null;\n text: string | null;\n status: string;\n message_timestamp: string | null;\n created_at: string;\n}\n\nconst COLUMNS = [\n { key: \"inbox\", label: \"📥 Inbox\", color: \"bg-gray-100\", border: \"border-gray-300\" },\n { key: \"todo\", label: \"📋 To Do\", color: \"bg-blue-50\", border: \"border-blue-300\" },\n { key: \"doing\", label: \"🔄 In Progress\", color: \"bg-amber-50\", border: \"border-amber-300\" },\n { key: \"done\", label: \"✅ Done\", color: \"bg-green-50\", border: \"border-green-300\" },\n];\n\nfunction getAuthHeader(): string | null {\n return localStorage.getItem(\"board_passphrase\");\n}\n\nfunction apiHeaders(): Record {\n const h: Record = { \"Content-Type\": \"application/json\" };\n const pass = getAuthHeader();\n if (pass) h[\"Authorization\"] = `Bearer ${pass}`;\n return h;\n}\n\nfunction timeAgo(ts: string | null): string {\n if (!ts) return \"\";\n const d = new Date(ts);\n const diff = Date.now() - d.getTime();\n const hrs = Math.floor(diff / 3600000);\n if (hrs < 1) return \"just now\";\n if (hrs < 24) return `${hrs}h ago`;\n const days = Math.floor(hrs / 24);\n return `${days}d ago`;\n}\n\nfunction Card({ todo, onMove, onDelete }: {\n todo: Todo;\n onMove: (id: number, dir: -1 | 1) => void;\n onDelete: (id: number) => void;\n}) {\n const idx = COLUMNS.findIndex((c) => c.key === todo.status);\n return (\n

{todo.text}

\n {todo.chat_name && 💬 {todo.chat_name}}\n {\" \"}\n {timeAgo(todo.message_timestamp)}\n

\n onMove(todo.id, -1)}\n disabled={idx <= 0}\n class=\"text-gray-400 hover:text-gray-700 disabled:opacity-20 disabled:cursor-not-allowed text-sm px-1\"\n title=\"Move left\"\n >\n ←\n \n onMove(todo.id, 1)}\n disabled={idx >= COLUMNS.length - 1}\n class=\"text-gray-400 hover:text-gray-700 disabled:opacity-20 disabled:cursor-not-allowed text-sm px-1\"\n title=\"Move right\"\n >\n →\n \n onDelete(todo.id)}\n class=\"text-gray-300 hover:text-red-500 text-sm px-1 ml-1\"\n title=\"Delete\"\n >\n ✕\n \n

\n );\n}\n\nexport function App() {\n const [todos, setTodos] = useState([]);\n const [loading, setLoading] = useState(true);\n const [authed, setAuthed] = useState(() => !!getAuthHeader());\n const [passInput, setPassInput] = useState(\"\");\n const [authError, setAuthError] = useState(false);\n\n const fetchTodos = useCallback(async () => {\n try {\n const res = await fetch(\"/api/todos\", { headers: apiHeaders() });\n if (res.status === 401) {\n setAuthed(false);\n return;\n }\n const data = await res.json();\n setTodos(data.todos ?? []);\n } catch (e) {\n console.error(\"Failed to fetch todos:\", e);\n } finally {\n setLoading(false);\n }\n }, []);\n\n useEffect(() => {\n if (authed) fetchTodos();\n }, [authed, fetchTodos]);\n\n // Auto-refresh every 60s\n useEffect(() => {\n if (!authed) return;\n const t = setInterval(fetchTodos, 60000);\n return () => clearInterval(t);\n }, [authed, fetchTodos]);\n\n async function handleLogin() {\n localStorage.setItem(\"board_passphrase\", passInput);\n const res = await fetch(\"/api/todos\", { headers: apiHeaders() });\n if (res.status === 401) {\n localStorage.removeItem(\"board_passphrase\");\n setAuthError(true);\n return;\n }\n setAuthed(true);\n setAuthError(false);\n }\n\n async function handleMove(id: number, dir: -1 | 1) {\n const todo = todos.find((t) => t.id === id);\n if (!todo) return;\n const idx = COLUMNS.findIndex((c) => c.key === todo.status);\n const next = COLUMNS[idx + dir];\n if (!next) return;\n // Optimistic update\n setTodos((prev) => prev.map((t) => t.id === id ? { ...t, status: next.key } : t));\n await fetch(`/api/todos/${id}`, {\n method: \"PATCH\",\n headers: apiHeaders(),\n body: JSON.stringify({ status: next.key }),\n });\n }\n\n async function handleDelete(id: number) {\n setTodos((prev) => prev.filter((t) => t.id !== id));\n await fetch(`/api/todos/${id}`, {\n method: \"DELETE\",\n headers: apiHeaders(),\n });\n }\n\n if (!authed) {\n return (\n

🔐 WhatsApp Kanban

Enter your passphrase to access the board

\n setPassInput((e.target as HTMLInputElement).value)}\n onKeyDown={(e) => e.key === \"Enter\" && handleLogin()}\n placeholder=\"Passphrase\"\n class=\"w-full border border-gray-300 rounded-lg px-4 py-2 mb-2 focus:outline-none focus:ring-2 focus:ring-blue-400\"\n />\n {authError &&

Wrong passphrase

}\n \n Enter\n \n

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

WhatsApp Kanban

\n {todos.length} cards\n { setLoading(true); fetchTodos(); }}\n class=\"text-sm text-blue-500 hover:text-blue-700\"\n >\n ↻ Refresh\n \n

\n\n {loading ? (\n

Loading…

\n ) : (\n

\n {COLUMNS.map((col) => {\n const colTodos = todos.filter((t) => t.status === col.key);\n return (\n

{col.label}

\n {colTodos.length}\n

\n {colTodos.length === 0 ? (\n

No cards

\n ) : (\n colTodos.map((todo) => (\n \n ))\n )}\n

\n );\n })}\n

\n )}\n\n

\n View source\n {\" · \"}\n Auto-refreshes every 60s · Syncs from WhatsApp every 6h\n

\n );\n}\n",[],[189,275,267],"components","81e05fa2-23f4-4b4a-9286-7bf0cef33dd1",["D",1783594988490],[205],[189,275],["D",1783594988490],[204,206,207,208],[189],["D",1783594988490],["D",1789438272026],{"_110":109,"_118":114},{"_110":109,"_111":112,"_113":114,"_19":61,"_115":116,"_117":31},{"_13":95,"_38":96,"_48":47,"_97":49,"_98":99,"_100":101,"_102":55,"_103":104,"_105":106,"_107":50,"_108":109},"ctx",{"_88":-5,"_140":321,"_322":323,"_324":325,"_326":31,"_327":31,"_328":31,"_329":65,"_330":-5,"_331":-7,"_332":-7,"_333":69,"_334":31,"_335":31,"_336":-5,"_337":31,"_338":31,"_339":31,"_340":-5},"ENV",{"_292":293,"_294":295,"_296":96,"_297":298,"_299":300,"_301":302,"_303":304,"_305":306,"_307":308,"_309":310,"_311":312,"_313":314,"_315":316,"_317":318,"_319":320},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Diff · v9