Context

Current dashboard is functional but rough. Need to refine every page to Notion/Todoist quality standards. Be a perfectionist. Focus on smooth interactions, beautiful design, intuitive UX.

Design Principles

1. Visual Polish: Match Notion's clean aesthetic
2. Smooth Interactions: Todoist-level drag & drop, no jank
3. Information Density: Show more without feeling cluttered
4. Smart Defaults: Sensible filters, sorting, views
5. Keyboard Shortcuts: Power user features
6. Responsive: Works beautifully on mobile

Page-by-Page Improvements

1. Tasks (Root Page) - PRIORITY

Current Issues:

• Drag & drop is janky
• No list view option (only kanban)
• Filter pills don't work well
• Card design could be cleaner

Improvements:

• Dual View Toggle: List view + Kanban view (like Todoist)
  • List: Compact, grouped by status, keyboard navigation
  • Kanban: Current board, but smoother
• Smooth Drag & Drop:
  • Use @dnd-kit or react-beautiful-dnd
  • Visual feedback during drag
  • Optimistic updates
• Better Filters:
  • Multi-select (status, priority, assignee, project)
  • Save filter presets
  • Quick filter shortcuts (⌘1 = My Tasks, ⌘2 = Urgent, etc.)
• Card Design:
  • Cleaner layout (Notion-style cards)
  • Hover states with actions (edit, delete, assign)
  • Color-coded priority indicators
  • Due date badges
• Bulk Actions:
  • Multi-select tasks (Shift+Click)
  • Batch update (status, assignee, priority)
• Quick Add:
  • ⌘K to quick-add task
  • Inline add in any column
  • Templates for common task types

2. Inbox

Current Issues:

• Basic file list, no real triage UI

Improvements:

• Two-Panel Layout: File list left, preview right
• Quick Actions:
  • Convert to task (one click)
  • Archive/delete with undo
  • Tag/categorize
• Smart Sorting:
  • Recent first
  • Unprocessed at top
  • Filter by file type
• Keyboard Shortcuts:
  • t = convert to task
  • a = archive
  • d = delete
  • Arrow keys = navigate

3. Journal

Current Issues:

• Unknown - need to check current state

Improvements:

• Daily Entry UI: Calendar picker, today default
• Rich Text Editor: Markdown support, formatting toolbar
• Quick Capture: ⌘J to add journal entry from anywhere
• Search: Full-text search across all entries
• Tagging: Add tags for themes/topics
• Timeline View: Scroll through past entries

4. Opportunities

Current Issues:

• Unknown - need to check current state

Improvements:

• Pipeline View: Stages like a sales funnel
• Card Details: Contact, value, stage, notes
• Drag Between Stages: Smooth transitions
• Filters: By value, date, contact, status
• Quick Actions: Email, call, schedule follow-up

5. Search

Current Issues:

• Unknown - needs implementation?

Improvements:

• Global Search: ⌘K command palette
• Search Everything: Tasks, journal, opportunities, files
• Smart Results: Group by type, relevance ranking
• Quick Actions: Jump to result, quick preview
• Recent Searches: Show history
• Keyboard Navigation: Arrow keys + Enter

6. Agents

Current Issues:

• Basic agent list, no live output

Improvements:

• Live Output Stream: Real-time terminal output (SSE)
• Progress Bars: Visual progress for running tasks
• Controls: Kill, restart, pause buttons
• Status Indicators: Running, idle, error states
• Logs Viewer: Scrollable output with timestamps
• Quick Spawn: Start new agent from this page

7. GitHub

Current Issues:

• Unknown - new page, check implementation

Improvements:

• Dashboard Overview: PRs, commits, CI status
• PR Actions: Merge, comment, review from UI
• Commit Timeline: Visual commit history
• CI Status: Green/red indicators, logs on click
• Quick Filters: My PRs, needs review, failing CI

8. Activity Feed

Current Issues:

• Unknown - needs implementation

Improvements:

• Unified Timeline: All activity across system
• Event Types: Tasks, commits, emails, calendar
• Filters: By type, date, source
• Real-time Updates: SSE or polling
• Grouping: Smart grouping by time/context

9. Analytics

Current Issues:

• Unknown - check current state

Improvements:

• Dashboard View: Key metrics at a glance
• Charts: Task completion trends, time tracking
• Filters: Date range, project, assignee
• Export: CSV download
• Insights: AI-generated productivity insights

10. Skills

Current Issues:

• Unknown - needs implementation

Improvements:

• Skills Browser: List installed skills
• Skill Cards: Description, usage, examples
• Search/Filter: Find skills by category
• Install/Update: Manage skills from UI
• Documentation: Link to SKILL.md

11. Sessions

