Task

Collapsible task block for an agent action - title in the trigger, item list with inline file badges in the body.

Overview

Task is the granular unit of agent work. Where Plan describes the whole multi-step plan and Chain of Thought shows step-by-step reasoning, Task represents a single named task with its specific actions and the files it touched.

Use it when the agent is editing a codebase, browsing a documentation tree, or otherwise doing concrete file-level work that the user wants to inspect or audit.

Preview

Collapsed

Generate component scaffold

Expanded

Generate component scaffold

Reading registry.json...

Wrote

src/lib/my-component.tsx

Wrote

src/lib/my-component/index.ts

Updating package exports...

Installation

bash npx gremorie@latest add rx-task

bash pnpm dlx gremorie@latest add rx-task

bash yarn dlx gremorie@latest add rx-task

bash bunx --bun gremorie@latest add rx-task

Usage

import { Task, TaskTrigger, TaskContent, TaskItem, TaskItemFile } from "@gremorie/rx-ai";

export function Example() {
  return (
    <Task>
      <TaskTrigger title="Refactor router" />
      <TaskContent>
        <TaskItem>
          Edited <TaskItemFile>app/router.tsx</TaskItemFile>
        </TaskItem>
        <TaskItem>
          Renamed <TaskItemFile>app/routes/(legacy)</TaskItemFile> to <TaskItemFile>app/routes/(deprecated)</TaskItemFile>
        </TaskItem>
      </TaskContent>
    </Task>
  );
}

import { Component } from "@angular/core";
import {
  Task,
  TaskTrigger,
  TaskContent,
  TaskItem,
  TaskItemFile,
} from "@gremorie/ng-ai";

@Component({
selector: "app-example",
standalone: true,
imports: [Task, TaskTrigger, TaskContent, TaskItem, TaskItemFile],
template: `     <task [open]="true">
      <task-trigger title="Refactor router" />
      <task-content>
        <task-item>
          Edited <task-item-file>app/router.ts</task-item-file>
        </task-item>
        <task-item>
          Renamed <task-item-file>routes/legacy.ts</task-item-file> to
          <task-item-file>routes/deprecated.ts</task-item-file>
        </task-item>
      </task-content>
    </task>
  `,
})
export class ExampleComponent {}

API

`<Task>`

Prop	Type	Default	Description
`defaultOpen`	`boolean`	`true`	Uncontrolled initial open state.
`open`	`boolean`	-	Controlled open state.
`onOpenChange`	`(open: boolean) => void`	-	Notification when the user toggles.

Extends ComponentProps<typeof Collapsible>.

`<TaskTrigger>`

Prop	Type	Default	Description
`title`	`string`	-	Required. Displayed in the default trigger.
`children`	`ReactNode`	-	Optional. Fully replaces the default search icon + title + chevron layout.

Extends ComponentProps<typeof CollapsibleTrigger>.

<Task> owns the collapsible state.
<TaskTrigger> is the handle - icon + title + chevron by default.
<TaskContent> is the indented body with vertical border.
<TaskItem> is one action line.
<TaskItemFile> is an inline file badge within an item.

Variations

File-level edit log

Default usage - the agent reports the files it touched.

<Task>
  <TaskTrigger title="Refactor router" />
  <TaskContent>
    <TaskItem>
      Read <TaskItemFile>app/router.tsx</TaskItemFile>
    </TaskItem>
    <TaskItem>
      Edited <TaskItemFile>app/router.tsx</TaskItemFile> (12 insertions, 4 deletions)
    </TaskItem>
    <TaskItem>
      Ran tests in <TaskItemFile>app/router.test.tsx</TaskItemFile>
    </TaskItem>
  </TaskContent>
</Task>

Custom trigger

Override the default icon + title to surface a status badge or running state.

<Task>
  <TaskTrigger title="Migrate database">
    <div className="flex w-full items-center gap-2 text-sm">
      <Loader2Icon className="size-4 animate-spin" />
      Migrating database (3 of 7 steps)
      <ChevronDownIcon className="ml-auto size-4" />
    </div>
  </TaskTrigger>
  <TaskContent>...</TaskContent>
</Task>

Stacked tasks under a plan

Drop multiple Task siblings inside PlanContent for a per-step breakdown.

<Plan defaultOpen>
  <PlanHeader>
    <PlanTitle>Ship the new pricing page</PlanTitle>
    <PlanDescription>3 tasks</PlanDescription>
  </PlanHeader>
  <PlanContent>
    <Task>
      <TaskTrigger title="Update copy" />
      <TaskContent>
        <TaskItem>
          Edited <TaskItemFile>app/pricing/page.tsx</TaskItemFile>
        </TaskItem>
      </TaskContent>
    </Task>
    <Task defaultOpen={false}>
      <TaskTrigger title="Add A/B test" />
      <TaskContent>
        <TaskItem>
          Created <TaskItemFile>lib/experiments/pricing.ts</TaskItemFile>
        </TaskItem>
      </TaskContent>
    </Task>
  </PlanContent>
</Plan>

Accessibility

Keyboard: TaskTrigger is a CollapsibleTrigger, toggling on Enter / Space.
ARIA: Radix Collapsible wires aria-expanded / aria-controls automatically. The default chevron rotates via data-state to give a visual open / closed cue.
Screen readers: the title prop becomes the trigger label, so the task announces with a meaningful name. Keep TaskItem text descriptive so the file actions read naturally.
Reduced motion: open / close uses Tailwind data-state animations and respects prefers-reduced-motion.

Plan - the multi-task plan that hosts tasks
Chain of Thought - per-step reasoning inside a task
Confirmation - approval gate before running a destructive task