Yugen UI

Trace

Trace hiển thị tiến trình thực thi theo từng bước — agent AI gọi công cụ, CI pipeline, triển khai — để người dùng thấy hệ thống đang làm gì và vì sao.

Mỗi TraceStep có trạng thái (pending, running, success, error, skipped, cancelled) kèm icon + chữ, thời lượng hoặc đồng hồ chạy trực tiếp, badge metadata, phần chi tiết mở rộng (log, JSON, CodeBlock) và bước con lồng nhau. Phần đầu tự tổng kết số bước theo trạng thái, tổng thời gian và có nút mở rộng / thu gọn tất cả. Thay đổi trạng thái được đọc qua live region polite.
Yugen Labs · thử nghiệmComponent này nằm ngoài SemVer: API có thể đổi ở một bản minor, và thay đổi sẽ được ghi trong Có gì mới. Chính sách phiên bản

Agent: xếp lịch họp nhóm

Đang chờ

  • Đọc yêu cầu, Đang chờ

    Họp 60 phút trong tuần này, đủ 4 người.

  • calendar.readsong song
  • Gửi lời mời họp, Đang chờ

Import

Cài từ npm, chép mã nguồn vào dự án bằng @yugen-ui/cli hoặc shadcn CLI, hoặc import thẳng khi làm việc trong repo này.

TSX
// npm install yugen-uiimport { Trace, TraceStep, TraceLog } from "yugen-ui";

Biến thể

Mỗi ô là một mẫu độc lập: hover để Copy, hoặc bấm Code để xem mã nguồn.

  • pending — Đang chờ, Đang chờ
  • running — Đang chạy, Đang chạy
  • success — Hoàn tất, Hoàn tất
    1.2s
  • error — Lỗi, Lỗi
    320ms
  • skipped — Bỏ qua, Bỏ qua
  • cancelled — Đã huỷ, Đã huỷ

Sáu trạng thái

Icon và màu token đi cùng nhãn chữ — không dùng màu làm tín hiệu duy nhất. Bước running tự chạy đồng hồ.

Triển khai sakura-web

Đang chờ

Thời lượng: 48.3s
  • Cài phụ thuộc, Hoàn tất
    12.4s
  • Chạy kiểm thử, Hoàn tất
    31.8s
    212 test
  • 4.1s

    Bundle vượt ngân sách 180 KB.

    ✖ dist/index.js  214.6 KB > 180 KB
  • Triển khai preview, Bỏ qua
  • Triển khai production, Đã huỷ

Pipeline có lỗi

Bước lỗi tự mở phần chi tiết; ví dụ này đặt các bước sau thành skipped / cancelled.

Trả lời câu hỏi đổi trả

Đang chờ

Thời lượng: 3.1s
  • 812ms
    tool3 kết quả
    {  "query": "chính sách đổi trả",  "top_k": 3}
  • Tổng hợp câu trả lời, Hoàn tất
    2.3s
    1.2k token

Gọi công cụ kèm JSON

Slot details nhận bất kỳ nội dung nào — ở đây là CodeBlock JSON.

Cách dùng

Nên
  • Đặt tên bước bằng động từ ngắn, mô tả việc hệ thống đang làm (“Tra lịch”, “Gửi lời mời”).
  • Mở sẵn chi tiết của bước lỗi và ghi rõ nguyên nhân + cách khắc phục.
  • Cho người dùng hành động ngay trên phần đầu: Dừng, Chạy lại, Xem log đầy đủ.
Không nên
  • Không đổ toàn bộ log thô vào mô tả — để trong details, mặc định thu gọn.
  • Không lồng quá 2 cấp; nhóm lại nếu agent có hàng chục lệnh gọi nhỏ.
  • Không tắt announceChanges khi Trace là nơi duy nhất báo tiến độ.

Props

