Error fix cardPro

A build or runtime error with the agent's diagnosis and a one click fix. The fix runs its steps in place with a live clock, then shows the line it replaced, the proof it worked and Undo.

Markdown

On this page

ProThe payouts dashboard crashes on manual batches. The diagnosis streams in, Fix it runs its steps with a live clock, and the frame shows the replaced line with proof it worked.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/error-fix-card

Usage

tsx

import { ErrorFixCard } from "@/components/ui/chatcn/pro/error-fix-card"

<ErrorFixCard
  name="TypeError"
  message={error.message}
  location={{ path, line, column }}
  code={frame}
  codeStart={11}
  diagnosis={diagnosis}
  fixTitle="Guard the missing schedule"
  steps={["Edit batch-row.tsx", "Rebuild", "Check the console"]}
  phase={phase}
  stepsDone={done}
  onFix={fix}
/>

Pass the lines around the error as code; the line at location.line gets a wavy underline from location.column. Drive phase through idle, fixing, fixed and failed, with stepsDone while fixing. Once fixed, fixCode shows as the added line under the removed one and result says what proves it worked.

Examples

States

ProDiagnosing, fixing, fixed, a fix that did not work, a build error with no code frame and read only.

Props

Prop	Type	Notes
`kind`	`"build" \| "runtime" \| "type" \| "test"`	Default `runtime`
`name`, `message`	`string`	The error
`location`	`{ path, line, column? }`	Where it was thrown
`code`, `codeStart`, `fixCode`	`string`, `number`, `string`	Frame and the fix
`diagnosis`, `diagnosing`	`ReactNode`, `boolean`	Streams while diagnosing
`fixTitle`, `steps`	`string`, `string[]`
`phase`, `stepsDone`, `fixStartedAt`		Progress and the live clock
`result`, `error`	`ReactNode`	Proof it worked, or what to do next
`occurrences`	`string`	For example 12 times in 2 min
`onFix`, `onUndo`, `onLocationSelect`
`disabled`	`boolean`	Read only

Keyboard

Tab reaches the location, Fix it and Undo fix. Fix it is described by the fix's one line summary.

Accessibility

The card is an article named by the error. The error line reads Error here, and the fix as Removed and Added.
Steps read as Done, Now and Next. The result line is a polite live region, so the outcome is announced once. A fix that did not work is an alert that says what to do next.

Motion

The status glyph swaps from a cross to a check in 150 ms and the added line rises 4 px over 180 ms. The error message gets a strike through rather than disappearing. Reduced motion keeps the swap and drops the travel.