Task Panel (/task)

The Task Panel is a core functional module of the GeNCorE Command Center that enables users to assign specific instructions to AI agents. It serves as an interface for creating tasks that are programmatically converted into GitHub Issues within a target repository, allowing for remote orchestration of agents like Claude, Copilot, and Codex.

The system manages task creation through a dedicated frontend form, a backend API route for GitHub integration, and local persistence for session-based history tracking. Access to this panel is restricted by a security middleware that validates session tokens before allowing task submission or history retrieval.

Sources: app/task/page.tsx, README.md:10-15, middleware.ts:25-50

Architecture and Components

The Task Panel is built using a client-server architecture. The frontend components handle user input and local history, while the backend API handles the secure communication with the GitHub REST API.

Frontend Components

• TaskPage (app/task/page.tsx): The main container that coordinates the display of the TaskForm and the TaskRecord history list. It manages the localStorage interactions for persisting the history of submitted tasks locally on the user's device.
• TaskForm (components/TaskForm.tsx): A controlled form component that allows users to select an agent and provide a text description of the task. It handles the asynchronous POST request to the backend API.

Backend Components

• Task API Route (app/api/task/route.ts): A protected Next.js API route that receives task data, validates the agent ID, and uses a server-side GITHUB_TOKEN to create an issue on GitHub.

Data Flow Diagram

The following diagram illustrates the lifecycle of a task from user input to GitHub Issue creation and local history update.

Task Creation Logic

Task creation involves translating a user's natural language description into a structured GitHub Issue. The system automatically assigns the issue to the GitHub login associated with the selected agent and applies specific labels.

API Endpoint Specification

The backend endpoint /api/task handles the conversion logic.

Sources: app/api/task/route.ts:16-30

Issue Formatting

When a task is submitted, the backend constructs a Markdown body for the GitHub Issue including a header, the user's description, and a timestamp footer identifying the source as the "GeNCorE Command Center".

// app/api/task/route.ts:46-53
const issueBody = [
    `## Zlecenie dla ${agentConfig.label}`,
    '',
    description.trim(),
    '',
    '---',
    `*Zadanie utworzone przez GeNCorE Command Center · ${new Date().toLocaleString('pl-PL')}*`,
  ].join('\n')

Sources: app/api/task/route.ts:46-53

Local History Management

To provide immediate feedback and a reference for past actions without requiring a database, the Task Panel utilizes the browser's localStorage.

• Storage Key: gencore_tasks
• Capacity: The system maintains a maximum of the 20 most recent tasks.
• Data Structure: Each TaskRecord includes a unique ID (derived from the GitHub Issue number), the agent ID, description, issue URL, and a creation timestamp.

Sequence: History Synchronization

This diagram shows how history is loaded on page mount and updated after a successful submission.

Security and Authentication

The Task Panel is protected by several layers of security to ensure that only authorized users can trigger agent actions.

1. Middleware Protection: The middleware.ts file intercepts requests to /task and /api/task. It verifies an auth cookie containing an HMAC-SHA256 hash of the ADMIN_TOKEN.
2. Server-Side Execution: The GITHUB_TOKEN is never exposed to the client. All interactions with the GitHub API occur within the Next.js Edge/Node runtime.
3. Validation: The API route validates that the provided agent ID exists in the AGENT_IDS registry before attempting to communicate with GitHub.

Sources: middleware.ts:38-55, app/api/task/route.ts:10-15, README.md:95-105

Summary

The Task Panel provides a streamlined interface for interacting with AI agents via GitHub Issues. By combining a React-based frontend for user interaction and history management with a secure Next.js backend for GitHub API orchestration, it allows users to manage complex agent workflows from any device. The reliance on localStorage ensures a snappy user experience for history tracking while maintaining a stateless backend architecture.