feat(studio): Add Guardrail check details Panel - #1083
Merged
Conversation
Contributor
|
Note Reviews pausedIt 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 Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Enterprise Run ID: 📒 Files selected for processing (4)
🚧 Files skipped from review as they are similar to previous changes (4)
📝 WalkthroughWalkthroughThe PR adds ID-based guardrail-check detail navigation, a non-modal side panel, conversation and result views, rail-status utilities, Storybook scenarios, and validated sub-tab routing. ChangesGuardrail check detail flow
Sequence Diagram(s)sequenceDiagram
participant User
participant GuardrailChecksDataView
participant GuardrailTestCasesEditor
participant GuardrailCheckDetailSidePanel
participant ResultsPane
User->>GuardrailChecksDataView: click guardrail check
GuardrailChecksDataView->>GuardrailTestCasesEditor: provide selected check and navigation state
GuardrailTestCasesEditor->>GuardrailCheckDetailSidePanel: open detail panel
GuardrailCheckDetailSidePanel->>ResultsPane: render results and run history
User->>GuardrailCheckDetailSidePanel: select previous or next check
GuardrailCheckDetailSidePanel->>GuardrailChecksDataView: navigate to visible check
Possibly related PRs
Suggested reviewers: 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (1)
web/packages/studio/src/components/sidePanels/GuardrailCheckDetailSidePanel/RailStatusTab.test.tsx (1)
21-33: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winRestore the
console.errorspy in a teardown hook.If an assertion on line 26 or 31 fails, line 33 never runs. The spy then stays mocked for the rest of the file and silences real React errors.
♻️ Proposed change
describe('RailStatusTab', () => { + afterEach(() => { + vi.restoreAllMocks(); + }); + it('keys guardrail rows so two sharing a label do not collide', () => { const errors = vi.spyOn(console, 'error').mockImplementation(() => {}); @@ expect(duplicateKeyWarnings).toEqual([]); - - errors.mockRestore(); });🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@web/packages/studio/src/components/sidePanels/GuardrailCheckDetailSidePanel/RailStatusTab.test.tsx` around lines 21 - 33, Move the console.error spy cleanup from the end of the test into a teardown hook so it always runs even when assertions fail. Update the test containing the errors spy and use afterEach or an equivalent guaranteed cleanup mechanism to call mockRestore, preserving the existing assertions and warning detection.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In
`@web/packages/studio/src/components/sidePanels/GuardrailCheckDetailSidePanel/ConversationPane.tsx`:
- Around line 21-24: Make every property in the props interfaces readonly:
update check and className in ConversationPaneProps; status in RailStatusBadge
props; both properties in RailStatusTab props; all properties in ResultsPane
props; runs in RunHistoryTab props; all properties in the side-panel component
props in index.tsx; and all properties in GuardrailTestCasesEditor props. Apply
the changes at each listed file and preserve the existing property types and
component behavior.
In
`@web/packages/studio/src/components/sidePanels/GuardrailCheckDetailSidePanel/GuardrailCheckDetailSidePanel.stories.tsx`:
- Around line 37-49: Rename the module-level constants config, guardedCheck,
neverRunCheck, withSystemPromptCheck, and meta to SCREAMING_SNAKE_CASE, and
update every reference throughout the story file, including the ranges noted by
the review. Preserve their values and behavior while applying the naming
convention consistently.
---
Nitpick comments:
In
`@web/packages/studio/src/components/sidePanels/GuardrailCheckDetailSidePanel/RailStatusTab.test.tsx`:
- Around line 21-33: Move the console.error spy cleanup from the end of the test
into a teardown hook so it always runs even when assertions fail. Update the
test containing the errors spy and use afterEach or an equivalent guaranteed
cleanup mechanism to call mockRestore, preserving the existing assertions and
warning detection.
🪄 Autofix
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: Enterprise
Run ID: dbbcd1c7-e77c-45d0-a3b2-282de25add12
📒 Files selected for processing (16)
web/packages/studio/src/components/dataViews/GuardrailChecksDataView/checkMessages.tsweb/packages/studio/src/components/dataViews/GuardrailChecksDataView/index.test.tsxweb/packages/studio/src/components/dataViews/GuardrailChecksDataView/index.tsxweb/packages/studio/src/components/sidePanels/GuardrailCheckDetailSidePanel/ConversationPane.tsxweb/packages/studio/src/components/sidePanels/GuardrailCheckDetailSidePanel/GuardrailCheckDetailSidePanel.stories.tsxweb/packages/studio/src/components/sidePanels/GuardrailCheckDetailSidePanel/RailStatusBadge.tsxweb/packages/studio/src/components/sidePanels/GuardrailCheckDetailSidePanel/RailStatusTab.test.tsxweb/packages/studio/src/components/sidePanels/GuardrailCheckDetailSidePanel/RailStatusTab.tsxweb/packages/studio/src/components/sidePanels/GuardrailCheckDetailSidePanel/ResultsPane.tsxweb/packages/studio/src/components/sidePanels/GuardrailCheckDetailSidePanel/RunHistoryTab.tsxweb/packages/studio/src/components/sidePanels/GuardrailCheckDetailSidePanel/index.tsxweb/packages/studio/src/components/sidePanels/GuardrailCheckDetailSidePanel/railLabels.test.tsweb/packages/studio/src/components/sidePanels/GuardrailCheckDetailSidePanel/railLabels.tsweb/packages/studio/src/routes/guardrails/GuardrailChecksTab/GuardrailTestCasesEditor.tsxweb/packages/studio/src/routes/guardrails/GuardrailChecksTab/index.test.tsxweb/packages/studio/src/routes/guardrails/GuardrailChecksTab/index.tsx
Contributor
|
Contributor
|
Would you mind switching that purple to yellow? It's clashing really badly with the green. If the green and yellow are too close, you could use a light grey to signify allowed. This might be preferable as allowed would be the default state without the guardrailed action. |
steramae-nvidia
approved these changes
Aug 4, 2026
Contributor
There was a problem hiding this comment.
🧹 Nitpick comments (1)
web/packages/studio/src/components/sidePanels/GuardrailCheckDetailSidePanel/RunHistoryTab.tsx (1)
13-13: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winDeclare
runsas a readonly array.
readonly runs: RunRecord[]prevents prop reassignment but still allowsruns.push(...). Usereadonly runs: readonly RunRecord[]whenRunHistoryTabmust only read history.As per coding guidelines, immutable TypeScript data should use
readonly.Proposed change
- readonly runs: RunRecord[]; + readonly runs: readonly RunRecord[];🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@web/packages/studio/src/components/sidePanels/GuardrailCheckDetailSidePanel/RunHistoryTab.tsx` at line 13, Update the RunHistoryTab props declaration so the runs property uses a readonly array type, changing it from RunRecord[] to readonly RunRecord[]. Preserve the existing RunRecord element type and read-only history behavior.Source: Coding guidelines
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Nitpick comments:
In
`@web/packages/studio/src/components/sidePanels/GuardrailCheckDetailSidePanel/RunHistoryTab.tsx`:
- Line 13: Update the RunHistoryTab props declaration so the runs property uses
a readonly array type, changing it from RunRecord[] to readonly RunRecord[].
Preserve the existing RunRecord element type and read-only history behavior.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Enterprise
Run ID: 7948fcd2-436a-4fa1-9774-d5c82505b8ad
📒 Files selected for processing (12)
web/packages/studio/src/components/dataViews/GuardrailChecksDataView/ResultIndicator.tsxweb/packages/studio/src/components/dataViews/GuardrailChecksDataView/ResultSummary.tsxweb/packages/studio/src/components/sidePanels/GuardrailCheckDetailSidePanel/ConversationPane.tsxweb/packages/studio/src/components/sidePanels/GuardrailCheckDetailSidePanel/GuardrailCheckDetailSidePanel.stories.tsxweb/packages/studio/src/components/sidePanels/GuardrailCheckDetailSidePanel/RailStatusBadge.tsxweb/packages/studio/src/components/sidePanels/GuardrailCheckDetailSidePanel/RailStatusTab.test.tsxweb/packages/studio/src/components/sidePanels/GuardrailCheckDetailSidePanel/RailStatusTab.tsxweb/packages/studio/src/components/sidePanels/GuardrailCheckDetailSidePanel/ResultsPane.tsxweb/packages/studio/src/components/sidePanels/GuardrailCheckDetailSidePanel/RunHistoryTab.tsxweb/packages/studio/src/components/sidePanels/GuardrailCheckDetailSidePanel/index.tsxweb/packages/studio/src/routes/guardrails/GuardrailChecksTab/GuardrailTestCasesEditor.tsxweb/packages/studio/src/routes/guardrails/GuardrailChecksTab/index.tsx
🚧 Files skipped from review as they are similar to previous changes (7)
- web/packages/studio/src/components/sidePanels/GuardrailCheckDetailSidePanel/RailStatusBadge.tsx
- web/packages/studio/src/routes/guardrails/GuardrailChecksTab/GuardrailTestCasesEditor.tsx
- web/packages/studio/src/routes/guardrails/GuardrailChecksTab/index.tsx
- web/packages/studio/src/components/sidePanels/GuardrailCheckDetailSidePanel/ConversationPane.tsx
- web/packages/studio/src/components/sidePanels/GuardrailCheckDetailSidePanel/RailStatusTab.tsx
- web/packages/studio/src/components/sidePanels/GuardrailCheckDetailSidePanel/RailStatusTab.test.tsx
- web/packages/studio/src/components/sidePanels/GuardrailCheckDetailSidePanel/GuardrailCheckDetailSidePanel.stories.tsx
Signed-off-by: Nicholas Kolean <nakolean@gmail.com>
Co-authored-by: Nathan Walston <walston@users.noreply.github.com> Signed-off-by: Nicholas Kolean <nakolean@gmail.com>
Signed-off-by: Nicholas Kolean <nakolean@gmail.com>
Signed-off-by: Nicholas Kolean <nakolean@gmail.com>
Signed-off-by: Nicholas Kolean <nakolean@gmail.com>
nakolean
force-pushed
the
nkolean/guardrails-details-panel
branch
from
August 5, 2026 16:25
7e2b205 to
0fe7083
Compare
Contributor
|
Note GitHub couldn't provide a complete incremental comparison for this pull request, so CodeRabbit is performing a full review instead. This review may take a little longer. |
Signed-off-by: Nicholas Kolean <nakolean@gmail.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
3 participants
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.
Screen.Recording.2026-08-04.at.2.53.39.PM.mov
Summary by CodeRabbit