rick-miniapp

Write docs/miniapp-design.md covering: 1) Pages: Dashboard (nightshift runs overview), Todos (CRUD list), Reminders (upcoming + create). 2) API surface: new endpoints needed beyond existing /api/runs (todo CRUD, reminder CRUD, initData validation). 3) Auth flow: Telegram initData HMAC-SHA256 validation as middleware. 4) Tech: vanilla HTML/CSS/JS served from rick-dashboard under /webapp/, Telegram WebApp SDK. 5) File layout in the rick-dashboard app. 6) Data model: todos table, reminders table in SQLite.

In rick-dashboard, add HTTP middleware that validates Telegram WebApp initData. Steps: 1) Parse the initData query string. 2) Extract and remove the hash parameter. 3) Sort remaining params alphabetically, join with newline. 4) Compute HMAC-SHA256 using WebAppData secret (HMAC-SHA256 of bot token with key "WebAppData"). 5) Compare computed hash with provided hash. 6) Check auth_date is recent (within 1 hour). 7) Apply middleware to /webapp/ and /api/webapp/ routes. 8) Pass validated user info in request context. Add config for bot token.

Add REST API for todos in rick-dashboard: 1) SQLite migration: todos table (id, user_id, title, completed, created_at, updated_at). 2) Endpoints under /api/webapp/todos: GET (list for user), POST (create), PATCH /:id (toggle complete, edit title), DELETE /:id. 3) Filter by user_id from validated initData. 4) Keep it simple — no categories or priorities for now.

Add REST API for reminders in rick-dashboard: 1) SQLite migration: reminders table (id, user_id, title, remind_at, created_at). 2) Endpoints under /api/webapp/reminders: GET (list upcoming for user), POST (create), DELETE /:id. 3) Filter by user_id from validated initData. 4) Order by remind_at ascending. 5) Include past reminders with a flag.

Create the Mini App frontend scaffold served at /webapp/: 1) index.html loading telegram-web-app.js, calling Telegram.WebApp.ready(). 2) CSS using Telegram theme params (var(--tg-theme-bg-color), etc.) for native look. 3) Tab bar navigation: Dashboard, Todos, Reminders. 4) Mobile-first responsive layout respecting safe area insets. 5) JS module structure for each view. 6) Register routes in rick-dashboard HTTP server to serve static files from internal/app/webapp/.

Build the Dashboard tab: 1) Fetch from existing /api/runs endpoint. 2) Show runs as cards with project name, status badge (color-coded), task summary (done/total). 3) Tap a run to see task list with status indicators. 4) Show active run prominently at top. 5) Pull-to-refresh or auto-refresh. 6) Use Telegram.WebApp.MainButton for quick actions if appropriate.

Build the Todos tab: 1) Fetch from /api/webapp/todos. 2) List todos with checkboxes for completion toggle. 3) Add todo: input field + MainButton or inline add button. 4) Swipe or long-press to delete (with Telegram.WebApp.showConfirm). 5) Optimistic UI updates. 6) Empty state message. 7) Send initData header with every API request for auth.

Build the Reminders tab: 1) Fetch from /api/webapp/reminders. 2) List upcoming reminders sorted by time, with relative time display. 3) Create reminder: title input + date/time picker + MainButton to save. 4) Delete with confirmation. 5) Visual distinction between upcoming and past reminders. 6) Send initData header with every API request.

Register the Mini App with the Telegram bot: 1) In bot-rick, add a /webapp command or configure the bot menu button to open the Mini App URL. 2) The URL should point to rick-dashboard /webapp/ endpoint. 3) Since rick-dashboard listens on localhost, we need to either: a) set up a public URL via existing reverse proxy/tunnel, or b) document the setup needed. 4) Check if there is an existing nginx/caddy config and add the route. 5) Use Telegram Bot API setChatMenuButton or setMyCommands.

End-to-end verification and polish: 1) Test the full flow: open Mini App from Telegram → auth validates → all three views work. 2) Check responsive layout on different screen sizes. 3) Verify Telegram theme integration (light/dark mode). 4) Add loading states and error handling. 5) Ensure smooth transitions between views. 6) Test with real Telegram WebApp environment (or Telegram WebApp test page). 7) Fix any issues found.