Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Stack Trace Triage Chat Block for Radix UI

An error-triage channel where teammates paste stack traces as cards with the top three frames, a fold for nine more, a real Copy trace button and a claim state, and where pressing I will take this claims a report and turns your messages into findings on it.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Show a channel where errors are pasted and somebody takes each one, with this stack trace triage chat for React with Radix UI. A hairline frame with a plus mark on each corner holds a window of fixed height for Stackleigh, an error-triage channel. A trace card shows the service, the error line and the top three frames in mono, your own code in weight and library frames quiet, a Collapsible fold for the nine below, a Copy Button that really copies the whole trace, and its state: Unclaimed, or Claimed by a name. The first report is already claimed; "I'll take this" on the second claims it, adds a line in the log and moves focus to the composer, where what you write becomes a finding on that report. The end pane lists the open reports with their claimants, summed from the same state, and on a phone a Chat and Open switch shows one pane at a time. The composer's Shine Button, the only colored control, sends what you type; Enter sends and Shift and Enter add a line. The frame is ruled by Guides, and everything moves with CSS only. It's the starting point for an on-call channel, a bug-triage room or any thread where work gets claimed.

FAQ

What stays in the page, and how do I make it real?

Everything. Both traces, their frames and the replies are typed in this file, and a teammate answers each message you send from a short script. Nothing is sent and no model runs. To wire it for real, post the claim to your error tracker where claim says so, read the claimant from the issue and append findings to the report's thread.

What happens when I claim a report?

The card's state changes from Unclaimed to Claimed by You, the button turns to a disabled "Claimed", a line in the log says you claimed it, the end pane's list and counts follow, and focus moves to the composer with its placeholder naming the report. From then on your messages carry a "Finding on" label for that report.

How are frames shown?

The top three frames show first, with your own code (files under src) in weight and library frames in the quiet color; the fold opens the other nine in place, and its content is inert until it opens so the keyboard never lands in hidden lines. Frames are always left to right and long paths wrap instead of scrolling.

Does Copy trace really copy?

Yes: the error line and all twelve frames, one per line and indented, go to the clipboard, and the line under the composer says "Copied the trace." If the browser refuses, it says so instead.

Is it usable with a keyboard and a screen reader?

The log is a focusable region announced as a log; every message starts with a hidden name and time. A claim is a glyph and a word, never a color, and the pane lists the same words. Tab runs through each card's Copy, fold and claim button, then the field and Send.

How does it look on a phone?

One pane at a time: the top bar has an "Open 2" button that shows the report list with a Back to chat button. The window keeps its height and only the log or the list scrolls.