[feat] Finish wave 3: antd-free playground-ui with full story coverage - #5806
[feat] Finish wave 3: antd-free playground-ui with full story coverage#5806ashrafchowdury wants to merge 9 commits into
Conversation
…dd warning background color
…enta/ui Drops the antd and @ant-design/icons peer deps, adds shared/execution-row/drawer-parts entry points, and wires the storybook workspace up to consume the package. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
…view - Introduced `WorkflowRevisionDrawer.stories.tsx` to showcase the unified drawer for viewing and editing workflow revisions. - Created `_fixtures/comparisonView.ts` to provide query and atom fixtures for side-by-side comparison of workflow revisions. - Added `_fixtures/outputs.ts` containing execution result fixtures for the outputs surface. - Implemented `_fixtures/playgroundLoadable.ts` to seed the execution graph for the `ExecutionItems` family. - Developed `_fixtures/testsetSelection.ts` for query fixtures related to testset selection surfaces. - Established `_fixtures/workflowRevision.ts` for workflow revision query fixtures needed by `MetadataSidebar`.
dosubot
Bot
added
the
size:XXL
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
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: Organization UI Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (1)
📝 WalkthroughSummary by CodeRabbit
WalkthroughWave 3 migrates ChangesPlayground UI migration
Estimated code review effort: 5 (Critical) | ~120 minutes Sequence Diagram(s)sequenceDiagram
participant StorybookStory
participant seedPlaygroundLoadable
participant PlaygroundUI
participant ParityGates
StorybookStory->>seedPlaygroundLoadable: Supply query and atom fixtures
seedPlaygroundLoadable->>PlaygroundUI: Seed nodes, sessions, queries, and results
PlaygroundUI->>ParityGates: Render themed Storybook content
ParityGates->>PlaygroundUI: Check content, errors, contrast, and visual output
Possibly related PRs
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches 💡 2📝 Generate docstrings 💡
🛠️ Fix failing CI checks 💡
🧪 Generate unit tests (beta)
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. Comment |
Railway Preview Environment
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 10
Note
Due to the large number of review comments, Critical, Major severity comments were prioritized as inline comments.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
web/packages/agenta-playground-ui/package.json (1)
49-49: 🗄️ Data Integrity & Integration | 🟠 Major | ⚡ Quick winRemove the remaining runtime Ant Design token dependencies before dropping the peer.
@agenta/playground-ui/srcstill reads Ant Design CSS variables such as--ant-color-error,--ant-color-text-tertiary, and--ant-control-item-bg-active. Consumers that remove Ant Design will not define those variables, so those states can lose the intended appearance. Replace the remaining--ant-*references with Agenta semantic tokens, then keep Ant Design removed from the dependency graph.Source: Coding guidelines
🟡 Minor comments (12)
web/storybook/parity/render-check.mjs-4-5 (1)
4-5: 📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick winFix the documented no-argument mode.
Line 5 documents that a bare invocation checks "every id in ALL_IDS below". The file defines no
ALL_IDS, and lines 108-111 exit with code 2 and a usage message when no id is passed. Either remove the second usage line or add theALL_IDSdefault list.📝 Proposed doc fix
* node parity/render-check.mjs <story-id>... - * node parity/render-check.mjs # every id in ALL_IDS belowweb/storybook/stories/playground-ui/ExecutionLeaves.stories.tsx-172-174 (1)
172-174: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick winMake required Storybook interactions fail loudly.
A missing selector in
playcurrently suppresses the expected interaction, so visual tests can pass with the component still in the closed state.
web/storybook/stories/playground-ui/ExecutionLeaves.stories.tsx#L172-L174: throw whenRun optionsis absent before calling.click().web/storybook/stories/playground-ui/InputsParts.stories.tsx#L135-L140: throw when the footer toggle is absent before calling.click().web/storybook/stories/playground-ui/SharedLeaves.stories.tsx-80-145 (1)
80-145: 📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick winReplace legacy color literals with supported theme values.
text-[var(--ag-c-*)], rawrgba(), and--ag-c-*colors appear in the legacy Ant Design comparisons. Use supported semantic tokens or Tailwind theme utilities; document and approve a Storybook baseline exception only for exact legacy baseline needs.Source: Coding guidelines
antd-inventory/playground-ui.md-168-168 (1)
168-168: 📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick winAdd language identifiers to the new fenced blocks.
markdownlint-cli2reports MD040 at Lines 168 and 377. Add a language such astextto both fences.Also applies to: 377-377
Source: Linters/SAST tools
web/packages/agenta-playground-ui/src/components/ExecutionItemComparisonView/assets/GenerationComparisonOutputHeader/index.tsx-36-36 (1)
36-36: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick winReplace raw color expressions with semantic theme tokens.
Both changed surfaces use arbitrary color values instead of semantic Tailwind or Agenta tokens. This violates the shared UI token rule and can leave these states without the required dark-mode value.
web/packages/agenta-playground-ui/src/components/ExecutionItemComparisonView/assets/GenerationComparisonOutputHeader/index.tsx#L36-L36: replacebg-[var(--ag-rgba-051729-06)]with the registered semantic chip background token.web/packages/agenta-playground-ui/src/components/ExecutionItems/assets/TypingIndicator.tsx#L18-L20: replacetext-[rgba(102,112,133,0.75)]with a semantic text color token and verify both themes.As per coding guidelines, changed frontend colors must use semantic theme tokens.
Source: Coding guidelines
antd-inventory/STATUS.md-10-10 (1)
10-10: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick winAlign the number of fixed a11y defects.
The status line says “All four a11y defects are fixed”, but the findings map only records F26, F27, and F19 as a11y failures; F22–F25 are correctness findings and F28 is listed. Update the count to the fixed a11y items or amend F28 as fixed.
web/packages/agenta-playground-ui/src/components/ExecutionItems/assets/ChatTurnView/index.tsx-139-140 (1)
139-140: 🩺 Stability & Availability | 🟡 Minor | ⚡ Quick winDocument the
TooltipProviderrequirement forChatTurnView.
ChatRunViewrenders@agenta/uiTooltip, but@agenta/playground-uihas no local provider. Direct public consumers of this component to wrap tree paths used for the tooltip’s portal origin withTooltipProvider, or export/consume it from the surrounding provider wrapper.web/packages/agenta-playground-ui/src/components/PlaygroundInputsBody/VariableCard.tsx-435-437 (1)
435-437: 📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick winUse semantic color tokens.
These changed labels use
--ag-c-1677FF. This bypasses the theme-token contract. Replace the literal withtext-colorPrimary, or another semantic color utility.
web/packages/agenta-playground-ui/src/components/PlaygroundInputsBody/VariableCard.tsx#L435-L437: replace the raw color literal.web/packages/agenta-playground-ui/src/components/adapters/VariableControlAdapter.tsx#L62-L64: replace the raw color literal.As per coding guidelines, consume theme colors through semantic tokens, Tailwind utilities, or supported
var(--ag-color*)variables; do not use--ag-c-*literals.Source: Coding guidelines
web/packages/agenta-playground-ui/src/components/PlaygroundInputsBody/VariableCard.tsx-440-451 (1)
440-451: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick winMake the help trigger keyboard-operable.
The
InfoSVG is not a focusable control. Keyboard users cannot open the tooltip. Wrap the icon in a native button or sharedButtonwith the existing accessible name.
web/packages/agenta-playground-ui/src/components/PlaygroundInputsBody/VariableCard.tsx#L440-L451: use a focusable help button asTooltipTrigger.web/packages/agenta-playground-ui/src/components/adapters/VariableControlAdapter.tsx#L67-L78: use the same focusable help-button pattern.web/packages/agenta-playground-ui/src/components/adapters/VariableControlAdapter.tsx-452-459 (1)
452-459: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick winProvide a fallback switch name.
When
variableKeyis absent fromvariableKeys,nameisundefined. Line 455 then omitsaria-label. Usename ?? variableKey.Proposed fix
- aria-label={name} + aria-label={name ?? variableKey}web/packages/agenta-playground-ui/src/components/TestsetSelectionModal/components/CreateTestsetCard.tsx-37-47 (1)
37-47: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick winCancel drag defaults before checking
disabled.Lines 38 and 44 return before
preventDefault(). A drop on the disabled upload area can then use the browser file-drop default behavior. Always cancel the event, then skip upload state changes when disabled.Proposed fix
onDragOver={(e) => { + e.preventDefault() if (disabled) return - e.preventDefault() setOver(true) }} onDragLeave={() => setOver(false)} onDrop={(e) => { + e.preventDefault() if (disabled) return - e.preventDefault() setOver(false) take(e.dataTransfer.files) }}web/packages/agenta-playground-ui/src/components/TestsetSelectionModal/components/CreateTestsetCard.tsx-21-25 (1)
21-25: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick winValidate the file before calling
onFileUpload.Line 24 forwards any dropped file. The
acceptattribute does not validate drag-and-drop input. Reject files that do not have a.csvor.jsonextension.Proposed fix
const ACCEPT = ".csv,.json" +const ACCEPTED_FILE_PATTERN = /\.(csv|json)$/i const take = useCallback( (files: FileList | null) => { const file = files?.[0] - if (file) onFileUpload?.(file) + if (file && ACCEPTED_FILE_PATTERN.test(file.name)) onFileUpload?.(file) }, [onFileUpload], )
🧹 Nitpick comments (8)
web/storybook/stories/playground-ui/_fixtures/playgroundLoadable.ts (1)
282-282: 🎯 Functional Correctness | 🔵 Trivial | 💤 Low valueResults ignore
rowswhenturnsis also set.Line 282 selects
turnIdswheneverturns.length > 0. A seed that passes bothrowsandturnssilently drops every completion result. Add a short note onSeedResult.row, or throw when both are present.web/storybook/parity/a11y.mjs (1)
375-380: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueScope the bare
#ff0000waiver.The waiver lists only
fg, andisWaivedContrastmatches any"#ff0000"text foreground after that list lookup. Add a background/background-family/stable scoping constraint so future hard-coded red text doesn’t inherit this waiver silently.web/storybook/next.config.mjs (1)
15-15: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winReduce these comments to one short line or remove them.
web/storybook/next.config.mjs#L15-L15: remove the implementation rationale or reduce it to a short package-purpose comment.web/packages/agenta-playground-ui/src/components/WorkflowRevisionDrawer/parts.ts#L1-L5: replace the block comment with one short entry-point description.As per coding guidelines, keep in-code comments to at most one short line unless they document a genuinely surprising constraint.
Source: Coding guidelines
web/oss/tailwind.config.ts (1)
119-122: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winShorten or remove this migration comment.
The comment has three long lines. Keep comments to one short line unless they document a surprising constraint.
As per coding guidelines, keep in-code comments to at most one short line.
Source: Coding guidelines
web/packages/agenta-playground-ui/src/components/EmptyState.tsx (1)
24-25: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winRemove this layout-history comment.
The heading-margin value is self-contained in the class name. The comment exceeds the allowed comment length without documenting a surprising constraint.
As per coding guidelines, keep in-code comments to at most one short line.
Source: Coding guidelines
web/packages/agenta-playground-ui/src/components/ExecutionItems/assets/ExecutionRow/SingleLayout.tsx (1)
173-175: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winUse semantic theme colors for all migrated Badge styles.
The Badge migration retains prohibited
--ag-c-*literal overrides. These bypass the supported semantic-token contract and can diverge across themes.
web/packages/agenta-playground-ui/src/components/ExecutionItems/assets/ExecutionRow/SingleLayout.tsx#L173-L175: replace the step Badge background and text overrides with semantic Badge styling or supported theme tokens.web/packages/agenta-playground-ui/src/components/ExecutionItems/assets/ExecutionRow/SingleLayout.tsx#L780-L782: replace the testcase Badge background, text, and hover overrides with semantic theme tokens.web/packages/agenta-playground-ui/src/components/shared/NodeResultCard/index.tsx#L33-L46: replace the node-label and version-text overrides with semantic Badge styling and supported theme tokens.As per coding guidelines, consume theme colors through semantic tokens, Tailwind color utilities, or supported
var(--ag-color*)variables.Source: Coding guidelines
web/packages/agenta-ui/src/components/ui/tooltip.tsx (1)
34-38: 🎯 Functional Correctness | 🔵 Trivial | 💤 Low valueFix the stale
TooltipProvidercomment.The provider wrapper comment at line 32 says outer
TooltipProvidersettings still win, butTooltipwraps every root in a new provider, so caller settings are overridden. Update the comment to match the wrapper behavior.web/packages/agenta-playground-ui/src/components/TestsetSelectionModal/components/CreateTestsetCard.tsx (1)
50-52: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winReduce migration comments to one short line.
These comments embed implementation history instead of a short, necessary constraint. Move the detailed rationale to the PR description or reduce each comment to one short line.
web/packages/agenta-playground-ui/src/components/TestsetSelectionModal/components/CreateTestsetCard.tsx#L50-L52: reduce the native-button typography explanation to one short constraint.web/packages/agenta-playground-ui/src/components/TestsetSelectionModal/components/LoadModeContent.tsx#L322-L322: remove or shorten the Divider API migration explanation.web/packages/agenta-playground-ui/src/components/TestsetSelectionModal/components/SelectionSummary.tsx#L85-L88: reduce the Ant Design typography explanation to one short constraint.web/packages/agenta-playground-ui/src/components/TestsetSelectionModal/types.ts#L8-L9: reduce the modal-prop rationale to one short constraint.web/packages/agenta-ui/src/utils/styles.ts#L233-L234: reduce the warning-color migration explanation to one short constraint.As per coding guidelines, “Keep in-code comments to at most one short line.”
Source: Coding guidelines
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro Plus
Run ID: 88160817-2cd0-42b9-8f26-7e1e002e9439
⛔ Files ignored due to path filters (1)
web/pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (77)
antd-inventory/STATUS.mdantd-inventory/playground-ui.mdantd-inventory/wave-3/storybook-map.mdweb/oss/tailwind.config.tsweb/packages/agenta-playground-ui/package.jsonweb/packages/agenta-playground-ui/src/components/EmptyState.tsxweb/packages/agenta-playground-ui/src/components/EntitySelector/EntitySelector.tsxweb/packages/agenta-playground-ui/src/components/ExecutionHeader/index.tsxweb/packages/agenta-playground-ui/src/components/ExecutionItemComparisonView/GenerationComparisonCompletionOutput/index.tsxweb/packages/agenta-playground-ui/src/components/ExecutionItemComparisonView/assets/GenerationComparisonInputHeader/index.tsxweb/packages/agenta-playground-ui/src/components/ExecutionItemComparisonView/assets/GenerationComparisonOutputHeader/index.tsxweb/packages/agenta-playground-ui/src/components/ExecutionItems/GatewayToolExecuteButton.tsxweb/packages/agenta-playground-ui/src/components/ExecutionItems/assets/ChatTurnView/index.tsxweb/packages/agenta-playground-ui/src/components/ExecutionItems/assets/ExecutionRow/SingleLayout.tsxweb/packages/agenta-playground-ui/src/components/ExecutionItems/assets/ExecutionRow/entry.tsweb/packages/agenta-playground-ui/src/components/ExecutionItems/assets/ExecutionRowActions/index.tsxweb/packages/agenta-playground-ui/src/components/ExecutionItems/assets/RepetitionNavigation/index.tsxweb/packages/agenta-playground-ui/src/components/ExecutionItems/assets/RunOptionsPopover/index.tsxweb/packages/agenta-playground-ui/src/components/ExecutionItems/assets/TypingIndicator.tsxweb/packages/agenta-playground-ui/src/components/ExecutionResultView/index.tsxweb/packages/agenta-playground-ui/src/components/PlaygroundInputsBody/UnreferencedColumnsFooter.tsxweb/packages/agenta-playground-ui/src/components/PlaygroundInputsBody/VariableCard.tsxweb/packages/agenta-playground-ui/src/components/PlaygroundOutputs/index.tsxweb/packages/agenta-playground-ui/src/components/TestsetSelectionModal/components/CreateTestsetCard.tsxweb/packages/agenta-playground-ui/src/components/TestsetSelectionModal/components/LoadModeContent.tsxweb/packages/agenta-playground-ui/src/components/TestsetSelectionModal/components/SelectionSummary.tsxweb/packages/agenta-playground-ui/src/components/TestsetSelectionModal/components/TestsetSelectionPreview.tsxweb/packages/agenta-playground-ui/src/components/TestsetSelectionModal/components/index.tsweb/packages/agenta-playground-ui/src/components/TestsetSelectionModal/index.tsweb/packages/agenta-playground-ui/src/components/TestsetSelectionModal/types.tsweb/packages/agenta-playground-ui/src/components/TurnMessageHeaderOptions/index.tsxweb/packages/agenta-playground-ui/src/components/WorkflowRevisionDrawer/DrawerHeader.tsxweb/packages/agenta-playground-ui/src/components/WorkflowRevisionDrawer/MetadataSidebar.tsxweb/packages/agenta-playground-ui/src/components/WorkflowRevisionDrawer/WorkflowRevisionDrawer.tsxweb/packages/agenta-playground-ui/src/components/WorkflowRevisionDrawer/parts.tsweb/packages/agenta-playground-ui/src/components/adapters/VariableControlAdapter.tsxweb/packages/agenta-playground-ui/src/components/shared/EntityStatusTag.tsxweb/packages/agenta-playground-ui/src/components/shared/EvaluatorFieldGrid/index.tsxweb/packages/agenta-playground-ui/src/components/shared/NodeResultCard/index.tsxweb/packages/agenta-playground-ui/src/components/shared/index.tsweb/packages/agenta-playground-ui/src/context/PlaygroundUIContext.tsxweb/packages/agenta-ui/src/components/presentational/EnhancedButton.tsxweb/packages/agenta-ui/src/components/ui/input-number.tsxweb/packages/agenta-ui/src/components/ui/sheet.tsxweb/packages/agenta-ui/src/components/ui/tooltip.tsxweb/packages/agenta-ui/src/drawer/EnhancedDrawer.tsxweb/packages/agenta-ui/src/utils/styles.tsweb/storybook/.storybook/decorators/AgentaProviders.tsxweb/storybook/next.config.mjsweb/storybook/package.jsonweb/storybook/parity/a11y.mjsweb/storybook/parity/render-check.mjsweb/storybook/parity/vrt.mjsweb/storybook/stories/playground-ui/Adapters.stories.tsxweb/storybook/stories/playground-ui/ComparisonView.stories.tsxweb/storybook/stories/playground-ui/CreateTestsetCard.stories.tsxweb/storybook/stories/playground-ui/EntitySelector.stories.tsxweb/storybook/stories/playground-ui/ExecutionComposites.stories.tsxweb/storybook/stories/playground-ui/ExecutionLeaves.stories.tsxweb/storybook/stories/playground-ui/InputsParts.stories.tsxweb/storybook/stories/playground-ui/LoadModeContent.stories.tsxweb/storybook/stories/playground-ui/Modes.stories.tsxweb/storybook/stories/playground-ui/Outputs.stories.tsxweb/storybook/stories/playground-ui/Presentational.stories.tsxweb/storybook/stories/playground-ui/SelectionSummary.stories.tsxweb/storybook/stories/playground-ui/SharedLeaves.stories.tsxweb/storybook/stories/playground-ui/SharedParts.stories.tsxweb/storybook/stories/playground-ui/TestsetSelectionModal.stories.tsxweb/storybook/stories/playground-ui/TestsetSelectionPreview.stories.tsxweb/storybook/stories/playground-ui/TurnMessageHeaderOptions.stories.tsxweb/storybook/stories/playground-ui/VariableCard.stories.tsxweb/storybook/stories/playground-ui/WorkflowRevisionDrawer.stories.tsxweb/storybook/stories/playground-ui/_fixtures/comparisonView.tsweb/storybook/stories/playground-ui/_fixtures/outputs.tsweb/storybook/stories/playground-ui/_fixtures/playgroundLoadable.tsweb/storybook/stories/playground-ui/_fixtures/testsetSelection.tsweb/storybook/stories/playground-ui/_fixtures/workflowRevision.ts
…Bg bridging issue
There was a problem hiding this comment.
Actionable comments posted: 4
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro Plus
Run ID: d4914a69-e054-4f76-b534-be9e5221c29d
📒 Files selected for processing (2)
antd-inventory/wave-3/findings.mdweb/oss/tailwind.config.ts
🚧 Files skipped from review as they are similar to previous changes (1)
- web/oss/tailwind.config.ts
Fixes the one real regression the review found, plus doc accuracy. The other
flagged items are verified pre-existing and recorded as findings rather than
folded into this PR.
## The regression: `mask={false}` rendered a click-swallowing overlay
The migration mapped antd's `mask={false}` to a *transparent* Radix overlay,
with a comment claiming "Same look, and the behaviour Radix depends on stays
intact". That was wrong. antd renders no mask element at all; a transparent
overlay is still `fixed inset-0` and becomes the target of every click behind
the drawer. Radix `Dialog` also defaults to `modal={true}`, pinning
`pointer-events: none` on `<body>`.
So `WorkflowRevisionDrawer`'s outside-click handler — which matches on
`event.target` — never saw `.variant-table-row`, `.ant-drawer`, `.ant-popover`
or `.ant-modal-root` again. Clicking another variant row behind the open drawer
used to swap its content; instead the overlay ate the click.
- `SheetContent` gains `maskless`, which omits the overlay entirely.
- `EnhancedDrawer` passes `modal={!maskless}` so Radix stops disabling body
pointer events. Outside-click still works: DismissableLayer listens on
document, not on the overlay.
- The maskless path `preventDefault()`s Radix's outside handlers. `maskClosable`
means "clicking the MASK closes"; with no mask there is nothing to click, so
antd never auto-closed either and the caller's own logic owns it.
Scope is one component: `WorkflowRevisionDrawer` is the only call site that
passes `mask=`, and `SheetContent` has no consumer outside `EnhancedDrawer`.
With no `mask` prop the resolved values are unchanged, so the other 30
`EnhancedDrawer` call sites are untouched.
## Also fixed
- `render-check.mjs`: wrap the loop in try/finally so chromium cannot leak when
`page.evaluate` throws mid-run.
- `playground-ui.md`: was still describing the pre-migration state (`31 → 2`,
type-only carve-out, antd peers present, no stories). Marked as historical
baseline with the real `31 → 0` state up front.
- `STATUS.md`: claimed a11y passes in light *and* dark. It does not —
`parity/a11y.mjs` hardcodes `theme:light`. Only `render-check` covers both.
- `findings.md`: six findings (F1-F4, F9, F11) carried both an `[OPEN]` heading
and a `[CLOSED]` record; headings corrected. Undefined severity `P4` → `P3`,
`F13-followup` → `F13b`, census fence labelled `text`.
## Recorded, not fixed (F30-F32)
Verified pre-existing on `main` @ ecacb20: gateway tool executions sharing one
loading slot, and `ChatTurnView`'s tooltip trigger not being keyboard reachable.
The raw `rgba(255,255,255,0.4)` divider is also pre-existing, and the review's
reasoning about it is wrong — it sits on a primary button, dark in both themes,
so it is token hygiene rather than a theming bug.
Verified: tsc 0 errors across ui / playground-ui / entity-ui / oss / ee;
lint 12/12. The maskless path is code-traced, not exercised at runtime.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
web/packages/agenta-ui/src/drawer/EnhancedDrawer.tsx (1)
269-275: 🎯 Functional Correctness | 🟠 Major | ⚡ Quick winName every drawer whose header has no real title.
When
title == null, the current header branches still render: withclosable={true}the close button supplies part ofSheetHeader, but withextrait also does.ariaLabelis only applied in the no-header branch. Render ansr-onlySheetTitle, or apply the supplied label directly, for any drawer without a visible title.
🧹 Nitpick comments (1)
web/packages/agenta-ui/src/drawer/EnhancedDrawer.tsx (1)
233-257: 🩺 Stability & Availability | 🔵 Trivial | 🏗️ Heavy liftAdd a regression test for maskless outside-click behavior.
This contract depends on three behaviors:
SheetContentomits the overlay,Sheetusesmodal={false}, and the caller still receives background clicks. Render, VRT, and accessibility checks do not prove this interaction. Add a test or interaction story for masked and maskless drawers.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro Plus
Run ID: 77e767ac-63bf-4ee5-a17b-746d19636638
📒 Files selected for processing (7)
antd-inventory/STATUS.mdantd-inventory/playground-ui.mdantd-inventory/wave-3/findings.mdweb/packages/agenta-playground-ui/src/components/WorkflowRevisionDrawer/WorkflowRevisionDrawer.tsxweb/packages/agenta-ui/src/components/ui/sheet.tsxweb/packages/agenta-ui/src/drawer/EnhancedDrawer.tsxweb/storybook/parity/render-check.mjs
🚧 Files skipped from review as they are similar to previous changes (3)
- antd-inventory/STATUS.md
- web/storybook/parity/render-check.mjs
- web/packages/agenta-playground-ui/src/components/WorkflowRevisionDrawer/WorkflowRevisionDrawer.tsx
|
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. |
There was a problem hiding this comment.
Actionable comments posted: 4
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro Plus
Run ID: f351140d-ac97-4d3a-9650-d07aff992317
⛔ Files ignored due to path filters (1)
web/pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (78)
antd-inventory/STATUS.mdantd-inventory/playground-ui.mdantd-inventory/wave-3/findings.mdantd-inventory/wave-3/storybook-map.mdweb/oss/tailwind.config.tsweb/packages/agenta-playground-ui/package.jsonweb/packages/agenta-playground-ui/src/components/EmptyState.tsxweb/packages/agenta-playground-ui/src/components/EntitySelector/EntitySelector.tsxweb/packages/agenta-playground-ui/src/components/ExecutionHeader/index.tsxweb/packages/agenta-playground-ui/src/components/ExecutionItemComparisonView/GenerationComparisonCompletionOutput/index.tsxweb/packages/agenta-playground-ui/src/components/ExecutionItemComparisonView/assets/GenerationComparisonInputHeader/index.tsxweb/packages/agenta-playground-ui/src/components/ExecutionItemComparisonView/assets/GenerationComparisonOutputHeader/index.tsxweb/packages/agenta-playground-ui/src/components/ExecutionItems/GatewayToolExecuteButton.tsxweb/packages/agenta-playground-ui/src/components/ExecutionItems/assets/ChatTurnView/index.tsxweb/packages/agenta-playground-ui/src/components/ExecutionItems/assets/ExecutionRow/SingleLayout.tsxweb/packages/agenta-playground-ui/src/components/ExecutionItems/assets/ExecutionRow/entry.tsweb/packages/agenta-playground-ui/src/components/ExecutionItems/assets/ExecutionRowActions/index.tsxweb/packages/agenta-playground-ui/src/components/ExecutionItems/assets/RepetitionNavigation/index.tsxweb/packages/agenta-playground-ui/src/components/ExecutionItems/assets/RunOptionsPopover/index.tsxweb/packages/agenta-playground-ui/src/components/ExecutionItems/assets/TypingIndicator.tsxweb/packages/agenta-playground-ui/src/components/ExecutionResultView/index.tsxweb/packages/agenta-playground-ui/src/components/PlaygroundInputsBody/UnreferencedColumnsFooter.tsxweb/packages/agenta-playground-ui/src/components/PlaygroundInputsBody/VariableCard.tsxweb/packages/agenta-playground-ui/src/components/PlaygroundOutputs/index.tsxweb/packages/agenta-playground-ui/src/components/TestsetSelectionModal/components/CreateTestsetCard.tsxweb/packages/agenta-playground-ui/src/components/TestsetSelectionModal/components/LoadModeContent.tsxweb/packages/agenta-playground-ui/src/components/TestsetSelectionModal/components/SelectionSummary.tsxweb/packages/agenta-playground-ui/src/components/TestsetSelectionModal/components/TestsetSelectionPreview.tsxweb/packages/agenta-playground-ui/src/components/TestsetSelectionModal/components/index.tsweb/packages/agenta-playground-ui/src/components/TestsetSelectionModal/index.tsweb/packages/agenta-playground-ui/src/components/TestsetSelectionModal/types.tsweb/packages/agenta-playground-ui/src/components/TurnMessageHeaderOptions/index.tsxweb/packages/agenta-playground-ui/src/components/WorkflowRevisionDrawer/DrawerHeader.tsxweb/packages/agenta-playground-ui/src/components/WorkflowRevisionDrawer/MetadataSidebar.tsxweb/packages/agenta-playground-ui/src/components/WorkflowRevisionDrawer/WorkflowRevisionDrawer.tsxweb/packages/agenta-playground-ui/src/components/WorkflowRevisionDrawer/parts.tsweb/packages/agenta-playground-ui/src/components/adapters/VariableControlAdapter.tsxweb/packages/agenta-playground-ui/src/components/shared/EntityStatusTag.tsxweb/packages/agenta-playground-ui/src/components/shared/EvaluatorFieldGrid/index.tsxweb/packages/agenta-playground-ui/src/components/shared/NodeResultCard/index.tsxweb/packages/agenta-playground-ui/src/components/shared/index.tsweb/packages/agenta-playground-ui/src/context/PlaygroundUIContext.tsxweb/packages/agenta-ui/src/components/presentational/EnhancedButton.tsxweb/packages/agenta-ui/src/components/ui/input-number.tsxweb/packages/agenta-ui/src/components/ui/sheet.tsxweb/packages/agenta-ui/src/components/ui/tooltip.tsxweb/packages/agenta-ui/src/drawer/EnhancedDrawer.tsxweb/packages/agenta-ui/src/utils/styles.tsweb/storybook/.storybook/decorators/AgentaProviders.tsxweb/storybook/next.config.mjsweb/storybook/package.jsonweb/storybook/parity/a11y.mjsweb/storybook/parity/render-check.mjsweb/storybook/parity/vrt.mjsweb/storybook/stories/playground-ui/Adapters.stories.tsxweb/storybook/stories/playground-ui/ComparisonView.stories.tsxweb/storybook/stories/playground-ui/CreateTestsetCard.stories.tsxweb/storybook/stories/playground-ui/EntitySelector.stories.tsxweb/storybook/stories/playground-ui/ExecutionComposites.stories.tsxweb/storybook/stories/playground-ui/ExecutionLeaves.stories.tsxweb/storybook/stories/playground-ui/InputsParts.stories.tsxweb/storybook/stories/playground-ui/LoadModeContent.stories.tsxweb/storybook/stories/playground-ui/Modes.stories.tsxweb/storybook/stories/playground-ui/Outputs.stories.tsxweb/storybook/stories/playground-ui/Presentational.stories.tsxweb/storybook/stories/playground-ui/SelectionSummary.stories.tsxweb/storybook/stories/playground-ui/SharedLeaves.stories.tsxweb/storybook/stories/playground-ui/SharedParts.stories.tsxweb/storybook/stories/playground-ui/TestsetSelectionModal.stories.tsxweb/storybook/stories/playground-ui/TestsetSelectionPreview.stories.tsxweb/storybook/stories/playground-ui/TurnMessageHeaderOptions.stories.tsxweb/storybook/stories/playground-ui/VariableCard.stories.tsxweb/storybook/stories/playground-ui/WorkflowRevisionDrawer.stories.tsxweb/storybook/stories/playground-ui/_fixtures/comparisonView.tsweb/storybook/stories/playground-ui/_fixtures/outputs.tsweb/storybook/stories/playground-ui/_fixtures/playgroundLoadable.tsweb/storybook/stories/playground-ui/_fixtures/testsetSelection.tsweb/storybook/stories/playground-ui/_fixtures/workflowRevision.ts
🚧 Files skipped from review as they are similar to previous changes (73)
- web/oss/tailwind.config.ts
- web/packages/agenta-playground-ui/src/components/shared/NodeResultCard/index.tsx
- web/storybook/.storybook/decorators/AgentaProviders.tsx
- web/packages/agenta-playground-ui/src/components/WorkflowRevisionDrawer/MetadataSidebar.tsx
- web/packages/agenta-playground-ui/src/components/shared/EvaluatorFieldGrid/index.tsx
- web/packages/agenta-ui/src/utils/styles.ts
- web/packages/agenta-playground-ui/src/components/TestsetSelectionModal/components/index.ts
- web/packages/agenta-playground-ui/src/components/TestsetSelectionModal/index.ts
- web/packages/agenta-playground-ui/src/components/shared/EntityStatusTag.tsx
- web/packages/agenta-playground-ui/src/components/TestsetSelectionModal/components/SelectionSummary.tsx
- web/storybook/stories/playground-ui/_fixtures/workflowRevision.ts
- web/packages/agenta-playground-ui/src/components/TestsetSelectionModal/components/CreateTestsetCard.tsx
- web/storybook/package.json
- web/packages/agenta-ui/src/components/ui/tooltip.tsx
- web/storybook/stories/playground-ui/LoadModeContent.stories.tsx
- web/packages/agenta-playground-ui/src/components/ExecutionItemComparisonView/assets/GenerationComparisonOutputHeader/index.tsx
- web/storybook/next.config.mjs
- web/packages/agenta-playground-ui/src/components/ExecutionItemComparisonView/assets/GenerationComparisonInputHeader/index.tsx
- web/storybook/stories/playground-ui/InputsParts.stories.tsx
- web/packages/agenta-playground-ui/src/components/TestsetSelectionModal/types.ts
- web/packages/agenta-playground-ui/src/components/ExecutionItems/assets/ExecutionRowActions/index.tsx
- web/storybook/stories/playground-ui/VariableCard.stories.tsx
- web/packages/agenta-playground-ui/src/components/WorkflowRevisionDrawer/DrawerHeader.tsx
- web/packages/agenta-playground-ui/package.json
- web/packages/agenta-playground-ui/src/components/ExecutionItems/assets/RepetitionNavigation/index.tsx
- web/packages/agenta-playground-ui/src/components/ExecutionItems/assets/ExecutionRow/entry.ts
- web/storybook/stories/playground-ui/SelectionSummary.stories.tsx
- antd-inventory/STATUS.md
- web/storybook/stories/playground-ui/Modes.stories.tsx
- web/packages/agenta-playground-ui/src/components/shared/index.ts
- web/storybook/stories/playground-ui/Presentational.stories.tsx
- web/packages/agenta-playground-ui/src/components/WorkflowRevisionDrawer/parts.ts
- web/storybook/stories/playground-ui/TurnMessageHeaderOptions.stories.tsx
- web/storybook/parity/a11y.mjs
- web/packages/agenta-playground-ui/src/components/ExecutionHeader/index.tsx
- web/packages/agenta-ui/src/components/ui/sheet.tsx
- web/packages/agenta-playground-ui/src/components/ExecutionItems/assets/ExecutionRow/SingleLayout.tsx
- web/packages/agenta-playground-ui/src/components/ExecutionItems/assets/TypingIndicator.tsx
- web/packages/agenta-playground-ui/src/components/WorkflowRevisionDrawer/WorkflowRevisionDrawer.tsx
- web/packages/agenta-playground-ui/src/components/EntitySelector/EntitySelector.tsx
- web/storybook/parity/render-check.mjs
- web/storybook/stories/playground-ui/TestsetSelectionPreview.stories.tsx
- web/storybook/stories/playground-ui/SharedParts.stories.tsx
- web/packages/agenta-ui/src/components/ui/input-number.tsx
- web/packages/agenta-playground-ui/src/components/TestsetSelectionModal/components/TestsetSelectionPreview.tsx
- web/packages/agenta-ui/src/components/presentational/EnhancedButton.tsx
- web/packages/agenta-playground-ui/src/components/ExecutionItemComparisonView/GenerationComparisonCompletionOutput/index.tsx
- web/packages/agenta-playground-ui/src/components/adapters/VariableControlAdapter.tsx
- web/packages/agenta-playground-ui/src/components/ExecutionResultView/index.tsx
- web/storybook/stories/playground-ui/ExecutionComposites.stories.tsx
- web/storybook/stories/playground-ui/TestsetSelectionModal.stories.tsx
- web/storybook/stories/playground-ui/_fixtures/playgroundLoadable.ts
- web/packages/agenta-playground-ui/src/components/PlaygroundInputsBody/UnreferencedColumnsFooter.tsx
- web/packages/agenta-playground-ui/src/components/ExecutionItems/GatewayToolExecuteButton.tsx
- web/packages/agenta-playground-ui/src/components/PlaygroundOutputs/index.tsx
- web/storybook/stories/playground-ui/EntitySelector.stories.tsx
- web/packages/agenta-playground-ui/src/components/ExecutionItems/assets/ChatTurnView/index.tsx
- web/packages/agenta-playground-ui/src/components/TurnMessageHeaderOptions/index.tsx
- web/storybook/stories/playground-ui/_fixtures/testsetSelection.ts
- web/packages/agenta-playground-ui/src/context/PlaygroundUIContext.tsx
- web/storybook/stories/playground-ui/CreateTestsetCard.stories.tsx
- web/packages/agenta-playground-ui/src/components/ExecutionItems/assets/RunOptionsPopover/index.tsx
- web/storybook/stories/playground-ui/Outputs.stories.tsx
- web/storybook/stories/playground-ui/_fixtures/comparisonView.ts
- web/storybook/stories/playground-ui/SharedLeaves.stories.tsx
- web/storybook/stories/playground-ui/_fixtures/outputs.ts
- web/packages/agenta-playground-ui/src/components/EmptyState.tsx
- web/packages/agenta-playground-ui/src/components/TestsetSelectionModal/components/LoadModeContent.tsx
- web/storybook/parity/vrt.mjs
- web/storybook/stories/playground-ui/ExecutionLeaves.stories.tsx
- web/packages/agenta-playground-ui/src/components/PlaygroundInputsBody/VariableCard.tsx
- web/packages/agenta-ui/src/drawer/EnhancedDrawer.tsx
- web/storybook/stories/playground-ui/ComparisonView.stories.tsx
The run-options split button hardcoded `rgba(255,255,255,0.4)` for its divider.
Measured, the primary button underneath is not the same colour in both themes:
light bg rgb(28,44,61) navy · icon rgb(255,255,255)
dark bg rgb(209,209,81) yellow · icon rgb(20,20,20)
`palette.ts:85` overrides primary to brand yellow in dark ("navy → brand
yellow") with `#141414` as its foreground, so the fixed white divider sat on a
bright yellow button next to a near-black caret — low contrast and inconsistent
with the icon beside it.
Now `border-l-white/40 dark:border-l-black/40`, tracking the button's own
foreground. Re-measured after the change: rgba(255,255,255,0.4) in light,
rgba(0,0,0,0.4) in dark.
Not tied to an `--ag-*` token because the Tailwind config's `v()` helper emits a
bare `var(--ag-x)`, and Tailwind 3 cannot apply an alpha modifier to that — it
needs the `rgb(var(--x) / <alpha-value>)` form. A Tailwind colour utility is
permitted by web/AGENTS.md and `dark:bg-white/10` is already used elsewhere.
Raised by CodeRabbit on PR #5806. Its conclusion was right; the first triage of
it here was wrong — this file's finding (F32) is rewritten to record that the
"correct in both themes" call was made from the `bg-primary` class name without
reading the token behind it. Same trap as F13 and F29.
Verified: tsc 0 errors; lint 12/12; render-check 3/3 both themes; a11y clean.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
…ub.com/Agenta-AI/agenta into code/storybook-migration-wave-3-118ca7
1 participant
Context
Wave 3 of the antd consolidation targets
@agenta/playground-ui. Before this branch it had31 files importing antd and zero Storybook coverage, so migration mistakes could only be
caught by clicking through the playground by hand.
Changes
The migration. All 31 antd files are now on
@agenta/ui. The last two imports weretype-only and are retyped onto
EnhancedButtonProps/EnhancedModalProps, so no callsite changes. This makes playground-ui the first genuinely antd-free UI package in the repo:
Before:
"peerDependencies": { "@ant-design/icons": ">=5.0.0", "antd": ">=5.0.0", ... }
After:
"peerDependencies": { "@phosphor-icons/react": ">=2.0.0", ... }
The package also gains three entry points (
./shared,./execution-row,./drawer-parts)so stories and future consumers can import parts without going through the barrels.
Story coverage. 82 gated story ids covering every renderable component in the package
(49 of them), with fixtures that seed the execution graph, testset selection, and workflow
revision queries. The full map, and how to re-verify the "every component" claim, is in
antd-inventory/wave-3/storybook-map.md.A new gate:
parity/render-check.mjs. Writing the stories exposed a blind spot: theVRT proves parity and axe proves the tree is accessible, but both pass on a story that
renders nothing or crashes (two real wave-3 defects proved it).
render-checkloads everyid in light and dark and asserts it rendered, did not crash, and logged no console error.
a11y.mjsnow also prints measured fg/bg/ratio on gated contrast nodes so waivers can'tbe written from guesswork.
Defects the backfill caught and fixes here. The stories surfaced a11y defects the
merged migration had already shipped: 37 icon-only buttons with no accessible name, the
same defect on
VariableControlAdapter's Switch, and a missing dialog name on everyheaderless
EnhancedDrawer. All are fixed in the@agenta/uiprimitives (tooltip, sheet,drawer, button, input-number). This branch also bridges the
colorWarningBgtoken in theoss tailwind config; warning banners previously fell back to
bg-gold-1and renderedlight in dark mode. Four further correctness findings are recorded in
antd-inventory/wave-3/findings.mdwith suggested fixes, deliberately left for separate PRs.Tests
render-checkpasses for all 82 ids in both themes; a11y passes across all 82; VRT passes.tscclean inossandee; nothing outside the listed packages was edited.@agenta/ui(tooltip, drawer, sheet) are shared beyond theplayground, so that diff deserves the closest read.
What to QA
repetition arrows all behave as before.
selection summary render.
screen reader now announces it by name.
bright yellow one. That is the
colorWarningBgfix.and close normally. The changed primitives are shared, so this is the most likely spot
for fallout.