6bfdb6bcde
- Add ThemePreference type and useTheme hook for theme state management - Create CSS theme architecture with 8 built-in color themes - Build ThemeSelector component with live preview and keyboard navigation - Add theme toggle to Header with quick-switch capability - Integrate Appearance section into SettingsModal - Wire theme system into App component with system preference detection - Add comprehensive tests for useTheme, ThemeSelector, and Header - Include theming documentation in dashboard README - Add changeset for patch release
155 lines
5.9 KiB
Markdown
155 lines
5.9 KiB
Markdown
# @kb/dashboard
|
|
|
|
Web-based dashboard for managing kb tasks. Provides a visual kanban board, list view, and git repository management tools.
|
|
|
|
## Features
|
|
|
|
### Task Management
|
|
- **Kanban Board**: Drag-and-drop task management across columns (Triage, Todo, In Progress, In Review, Done)
|
|
- **Inline Editing**: Quick-edit task title and description directly on the board for Triage and Todo columns. Double-click a card or use the pencil icon that appears on hover.
|
|
- **List View**: Alternative tabular view for tasks with sorting and filtering
|
|
- **Task Details**: View full task specifications, agent logs, and attachments
|
|
- **GitHub Import**: Import issues directly from GitHub repositories
|
|
- **PR Management**: Create and track pull requests for in-review tasks
|
|
|
|
### Git Manager
|
|
The Git Manager provides comprehensive repository visualization and management directly from the web UI. Access it via the Git Branch icon in the header.
|
|
|
|
**Status Tab**: View current repository state including:
|
|
- Current branch name and commit hash
|
|
- Working directory status (clean/dirty)
|
|
- Ahead/behind counts relative to remote
|
|
|
|
**Commits Tab**: Browse recent commits with:
|
|
- Commit list with message, author, and date
|
|
- Expandable diff view for each commit
|
|
- Pagination support (load more commits)
|
|
|
|
**Branches Tab**: Manage local branches:
|
|
- List all branches with current indicator
|
|
- Create new branches with optional base
|
|
- Checkout existing branches
|
|
- Delete branches (with confirmation)
|
|
|
|
**Worktrees Tab**: Visualize worktree layout:
|
|
- List all worktrees with paths
|
|
- See which tasks own which worktrees
|
|
- Identify main vs linked worktrees
|
|
- Track free/used worktree count
|
|
|
|
**Remotes Tab**: Perform remote operations:
|
|
- Fetch from origin
|
|
- Pull latest changes
|
|
- Push current branch
|
|
- View operation results and error states
|
|
|
|
### Configuration
|
|
- **Settings Modal**: Configure scheduling, worktrees, build commands, merge preferences, notifications, and appearance
|
|
- **Notifications**: ntfy.sh integration for push notifications when tasks complete or fail
|
|
- **Authentication**: OAuth provider management for AI model access
|
|
- **Pause Controls**: Soft pause (stop new work) and hard stop (kill all agents)
|
|
- **Theming**: Light/dark/system mode toggle and 8 color themes (see Theming section below)
|
|
|
|
## Theming
|
|
|
|
The dashboard supports a comprehensive theming system with both light/dark mode and color theme options.
|
|
|
|
### Theme Modes
|
|
- **Dark** (default): Classic dark theme, GitHub-inspired
|
|
- **Light**: Light backgrounds with dark text
|
|
- **System**: Automatically follows your operating system preference
|
|
|
|
Toggle between modes using the theme button in the header (cycles Dark → Light → System) or select from the Appearance section in Settings.
|
|
|
|
### Color Themes
|
|
Choose from 8 distinct color palettes in the Appearance settings:
|
|
|
|
| Theme | Description |
|
|
|-------|-------------|
|
|
| **Default** | Classic blue accent colors (GitHub-inspired) |
|
|
| **Ocean** | Deep blues with cyan accents |
|
|
| **Forest** | Deep greens with emerald accents |
|
|
| **Sunset** | Warm oranges and reds |
|
|
| **Berry** | Purple/pink tones |
|
|
| **Monochrome** | Pure grayscale |
|
|
| **High Contrast** | Extreme contrast for accessibility |
|
|
| **Solarized** | Classic solarized palette |
|
|
|
|
### Theme Persistence
|
|
Theme preferences are automatically saved to localStorage and persist across sessions. The effective theme is applied immediately to prevent flash of unstyled content.
|
|
|
|
### Adding New Themes
|
|
To add a new color theme:
|
|
|
|
1. Add the theme to `COLOR_THEMES` in `packages/core/src/types.ts`
|
|
2. Add CSS variables in `packages/dashboard/app/styles.css` under `[data-color-theme="your-theme"]`
|
|
3. Add the swatch class for the theme picker in the CSS
|
|
4. Update `ThemeSelector.tsx` with the new theme option
|
|
|
|
## Development
|
|
|
|
```bash
|
|
# Install dependencies
|
|
pnpm install
|
|
|
|
# Run tests
|
|
pnpm test
|
|
|
|
# Build for production
|
|
pnpm build
|
|
|
|
# Start development server
|
|
pnpm dev
|
|
```
|
|
|
|
## API Endpoints
|
|
|
|
The dashboard server exposes a REST API at `/api`:
|
|
|
|
### Tasks
|
|
- `GET /api/tasks` - List all tasks
|
|
- `GET /api/tasks/:id` - Get task details
|
|
- `POST /api/tasks` - Create new task
|
|
- `PATCH /api/tasks/:id` - Update task
|
|
- `POST /api/tasks/:id/move` - Move task to column
|
|
- `POST /api/tasks/:id/pause` - Pause task
|
|
- `POST /api/tasks/:id/unpause` - Unpause task
|
|
- `DELETE /api/tasks/:id` - Delete task
|
|
|
|
### Git Operations
|
|
- `GET /api/git/status` - Current branch and status
|
|
- `GET /api/git/commits` - Recent commits (with optional `?limit=`)
|
|
- `GET /api/git/commits/:hash/diff` - Commit diff
|
|
- `GET /api/git/branches` - List branches
|
|
- `GET /api/git/worktrees` - List worktrees with task associations
|
|
- `POST /api/git/branches` - Create branch (`{ name, base? }`)
|
|
- `POST /api/git/branches/:name/checkout` - Checkout branch
|
|
- `DELETE /api/git/branches/:name` - Delete branch (`?force=true`)
|
|
- `POST /api/git/fetch` - Fetch from remote (`{ remote? }`)
|
|
- `POST /api/git/pull` - Pull current branch
|
|
- `POST /api/git/push` - Push current branch
|
|
|
|
### GitHub Integration
|
|
- `GET /api/git/remotes` - List GitHub remotes
|
|
- `POST /api/github/issues/fetch` - Fetch issues (`{ owner, repo, limit?, labels? }`)
|
|
- `POST /api/github/issues/import` - Import issue (`{ owner, repo, issueNumber }`)
|
|
- `POST /api/tasks/:id/pr/create` - Create PR
|
|
- `GET /api/tasks/:id/pr/status` - Get PR status
|
|
- `POST /api/tasks/:id/pr/refresh` - Refresh PR status
|
|
|
|
### Configuration
|
|
- `GET /api/config` - Server configuration
|
|
- `GET /api/settings` - User settings
|
|
- `PUT /api/settings` - Update settings
|
|
- `GET /api/models` - Available AI models
|
|
- `GET /api/auth/status` - OAuth provider status
|
|
- `POST /api/auth/login` - Initiate OAuth login
|
|
- `POST /api/auth/logout` - Logout from provider
|
|
|
|
## Architecture
|
|
|
|
- **Frontend**: React + Vite, TypeScript, CSS custom properties for theming
|
|
- **Backend**: Express server with REST API and Server-Sent Events (SSE) for live updates
|
|
- **State Management**: Custom hooks with EventSource for real-time task updates
|
|
- **Git Integration**: Server-side git command execution with validation
|