Skip to main content
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.
HAI Tasks detailed view

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

1

Access HAI Tasks

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

Load Tasks

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

Review Stories

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

Execute Tasks

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

​
Task Structure

HAI Tasks organizes work hierarchically:
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 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

Task search interface
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

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:
1

Generate with Specif AI

Use Specif AI to create user stories from:
  • Product requirements
  • Feature specifications
  • Bug reports
  • Enhancement requests
2

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"
      }
    ]
  }
]
3

Load in HAI Build

Import the JSON file into HAI Tasks interface.
4

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:
1

Task Selection

Click on a task to select it for execution.
2

Context Loading

HAI Build loads:
  • Task description as the initial prompt
  • Story context for additional background
  • Related files from previous tasks
3

AI Generation

The AI code generator:
  • Analyzes the task requirements
  • Creates an implementation plan
  • Generates code changes
  • Executes necessary commands
4

Progress Tracking

Monitor progress through:
  • Real-time chat updates
  • File change notifications
  • Terminal command output
  • Focus Chain todo list (if enabled)
5

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

  • Keep individual tasks focused and atomic
  • Limit tasks to 30-60 minute chunks
  • Create clear, actionable task descriptions
  • Include acceptance criteria in task text
  • Story names should clearly indicate the feature
  • Task descriptions should be specific and actionable
  • Include technical context when relevant
  • Reference related files or components
  • Sequence tasks logically (setup → implementation → testing)
  • Consider dependencies between tasks
  • Place infrastructure tasks early
  • Save integration tasks for later
  • 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

ShortcutAction
Ctrl+F / Cmd+FFocus search box
↑ / ↓Navigate tasks
EnterExecute selected task
SpaceExpand/collapse story
EscClose detailed view

​
Troubleshooting

  • Check JSON file format
  • Verify file permissions
  • Review HAI Build logs
  • Ensure valid task structure
  • Clear search field and retry
  • Check for special characters
  • Verify Fuse.js is loaded
  • Try exact string match
  • 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

Build docs developers (and LLMs) love

Get started for freeTalk to us