# taskui

Web-based UI for Taskmaster task management system. View and manage your Taskmaster tasks through a beautiful, interactive interface.

## Installation

```bash
npx taskui@latest
```

Or install globally:

```bash
npm install -g taskui
```

## Usage

Run from your project directory (must contain a `.taskmaster` folder):

```bash
taskui
```

This will:
- Start the TaskUI server on port 5565
- Open your browser automatically
- Watch for changes to your .taskmaster files

### Options

```bash
taskui [options]

Options:
  -v, --version     Display the version number
  -p, --port <port> Port to run the server on (default: 5565)
  -d, --dir <dir>   Taskmaster directory to watch (default: current directory)
  --no-open         Do not open browser automatically
  -h, --help        Display help for command
```

### Examples

Run on a different port:
```bash
taskui -p 3000
```

Run for a specific project:
```bash
taskui -d ~/my-project
```

Run without opening browser:
```bash
taskui --no-open
```

## Features

- **Real-time Updates**: Automatically refreshes when .taskmaster files change
- **Tag Management**: View and switch between different task tags
- **Task Visualization**: See task hierarchy, dependencies, and progress
- **Search & Filter**: Quickly find tasks across your project
- **Status Tracking**: Monitor task completion and progress
- **Responsive Design**: Works on desktop and mobile devices

## About Task UI

AI task management UI compatible with [Task Master](https://github.com/eyaltoledano/claude-task-master).

A local web interface for visualizing and managing AI-generated development tasks:

- **Built for AI workflows** - Visualize tasks created by LLMs
- **Real-time updates** - Changes to `.taskmaster` files reflect instantly
- **Tagged task organization** - Visual separation of different feature contexts
- **Kanban board view** - Drag and drop tasks between status columns
- **Task dependencies** - See task relationships and subtasks clearly

### Task Views

- **List view** - Compact task list with inline status controls
- **Board view** - Kanban-style columns for visual task management
- **Tag filtering** - Switch between different feature contexts
- **Search** - Find tasks by title or description
- **Filters** - By status, priority, assignee, or labels

### Task Details

Click any task to see:

- Full description and implementation details
- Test strategy
- Subtasks and dependencies
- Priority and status
- Quick actions for task management

### Real-time Sync

The UI uses WebSocket and file watchers to detect changes to:

- `.taskmaster/tasks/tasks.json` - Task data
- `.taskmaster/state.json` - Current tag context
- `.taskmaster/config.json` - Configuration
- `.taskmaster/reports/**/*.json` - Analysis reports

## Development

To run TaskUI in development mode:

```bash
# Clone the repository
git clone https://github.com/taskmaster-ai/taskui.git
cd taskui

# Install dependencies
pnpm install

# Run development server
pnpm dev
```

### Tech Stack

- **Framework**: [Next.js 15](https://nextjs.org/)
- **Language**: [TypeScript](https://www.typescriptlang.org/)
- **UI Components**: [shadcn/ui](https://ui.shadcn.com/)
- **Styling**: [Tailwind CSS](https://tailwindcss.com/)
- **State Management**: [Zustand](https://zustand-demo.pmnd.rs/), [Tanstack Query](https://tanstack.com/query/latest)
- **Icons**: [Lucide](https://lucide.dev/)

### Commands

```bash
pnpm dev          # Start development server (port 5565) + WebSocket (port 5566)
pnpm build        # Build for production
pnpm start        # Start production server
pnpm lint         # Run ESLint
pnpm typecheck    # Run TypeScript type checking
```

## Requirements

- Node.js 18 or higher
- A Taskmaster project (with `.taskmaster` directory)

## Credits

- [Circle](https://github.com/ln-dev7/circle) - The beautiful UI template this project is based on
- [Task Master](https://github.com/eyaltoledano/claude-task-master) - The JSON schema standard for task management

## License

MIT