Task Studio

AI task management UI compatible with Task Master.

What is this?

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

Getting Started

Install Your Project

Run Task Studio:

npx task-studio@latest

Or install it as a dev dependency:

pnpm add -D task-studio
pnpm task-studio

Navigate to http://localhost:5565

CLI Options

npx task-studio --help            # Show help
npx task-studio -p 3000           # Use custom port (default: 5565)
npx task-studio --ws-port 3001    # Use custom WebSocket port (default: 5566)
npx task-studio --ws-url ws://example.com:8080  # Use external WebSocket URL
npx task-studio -d path/to/.taskmaster  # Custom .taskmaster directory
npx task-studio --no-open         # Don't open browser automatically

How it works

Task UI watches your .taskmaster/tasks/tasks.json file and displays:

• AI-generated tasks across different tags
• Current tag context from .taskmaster/state.json
• Task status, priority, and dependencies
• Subtask hierarchies
• Real-time updates as you modify task files

Features

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

Tech Stack

• Framework: Next.js 15
• Language: TypeScript
• UI Components: shadcn/ui
• Styling: Tailwind CSS
• State Management: Zustand, Tanstack Query
• Icons: Lucide

Development Commands

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

Roadmap

• Write operations
• Bulk operations

Contributing

Contributions welcome! This is an early project focused on making AI tasks more visual and accessible.

Credits

• Circle - The beautiful UI template this project is based on
• Task Master - The JSON schema standard for task management

License

MIT