PL-7 — Task Board Columns from States: - Add State, Module, Cycle, Link TypeScript types to types/index.ts - Add stateId, moduleId, cycleId, trackedMinutes to Task type - Rewrite tasks.tsx: fetch states from API, render 5 state-group columns (backlog/unstarted/started/completed/cancelled), drag-and-drop updates stateId via PATCH /tasks/:id, colored state badges, state filter dropdown, project filter - Fix deprecated POST /tasks/:id/status → PATCH /tasks/:id with stateId - Update tasks/.tsx: state selector dropdown replaces hardcoded status enum, toggle complete uses state-based approach, dependencies replaced with link-based UI using /api/links PL-8 — Module + Cycle Views: - Create apps/api/src/routes/cycles.ts: full CRUD + task assignment/removal - Create apps/api/src/routes/links.ts: list/create/delete links between entities - Register cycleRoutes and linkRoutes in API index - Add Modules tab to project detail: list modules, expand to show tasks, add/remove tasks from modules, create/edit/delete module dialogs - Add Cycles tab to project detail: sprint board grid, backlog lane, manual task transfer between cycles and backlog, create/edit cycle dialogs - Fix ProjectTasks toggle to use PATCH with stateId instead of deprecated endpoint PL-9 — Link Panels + Graph: - Update graph API to read links bidirectionally (source OR target) - Add link type color map (LINK_TYPE_COLORS) for edge rendering - Graph edges now colored by linkType (blocks=red, relates=gray, etc.) - Filter panel shows link types with color indicators - Task detail Dependencies tab now uses /api/links for add/remove links - Added link type selector (blocks/relates/parent-child/created-from)
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