Task

Bloco de tarefa recolhível para uma ação de agente - título no trigger, lista de itens com badges de arquivo inline no corpo.

Visão geral

Task é a unidade granular do trabalho de agente. Onde Plan descreve todo o plano de múltiplos passos e Chain of Thought mostra o reasoning passo a passo, Task representa uma única tarefa nomeada com suas ações específicas e os arquivos que ela tocou.

Use quando o agente está editando uma codebase, navegando por uma árvore de documentação, ou de outra forma fazendo trabalho concreto no nível de arquivo que o usuário quer inspecionar ou auditar.

Preview

Recolhido

Generate component scaffold

'use client';import {  Task,  TaskContent,  TaskItem,  TaskItemFile,  TaskTrigger,} from '@gremorie/rx-ai';export function TaskCollapsedPreview() {  return (    <Task defaultOpen={false}>      <TaskTrigger title="Generate component scaffold" />      <TaskContent>        <TaskItem>Reading registry.json...</TaskItem>        <TaskItem>          Wrote <TaskItemFile>src/lib/my-component.tsx</TaskItemFile>        </TaskItem>        <TaskItem>          Wrote <TaskItemFile>src/lib/my-component/index.ts</TaskItemFile>        </TaskItem>      </TaskContent>    </Task>  );}

Expandido

Generate component scaffold

Reading registry.json...

Wrote

src/lib/my-component.tsx

Wrote

src/lib/my-component/index.ts

Updating package exports...

'use client';import {  Task,  TaskContent,  TaskItem,  TaskItemFile,  TaskTrigger,} from '@gremorie/rx-ai';export function TaskExpandedPreview() {  return (    <Task defaultOpen>      <TaskTrigger title="Generate component scaffold" />      <TaskContent>        <TaskItem>Reading registry.json...</TaskItem>        <TaskItem>          Wrote <TaskItemFile>src/lib/my-component.tsx</TaskItemFile>        </TaskItem>        <TaskItem>          Wrote <TaskItemFile>src/lib/my-component/index.ts</TaskItemFile>        </TaskItem>        <TaskItem>Updating package exports...</TaskItem>      </TaskContent>    </Task>  );}

Anatomia

Task
├─ TaskTrigger          header (ícone + título + chevron)
└─ TaskContent
   └─ TaskItem          uma linha por passo
      └─ TaskItemFile   chip de arquivo (opcional)

Instalação

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

Uso

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`	Estado de abertura inicial não controlado.
`open`	`boolean`	-	Estado de abertura controlado.
`onOpenChange`	`(open: boolean) => void`	-	Notificação quando o usuário alterna.

Estende ComponentProps<typeof Collapsible>.

`<TaskTrigger>`

Prop	Type	Default	Description
`title`	`string`	-	Obrigatório. Exibido no trigger padrão.
`children`	`ReactNode`	-	Opcional. Substitui completamente o layout padrão de ícone de busca + título + chevron.

Estende ComponentProps<typeof CollapsibleTrigger>.

<Task> detém o estado do collapsible.
<TaskTrigger> é o handle - ícone + título + chevron por padrão.
<TaskContent> é o corpo recuado com borda vertical.
<TaskItem> é uma linha de ação.
<TaskItemFile> é um badge de arquivo inline dentro de um item.

Variações

Log de edição no nível de arquivo

Uso padrão - o agente reporta os arquivos que tocou.

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

Trigger customizado

Sobrescreva o ícone + título padrão para expor um badge de status ou estado em execução.

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

Tasks empilhadas sob um plano

Coloque múltiplos irmãos Task dentro de PlanContent para um detalhamento por passo.

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

Acessibilidade

Teclado: TaskTrigger é um CollapsibleTrigger, alternando com Enter / Space.
ARIA: o Radix Collapsible conecta aria-expanded / aria-controls automaticamente. O chevron padrão gira via data-state para dar uma pista visual de aberto / fechado.
Leitores de tela: a prop title vira o label do trigger, então a task é anunciada com um nome significativo. Mantenha o texto de TaskItem descritivo para que as ações de arquivo sejam lidas naturalmente.
Movimento reduzido: abrir / fechar usa animações data-state do Tailwind e respeita prefers-reduced-motion.

Relacionados

Plan - o plano multi-task que hospeda as tasks
Chain of Thought - reasoning por passo dentro de uma task
Confirmation - portão de aprovação antes de executar uma task destrutiva