TaskForm Component

Introduction

The TaskForm component is a client-side React component responsible for capturing user input to assign tasks to specific AI agents within the GeNCorE Command Center. It provides an interface for selecting an agent (such as Copilot, Claude, or Codex) and providing a textual description of the work to be performed. Sources: components/TaskForm.tsx:21-25, README.md:14

This component serves as the primary entry point for the "Panel zleceń" (Orders Panel), converting user-submitted forms into GitHub Issues via a backend API route. It handles the full lifecycle of task creation, including input validation, loading states, and displaying success or error feedback to the user. Sources: app/task/page.tsx:81-84, app/api/task/route.ts:50-68

Component Architecture and Logic

State Management

The component utilizes several local React states to manage the form lifecycle:

• selectedAgent: Tracks the ID of the currently chosen AI agent, defaulting to the first agent in the AGENTS configuration.
• description: Stores the raw text input from the user.
• loading: A boolean flag to disable inputs and show a "Tworzenie..." (Creating...) status during API calls.
• error/success: String values used to provide immediate UI feedback following an API request.

Sources: components/TaskForm.tsx:22-26

Data Flow

When a user submits the form, the data flows from the client-side component to the GitHub API through an internal Next.js API route.

The flow begins with the handleSubmit function, which prevents default form behavior and validates that the description is not empty. Sources: components/TaskForm.tsx:28-32

API Integration

The /api/task Endpoint

The TaskForm communicates with the server via a POST request to /api/task. The payload includes the agent identifier and the description.

Sources: components/TaskForm.tsx:39-41, app/api/task/route.ts:25-30

Server-Side Processing

The backend route processes the request by:

1. Verifying the GITHUB_TOKEN is configured.
2. Validating that the agent ID exists within the allowed AGENT_IDS.
3. Constructing a formatted GitHub Issue body and title.
4. Submitting the request to the GitHub REST API, specifically assigning the issue to the agent's associated githubLogin and applying the relevant issueLabel.

Sources: app/api/task/route.ts:11-15, app/api/task/route.ts:33-40, app/api/task/route.ts:60-68

UI Components and Interaction

Agent Selection

The component renders a list of buttons for each available agent. These buttons display the agent's emoji and label, and use dynamic CSS classes for selection states (e.g., agent.selectedBg). Sources: components/TaskForm.tsx:78-98

Task Persistence

While the TaskForm handles creation, its parent page (app/task/page.tsx) handles persistence. Upon a successful submission, the onSubmit callback is triggered, allowing the parent to save the task to localStorage. Sources: app/task/page.tsx:49-59, components/TaskForm.tsx:66

Data Structures

The component interacts with Task and Agent data structures defined within the project:

Task Implementation Details

// components/TaskForm.tsx:55-61
const task: Task = {
  id: String(data.issue?.number || Date.now()),
  agent: selectedAgent,
  description,
  issueUrl: data.issue?.html_url,
  createdAt: new Date().toISOString(),
}

Summary

The TaskForm Component is a critical module for translating user intent into actionable GitHub tasks. By integrating directly with the GitHub API via a secure backend route, it enables remote control over AI agents. It maintains a clean separation of concerns by handling local UI state while delegating long-term history storage to its parent environment and external repository. Sources: components/TaskForm.tsx:1-133, app/task/page.tsx:1-127