Files
ProjectE/apps/web
bot-hermes a60b75f075 feat: full plan execution - CI/CD, critical fixes, UX polish, secondary/advanced features, E2E + docs
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.
2026-08-10 08:53:18 +00:00
..

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-calendar v1.20 with withDragAndDrop HOC, date-fns localizer, custom event renderer with color tokens, custom toolbar, responsive (agenda on mobile)
  • Graph: react-force-graph-2d v1.29 with custom node/link canvas renderers, hover highlighting, search-to-fly, filter panel (entity + relationship types), ResizeObserver, 500-node cap
  • Command Palette: cmdk v1.1 with recent items, @mention agent search, theme/settings actions, mobile full-screen
  • Shortcuts: @github/hotkey v3.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