Add 'Explain this error' AI CTA to all error surfaces#9221
Open
Add 'Explain this error' AI CTA to all error surfaces#9221
Conversation
ericokuma
force-pushed
the
eokuma/ai-error-resolution
branch
from
525568a to
6844151
Compare
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Bump padding from py-0.5 to py-1 and icon from 12px to 14px for better accessibility on the "Explain this error" button. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Switch from text-accent-primary-action to text-primary-600 for WCAG AA compliance (5.17:1 vs 3.89:1 on bg-destructive/15) - Move "Explain this error" button to bottom-left of error containers instead of right-aligned inline Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Add `large` prop to ExplainErrorButton that renders a 28px-height bordered button matching the design system's secondary button scale. Applied to Canvas and Explore full-page error views where the inline pill treatment was visually undersized next to the ErrorPage layout. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Both inline and large variants now always show a visible primary-600 border, so the button always looks like a button rather than text that transforms on hover. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Solid bg-primary-600 with white text instead of transparent fill. Makes the AI action more prominent and clearly clickable in error contexts. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Neutral dark button that doesn't compete with the red error context or imply a brand/AI-specific action color. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
bg-surface-muted with text-fg-primary and a visible border for distinction against the red error banner background. Passes WCAG AA in both light mode (16:1) and dark mode (11.9:1). Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Restructure the error banner layout so the icon and text+button are in a flex row. The button sits in the same column as the error text, ensuring perfect left-alignment. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
… containers Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
ericokuma
force-pushed
the
eokuma/ai-error-resolution
branch
from
d98adfa to
e225a31
Compare
Contributor
Author
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Adds an "Explain this error" button to every error displayed in Rill Developer's code and visual editors. Clicking it opens the AI chat panel with a pre-composed prompt containing the error message, file path, resource type, line number, and surrounding code context.
composeErrorPrompt()utility builds structured prompts from error metadata, with credential stripping for connector files and a 2000-char length capExplainErrorButtoncomponent usingSparklesIconthat callssidebarActions.startChat(prompt)WorkspaceEditorContainer(code view banner),ModelWorkspace(table errors),ExploreWorkspace(visual error page),CanvasLoadingState(canvas errors),SubmissionError(connector forms, optional)Closes APP-850, APP-851, APP-852
Checklist:
Developed in collaboration with Claude Code