Phase 0 (CI/CD): fix root typecheck to cover api+worker+web; reconcile migration story into idempotent db:migrate (db:sync + db:triggers); add Gitea Actions quality/deploy/smoke workflow; rewrite README/AGENTS/DEPLOY docs; add requireWorkspaceAccess + recordActivityForEntity conventions. Phase 1 (critical fixes): calendar delete + drag/resize DnD; canvas card CRUD + bulk save + debounced autosave; logout route; graph edge workspaceId derivation; real analytics endpoints (drop Math.random); task board droppable columns + reorder persistence; Tiptap notes editor with sanitized HTML rendering; remove insecure passkey auth; domain/owner scoping (IDOR) on all by-ID routes + search/ export/realtime scoping; command palette routing + agent mention fetch; agent activity SSE handler; graph fly-to with tracked positions. Phase 2 (UX polish): login on design system; Sonner toasts app-wide; shared Loading/Empty/Error state components; working density/sidebarPos/reduce-motion settings; Inter typography; consolidated status-colors lib; unified detail routes; dashboard sort/realtime/responsive fixes; mobile responsive; a11y (radiogroups, sanitized snippets, badge labels). Phase 3 (features): daily notes timezone fix + delete + autosave + mood/energy create; active-domain store + topbar picker; graph domain picker + navigable entity links; tag assign/remove UI + server-side tag filter; real CSV export + import validation; custom fields on tasks. Phase 4 (advanced): migrate job worker into apps/worker (webhook delivery with HMAC, recurring spawn, ai_dispatch disabled); webhook queue helper + entity event enqueuing + test endpoint fix; recurring scheduledJobs pipeline; agents CRUD + permission editing + activity filters; real notifications feed; MCP polish (validation, error codes, domain scoping, dead sql leftover). Phase 5 (E2E + docs): rewrite Playwright suite for the Vite SPA (15 specs, new auth helpers, chromium-only in CI); add ephemeral-Postgres e2e CI job; rewrite docs/API.md for the real Hono API.
Project E — Web SPA
The frontend SPA for Project E, built with React 19, TanStack Router, and Vite.
Architecture
apps/web/
├── src/
│ ├── components/
│ │ ├── shell/ # App shell: Sidebar, Topbar, CommandPalette, ShortcutsHelp, ThemeProvider
│ │ ├── ui/ # shadcn/ui primitives (button, dialog, input, etc.)
│ │ └── entities/ # Entity-specific components (detail panels, forms)
│ ├── hooks/ # Custom hooks (use-keyboard-shortcuts, use-realtime)
│ ├── lib/
│ │ ├── api.ts # Typed API client + React Query hooks
│ │ ├── stores/ # Zustand stores (theme, sidebar, keyboard-shortcuts, create-dialog)
│ │ ├── types/ # Shared TypeScript types
│ │ └── utils.ts # cn() utility
│ ├── routes/ # TanStack Router file-based routes
│ │ ├── __root.tsx # Root layout
│ │ ├── _app.tsx # Authenticated app layout (sidebar + topbar + palette)
│ │ ├── login.tsx # Login page
│ │ └── _app/ # All app pages
│ ├── main.tsx # Entry point
│ ├── routeTree.ts # Auto-generated route tree
│ └── index.css # Tailwind + CSS variables
└── dist/ # Production build output
Pages (14 routes)
| Route | Page | Description |
|---|---|---|
/ |
Dashboard | Configurable widget grid (8 widget types) |
/tasks |
Tasks | Full CRUD with filters, sort, kanban view |
/habits |
Habits | Track habits with streaks, completions |
/projects |
Projects | Project management with sections |
/notes |
Notes | Rich text notes with backlinks |
/calendar |
Calendar | react-big-calendar with DnD, date-fns localizer |
/graph |
Graph | react-force-graph-2d with custom renderers |
/search |
Search | Full-text search across entities |
/analytics |
Analytics | 6 chart types (recharts) |
/agents/activity |
Agent Activity | SSE live activity feed |
/canvas |
Canvas | Block-based editor |
/daily |
Daily Notes | Journal with calendar sidebar |
/settings |
Settings | 9 tabs (profile, domains, agents, webhooks, etc.) |
/login |
Login | Authentication |
OSS Components
- Calendar:
react-big-calendarv1.20 withwithDragAndDropHOC, date-fns localizer, custom event renderer with color tokens, custom toolbar, responsive (agenda on mobile) - Graph:
react-force-graph-2dv1.29 with custom node/link canvas renderers, hover highlighting, search-to-fly, filter panel (entity + relationship types), ResizeObserver, 500-node cap - Command Palette:
cmdkv1.1 with recent items, @mention agent search, theme/settings actions, mobile full-screen - Shortcuts:
@github/hotkeyv3.1 for global keyboard shortcuts (g+letter nav, n+letter create, ?, /, c)
Keyboard Shortcuts
| Shortcut | Action |
|---|---|
⌘K / Ctrl+K |
Open command palette |
g then d |
Go to Dashboard |
g then t |
Go to Tasks |
g then h |
Go to Habits |
g then p |
Go to Projects |
g then n |
Go to Notes |
g then c |
Go to Calendar |
g then g |
Go to Graph |
g then s |
Go to Settings |
n then t |
New task |
n then h |
New habit |
n then p |
New project |
n then n |
New note |
c |
Focus create in palette |
/ |
Focus search |
? |
Show shortcuts help |
Development
# Install dependencies
bun install
# Start dev server (port 3000)
bun run dev
# Production build
bun run build
# Preview production build
bun run preview
# Type check
bun run typecheck
API
All API calls go through /api/* and are proxied to the Hono backend. The API client in src/lib/api.ts provides typed get/post/put/patch/delete methods plus React Query hooks (useApiQuery, useApiMutation).
Bundle Size
- Total JS: ~1.2 MB (369 KB gzipped)
- CSS: ~53 KB (10 KB gzipped)
- Budget: < 1.5 MB gzipped