Current Issues:

• Unknown - needs implementation

Improvements:

• Session History: List past sessions
• Conversation Viewer: Read past chats
• Search: Find specific conversations
• Export: Download session transcripts
• Analytics: Token usage, cost per session

12. System Pages (Health, Cron, Files, Terminal)

Current Issues:

• Unknown - check implementations

Improvements:

• Health Dashboard: CPU, memory, disk, services
• Cron Manager: Add/edit/delete cron jobs
• File Browser: Navigate ~/Kaizen with preview
• Terminal: xterm.js integration with PTY

Global Improvements (All Pages)

Navigation

• Sidebar Refinement: Cleaner icons, better grouping
• Breadcrumbs: Show current location
• Back/Forward: Browser-style navigation
• Mobile Nav: Hamburger menu, responsive

Design System

• Consistent Colors: Dark mode polish
• Typography: Better font hierarchy
• Spacing: Consistent padding/margins
• Animations: Smooth transitions (framer-motion)
• Loading States: Skeletons, not spinners
• Error States: Friendly error messages

Performance

• Code Splitting: Lazy load pages
• Optimistic Updates: Instant UI feedback
• Caching: React Query or SWR
• Debouncing: Search, filters, auto-save

Accessibility

• Keyboard Navigation: Tab order, shortcuts
• Screen Reader Support: ARIA labels
• Focus States: Clear focus indicators

Implementation Plan

Phase 1: Core Tasks UX (Week 1)

1. Fix drag & drop (smooth, reliable)
2. Add list view toggle
3. Implement dual-view (list + kanban)
4. Refine card design
5. Add keyboard shortcuts

Phase 2: Navigation & Search (Week 2)

1. Command palette (⌘K)
2. Global search
3. Breadcrumbs
4. Sidebar refinement

Phase 3: Page-by-Page Refinement (Weeks 3-4)

1. Inbox triage UI
2. Journal improvements
3. Agents live output
4. GitHub integration polish
5. Analytics dashboard

Phase 4: Polish & Performance (Week 5)

1. Animations & transitions
2. Loading/error states
3. Mobile responsiveness
4. Performance optimization

Technical Stack Additions

Consider adding:

• @dnd-kit/core - Better drag & drop
• framer-motion - Smooth animations
• react-query or swr - Data fetching/caching
• cmdk - Command palette
• react-hot-toast - Better notifications
• recharts or visx - Analytics charts

Success Criteria

• Drag & drop feels instant, no lag
• Every page has clear purpose and value
• Keyboard shortcuts work throughout
• Design matches Notion/Todoist quality
• Paul can show this to others without embarrassment
• Mobile experience is usable
• Load times <500ms per page

Notes

This is a comprehensive overhaul. Each page needs deep thought about UX, not just features. Ask "Would I use this daily?" for every interaction.

Don't just copy features - understand WHY Notion/Todoist feel good, then apply those principles here.

---

PROGRESS UPDATE - 2025-01-30

Completed Phases

Phase 3: Inbox Triage ✅

• Two-panel layout with resizable split (persisted to localStorage)
• File preview: Markdown rendering, image display, code highlighting
• Quick actions with undo: Archive, delete, open, copy path
• Convert to task modal with pre-filled metadata
• Keyboard shortcuts: t/a/d/o/c + j/k/arrows navigation
• Smart features: Auto-categorize, tag suggestions, multi-select, "Process All" mode
• Sort/filter: By date/name/size/type, filter by file extension
• Files: page.tsx, inbox.ts, convert-to-task-modal.tsx, toast.tsx, resizable-split.tsx

Phase 4: Agents Live Output ✅

• Agent management page with controls
• Live status indicators
• Process management (kill, restart, pause)
• Completed and verified

Phase 5: Analytics Dashboard ✅

• 5 KPI cards: Total, Completion Rate, Avg Time, Blocked, Productivity Score
• 6 charts using Recharts: Completion over time, Status pie, Priority bars, By project, By assignee, Burndown
• Date range filters with presets (7D/30D/90D) + custom picker
• Project & Assignee multi-select filters
• Export: CSV data, PNG charts, print-friendly styles
• AI-generated insights (completion trends, blocked warnings, top projects)
• Files: analytics/page.tsx, lib/analytics.ts, api/analytics/route.ts

Additional Completions:

• Second Brain document viewer app (localhost:3000) with vault integration + search
• Email-to-task automation script with Claude analysis (tested, working)

Build Status

✅ TypeScript compilation passing ✅ All routes integrated successfully ✅ No build errors

Next Up

• Phase 1: Core Tasks UX (drag & drop, dual views, smooth interactions)
• Phase 2: Navigation & Search (⌘K palette, global search)