Files
ProjectE/apps/web
bot-hermes b814a4788d feat: add 5 PM features — custom statuses, Gantt, quick-add, automations, notifications
- Custom workflow statuses: per-project configurable status definitions
  replacing the fixed task_status enum. Each project defines its own
  workflow with drag-to-reorder, color coding, and category mapping.
- Gantt/timeline view: full project roadmap with task bars, dependency
  arrows, milestone diamonds, zoom levels (day/week/month), and drag
  to reschedule.
- Natural-language quick-add: NLP parser extracts dates, priorities,
  projects, labels, and recurrence from free text. Floating bar with
  'n' shortcut and live parsed preview.
- Automation rules: no-code trigger-action system per project. Triggers
  on status change, task creation, due date approaching. Actions set
  status/priority, add labels, create notifications.
- Notification center: in-app bell icon with unread badge, slide-out
  panel, real-time SSE updates, mark read/all read. Replaces raw
  activity feed dropdown.

Schema: adds status_definitions, automation_rules, notifications tables.
Migrations: 0007, 0008, 0009. 41 NLP parser tests pass.
2026-08-19 10:54:29 +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