HAI Tasks

HAI Tasks brings AI-generated user stories and development tasks from Specif AI directly into HAI Build Code Generator. Review, execute, and manage your entire development backlog without leaving your IDE.

Detailed View of HAI Tasks

What is HAI Tasks?

HAI Tasks is a task management interface that:

Loads AI-generated user stories from Specif AI
Displays tasks in a structured, searchable interface
Executes tasks with a single click
Tracks progress across stories and subtasks
Manages your entire development workflow

HAI Tasks works seamlessly with Specif AI but can also be used independently for organizing any development work.

Getting Started

Access HAI Tasks

Open the HAI Build sidebar and navigate to the Tasks tab.

Load Tasks

Import tasks from Specif AI or create your own task list.

Review Stories

Click the eye icon to view story details, objectives, and acceptance criteria.

Execute Tasks

Click on a task to execute it with the AI code generator.

Task Structure

HAI Tasks organizes work hierarchically:

User Stories

User Stories represent high-level features or requirements:

interface IHaiStory {
  id: string
  name: string
  description: string
  storyTicketId?: string
  tasks: IHaiTask[]
}

Each story contains:

ID: Unique identifier
Name: Story title
Description: Detailed objectives and context
Ticket ID: Optional reference to external tracking system
Tasks: List of subtasks to complete the story

Tasks

Tasks are actionable work items:

interface IHaiTask {
  id: string
  list: string
  subTaskTicketId?: string
}

Each task includes:

ID: Unique identifier
List: Task description/prompt for the AI
Ticket ID: Optional reference to task tracking

Reference: webview-ui/src/components/hai/hai-tasks-list.tsx:1

Task List Interface

The HAI Tasks interface provides powerful organization and search capabilities:

Search and Filter

Search across:

Story names and descriptions
Story ticket IDs
Task descriptions
Subtask ticket IDs

Fuzzy Search: Uses Fuse.js for intelligent matching:

const fuse = new Fuse(haiTaskList, {
  keys: [
    "id",
    "name",
    "description",
    "storyTicketId",
    "tasks.id",
    "tasks.list",
    "tasks.subTaskTicketId"
  ],
  threshold: 0.5,
  ignoreLocation: true
})

See: webview-ui/src/components/hai/hai-tasks-list.tsx:47

Accordion View

Stories are displayed in an expandable accordion:

Expand/Collapse All

Control visibility of all stories at once

Individual Stories

Expand specific stories to view their tasks

Keyboard Navigation: Use arrow keys to navigate between stories and tasks.

Task Actions

View Details
Execute Task
Reset Tasks

Click the eye icon to see:

Full story description
Prerequisites and dependencies
Expected outcomes
All associated tasks

Component: webview-ui/src/components/hai/DetailedView.tsx

Integrating with Specif AI

Specif AI generates structured user stories and tasks from requirements. Here’s how to integrate:

Generate with Specif AI

Use Specif AI to create user stories from:

Product requirements
Feature specifications
Bug reports
Enhancement requests

Export Task File

Specif AI exports a JSON file containing stories and tasks:

[
  {
    "id": "story-001",
    "name": "User Authentication",
    "description": "Implement secure user authentication system",
    "storyTicketId": "AUTH-123",
    "tasks": [
      {
        "id": "task-001",
        "list": "Create user registration component with email validation",
        "subTaskTicketId": "AUTH-124"
      },
      {
        "id": "task-002",
        "list": "Implement JWT-based authentication",
        "subTaskTicketId": "AUTH-125"
      }
    ]
  }
]

Load in HAI Build

Import the JSON file into HAI Tasks interface.

Execute Tasks

Work through tasks sequentially or jump to specific items.

Use ticket IDs to maintain traceability between Specif AI, HAI Build, and your project management tools (Jira, Linear, etc.).

Task Execution Workflow

When you execute a task from HAI Tasks:

Task Selection

Click on a task to select it for execution.

Context Loading

HAI Build loads:

Task description as the initial prompt
Story context for additional background
Related files from previous tasks

AI Generation

The AI code generator:

Analyzes the task requirements
Creates an implementation plan
Generates code changes
Executes necessary commands

Progress Tracking

Monitor progress through:

Real-time chat updates
File change notifications
Terminal command output
Focus Chain todo list (if enabled)

Completion

Review and approve:

All code changes
Test results
Documentation updates

Task Components

The HAI Tasks interface is built with React components:

HaiTasksList

Main component managing task display and searchwebview-ui/src/components/hai/hai-tasks-list.tsx

HaiStoryAccordion

Expandable story view with task listwebview-ui/src/components/hai/HaiStoryAccordion.tsx

