\n \n \n \n\n",[],[174,249],"ecfda0a3-6b59-4c95-a760-16dae247d012","favicon.svg","019f468b-b4f0-7369-b149-cf47cce5f1ec",["D",1783594988490],"\n",[],[174,257],"4373f0ed-0d9b-43c6-8f6e-df96d144d8c2","Settings.tsx","afe65998-7b8b-11f1-b37f-1607ee4eb77e","019f468b-b4f0-7369-b149-cbac2c950bf8",16,["D",1783597530688],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\n\ninterface Chat {\n id: string;\n name: string;\n}\n\ninterface Mapping {\n chat_id: string;\n chat_name: string | null;\n project_name: string;\n updated_at: string;\n}\n\nfunction apiHeaders(): Record {\n const h: Record = { \"Content-Type\": \"application/json\" };\n const pass = localStorage.getItem(\"board_passphrase\");\n if (pass) h[\"Authorization\"] = `Bearer ${pass}`;\n return h;\n}\n\nexport function Settings({ onClose }: { onClose: () => void }) {\n const [chats, setChats] = useState([]);\n const [mappings, setMappings] = useState([]);\n const [drafts, setDrafts] = useState>({});\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(null);\n const [saving, setSaving] = useState(null);\n\n async function load() {\n setLoading(true);\n setError(null);\n try {\n const [chatsRes, mapsRes] = await Promise.all([\n fetch(\"/api/chats\", { headers: apiHeaders() }),\n fetch(\"/api/project-mappings\", { headers: apiHeaders() }),\n ]);\n const chatsData = await chatsRes.json();\n const mapsData = await mapsRes.json();\n if (chatsData.error) {\n setError(`Couldn't load WhatsApp chats: ${chatsData.error}`);\n }\n setChats(chatsData.chats ?? []);\n setMappings(mapsData.mappings ?? []);\n } catch (e) {\n setError(String(e));\n } finally {\n setLoading(false);\n }\n }\n\n useEffect(() => {\n load();\n }, []);\n\n const mappingByChat = new Map(mappings.map((m) => [m.chat_id, m]));\n\n async function saveMapping(chatId: string, chatName: string | null) {\n const value = (drafts[chatId] ?? mappingByChat.get(chatId)?.project_name ?? \"\").trim();\n if (!value) return;\n setSaving(chatId);\n try {\n await fetch(`/api/project-mappings/${encodeURIComponent(chatId)}`, {\n method: \"PUT\",\n headers: apiHeaders(),\n body: JSON.stringify({ project_name: value, chat_name: chatName }),\n });\n await load();\n } finally {\n setSaving(null);\n }\n }\n\n async function removeMapping(chatId: string) {\n setSaving(chatId);\n try {\n await fetch(`/api/project-mappings/${encodeURIComponent(chatId)}`, {\n method: \"DELETE\",\n headers: apiHeaders(),\n });\n await load();\n } finally {\n setSaving(null);\n }\n }\n\n // Union of chats fetched live from Unipile + any mapping whose chat isn't in that list\n const rows = [...chats];\n for (const m of mappings) {\n if (!rows.find((c) => c.id === m.chat_id)) {\n rows.push({ id: m.chat_id, name: m.chat_name ?? m.chat_id });\n }\n }\n\n return (\n

⚙️ Client → Project Mapping

\n \n

\n Assign each WhatsApp chat/client to a project name. New todos synced from that chat will be\n tagged with the project automatically.\n

\n\n {error &&

{error}

}\n\n {loading\n ?

Loading…

\n : rows.length === 0\n ?

No WhatsApp chats found yet.

\n : (\n

\n {rows.map((chat) => {\n const mapping = mappingByChat.get(chat.id);\n const draft = drafts[chat.id] ?? mapping?.project_name ?? \"\";\n return (\n

{chat.name}

{chat.id}

\n \n setDrafts((d) => ({ ...d, [chat.id]: (e.target as HTMLInputElement).value }))}\n class=\"w-40 border border-gray-300 rounded-md px-2 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-blue-400\"\n />\n saveMapping(chat.id, chat.name)}\n disabled={saving === chat.id || !draft.trim()}\n class=\"text-xs bg-blue-500 hover:bg-blue-600 disabled:opacity-40 text-white rounded-md px-3 py-1.5\"\n >\n Save\n \n {mapping && (\n removeMapping(chat.id)}\n disabled={saving === chat.id}\n class=\"text-xs text-gray-400 hover:text-red-500 px-1\"\n title=\"Remove mapping\"\n >\n ✕\n \n )}\n

\n );\n })}\n

