shadcn.io is not affiliated with official shadcn/ui
Debug Assistant AI Block for Ark UI
Walk a stack to its cause: the error line, a likely cause with a suggested fix and Copy, five frames with the two library frames folded, and for each frame its code, its variables and a diagnosis.
Installation
Overview
Help people read a crash instead of guessing, with this debug assistant for React with Ark UI. A header and a framed panel with a plus mark on each corner show Tracebrook, a stack reader. At the top, three facts: the error line, the likely cause and a suggested fix in Syntax Text with Copy, all taken from the one frame marked as the likely cause. Below, a master and detail: the five frames of the stack in order, innermost first, with the two library frames folded into one Collapsible, and for the frame you press its code excerpt with the failing line marked, the variables at that frame (a value that is not set is flagged in words, not only by colour) and a short diagnosis. A Badge says whether a frame is your code or a library. Guides draw the frame; everything moves with CSS only. For error pages, crash reporters and any tool that explains a stack trace.
FAQ
What stays in the page, and how do I make it real?
All of it. The stack, the excerpts, the variables, the diagnoses and the fix are typed in the file, and no model read a real crash; the page only chooses which frame to show. To wire it for real, parse your own stack into frames of the same shape and mark the likely cause from your analysis, then the top facts follow it.
How is the likely cause chosen?
It is a flag on one frame in the data. The top card reads its explanation and its fix, and a button there jumps to that frame, so changing the flag changes everything above the stack. The throwing frame and the cause are often different, which is why both are shown.
Why are two frames folded?
Library frames are rarely where the fault is, so they are folded into one row ("2 library frames") and still reachable: opening the row lists them with the same buttons, and each has its own excerpt and variables.
How is a value that is not set flagged?
With words: the value reads undefined and "not set" follows it, so the flag does not depend on colour. In a real tool the same field would come from the debugger's scope.