Add 'Explain this error' AI CTA to all error surfaces by ericokuma · Pull Request #9221 · rilldata/rill

ericokuma · 2026-04-10T21:05:33Z

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.

New composeErrorPrompt() utility builds structured prompts from error metadata, with credential stripping for connector files and a 2000-char length cap
New ExplainErrorButton component using SparklesIcon that calls sidebarActions.startChat(prompt)
Button added to: 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:

Covered by tests
Ran it and it works as intended
Reviewed the diff before requesting a review
Checked for unhandled edge cases
Linked the issues it closes
Checked if the docs need to be updated. If so, create a separate Linear DOCS issue
Intend to cherry-pick into the release branch
I'm proud of this work!

Developed in collaboration with Claude Code

Co-Authored-By: Claude Sonnet 4.6 <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 · 2026-04-10T22:41:09Z

https://www.loom.com/share/ba9f875f506d4738bb0770a5fe8186f3

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

AdityaHegde

Would be good to try a minimal version of this by just saying, Fix the errors in <file_path>

AdityaHegde · 2026-04-13T05:19:47Z

+  parts.push("");
+
+  // Error message
+  parts.push(`**Error:** ${errorMessage}`);


Do we need to send the error? LLM can get parser errors using tool calls.

AdityaHegde · 2026-04-13T05:20:24Z

+    const sanitized = isConnector ? stripCredentials(fileContent) : fileContent;
+    const context = extractContext(sanitized, lineNumber);
+    if (context) {
+      codeBlockStart = parts.length;


Same here, LLM can get the contents of the file and map the line number from errors to the relevant parts.

Address review feedback: let the LLM agent fetch parser errors and file content via tool calls instead of pre-composing them into the prompt. Removes `errorMessage`, `fileContent`, `lineNumber`, and `additionalErrorCount` props from `ExplainErrorButton` and its callers. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

ericokuma · 2026-04-14T23:12:03Z

Addressed feedback!

AdityaHegde

Approving a few nits. Works great otherwise! Was able to fix issues in underlying metrics view from a canvas.

AdityaHegde · 2026-04-15T06:25:44Z

@@ -0,0 +1,7 @@
+/**


nit: this is not needed, lets move this into the button component below.

AdityaHegde · 2026-04-15T06:26:05Z

@@ -0,0 +1,9 @@
+import { describe, it, expect } from "vitest";


Same with this, testing the prompt generation is overkill.

- Inline the minimal "Fix the errors in <file_path>" prompt into the button; remove error-prompt-composer.ts and its spec - Rename ExplainErrorButton to ExplainAndFixErrorButton to match what it does

ericokuma · 2026-04-17T04:50:44Z

@copilot resolve the merge conflicts in this pull request

…ution # Conflicts: # web-local/src/routes/(application)/(workspace)/files/[...file]/+page.svelte

ericokuma force-pushed the eokuma/ai-error-resolution branch from 525568a to 6844151 Compare April 10, 2026 21:42

ericokuma requested a review from AdityaHegde April 10, 2026 22:33

ericokuma and others added 18 commits April 10, 2026 15:35

feat: add error prompt composer for AI-assisted error resolution

ad35062

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

feat: add ExplainErrorButton component

d6d5833

feat: add 'Explain this error' CTA to code view error banner

7a75f92

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

feat: add 'Explain this error' CTA to model table error area

6076650

feat: add 'Explain this error' CTA to explore visual error page

702895d

feat: add 'Explain this error' CTA to canvas loading error state

f25eca9

feat: add optional 'Explain this error' CTA to connector form errors

8263895

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

fix: reorder inferResourceType to check directories before extensions

a12b98f

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

style: increase touch target size on ExplainErrorButton

28a7d5f

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>

style: always show border on ExplainErrorButton

371f2e4

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>

style: use filled primary button for ExplainErrorButton

4b47dcf

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>

style: use neutral gray-700 fill for ExplainErrorButton

332fc8d

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>

fix: prevent ExplainErrorButton from stretching to full width in flex…

6dc0d31

… containers Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

style: fix prettier formatting

e225a31

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

ericokuma force-pushed the eokuma/ai-error-resolution branch from d98adfa to e225a31 Compare April 10, 2026 22:36

style: rename button CTA to "Explain and fix"

c0396bf

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

AdityaHegde requested changes Apr 13, 2026

View reviewed changes

ericokuma requested a review from AdityaHegde April 14, 2026 23:11

AdityaHegde approved these changes Apr 15, 2026

View reviewed changes

Address review feedback: simplify prompt and rename button

2e75022

- Inline the minimal "Fix the errors in <file_path>" prompt into the button; remove error-prompt-composer.ts and its spec - Rename ExplainErrorButton to ExplainAndFixErrorButton to match what it does

ericokuma requested a review from AdityaHegde April 17, 2026 04:39

AdityaHegde approved these changes Apr 17, 2026

View reviewed changes

Merge remote-tracking branch 'origin/main' into eokuma/ai-error-resol…

144d24b

…ution # Conflicts: # web-local/src/routes/(application)/(workspace)/files/[...file]/+page.svelte

ericokuma merged commit 1ba7aea into main Apr 17, 2026
8 of 9 checks passed

ericokuma deleted the eokuma/ai-error-resolution branch April 17, 2026 04:53

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add 'Explain this error' AI CTA to all error surfaces#9221

Add 'Explain this error' AI CTA to all error surfaces#9221
ericokuma merged 22 commits intomainfrom
eokuma/ai-error-resolution

ericokuma commented Apr 10, 2026

Uh oh!

ericokuma commented Apr 10, 2026

Uh oh!

AdityaHegde left a comment

Uh oh!

AdityaHegde Apr 13, 2026

Uh oh!

AdityaHegde Apr 13, 2026

Uh oh!

ericokuma commented Apr 14, 2026

Uh oh!

AdityaHegde left a comment

Uh oh!

Uh oh!

AdityaHegde Apr 15, 2026

Uh oh!

AdityaHegde Apr 15, 2026

Uh oh!

ericokuma commented Apr 17, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

		@@ -0,0 +1,9 @@
		import { describe, it, expect } from "vitest";

Conversation

ericokuma commented Apr 10, 2026

Uh oh!

ericokuma commented Apr 10, 2026

Uh oh!

AdityaHegde left a comment

Choose a reason for hiding this comment

Uh oh!

AdityaHegde Apr 13, 2026

Choose a reason for hiding this comment

Uh oh!

AdityaHegde Apr 13, 2026

Choose a reason for hiding this comment

Uh oh!

ericokuma commented Apr 14, 2026

Uh oh!

AdityaHegde left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

AdityaHegde Apr 15, 2026

Choose a reason for hiding this comment

Uh oh!

AdityaHegde Apr 15, 2026

Choose a reason for hiding this comment

Uh oh!

ericokuma commented Apr 17, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants