Skip to content

KIL-537 Replace repair UI with feedback UI#1271

Merged
sfierro merged 7 commits intomainfrom
KIL-537/feedback-ui
Apr 15, 2026
Merged

KIL-537 Replace repair UI with feedback UI#1271
sfierro merged 7 commits intomainfrom
KIL-537/feedback-ui

Conversation

@sfierro
Copy link
Copy Markdown
Contributor

@sfierro sfierro commented Apr 15, 2026

Linear ticket: https://linear.app/kiln_ai/issue/KIL-537/replace-repair-ui-with-feedback-ui

Description

Replace the repair UI with a new feedback UI that uses the Feedback data model added in KIL-534.

  • Remove all repair UI code (repair form, edit form, review/accept/delete flows)
  • Delete output_repair_edit_form.svelte
  • Rename "Output Rating" to "Rating and Feedback"
  • Add "Feedback:" row with "Add Feedback" link (opens FormContainer modal)
  • Show up to 3 feedback entries inline, truncated to 2 lines, with created_by
  • "N more…" indicator when there are more than 3
  • Clickable feedback list opens "All Feedback" modal with sortable table (Created By, Created At)
  • Filed follow-up ticket KIL-543 for legacy repair_instructions display/migration

Test plan

  • Navigate to a task run view — "Rating and Feedback" header shown
  • Click "Add Feedback" — modal opens with form, submit works
  • Feedback appears in inline list after submission
  • Click feedback list — "All Feedback" modal opens with table
  • Sort by Created By and Created At columns
  • Close dialogs — no lingering focus/hover on feedback list
  • Verify repair UI is fully removed (no repair forms, buttons, or warnings)

🤖 Generated with Claude Code

Summary by CodeRabbit

  • New Features

    • Added comprehensive feedback on run pages: view recent feedback (compact preview up to 3), sort by creator/date, view all feedback in a dialog, and submit new feedback.
  • Changes

    • Removed the Repair Output editing workflow and associated repair controls; run completion logic simplified and sidebar renamed "Rating and Feedback".
    • Form controls can now suppress their label for cleaner layouts.
  • Chores

    • Added new feedback-related type definitions.

Remove all repair UI code (repair form, repair edit form, repair
review/accept/delete flows) and replace with a new feedback UI that
uses the Feedback data model from KIL-534.

- Rename "Output Rating" to "Rating and Feedback"
- Add inline feedback list (up to 3, truncated) with "Add Feedback" link
- Add "All Feedback" modal with sortable table
- Add "Add Feedback" modal using FormContainer
- Delete output_repair_edit_form.svelte
- Remove model_name/provider/focus_repair_on_appear props from Run

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

coderabbitai bot commented Apr 15, 2026

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

  • @coderabbitai resume to resume automatic reviews.
  • @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

  • ▶️ Resume reviews
  • 🔍 Trigger review
📝 Walkthrough

Walkthrough

Removed repair-output editing and related bindings; added feedback feature with client-side state, sorting, dialogs, and GET/POST /feedback interactions; added two exported types to shared types; added a form element prop to conditionally hide labels.

Changes

Cohort / File(s) Summary
Type Definitions
app/web_ui/src/lib/types.ts
Added exported type aliases: Feedback and FeedbackSource mapped from components["schemas"].
Removed Component
app/web_ui/src/routes/(app)/run/output_repair_edit_form.svelte
Deleted the repair-output edit component, its props, local state, submit/cancel handlers, API save call, and UI.
Run Component Update
app/web_ui/src/routes/(app)/run/run.svelte
Removed repair-related state, handlers, and UI; simplified run completion logic; introduced feedback state, loading/error handling, race-safe fetching, GET/POST /feedback calls, client-side sorting, preview and full-feedback dialogs, and updated imports.
Parent Page Update
app/web_ui/src/routes/(app)/run/+page.svelte
Stopped passing bind:model_name and bind:provider into Run; removed focus_repair_on_appear prop.
Form Element
app/web_ui/src/lib/utils/form_element.svelte
Added exported hide_label: boolean = false; label block suppressed when hide_label is true.

Sequence Diagram(s)

sequenceDiagram
  participant UI as "Run UI (client)"
  participant API as "Web API"
  participant DB as "Database"
  rect rgba(200,200,255,0.5)
  UI->>API: GET /feedback?task_id=...&run_id=...
  API->>DB: query feedback for task/run
  DB-->>API: feedback list
  API-->>UI: return feedback list
  end
  rect rgba(200,255,200,0.5)
  UI->>API: POST /feedback (new feedback payload)
  API->>DB: insert feedback record
  DB-->>API: created feedback
  API-->>UI: return created feedback
  end
Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Suggested reviewers

  • leonardmq
  • scosman

