Agent Todos

Bir ajanın planını çalışırken gösterin. Her adım backlog'dan yapılacak, devam eden ve tamamlanana ilerler; canlı süreler, başarısızlıklar ve arkasındaki araç çağrıları ile birlikte. Yazma alanının üstü için bir durum hapı, görebildiğiniz plan değişiklikleri ve çalışmadan önce planı düzenlemek için bir gözden geçirme adımı.

Open in new tab

Genel bakış

Claude Code, Codex ve Gemini CLI gibi kodlama ajanları, çalışırken TodoWrite, update_plan ve write_todos gibi araçlarla yazılı bir plan tutar. Agent Todos bu planı adım başına bir satıra dönüştürür; devam eden adım açıkça yazılır (“Testler çalıştırılıyor”) ve her adımın ne kadar sürdüğü gösterilir.

Her adım backlog'dan yapılacak, devam eden ve ardından tamamlandı, başarısız ya da iptal edildi durumuna geçer. Ajan planını yeniden yazdığında yeni adımlar vurgulanır, kaldırılanlar daralarak kaybolur ve kısa bir not neyin değiştiğini söyler. Başarısız bir adım nedenini görünür tutar; tamamlanmış uzun adım dizileri katlanır ve güncel iş ekranda kalır.

AgentTodosStatus, geçerli adımı ve bir sayacı yazma alanının üstünde tek satırda gösterir; AgentTodosReview ise herhangi bir şey çalışmadan önce kullanıcıların adımları düzenlemesine, yeniden sıralamasına, eklemesine ve kaldırmasına, ardından ⌘↵ ile başlatmasına olanak tanır. Adaptörler, hâlâ akmakta olan girdi dahil her ajanın araç biçimini okur ve Tool Calls herhangi bir adımın içindeki işi gösterebilir.

Kurulum

Pro registry'yi components.json dosyasına ekleyin

components.json

{
  "registries": {
    "@hextaui-pro": {
      "url": "https://hextaui.com/r/pro/{name}.json",
      "headers": {
        "Authorization": "Bearer ${HEXTAUI_PRO_TOKEN}"
      }
    }
  }
}

Token'ınızı ekleyin
Hesap sayfanızda bir token oluşturun ve .env.local dosyasına HEXTAUI_PRO_TOKEN olarak ekleyin.

Bloğu ekleyin

pnpm dlx shadcn@latest add @hextaui-pro/agent-todos

Kullanım

AI SDK ile

getTodosFromParts, girdisi hâlâ akarken bile bir mesajdaki en son TodoWrite, update_plan veya write_todos çağrısını okur. Listeyi mesajda, durum hapını ise yazma alanının üstünde gösterin.

"use client"

import { useChat } from "@ai-sdk/react"

import { AgentTodos, AgentTodosStatus } from "@/components/blocks/agent-todos/agent-todos"
import { getTodosFromParts } from "@/components/blocks/agent-todos/todos"

export function Chat() {
  const { messages, status } = useChat()
  const busy = status === "submitted" || status === "streaming"
  const last = messages.at(-1)
  const current = last?.role === "assistant" ? getTodosFromParts(last.parts) : null

  return (
    <div className="flex flex-col gap-4">
      {messages.map((message) => {
        const plan = message.role === "assistant" ? getTodosFromParts(message.parts) : null
        return plan ? (
          <AgentTodos
            key={message.id}
            todos={plan.todos}
            explanation={plan.explanation}
            running={busy && message.id === last?.id}
          />
        ) : null
      })}
      {current ? <AgentTodosStatus todos={current.todos} running={busy} /> : null}
    </div>
  )
}

Çalıştırmadan önce gözden geçir

Ajan başlamadan önce kullanıcıların adımları düzenlemesine, yeniden sıralamasına, eklemesine ve kaldırmasına izin verin. Run plan ya da ⌘↵ temizlenmiş listeyi geri verir.

"use client"

import * as React from "react"

import { AgentTodosReview } from "@/components/blocks/agent-todos/todo-review"
import type { Todo } from "@/components/blocks/agent-todos/todos"

export function PlanApproval({
  proposed,
  onRun,
}: {
  proposed: Todo[]
  onRun: (plan: Todo[]) => void
}) {
  const [draft, setDraft] = React.useState(proposed)

  return <AgentTodosReview todos={draft} onChange={setDraft} onApprove={onRun} />
}

Artımlı görev araçlarıyla

Claude Code'un TaskCreate ve TaskUpdate'i gibi görevleri tek tek oluşturup güncelleyen araçlar için her çağrıyı applyTaskEvent ile listeye işleyin.

"use client"

import * as React from "react"

import { AgentTodos } from "@/components/blocks/agent-todos/agent-todos"
import { applyTaskEvent, type TaskEvent, type Todo } from "@/components/blocks/agent-todos/todos"

export function useTaskList() {
  const [todos, setTodos] = React.useState<Todo[]>([])
  const apply = React.useCallback(
    (event: TaskEvent) => setTodos((current) => applyTaskEvent(current, event)),
    []
  )
  return { todos, apply }
}

export function Tasks({ todos, running }: { todos: Todo[]; running: boolean }) {
  return <AgentTodos todos={todos} running={running} />
}

Yapı

Dıştan içe doğru birleştirdiğiniz parçalar.

