A hand-drawn notebook-style dashboard for managing multiple Claude AI sessions. Built with React + TypeScript frontend and FastAPI + SQLAlchemy backend.
- Sticky Note UI - Hand-drawn notebook-style interface with wobbly borders and handwriting fonts (Kalam, Patrick Hand)
- Multiple View Modes - Grid, Kanban (Todo/Doing/Done), and Eisenhower Quadrant views
- Inline Editing - Double-click to edit session labels and descriptions directly on sticky notes
- Custom Colors - 6 preset sticky note colors with hover color picker
- Tag System - Add/remove tags on sessions for easy categorization
- Dark Mode - Full dark mode support with theme persistence
- Terminal Streaming - Real-time terminal output via xterm.js + WebSocket to tmux sessions
- Multi-tab Terminal - Open up to 5 terminal tabs simultaneously
- Auto-reconnect - Terminal WebSocket auto-reconnect with exponential backoff
- SSE Real-time Updates - Server-Sent Events for live session status updates
- Process Discovery - Discover and import running Claude processes
- Drag & Drop - Reorder sessions with drag-and-drop in grid view
- Keyboard Shortcuts - Ctrl+N (new), Ctrl+K (search), Ctrl+D (discovery panel)
- Confirm Delete - Safety confirmation dialog before deleting sessions
- Search & Filter - Search sessions by label, cwd, or tags
- Token Tracking - Track token usage per session from .session-stats.json
- Error Boundary - Graceful error handling with ErrorBoundary component
- React 19 with TypeScript
- Tailwind CSS v4 for styling
- Vite 8 for development and build
- xterm.js for terminal emulation
- Lucide React for icons
- FastAPI with async support
- SQLAlchemy 2.0 with aiosqlite
- Pydantic v2 for data validation
- Uvicorn for ASGI server
- tmux for terminal session management
claude-manage/
├── frontend/ # React + TypeScript frontend
│ ├── src/
│ │ ├── App.tsx # Main app component
│ │ ├── components/
│ │ │ ├── session/ # Session components
│ │ │ │ ├── StickyNote.tsx
│ │ │ │ ├── StickyNoteGrid.tsx
│ │ │ │ ├── KanbanView.tsx
│ │ │ │ ├── QuadrantView.tsx
│ │ │ │ ├── CreateSessionModal.tsx
│ │ │ │ ├── DiscoveryPanel.tsx
│ │ │ │ └── TerminalModal.tsx
│ │ │ ├── terminal/ # Terminal components
│ │ │ │ ├── XTerminal.tsx
│ │ │ │ └── TerminalTabs.tsx
│ │ │ └── ui/ # Reusable UI components
│ │ │ ├── Button.tsx
│ │ │ ├── Card.tsx
│ │ │ ├── ColorPicker.tsx
│ │ │ ├── ConfirmDialog.tsx
│ │ │ ├── ErrorBoundary.tsx
│ │ │ ├── Input.tsx
│ │ │ ├── Modal.tsx
│ │ │ ├── SearchBar.tsx
│ │ │ ├── TagInput.tsx
│ │ │ ├── ThemeToggle.tsx
│ │ │ └── ViewModeSwitcher.tsx
│ │ ├── hooks/ # Custom React hooks
│ │ │ ├── useKeyboardShortcuts.ts
│ │ │ ├── useLocalStorage.ts
│ │ │ ├── useSSE.ts
│ │ │ ├── useSessionList.ts
│ │ │ ├── useTerminal.ts
│ │ │ └── useTheme.ts
│ │ ├── styles/ # CSS and design tokens
│ │ │ ├── index.css
│ │ │ └── design-tokens.ts
│ │ └── types/ # TypeScript types
│ │ └── session.ts
│ ├── vite.config.ts
│ └── package.json
├── backend/ # FastAPI backend
│ ├── app/
│ │ ├── main.py
│ │ ├── config.py
│ │ ├── database.py
│ │ ├── models/
│ │ │ └── session.py
│ │ ├── schemas/
│ │ │ └── session.py
│ │ ├── services/
│ │ │ ├── session_service.py
│ │ │ ├── tmux_service.py
│ │ │ ├── terminal_service.py
│ │ │ └── discovery_service.py
│ │ └── api/
│ │ └── routes/
│ │ ├── sessions.py
│ │ └── terminal.py
│ └── pyproject.toml
└── docs/ # Screenshots and documentation
- Node.js 18+
- Python 3.11+
- tmux
- Claude CLI (for managing Claude sessions)
cd backend
# Install dependencies with uv
uv sync
# Start the backend server
uv run uvicorn app.main:app --host 0.0.0.0 --port 8000 --reloadcd frontend
# Install dependencies
npm install
# Start the development server
npm run devThe frontend will start at http://localhost:5173 and proxy API requests to the backend at http://localhost:8000.
cd frontend
npm run build| Method | Path | Description |
|---|---|---|
| GET | /api/sessions |
List all sessions |
| POST | /api/sessions |
Create a new session |
| GET | /api/sessions/{id} |
Get session by ID |
| PATCH | /api/sessions/{id} |
Update a session |
| DELETE | /api/sessions/{id} |
Delete a session |
| POST | /api/sessions/import |
Import a discovered Claude process |
| PATCH | /api/sessions/positions |
Update session positions (drag & drop) |
| GET | /api/sessions/status-stream |
SSE stream for real-time status updates |
| GET | /api/sessions/discover |
Discover running Claude processes |
| WS | /api/terminal/{tmux_session} |
WebSocket for terminal streaming |
Backend configuration is managed via environment variables or app/config.py:
TMUX_PREFIX- Prefix for tmux session names (default:cb_)CLAUDE_STATS_FILE- Path to Claude stats JSON fileDATABASE_URL- SQLite database URL
MIT