Plan – suiss/ui

import {
  CheckCircleIcon,
  CircleIcon,
  PathIcon,
  RecordIcon,
} from "@phosphor-icons/react"
import { Bubble, BubbleContent } from "@/components/ui/bubble"
import { Message, MessageContent } from "@/components/ui/message"
import {
  Trace,
  TraceCollapsible,
  TraceCollapsibleContent,
  TraceCollapsibleTrigger,
  TraceDescription,
  TraceIcon,
  TraceLine,

Plan is the list of steps the agent decides on before it starts, such as the steps of a migration. Each step is done, running or pending, and the title counts how many are done.

It is built with Trace: a TraceCollapsible for the plan and a nested Trace for its steps. When the steps are not known up front, use Task instead.

Installation

Plan is built with Trace.

$ pnpm dlx shadcn@latest add @esuiss/trace

Or use the suiss/ui CLI:

$ pnpm dlx @esuiss/ui@latest add trace

Usage

import {
  Trace,
  TraceCollapsible,
  TraceCollapsibleContent,
  TraceCollapsibleTrigger,
  TraceDescription,
  TraceIcon,
  TraceLine,
  TraceTitle,
} from "@/components/ui/trace"

<Trace>
  <TraceCollapsible defaultOpen>
    <TraceCollapsibleTrigger>
      <TraceLine status="running">
        <TraceIcon>
          <RouteIcon />
        </TraceIcon>
        <TraceTitle>Plan: migrate to Base UI</TraceTitle>
        <TraceDescription>2 of 5 done</TraceDescription>
      </TraceLine>
    </TraceCollapsibleTrigger>
    <TraceCollapsibleContent>
      <Trace>
        <TraceLine>
          <TraceIcon>
            <CircleCheckIcon />
          </TraceIcon>
          <TraceTitle>Replace the Radix imports</TraceTitle>
        </TraceLine>
        <TraceLine status="running">
          <TraceIcon>
            <CircleDotIcon />
          </TraceIcon>
          <TraceTitle>Rename asChild to render</TraceTitle>
        </TraceLine>
        <TraceLine status="pending">
          <TraceIcon>
            <CircleIcon />
          </TraceIcon>
          <TraceTitle>Run the type checker</TraceTitle>
        </TraceLine>
      </Trace>
    </TraceCollapsibleContent>
  </TraceCollapsible>
</Trace>

Use defaultExpanded instead of defaultOpen on TraceCollapsible.

Mark finished steps with no status, the current step with running and the steps still to come with pending. Keep the progress count in a TraceDescription so the title itself stays the goal.

Examples

Details

A description above the steps, inside TraceCollapsibleContent.

import { CheckCircleIcon, CircleIcon, PathIcon } from "@phosphor-icons/react"
import {
  Trace,
  TraceCollapsible,
  TraceCollapsibleContent,
  TraceCollapsibleTrigger,
  TraceDescription,
  TraceIcon,
  TraceLine,
  TraceTitle,
} from "@/components/ui/trace"

const steps = [
  "Add a dark variant to the theme tokens",
  "Read the theme from a cookie on the server",
  "Add a toggle to the settings page",

AI SDK

Stream the plan as a data part with a fixed id. The AI SDK replaces a data part with the same id, so the plan updates in place as steps finish.

app/api/chat/route.ts

const stream = createUIMessageStream({
  execute: async ({ writer }) => {
    writer.write({ type: "data-plan", id: "plan", data: { title, steps } })
  },
})

const plan = message.parts.find((part) => part.type === "data-plan")

API Reference

See Trace.

Accessibility

The plan line is a button with aria-expanded, and its accessible name includes the progress count.
Pending steps are muted and the running step shimmers, so the step icons also differ by state.

import { CheckCircleIcon, CircleIcon, PathIcon, RecordIcon } from "phosphor-react-native"
import { Icon } from "@/components/ui/icon"
import { Trace, TraceCollapsible, TraceCollapsibleContent, TraceCollapsibleTrigger, TraceDescription, TraceIcon, TraceLine, TraceTitle } from "@/components/ui/trace"

export function AiPlanExample() {
  return (
    <TraceCollapsible defaultOpen>
      <TraceCollapsibleTrigger>
        <TraceLine status="running">
          <TraceIcon>
            <Icon as={PathIcon} />
          </TraceIcon>
          <TraceTitle>Plan: migrate to Base UI</TraceTitle>
          <TraceDescription>2 of 4 done</TraceDescription>
        </TraceLine>
      </TraceCollapsibleTrigger>

import EsuissUI
import PhosphorSwift
import SwiftUI

struct PlanExample: View {
  var body: some View {
    TraceCollapsible(initiallyExpanded: true) {
      TraceCollapsibleTrigger {
        TraceLine(status: .running) {
          TraceIcon { Ph.path.regular }
          TraceTitle(verbatim: "Plan: migrate to Base UI")
          TraceDescription(verbatim: "2 of 4 done")
        }
      }
      TraceCollapsibleContent {
        Trace {

import androidx.compose.runtime.Composable
import com.adamglin.PhosphorIcons
import com.adamglin.phosphoricons.Regular
import com.adamglin.phosphoricons.regular.CheckCircle
import com.adamglin.phosphoricons.regular.Circle
import com.adamglin.phosphoricons.regular.Path
import com.adamglin.phosphoricons.regular.Record
import com.esuiss.ui.components.Icon
import com.esuiss.ui.components.Trace
import com.esuiss.ui.components.TraceCollapsible
import com.esuiss.ui.components.TraceCollapsibleContent
import com.esuiss.ui.components.TraceCollapsibleTrigger
import com.esuiss.ui.components.TraceDescription
import com.esuiss.ui.components.TraceIcon
import com.esuiss.ui.components.TraceLine
import com.esuiss.ui.components.TraceStatus

Plan on mobile is built from the same parts as on the web: Trace. The example above is a static demo; connect it to your agent by rendering the same parts from your messages.

Installation

$ pnpm dlx @esuiss/ui@latest add trace

$ pnpm dlx @esuiss/ui@latest add trace --platform swift

$ pnpm dlx @esuiss/ui@latest add trace --platform kotlin

API Reference

See Trace.

Usage

import {
  Trace,
  TraceCollapsible,
  TraceCollapsibleContent,
  TraceCollapsibleTrigger,
  TraceDescription,
  TraceIcon,
  TraceLine,
  TraceTitle,
} from "@/components/ui/trace"

<Trace>
  <TraceCollapsible defaultOpen>
    <TraceCollapsibleTrigger>
      <TraceLine status="running">
        <TraceIcon>
          <RouteIcon />
        </TraceIcon>
        <TraceTitle>Plan: migrate to Base UI</TraceTitle>
        <TraceDescription>2 of 5 done</TraceDescription>
      </TraceLine>
    </TraceCollapsibleTrigger>
    <TraceCollapsibleContent>
      <Trace>
        <TraceLine>
          <TraceIcon>
            <CircleCheckIcon />
          </TraceIcon>
          <TraceTitle>Replace the Radix imports</TraceTitle>
        </TraceLine>
        <TraceLine status="running">
          <TraceIcon>
            <CircleDotIcon />
          </TraceIcon>
          <TraceTitle>Rename asChild to render</TraceTitle>
        </TraceLine>
        <TraceLine status="pending">
          <TraceIcon>
            <CircleIcon />
          </TraceIcon>
          <TraceTitle>Run the type checker</TraceTitle>
        </TraceLine>
      </Trace>
    </TraceCollapsibleContent>
  </TraceCollapsible>
</Trace>

Use defaultExpanded instead of defaultOpen on TraceCollapsible.

Mark finished steps with no status, the current step with running and the steps still to come with pending. Keep the progress count in a TraceDescription so the title itself stays the goal.

Examples

Details

A description above the steps, inside TraceCollapsibleContent.

import { CheckCircleIcon, CircleIcon, PathIcon } from "@phosphor-icons/react"
import {
  Trace,
  TraceCollapsible,
  TraceCollapsibleContent,
  TraceCollapsibleTrigger,
  TraceDescription,
  TraceIcon,
  TraceLine,
  TraceTitle,
} from "@/components/ui/trace"

const steps = [
  "Add a dark variant to the theme tokens",
  "Read the theme from a cookie on the server",
  "Add a toggle to the settings page",

AI SDK

Stream the plan as a data part with a fixed id. The AI SDK replaces a data part with the same id, so the plan updates in place as steps finish.

app/api/chat/route.ts

const stream = createUIMessageStream({
  execute: async ({ writer }) => {
    writer.write({ type: "data-plan", id: "plan", data: { title, steps } })
  },
})

const plan = message.parts.find((part) => part.type === "data-plan")

import { CheckCircleIcon, CircleIcon, PathIcon, RecordIcon } from "phosphor-react-native" import { Icon } from "@/components/ui/icon" import { Trace, TraceCollapsible, TraceCollapsibleContent, TraceCollapsibleTrigger, TraceDescription, TraceIcon, TraceLine, TraceTitle } from "@/components/ui/trace" export function AiPlanExample() { return ( <TraceCollapsible defaultOpen> <TraceCollapsibleTrigger> <TraceLine status="running"> <TraceIcon> <Icon as={PathIcon} /> </TraceIcon> <TraceTitle>Plan: migrate to Base UI</TraceTitle> <TraceDescription>2 of 4 done</TraceDescription> </TraceLine> </TraceCollapsibleTrigger>