Poem

🐰 I nibbled out repairs and planted feedback seeds,
Types tucked in pockets, dialogs sprout like reeds,
I hopped through labels, hid one with a wink,
Posted a note, then vanished — quick as a blink,
Tiny paws, big changes in small deeds.

🚥 Pre-merge checks | ✅ 3
✅ Passed checks (3 passed)
Check name Status Explanation
Title check ✅ Passed The title clearly and concisely summarizes the main change: replacing repair UI with feedback UI, matching the primary objective across all modified files.
Description check ✅ Passed The description includes the required sections: what the PR does, related issues (Linear ticket), and partially addresses the test plan; however, the contributor license agreement confirmation checkbox is missing.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch KIL-537/feedback-ui

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

This pull request removes the output repair functionality and introduces a new feedback system for task runs, allowing users to add, view, and sort feedback entries. The review identifies a bug where the submission loading state is not correctly set and suggests improvements to the feedback loading logic to prevent race conditions and redundant network requests.

Comment thread app/web_ui/src/routes/(app)/run/run.svelte
Comment thread app/web_ui/src/routes/(app)/run/run.svelte
@github-actions
Copy link
Copy Markdown

github-actions bot commented Apr 15, 2026

📊 Coverage Report

Overall Coverage: 91%

Diff: origin/main...HEAD

  • libs/server/kiln_server/feedback_api.py (100%)

Summary

  • Total: 7 lines
  • Missing: 0 lines
  • Coverage: 100%

Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🧹 Nitpick comments (1)
app/web_ui/src/routes/(app)/run/run.svelte (1)

602-609: Duplicate CSS classes.

Line 603 has flex items-center repeated twice. While this doesn't affect functionality, it should be cleaned up.

♻️ Proposed fix
-        <div
-          class="flex items-center flex items-center text-nowrap 2xl:min-w-32"
-        >
+        <div class="flex items-center text-nowrap 2xl:min-w-32">
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@app/web_ui/src/routes/`(app)/run/run.svelte around lines 602 - 609, The
container div that renders the Overall Rating (the <div class="flex items-center
flex items-center text-nowrap 2xl:min-w-32"> wrapping the "Overall Rating:"
label and InfoTooltip) has duplicated CSS classes; edit that element in
run.svelte to remove the duplicate "flex items-center" so the class list is
deduplicated (e.g., "flex items-center text-nowrap 2xl:min-w-32").
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@app/web_ui/src/routes/`(app)/run/run.svelte:
- Around line 444-473: The submit_feedback function never sets
add_feedback_submitting = true at the start so the UI never shows a
loading/disabled state; inside the submit_feedback function (before the try
block or immediately after the early-return check) set add_feedback_submitting =
true, ensuring the finally block still sets it back to false; update the
submit_feedback function reference and ensure no other control flow paths skip
resetting add_feedback_submitting (submit_feedback, add_feedback_submitting,
add_feedback_error, add_feedback_dialog are the identifiers to locate).

---

Nitpick comments:
In `@app/web_ui/src/routes/`(app)/run/run.svelte:
- Around line 602-609: The container div that renders the Overall Rating (the
<div class="flex items-center flex items-center text-nowrap 2xl:min-w-32">
wrapping the "Overall Rating:" label and InfoTooltip) has duplicated CSS
classes; edit that element in run.svelte to remove the duplicate "flex
items-center" so the class list is deduplicated (e.g., "flex items-center
text-nowrap 2xl:min-w-32").
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: f20df88a-a11e-43f8-b6a3-8fc7c91c4ed4

📥 Commits

Reviewing files that changed from the base of the PR and between e87d1a2 and ac588ac.

📒 Files selected for processing (4)
  • app/web_ui/src/lib/types.ts
  • app/web_ui/src/routes/(app)/run/+page.svelte
  • app/web_ui/src/routes/(app)/run/output_repair_edit_form.svelte
  • app/web_ui/src/routes/(app)/run/run.svelte
💤 Files with no reviewable changes (2)
  • app/web_ui/src/routes/(app)/run/+page.svelte
  • app/web_ui/src/routes/(app)/run/output_repair_edit_form.svelte

Comment thread app/web_ui/src/routes/(app)/run/run.svelte
- Add request ID tracking and run ID dedup to load_feedback to prevent
  race conditions and redundant requests when switching runs