Parça	Açıklama
`AgentTodos`	Başlığı, ilerleme çubuğu, açıklaması ve plan değişikliği notuyla tam liste.
`AgentTodosStatus`	Geçerli adımı gösteren, listeyi bir popover'da açan tek satırlık bir hap.
`AgentTodosReview`	Ajan başlamadan önce gösterilen düzenlenebilir plan.
`TodoMark`	Özel düzenler için tek başına durum işareti.
`getTodosFromParts, fromTodoWrite, fromUpdatePlan, fromWriteTodos, applyTaskEvent`	Her ajanın araç biçiminden Todo öğelerine adaptörler.

API referansı

AgentTodos

Prop	Tür	Varsayılan
`todos`Sıralı adımlar.	`Todo[]`	`–`
`explanation`Planın neden böyle göründüğü, ilerleme çubuğunun altında gösterilir. Codex bunu update_plan ile gönderir.	`string`	`–`
`running`Ajanın çalışıp çalışmadığı. Herhangi bir adım devam ederken varsayılan olarak true.	`boolean`	`–`
`title`Başlık etiketi ve bölge adı.	`string`	`"Tasks"`
`collapsible`Başlığın listeyi katlamasına izin verin.	`boolean`	`true`
`defaultOpen`Açık başlar.	`boolean`	`true`
`foldAfter`Liste bundan uzun olduğunda tamamlanmış adımları en üstte katlar.	`number`	`6`

Todo

Prop	Tür	Varsayılan
`id`Kararlı id. Plan değişiklikleri id'ye göre algılanır.	`string`	`–`
`content`Ne yapılacağı, emir kipinde: “Testleri çalıştır”.	`string`	`–`
`activeForm`Ne yaptığı, devam ederken gösterilir: “Testler çalıştırılıyor”.	`string`	`–`
`status`Aşama. pending, Yapılacak olarak okunur.	`"backlog" \| "pending" \| "in_progress" \| "completed" \| "failed" \| "cancelled"`	`–`
`error`Başarısız bir adımın altında gösterilir.	`string`	`–`
`duration`Geçmiş için saklanan saniyeler.	`number`	`–`
`details`Adımın altında açılır, genellikle Tool Calls.	`ReactNode`	`–`

AgentTodosStatus

Prop	Tür	Varsayılan
`todos`Aynı liste. Boşken hiçbir şey render etmez.	`Todo[]`	`–`
`running`true iken işareti ve shimmer'ı canlandırır.	`boolean`	`–`
`explanation`Popover içindeki listeye iletilir.	`string`	`–`

AgentTodosReview

Prop	Tür	Varsayılan
`todos`Önerilen plan.	`Todo[]`	`–`
`onChange`Her düzenlemede çağrılır.	`(todos: Todo[]) => void`	`–`
`onApprove`Run plan ya da ⌘↵ ile çağrılır; boş adımlar kaldırılır ve metin kırpılır.	`(todos: Todo[]) => void`	`–`
`onCancel`Cancel'ı gösterir ve Escape'i işler.	`() => void`	`–`
`title`Başlık.	`string`	`"Review the plan"`
`approveLabel`Düğme etiketi.	`string`	`"Run plan"`

getTodosFromParts(parts)

Bir AI SDK mesajındaki en yeni TodoWrite, update_plan veya write_todos çağrısından { todos, explanation? } döndürür, yoksa null.

Prop	Tür	Varsayılan
`parts`Statik ve dinamik araç parçalarında, hâlâ akmakta olan girdi dahil çalışır.	`UIMessage["parts"]`	`–`

applyTaskEvent(todos, event)

Bir TaskCreate ya da TaskUpdate çağrısını listeye işler. deleted durumu görevi kaldırır.

Prop	Tür	Varsayılan
`event`Çağrı, normalleştirilmiş.	`{ type: "create", id, subject, activeForm? } \| { type: "update", id, status?, subject?, activeForm? }`	`–`

Klavye

Tuş	Action
`EnterSpace`	Listeyi başlığından ya da bir adımın ayrıntılarından açar veya katlar.
`⌘↵`	Gözden geçirilirken planı çalıştırır; başka bir alana yazmıyorsanız.
`Enter`	Gözden geçirmede, geçerli adımın altına bir adım ekler.
`⌫`	Gözden geçirmede, boş bir adımı kaldırır ve üstündekine geçer.
`⌥↑`	Gözden geçirmede, adımı yukarı taşır. ⌥↓ aşağı taşır.
`↑↓`	Gözden geçirmede, adımlar arasında gezinir.
`Esc`	onCancel ayarlıysa gözden geçirmeyi iptal eder.

Erişilebilirlik

Liste, sıralı bir liste içeren etiketli bir bölgedir ve her adımın adı aşamasını da içerir, örneğin “Testler çalıştırılıyor, Devam ediyor”.
Gizli bir progressbar kaç adımın tamamlandığını bildirir.
Bir adımın başlaması, bitmesi ve başarısız olması, plan değişiklikleriyle birlikte polite bir live region ile duyurulur. Zamanlayıcı tikleri duyurulmaz.
Durum hapının etiketi geçerli adımı ve sayıyı okur ve listeyi odak yönetimli bir popover'da açar.
Gözden geçirme alanları adım numarasına göre etiketlenir, taşımalar duyurulur (“5 adımın 2. sırasına taşındı”) ve bir giriş yöntemi yazım yaparken Enter bekler.
Azaltılmış harekette, devam eden halka dönmeyi bırakır, onay işaretleri çizilmeden belirir ve adımlar anında yerine kayar.

Şunlarla geliştirildi

Agent Todos bloğunun yapıldığı ücretsiz HextaUI bileşenleri. Her biri tek başına yüklenir.

Kod

4 dosya, components/blocks/agent-todos konumuna eklendi.