AI Elements

Queue

Displays the agent's todo list, split into what is left and what is done.

Add dark mode to the settings page.

Add a dark variant to the theme tokensRead the theme from a cookieAdd a toggle to the settings pageCheck contrast on the charts

Dark mode is in. The toggle is under Settings, Appearance.

Queue is the agent's todo list. Todos sit in two sections, To do and Completed, and the icon on each todo shows its status. The agent updates the list as it works, so a todo moves from one section to the other when it is done.

Queue is built with UiTrace with a UiTraceCollapsible for each section.

Installation

Queue is built with the Trace component.

Usage

<template>
  <UiTrace>
    <UiTraceCollapsible default-open>
      <UiTraceCollapsibleTrigger>
        <UiTraceLine>
          <UiTraceIcon>
            <UiIcon name="lucide:list-todo" />
          </UiTraceIcon>
          <UiTraceTitle>2 to do</UiTraceTitle>
        </UiTraceLine>
      </UiTraceCollapsibleTrigger>
      <UiTraceCollapsibleContent>
        <UiTrace>
          <UiTraceLine>
            <UiTraceIcon>
              <UiIcon name="lucide:circle" />
            </UiTraceIcon>
            <UiTraceTitle>Update the registry snapshots</UiTraceTitle>
          </UiTraceLine>
          <UiTraceLine>
            <UiTraceIcon>
              <UiIcon name="lucide:circle" />
            </UiTraceIcon>
            <UiTraceTitle>Add tests for the combobox</UiTraceTitle>
          </UiTraceLine>
        </UiTrace>
      </UiTraceCollapsibleContent>
    </UiTraceCollapsible>
    <UiTraceCollapsible>
      <UiTraceCollapsibleTrigger>
        <UiTraceLine>
          <UiTraceIcon>
            <UiIcon name="lucide:list-checks" />
          </UiTraceIcon>
          <UiTraceTitle>1 completed</UiTraceTitle>
        </UiTraceLine>
      </UiTraceCollapsibleTrigger>
      <UiTraceCollapsibleContent>
        <UiTrace>
          <UiTraceLine>
            <UiTraceIcon>
              <UiIcon name="lucide:circle-check" />
            </UiTraceIcon>
            <UiTraceTitle>Add a changeset</UiTraceTitle>
          </UiTraceLine>
        </UiTrace>
      </UiTraceCollapsibleContent>
    </UiTraceCollapsible>
  </UiTrace>
</template>

Descriptions

A todo with a description is a UiTraceCollapsible that opens to show it. A todo without one stays a UiTraceLine.

Update the registry snapshots

<template>
  <UiTraceCollapsible>
    <UiTraceCollapsibleTrigger>
      <UiTraceLine>
        <UiTraceIcon>
          <CircleIcon />
        </UiTraceIcon>
        <UiTraceTitle>Fix the focus ring on the select trigger</UiTraceTitle>
      </UiTraceLine>
    </UiTraceCollapsibleTrigger>
    <UiTraceCollapsibleContent>
      It is clipped by overflow-hidden on the field.
    </UiTraceCollapsibleContent>
  </UiTraceCollapsible>
</template>

AI SDK

The agent writes its todos with a tool, writeTodos in this example. Each call sends the whole list, so render the last call and skip one whose input is still streaming.

const todos = message.parts
  .filter((part) => part.type === "tool-writeTodos")
  .filter((part) => part.state !== "input-streaming")
  .at(-1)?.input?.todos;

Map each todo status to a section, an icon and a UiTraceLine status. Set "running" on the todo in progress only while the chat streams, so its title stops shimmering when the agent stops.

Todo status	Section	Icon	`UiTraceLine` status
`pending`	To do	`CircleIcon`	none
`in_progress`	To do	`CircleDotIcon`	`"running"` while the chat streams
`completed`	Completed	`CircleCheckIcon`	none

API Reference

See Trace.

Prompt Input

A message field with attachments and a send button.

Reasoning

Displays the agent's thinking as it streams.