- Set add_feedback_submitting = true at start of submit_feedback

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

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@app/web_ui/src/routes/`(app)/run/run.svelte:
- Around line 619-621: The class attribute on the highlighted <div> contains the
duplicate token "flex items-center" twice; edit the <div> element's class
attribute (the one containing "text-nowrap 2xl:min-w-32") to remove the repeated
"flex items-center" so each utility appears only once and keep spacing
consistent.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: e9d9654c-8be0-4537-b960-c8b693e44d7e

📥 Commits

Reviewing files that changed from the base of the PR and between ac588ac and ae8b187.

📒 Files selected for processing (1)
  • app/web_ui/src/routes/(app)/run/run.svelte

Comment thread app/web_ui/src/routes/(app)/run/run.svelte Outdated
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@app/web_ui/src/routes/`(app)/run/run.svelte:
- Around line 756-782: The "Created At" and other sortable <th> headers use
on:click but lack keyboard accessibility; update the headers (the ones calling
handle_feedback_sort and referencing feedback_sort_column and
feedback_sort_direction) to be focusable and operable via keyboard by adding
tabindex="0", role="button", and an on:keydown handler that invokes
handle_feedback_sort when Enter or Space is pressed (mirror the pattern used on
the feedback preview div for keyboard activation), and also ensure the visual
sort indicator logic remains unchanged.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 7fe5bca6-e9be-42e2-ad84-22b7c12ea5ab

📥 Commits

Reviewing files that changed from the base of the PR and between ae8b187 and 955a9e5.

📒 Files selected for processing (1)
  • app/web_ui/src/routes/(app)/run/run.svelte

Comment thread app/web_ui/src/routes/(app)/run/run.svelte
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@app/web_ui/src/routes/`(app)/run/run.svelte:
- Around line 428-446: The issue is that an in-flight load_feedback() can
overwrite newer locally-submitted feedback; to fix, ensure submit_feedback()
either (A) increments the shared feedback_request_id (so any pending requests
return early because request_id !== feedback_request_id) before/after pushing
the new feedback, or (B) upon successful submit merge the returned/created
feedback into the existing feedbacks array instead of replacing feedbacks
wholesale; update code paths that set feedbacks (the async GET handler that uses
request_id/feedback_request_id and the submit_feedback flow) to use one of these
strategies so a slower load cannot replace a newer local entry.
- Around line 419-455: The function load_feedback currently sets
last_loaded_run_id before the GET completes, preventing retries on failure; move
the assignment so last_loaded_run_id = run.id is only set after the fetch
succeeds (i.e., after the request_id check and after confirming fetch_error is
null and data assigned). Keep the initial guard (if run.id ===
last_loaded_run_id) at the top and keep request_id checks in catch/finally; do
NOT set last_loaded_run_id on error so subsequent calls for the same run can
retry. Reference: load_feedback, last_loaded_run_id, feedback_request_id,
feedbacks, feedback_error.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: d245b4ff-7d98-4488-8d42-660789d629f3

📥 Commits

Reviewing files that changed from the base of the PR and between 955a9e5 and 576e8b0.

📒 Files selected for processing (2)
  • app/web_ui/src/lib/utils/form_element.svelte
  • app/web_ui/src/routes/(app)/run/run.svelte

Comment thread app/web_ui/src/routes/(app)/run/run.svelte
Comment thread app/web_ui/src/routes/(app)/run/run.svelte
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

♻️ Duplicate comments (4)
app/web_ui/src/routes/(app)/run/run.svelte (4)

619-621: ⚠️ Potential issue | 🟡 Minor

Duplicate CSS class.

The class attribute contains flex items-center twice.

🐛 Proposed fix
-        <div
-          class="flex items-center flex items-center text-nowrap 2xl:min-w-32"
-        >
+        <div class="flex items-center text-nowrap 2xl:min-w-32">
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@app/web_ui/src/routes/`(app)/run/run.svelte around lines 619 - 621, The class
attribute on the div in run.svelte contains a duplicated "flex items-center";
remove the duplicate so the class string only includes "flex items-center" once
(e.g., update the div with class on the element that currently reads
'class="flex items-center flex items-center text-nowrap 2xl:min-w-32"'),
ensuring spacing and other classes like "text-nowrap" and "2xl:min-w-32" remain
unchanged.

460-490: ⚠️ Potential issue | 🟠 Major

Potential race condition: in-flight load_feedback can overwrite submitted feedback.

