Hermes
ef163a9d6f
- Calendar: react-big-calendar w/ withDragAndDrop, date-fns localizer, custom event renderer (color tokens), custom toolbar, responsive (agenda on mobile), now indicator - Graph: react-force-graph-2d w/ custom node/link canvas renderers, hover highlighting, search-to-fly, filter panel (entity + relationship types), ResizeObserver, 500-node cap, zoom controls - Command palette: cmdk polish (recent items, @mention filter, settings/logout actions, mobile full-screen) - Shortcuts: @github/hotkey for g+letter nav, n+letter create, ?, /, c; Cmd+K for palette - README.md added with architecture, page list, shortcuts, dev guide - Bundle: 369 KB gzipped (under 1.5 MB budget)
106 lines
4.0 KiB
Markdown
106 lines
4.0 KiB
Markdown
# 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
|
|
|
|
```bash
|
|
# 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
|