72Los geht’s

Agent Todos

Zeige den Plan eines Agenten, während er arbeitet. Jeder Schritt wandert von Backlog über To do und In Arbeit zu Erledigt, mit Live-Zeiten, Fehlern und den dahinterliegenden Tool-Aufrufen. Eine Status-Pille für über dem Composer, sichtbare Planänderungen und ein Review-Schritt, um den Plan vor der Ausführung zu bearbeiten.

Open in new tab

Überblick

Coding-Agenten wie Claude Code, Codex und Gemini CLI führen während der Arbeit einen schriftlichen Plan, über Tools wie TodoWrite, update_plan und write_todos. Agent Todos macht aus diesem Plan eine Zeile pro Schritt, wobei der laufende Schritt ausformuliert wird („Tests werden ausgeführt“) und zeigt, wie lange jeder gedauert hat.

Jeder Schritt wandert von Backlog über To do und In Arbeit zu Erledigt, Fehlgeschlagen oder Abgebrochen. Schreibt der Agent seinen Plan um, werden neue Schritte hervorgehoben, entfernte klappen weg und eine kurze Notiz sagt, was sich geändert hat. Ein fehlgeschlagener Schritt behält seinen Grund im Blick, und lange Reihen erledigter Schritte falten sich weg, damit die aktuelle Arbeit sichtbar bleibt.

AgentTodosStatus zeigt den aktuellen Schritt und eine Zahl in einer Zeile über dem Composer, und AgentTodosReview lässt Nutzer Schritte bearbeiten, umsortieren, hinzufügen und entfernen, bevor etwas läuft, und dann mit ⌘↵ starten. Adapter lesen das Tool-Format jedes Agenten, auch Eingaben, die noch streamen, und Tool Calls kann die Arbeit in jedem Schritt zeigen.

Installation

  1. Die Pro-Registry zu components.json hinzufügen

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

  2. Token hinzufügen

    Erstelle auf deiner Kontoseite einen Token und trage ihn in .env.local als HEXTAUI_PRO_TOKEN ein.

  3. Den Block hinzufügen

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

Verwendung

Mit dem AI SDK

getTodosFromParts liest den neuesten TodoWrite-, update_plan- oder write_todos-Aufruf in einer Nachricht, selbst während seine Eingabe noch streamt. Zeige die Liste in der Nachricht und die Status-Pille über dem Composer.

"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>
  )
}

Vor dem Ausführen prüfen

Lass Nutzer Schritte bearbeiten, umsortieren, hinzufügen und entfernen, bevor der Agent startet. Run plan oder ⌘↵ gibt die bereinigte Liste zurück.

"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} />
}

Mit inkrementellen Task-Tools

Für Tools, die jeweils eine Aufgabe erstellen und aktualisieren, wie TaskCreate und TaskUpdate von Claude Code, faltest du jeden Aufruf mit applyTaskEvent in die Liste ein.

"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} />
}

Aufbau

Die Teile, die du zusammensetzt, von außen nach innen.

PartBeschreibung
AgentTodosDie vollständige Liste mit Header, Fortschrittsbalken, Erklärung und Hinweis auf Planänderungen.
AgentTodosStatusEine einzeilige Pille mit dem aktuellen Schritt, die die Liste in einem Popover öffnet.
AgentTodosReviewDer bearbeitbare Plan, der vor dem Start des Agenten angezeigt wird.
TodoMarkDie Statusmarkierung allein, für eigene Layouts.
getTodosFromParts, fromTodoWrite, fromUpdatePlan, fromWriteTodos, applyTaskEventAdapter vom Tool-Format jedes Agenten zu Todo-Items.

API-Referenz

AgentTodos

PropTypStandard
todosSchritte in Reihenfolge.
Todo[]–
explanationWarum der Plan so aussieht, angezeigt unter dem Fortschrittsbalken. Codex sendet das mit update_plan.
string–
runningOb der Agent arbeitet. Standardmäßig true, solange ein Schritt in Arbeit ist.
boolean–
titleHeader-Label und Regionsname.
string"Tasks"
collapsibleLass den Header die Liste einklappen.
booleantrue
defaultOpenStartet geöffnet.
booleantrue
foldAfterFaltet die erledigten Schritte oben weg, sobald die Liste länger ist als dieser Wert.
number6