\n )}\n

\n );\n}\n",[],[174,272,264],"components","1a6aef42-d118-4860-bdcf-c6356d5fb4b2","App.tsx","019f468b-b4f0-7369-b149-c3f2f6f7a406",17,["D",1783597562274],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useCallback, useEffect, useMemo, useState } from \"https://esm.sh/react@18.2.0\";\nimport { Settings } from \"./Settings.tsx\";\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 summary: string | null;\n project: string | null;\n priority: string | null;\n due_date: 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\nconst PRIORITY_STYLE: Record = {\n high: \"bg-red-100 text-red-700\",\n medium: \"bg-amber-100 text-amber-700\",\n low: \"bg-gray-100 text-gray-500\",\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

\n {todo.project && (\n \n 📁 {todo.project}\n \n )}\n {todo.priority && (\n \n {todo.priority}\n \n )}\n {todo.due_date && (\n \n 📅 {todo.due_date}\n \n )}\n

{todo.text}

\n {todo.summary &&

{todo.summary}

}\n

\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 const [showSettings, setShowSettings] = useState(false);\n const [projectFilter, setProjectFilter] = useState(\"all\");\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 const projects = useMemo(() => {\n const set = new Set();\n for (const t of todos) if (t.project) set.add(t.project);\n return [...set].sort();\n }, [todos]);\n\n const visibleTodos = useMemo(() => {\n if (projectFilter === \"all\") return todos;\n if (projectFilter === \"__unassigned__\") return todos.filter((t) => !t.project);\n return todos.filter((t) => t.project === projectFilter);\n }, [todos, projectFilter]);\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 setProjectFilter((e.target as HTMLSelectElement).value)}\n class=\"text-sm border border-gray-300 rounded-lg px-2 py-1 bg-white\"\n >\n \n \n {projects.map((p) => )}\n \n {visibleTodos.length} cards\n { setLoading(true); fetchTodos(); }}\n class=\"text-sm text-blue-500 hover:text-blue-700\"\n >\n ↻ Refresh\n \n setShowSettings(true)}\n class=\"text-sm text-gray-500 hover:text-gray-800\"\n >\n ⚙️ Settings\n \n

\n\n {loading ? (\n

Loading…

\n ) : (\n

\n {COLUMNS.map((col) => {\n const colTodos = visibleTodos.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 · Todos extracted by gpt-oss-120b (Cerebras)\n

\n\n {showSettings && { setShowSettings(false); fetchTodos(); }} />}\n

\n );\n}\n",[],[174,272,274],"81e05fa2-23f4-4b4a-9286-7bf0cef33dd1",["D",1783594988490],[191,192],[174,272],["D",1783594988490],[190,193,194,195],[174],["D",1783594988490],["D",1789525245864],{"_16":17,"_92":88},{"_16":17,"_85":86,"_87":88,"_34":35,"_89":90,"_91":26},{"_69":70,"_20":71,"_18":72,"_73":19,"_74":75,"_76":77,"_78":28,"_79":80,"_81":82,"_83":21,"_84":17},"ctx",{"_62":-5,"_115":326,"_327":328,"_329":330,"_331":26,"_332":26,"_333":26,"_334":39,"_335":-5,"_336":-7,"_337":-7,"_338":43,"_339":26,"_340":26,"_341":-5,"_342":26,"_343":26,"_344":26,"_345":-5},"ENV",{"_297":298,"_299":300,"_301":71,"_302":303,"_304":305,"_306":307,"_308":309,"_310":311,"_312":313,"_314":315,"_316":317,"_318":319,"_320":321,"_322":323,"_324":325},"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"]

Search