HaiTaskComponent

Individual task rendering and interactionwebview-ui/src/components/hai/HaiTaskComponent.tsx

DetailedView

Full story and task details modalwebview-ui/src/components/hai/DetailedView.tsx

Best Practices

Break Down Large Stories

Keep individual tasks focused and atomic
Limit tasks to 30-60 minute chunks
Create clear, actionable task descriptions
Include acceptance criteria in task text

Use Descriptive Names

Story names should clearly indicate the feature
Task descriptions should be specific and actionable
Include technical context when relevant
Reference related files or components

Maintain Task Order

Sequence tasks logically (setup → implementation → testing)
Consider dependencies between tasks
Place infrastructure tasks early
Save integration tasks for later

Track Progress

Use ticket IDs to link with external tools
Review completed tasks periodically
Update story descriptions as understanding evolves
Mark blockers or issues in task text

Configuration

Task Storage

Tasks are stored in your workspace:

workspace/
├── .hai/
│   └── tasks.json          # Task list storage
└── ...

Task Updates

HAI Build tracks when tasks were last updated:

interface TaskMetadata {
  haiTaskLastUpdatedTs?: string  // Timestamp of last task file modification
}

This enables:

Change detection
Sync status display
Conflict resolution

Advanced Features

Custom Task Templates

Create reusable task templates:

{
  "template": "feature",
  "tasks": [
    {
      "id": "{{feature}}-setup",
      "list": "Set up {{feature}} directory structure and base files"
    },
    {
      "id": "{{feature}}-impl",
      "list": "Implement {{feature}} core functionality"
    },
    {
      "id": "{{feature}}-test",
      "list": "Write tests for {{feature}}"
    }
  ]
}

Task Dependencies

Indicate task dependencies in descriptions:

{
  "id": "task-003",
  "list": "Create login UI (requires: task-001 user registration component)"
}

Multi-Project Tasks

Manage tasks across multiple workspaces:

Store tasks in a shared location
Use workspace-relative paths in task descriptions
Tag tasks with project identifiers

Keyboard Shortcuts

Shortcut	Action
`Ctrl+F` / `Cmd+F`	Focus search box
`↑` / `↓`	Navigate tasks
`Enter`	Execute selected task
`Space`	Expand/collapse story
`Esc`	Close detailed view

Troubleshooting

Tasks not loading

Check JSON file format
Verify file permissions
Review HAI Build logs
Ensure valid task structure

Search not working

Clear search field and retry
Check for special characters
Verify Fuse.js is loaded
Try exact string match

Task execution fails

Verify AI model is configured
Check task description clarity
Review workspace permissions
Ensure necessary files exist

Next Steps

Experts

Combine tasks with domain experts for better results

Focus Chain

Track task progress with automatic todo lists

File Identification

Help the AI find relevant files for each task

AI-Powered Coding

Learn how the AI executes your tasks

Get Started

Core Features

Configuration

Usage Guides

Advanced

What is HAI Tasks?

Getting Started

Task Structure

Task List Interface

Search and Filter

Accordion View

Expand/Collapse All

Individual Stories

Task Actions

Integrating with Specif AI

Task Execution Workflow

Task Components

HaiTasksList

HaiStoryAccordion

HaiTaskComponent

DetailedView

Best Practices

Configuration

Task Storage

Task Updates

Advanced Features

Custom Task Templates

Task Dependencies

Multi-Project Tasks

Keyboard Shortcuts

Troubleshooting

Next Steps

Experts

Focus Chain

File Identification

AI-Powered Coding

​What is HAI Tasks?

​Getting Started

​Task Structure

​Task List Interface

​Search and Filter

​Accordion View

Expand/Collapse All

Individual Stories

​Task Actions

​Integrating with Specif AI

​Task Execution Workflow

​Task Components

HaiTasksList

HaiStoryAccordion

HaiTaskComponent

DetailedView

​Best Practices

​Configuration

​Task Storage

​Task Updates

​Advanced Features

​Custom Task Templates

​Task Dependencies

​Multi-Project Tasks

​Keyboard Shortcuts

​Troubleshooting

​Next Steps

Experts

Focus Chain

File Identification

AI-Powered Coding

What is HAI Tasks?

Getting Started

Task Structure

Task List Interface

Search and Filter

Accordion View

Task Actions

Integrating with Specif AI

Task Execution Workflow

Task Components

Best Practices

Configuration

Task Storage

Task Updates

Advanced Features

Custom Task Templates

Task Dependencies

Multi-Project Tasks

Keyboard Shortcuts

Troubleshooting

Next Steps