grasscnGitHub

Trace

Chat-text status lines and controlled expandable details.

Preview

Building terrain1.2sWaiting for chunks
Loading example...
To run this copied example, install these items using the linked CLI or manual instructions:

Usage

TraceLine status accepts running, error and pending; TraceTitle/Description render selectable chat text. TraceIcon is decorative. Supplying TraceCollapsible open requires onOpenChange; the example maintains that state. className on TraceCollapsibleContent styles its inner content div.

Composition

Combine lines for running/pending stages and disclosure for details. Native white/red/dark-gray status text comes from the chat palette. Indentation, timing labels and the complete trace viewer are web adaptations; this is not a vanilla profiler widget.

Installation

Loading registry address

Component source

This is the component implementation. Its supporting styles, helpers and resources are also required. See complete manual installation.

Component implementationcomponents/ui/trace.tsx · tsx
"use client";

import * as React from "react";

import "./minecraft-trace.css";
import {
  Collapsible,
  CollapsibleTrigger,
  CollapsibleContent,
} from "./collapsible";
import { ChatChildren, MessageScale } from "./message";
import { minecraftClasses as cn, minecraftStyle } from "./minecraft-render";

Interactive playground

Building terrain 世界
1.2sWaiting for chunks
runningExpand the details to inspect the trace