Todo

PropTypStandard
idStabile ID. Planänderungen werden anhand der ID erkannt.
string–
contentWas zu tun ist, im Imperativ: „Tests ausführen“.
string–
activeFormWas gerade passiert, angezeigt während der Bearbeitung: „Tests werden ausgeführt“.
string–
statusDie Phase. pending wird als To do gelesen.
"backlog" | "pending" | "in_progress" | "completed" | "failed" | "cancelled"–
errorWird unter einem fehlgeschlagenen Schritt angezeigt.
string–
durationGespeicherte Sekunden, für den Verlauf.
number–
detailsÖffnet sich unter dem Schritt, meist Tool Calls.
ReactNode–

AgentTodosStatus

PropTypStandard
todosDieselbe Liste. Rendert nichts, wenn sie leer ist.
Todo[]–
runningAnimiert Markierung und Shimmer, solange true.
boolean–
explanationAn die Liste im Popover übergeben.
string–

AgentTodosReview

PropTypStandard
todosDer vorgeschlagene Plan.
Todo[]–
onChangeWird bei jeder Bearbeitung aufgerufen.
(todos: Todo[]) => void–
onApproveWird bei Run plan oder ⌘↵ aufgerufen, wobei leere Schritte entfernt und Text getrimmt werden.
(todos: Todo[]) => void–
onCancelZeigt Cancel und behandelt Escape.
() => void–
titleÜberschrift.
string"Review the plan"
approveLabelButton-Label.
string"Run plan"

getTodosFromParts(parts)

Gibt { todos, explanation? } vom neuesten TodoWrite-, update_plan- oder write_todos-Aufruf in einer AI-SDK-Nachricht zurück, oder null.

PropTypStandard
partsFunktioniert mit statischen und dynamischen Tool-Parts, auch bei Eingaben, die noch streamen.
UIMessage["parts"]–

applyTaskEvent(todos, event)

Faltet einen TaskCreate- oder TaskUpdate-Aufruf in die Liste ein. Der Status deleted entfernt die Aufgabe.

PropTypStandard
eventDer Aufruf, normalisiert.
{ type: "create", id, subject, activeForm? } | { type: "update", id, status?, subject?, activeForm? }–

Tastatur

TasteAktion
EnterSpaceÖffnet oder faltet die Liste über ihren Header, oder die Details eines Schritts.
⌘↵Führt den Plan aus, während er geprüft wird, es sei denn, du tippst in einem anderen Feld.
EnterFügt im Review einen Schritt unter dem aktuellen hinzu.
⌫Entfernt im Review einen leeren Schritt und springt zum darüberliegenden.
⌥↑Verschiebt im Review den Schritt nach oben. ⌥↓ verschiebt ihn nach unten.
↑↓Wechselt im Review zwischen Schritten.
EscBricht das Review ab, wenn onCancel gesetzt ist.

Barrierefreiheit

  • Die Liste ist eine beschriftete Region mit einer geordneten Liste, und der Name jedes Schritts enthält seine Phase, etwa „Tests werden ausgeführt, In Arbeit“.
  • Eine ausgeblendete Progressbar meldet, wie viele Schritte erledigt sind.
  • Start, Abschluss und Fehlschlag eines Schritts werden zusammen mit Planänderungen über eine höfliche Live-Region angesagt. Timer-Ticks werden nicht angesagt.
  • Das Label der Status-Pille liest den aktuellen Schritt und die Anzahl vor und öffnet die Liste in einem Popover mit Fokusverwaltung.
  • Review-Felder werden nach Schrittnummer beschriftet, Verschiebungen werden angesagt („Auf Schritt 2 von 5 verschoben“), und Enter wartet, solange eine Eingabemethode komponiert.
  • Bei reduzierter Bewegung hört der Ring für „In Arbeit“ auf zu drehen, Häkchen erscheinen ohne Einzeichnen und Schritte rutschen sofort an ihren Platz.

Gebaut mit

Die kostenlosen HextaUI-Komponenten, aus denen Agent Todos besteht. Jede lässt sich einzeln installieren.

Code

4 Dateien, hinzugefügt zu components/blocks/agent-todos.