Uranus® Design System
AI

StageList

Linha do tempo vertical com etapas queued / running / done para fluxos de plano e pesquisa.

StageList é a peça base de PlanPanel e ResearchPanel. Cada item é um passo com status que troca o ícone e a cor sem reordenar a lista. Use diretamente quando precisar embutir o progresso em outro layout.

  1. Coletar requisitos

    Concluído
  2. Pesquisar fontes

    Executando

    Lendo /docs/ai

  3. Esboçar resposta

    Aguardando
  4. Revisar citações

    Aguardando
'use client';

import { StageList } from '@uranus-workspace/ai';

export default function StageListDefault() {
  return (
    <div className="mx-auto w-full max-w-md rounded-md border bg-background p-4">
      <StageList
        stages={[
          { id: '1', title: 'Coletar requisitos', status: 'done' },
          {
            id: '2',
            title: 'Pesquisar fontes',
            status: 'running',
            description: 'Lendo /docs/ai',
          },
          { id: '3', title: 'Esboçar resposta', status: 'queued' },
          { id: '4', title: 'Revisar citações', status: 'queued' },
        ]}
      />
    </div>
  );
}

Uso

import { StageList } from '@uranus-workspace/ai';

<StageList
  stages={[
    { id: '1', title: 'Coletar requisitos', status: 'done' },
    { id: '2', title: 'Pesquisar fontes', status: 'running' },
    { id: '3', title: 'Esboçar resposta', status: 'queued' },
  ]}
/>

Estados

queued, running, done, error, skipped — cada um tem ícone, cor e label próprios. O passo em running recebe aria-current="step" para leitores de tela.

On this page