If submit_feedback completes while a slow load_feedback is still pending, line 446 may replace the locally-appended entry with stale server data. Consider incrementing feedback_request_id in submit_feedback to invalidate pending loads, or trigger a fresh reload after successful submit.

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@app/web_ui/src/routes/`(app)/run/run.svelte around lines 460 - 490,
submit_feedback can race with an in-flight load_feedback and have the
later-resolving load overwrite the newly appended feedback; to fix, in
submit_feedback (after validating and before awaiting the POST) increment the
shared feedback_request_id (or set a local requestId token) and pass it to
load_feedback so pending loads check and ignore stale requestIds, or
alternatively after a successful POST call load_feedback() immediately to fetch
a fresh list; update references to feedbacks, submit_feedback, load_feedback and
feedback_request_id to implement this invalidation/reload logic.

419-456: ⚠️ Potential issue | 🟠 Major

Mark run as loaded only after successful fetch.

Setting last_loaded_run_id = run.id at line 426 before the request completes will prevent retries if the initial load fails, since line 425 will return early on subsequent calls. Move the assignment to after successful data fetch.

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@app/web_ui/src/routes/`(app)/run/run.svelte around lines 419 - 456, In
load_feedback, don't set last_loaded_run_id before the network request
completes; move the assignment so it's only set after a successful fetch (i.e.,
after you've checked request_id matches and fetch_error is null and assigned
feedbacks). Specifically, remove or relocate the early assignment to
last_loaded_run_id = run.id that currently occurs before the client.GET call and
instead set last_loaded_run_id = run.id right after feedbacks = data and
feedback_error = null inside the try block (keeping the existing request_id
checks intact).

757-783: ⚠️ Potential issue | 🟡 Minor

Sortable table headers lack keyboard accessibility.

The <th> elements have on:click handlers for sorting but cannot be focused or activated via keyboard, unlike the feedback preview div which correctly implements tabindex, role, and on:keydown.

♿ Proposed fix: Add keyboard support to sortable headers
             <th
-              class="w-[15%] hover:bg-base-200 cursor-pointer"
+              class="w-[15%] hover:bg-base-200 cursor-pointer select-none"
+              tabindex="0"
+              role="button"
               on:click={() => handle_feedback_sort("created_by")}
+              on:keydown={(e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                  e.preventDefault()
+                  handle_feedback_sort("created_by")
+                }
+              }}
             >

Apply the same pattern to the "Created At" header.

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@app/web_ui/src/routes/`(app)/run/run.svelte around lines 757 - 783, The
sortable table headers ("Created By" and "Created At") use on:click with
handle_feedback_sort but lack keyboard accessibility; update those <th> elements
to be focusable and operable via keyboard by adding tabindex="0", role="button",
and an on:keydown handler that invokes handle_feedback_sort when Enter or Space
is pressed (same pattern used by the feedback preview div), keeping the existing
feedback_sort_column and feedback_sort_direction logic for the sort indicator.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Duplicate comments:
In `@app/web_ui/src/routes/`(app)/run/run.svelte:
- Around line 619-621: The class attribute on the div in run.svelte contains a
duplicated "flex items-center"; remove the duplicate so the class string only
includes "flex items-center" once (e.g., update the div with class on the
element that currently reads 'class="flex items-center flex items-center
text-nowrap 2xl:min-w-32"'), ensuring spacing and other classes like
"text-nowrap" and "2xl:min-w-32" remain unchanged.
- Around line 460-490: submit_feedback can race with an in-flight load_feedback
and have the later-resolving load overwrite the newly appended feedback; to fix,
in submit_feedback (after validating and before awaiting the POST) increment the
shared feedback_request_id (or set a local requestId token) and pass it to
load_feedback so pending loads check and ignore stale requestIds, or
alternatively after a successful POST call load_feedback() immediately to fetch
a fresh list; update references to feedbacks, submit_feedback, load_feedback and
feedback_request_id to implement this invalidation/reload logic.
- Around line 419-456: In load_feedback, don't set last_loaded_run_id before the
network request completes; move the assignment so it's only set after a
successful fetch (i.e., after you've checked request_id matches and fetch_error
is null and assigned feedbacks). Specifically, remove or relocate the early
assignment to last_loaded_run_id = run.id that currently occurs before the
client.GET call and instead set last_loaded_run_id = run.id right after
feedbacks = data and feedback_error = null inside the try block (keeping the
existing request_id checks intact).
- Around line 757-783: The sortable table headers ("Created By" and "Created
At") use on:click with handle_feedback_sort but lack keyboard accessibility;
update those <th> elements to be focusable and operable via keyboard by adding
tabindex="0", role="button", and an on:keydown handler that invokes
handle_feedback_sort when Enter or Space is pressed (same pattern used by the
feedback preview div), keeping the existing feedback_sort_column and
feedback_sort_direction logic for the sort indicator.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: e05686af-46aa-4047-97c8-ed538034d007

📥 Commits

Reviewing files that changed from the base of the PR and between 576e8b0 and 601ecf4.

📒 Files selected for processing (1)
  • app/web_ui/src/routes/(app)/run/run.svelte

@sfierro sfierro merged commit 3e7fec5 into main Apr 15, 2026
14 checks passed
@sfierro sfierro deleted the KIL-537/feedback-ui branch April 15, 2026 22:22
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants