HatRack AI

Organize your life by roles, not apps.

A modular personal assistant platform that unifies your tools, surfaces what matters, and learns how you operate — organized around the roles you actually play in life.

---

What It Is

People don't think in apps. They think in responsibilities — Career, Founder, Finance, Health, Family, Learning, Executive, Creator.

HatRack is the intelligence layer that sits across all of them. Instead of checking five different tools to understand your day, HatRack surfaces the right signals in the right context at the right time — organized by the hat you're wearing.

---

Current State

Working prototype with:

• Guided onboarding — 6-step setup that personalizes the workspace. Hat selection, priority ranking, gap identification, and AI-generated 90-day goal suggestions (live Anthropic API call)
• Executive Dashboard — AI briefing, momentum scores, priorities, deadlines, neglected hats — all context-aware based on onboarding selections
• Gmail Intelligence Center — Email classification by hat and urgency with expandable detail panel
• Master Calendar — Daily, weekly, monthly, quarterly views with click-to-detail event panel, prep checklists, AI context per event
• Role Workspaces — Per-hat mini operating system with priorities, signals, deadlines, momentum scoring
• Weekly Review — Wins, misses, AI recommendations, hat performance
• Integrations Hub — 70+ tools across 11 categories with simulated OAuth connect flow
• Dark/light mode — Full theme system throughout

All data is currently mock/local. No backend, no auth, no real integrations yet.

---

Tech Stack

Frontend:   React 18 + Vite
Icons:      Lucide React
Fonts:      Syne (display) + DM Sans (body) via Google Fonts
AI:         Anthropic API (claude-sonnet-4-20250514) — used in onboarding step 4
Hosting:    Cloudflare Pages via GitHub
Styling:    Inline styles + injected CSS (no Tailwind yet)

---

Project Structure

hatrack-ai/
├── index.html          # Entry point, Google Fonts loaded here
├── vite.config.js
├── package.json
├── .gitignore
├── CLAUDE.md           # AI development context — read this first
├── README.md
└── src/
    ├── main.jsx        # React root mount
    └── App.jsx         # Entire application (single file, ~2,600 lines)

Note: The entire app currently lives in src/App.jsx. This is intentional for the prototype stage — it makes the architecture visible and easy to navigate. Refactoring into components is a planned next step documented in CLAUDE.md.

---

Getting Started

npm install
npm run dev

Open http://localhost:5173

Build for production:

npm run build

---

Deployment

Connected to Cloudflare Pages via GitHub. Every push to main triggers an automatic deploy.

Build settings:

• Build command: npm run build
• Output directory: dist

---

Roadmap

See CLAUDE.md for detailed next steps, architectural decisions, and development context.

High-level priorities:

1. Refactor App.jsx into component architecture
2. Add authentication (Clerk)
3. Wire real Gmail OAuth integration
4. Backend API layer (Cloudflare Workers + D1)
5. Real user behavioral profile system
6. Prompt caching and token optimization

---

Background

Built by Jesse K. — respiratory therapist transitioning into IT/cybersecurity, founder of Howder Labs.

The product insight: most personal productivity tools require manual maintenance and treat each role in your life as a separate context. HatRack treats intelligence as automatic and roles as the organizing principle.