Prop · KiểuMặc địnhMô tả
Trace.title / descriptionReactNodeMặc định: —Tiêu đề lần chạy và chú thích phụ.
Trace.statusTraceStatusMặc định: —Trạng thái tổng; mặc định suy ra từ các bước.
Trace.duration / startedAtnumber (ms) / number (Date.now())Mặc định: —Tổng thời lượng khi xong; mốc bắt đầu để chạy đồng hồ khi đang chạy.
Trace.actionsReactNodeMặc định: —Nút ở phần đầu (Chạy lại, Dừng…).
Trace.appearance"outline" | "subtle"Mặc định: "outline"Có khung hay nhúng vào bề mặt khác.
Trace.size"small" | "medium"Mặc định: "medium"Icon 16 / 20px, chữ caption1 / body1.
Trace.hideHeader / announceChangesbooleanMặc định: false / trueẨn phần đầu; đọc thay đổi trạng thái qua live region.
TraceStep.status"pending" | "running" | "success" | "error" | "skipped" | "cancelled"Mặc định: "pending"Trạng thái bước.
TraceStep.title / descriptionReactNodeMặc định: —Tên bước (nên là chuỗi để dùng cho thông báo) và mô tả.
TraceStep.duration / startedAtnumberMặc định: —Thời lượng (ms) khi xong; running tự ghi mốc nếu không truyền startedAt.
TraceStep.metadatastring[] | ReactNodeMặc định: —Badge thông tin: model, token, nhánh…
TraceStep.detailsReactNodeMặc định: —Nội dung mở rộng (TraceLog, CodeBlock…).
TraceStep.expanded / defaultExpanded / onExpandedChangebooleanMặc định: —Điều khiển disclosure; mặc định mở khi running / error.
TraceStep.childrenTraceStepMặc định: —Bước con lồng nhau, có đường nối.
TraceLog.intent"neutral" | "error"Mặc định: "neutral"Khối log monospace, luôn LTR.

Messages

Chữ có sẵn của component: nhãn, aria-label, thông báo cho trình đọc màn hình.

Mặc định là tiếng Anh. Đổi qua prop messages của YugenProvider, theo namespace bên dưới; messagesVi chứa bản tiếng Việt. Xem Ngôn ngữ giao diện.

messages.trace

Khoá · KiểuMặc định (tiếng Anh)messagesVi
pendingstring

Nhãn trạng thái — cùng tên với TraceStatus.

Mặc định (tiếng Anh)"Pending"messagesVi"Đang chờ"
runningstringMặc định (tiếng Anh)"Running"messagesVi"Đang chạy"
successstringMặc định (tiếng Anh)"Completed"messagesVi"Hoàn tất"
errorstringMặc định (tiếng Anh)"Failed"messagesVi"Lỗi"
skippedstringMặc định (tiếng Anh)"Skipped"messagesVi"Bỏ qua"
cancelledstringMặc định (tiếng Anh)"Canceled"messagesVi"Đã huỷ"
labelstring

Tên vùng khi không có title (và không truyền aria-label).

Mặc định (tiếng Anh)"Progress"messagesVi"Tiến trình"
steps(done: number, total: number) => string

Tiến độ ở phần đầu: số bước đã xong / tổng số bước.

Mặc định (tiếng Anh)(done, total) => `${done}/${total} ${total === 1 ? "step" : "steps"}`messagesVi(done, total) => `${done}/${total} bước`
summarystring

Tên danh sách tổng kết theo trạng thái.

Mặc định (tiếng Anh)"Summary by status"messagesVi"Tổng kết theo trạng thái"
durationstring

Chữ ẩn trước thời lượng, cho trình đọc màn hình.

Mặc định (tiếng Anh)"Duration:"messagesVi"Thời lượng:"
collapseAllstringMặc định (tiếng Anh)"Collapse all"messagesVi"Thu gọn tất cả"
expandAllstringMặc định (tiếng Anh)"Expand all"messagesVi"Mở rộng tất cả"