Skip to content

fix: react doctor fixes#245

Merged
pedronauck merged 3 commits into
mainfrom
pn/react-doctor
Jun 1, 2026
Merged

fix: react doctor fixes#245
pedronauck merged 3 commits into
mainfrom
pn/react-doctor

Conversation

@pedronauck

@pedronauck pedronauck commented May 31, 2026

Copy link
Copy Markdown
Member

Summary by CodeRabbit

  • New Features

    • Pre-commit now runs a staged React Doctor scan
    • Safe Markdown rendering config added (external-image fallback)
  • Improvements

    • Extracted and centralized styling variant helpers for multiple UI components
    • Dialog state handling unified in Knowledge Detail Panel
    • Memoized ToggleGroup context to reduce re-renders
  • Changes

    • ChatMessageBubble prop renamed to messageRole
    • MessageAvatar prop renamed to ownerRole
    • Storybook and showcase updated to use new props

@pedronauck pedronauck self-assigned this May 31, 2026
@vercel

vercel Bot commented May 31, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
agh-site Ready Ready Preview, Comment Jun 1, 2026 5:39pm

Request Review

@coderabbitai

coderabbitai Bot commented May 31, 2026

Copy link
Copy Markdown

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: bd3e6ec8-f2de-49eb-a82c-4d8f6c4c3227

📥 Commits

Reviewing files that changed from the base of the PR and between 0574383 and f47069f.

📒 Files selected for processing (6)
  • .husky/pre-commit
  • internal/e2elane/pre_commit_hook_test.go
  • packages/ui/src/components/__tests__/progress.test.tsx
  • packages/ui/src/components/progress.tsx
  • web/src/systems/knowledge/components/__tests__/knowledge-detail-panel.test.tsx
  • web/src/systems/knowledge/components/knowledge-detail-panel.tsx

Disabled knowledge base sources:

  • Linear integration is disabled

You can enable these sources in your CodeRabbit configuration.


Walkthrough

Refactors UI and web code by extracting variant/config/context logic into dedicated modules, renaming message/avatar props, updating barrels and consumers, adding tests, and adding a husky pre-commit react-doctor staged scan.

Changes

Unified Component and Web App Refactoring

Layer / File(s) Summary
Button and button-group variant extraction
packages/ui/src/components/button-variants.ts, packages/ui/src/components/button.tsx, packages/ui/src/components/button-group-variants.ts, packages/ui/src/components/button-group.tsx
buttonVariants and buttonGroupVariants cva configurations are extracted to dedicated modules, components import from new locations, and exports are removed from component files.
Alert, toggle, and progress variant extraction
packages/ui/src/components/alert-variants.ts, packages/ui/src/components/alert.tsx, packages/ui/src/components/toggle-variants.ts, packages/ui/src/components/toggle.tsx, packages/ui/src/components/progress-variants.ts, packages/ui/src/components/progress.tsx
alertVariants, toggleVariants, and progressIndicatorVariants are extracted to dedicated modules, components import from new locations, and barrel exports are updated.
Pill component variants and types extraction
packages/ui/src/components/custom/pill-variants.ts, packages/ui/src/components/custom/pill-types.ts, packages/ui/src/components/custom/pill.tsx
pillVariants and PillTone/PillSize types are extracted to dedicated modules; pill.tsx imports from new locations and removes local definitions.
Pill-group variant extraction
packages/ui/src/components/custom/pill-group-variants.ts, packages/ui/src/components/custom/pill-group.tsx
pillGroupSegmentVariants is extracted to a dedicated module; pill-group.tsx imports from the new location and stops re-exporting.
Markdown safe configuration extraction
packages/ui/src/components/custom/markdown-config.tsx, packages/ui/src/components/custom/markdown.tsx, packages/ui/src/components/custom/description-card.tsx
STREAMDOWN_SAFE_CONFIG with safe image rendering and component overrides is consolidated into a dedicated module; markdown.tsx imports and re-exports; description-card.tsx stops re-exporting.
Data-surface state extraction
packages/ui/src/components/custom/data-surface-state.ts, packages/ui/src/components/custom/data-surface.tsx, packages/ui/src/components/custom/__tests__/data-surface.test.tsx
DataSurfaceState type and resolveDataSurfaceState helper are extracted to a dedicated module; data-surface.tsx imports the type and removes the helper; test imports are updated.
Sonner toast module split
packages/ui/src/components/sonner-toast.ts, packages/ui/src/components/sonner.tsx, packages/ui/src/components/__tests__/sonner.test.tsx, packages/ui/src/components/stories/sonner.stories.tsx
toast re-export is moved to a dedicated sonner-toast.ts module; sonner.tsx exports only Toaster; test and story imports are split between the two modules.
Barrel export rewiring for split modules
packages/ui/src/index.ts, packages/ui/src/components/custom/index.ts
Multi-export statements are split and variant/helper re-exports are redirected to their new dedicated modules; all public APIs remain accessible from the same barrel entry points.
ChatMessageBubble prop rename (role → messageRole)
packages/ui/src/components/custom/chat-message-bubble.tsx, packages/ui/src/components/custom/__tests__/chat-message-bubble.test.tsx, packages/ui/src/components/custom/stories/chat-message-bubble.stories.tsx, web/src/components/design-system-showcase.tsx
The role prop is renamed to messageRole throughout the component implementation, tests, stories, and showcase usage; internal alignment resolution and rendering logic keys off the new prop name.
MessageAvatar prop and type rename (role → ownerRole)
web/src/systems/network/components/timeline/message-avatar.tsx, web/src/systems/network/components/timeline/message-row.tsx, web/src/systems/network/components/directs/direct-room.tsx, web/src/systems/network/components/directs/directs-list.tsx, web/src/systems/network/components/shell/channel-rail.tsx, web/src/systems/network/components/timeline/__tests__/message-avatar.test.tsx
MessageAvatarRole type is renamed to MessageAvatarOwnerRole; the role prop is renamed to ownerRole in the component signature; consumer call sites are updated; tests adjusted.
Context creation extraction to dedicated value modules
web/src/systems/network/contexts/network-list-filters-context-value.ts, web/src/systems/network/contexts/network-list-filters-context.tsx, web/src/systems/network/hooks/use-network-list-filters-context.ts, web/src/systems/session/contexts/session-create-context-value.ts, web/src/systems/session/contexts/session-create-context.tsx, web/src/systems/session/hooks/use-session-create.ts, web/src/systems/session/lib/session-transcript-thread-context-value.ts, web/src/systems/session/lib/session-transcript-thread-context.tsx, web/src/systems/session/hooks/use-session-transcript-thread-messages.ts
Context creation and type definitions are moved to dedicated *-context-value.ts modules; provider and hook files import contexts from new locations; provider implementations remain functionally unchanged.
TanStack Query context helper extraction and import refactoring
web/src/integrations/tanstack-query/root-context.ts, web/src/integrations/tanstack-query/root-provider.tsx, web/src/main.tsx
A getContext() helper is introduced to create a new QueryClient; main.tsx switches to named imports and calls getContext() directly instead of using namespace-style imports.
Dialog and state management improvements
web/src/systems/knowledge/components/knowledge-detail-panel.tsx, web/src/systems/network/components/directs/new-direct-dialog.tsx, packages/ui/src/components/toggle-group.tsx
KnowledgeDetailPanel refactors dialog state from two independent booleans to a keyed state object; NewDirectDialog handles state reset inline via a handleOpenChange wrapper instead of useEffect; ToggleGroup adds React.useMemo for context value memoization.
Supporting updates and refactorings
packages/ui/src/components/custom/__tests__/description-card.test.tsx, web/src/systems/tasks/components/tasks-inbox-view.tsx
Minor adjustments to test imports and JSX prop ordering that support the broader refactoring.
React doctor pre-commit hook integration
.husky/pre-commit
A shell-based pre-commit hook runs react-doctor staged scan with multiple command resolution fallbacks (local binary, global, pnpm dlx, npx), captures output to a temporary file, and emits warnings for staged regressions before lint-staged runs.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60 minutes

Possibly related PRs

  • compozy/agh#164: Overlaps with STREAMDOWN_SAFE_CONFIG and DescriptionCard refactoring via markdown module extraction.
  • compozy/agh#84: Adds and refactors Pill UI variants/types/exports that this PR reorganizes into separate modules.
🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (1 warning, 1 inconclusive)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 6.67% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
Title check ❓ Inconclusive The title 'fix: react doctor fixes' is vague and circular—it restates the tool name without describing what specific issues were resolved. Replace with a specific description of the primary change, such as 'refactor: extract variant definitions to separate modules' or 'fix: resolve react-doctor warnings by reorganizing exports'.
✅ Passed checks (3 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

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

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch pn/react-doctor

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

@github-actions

github-actions Bot commented May 31, 2026

Copy link
Copy Markdown
Contributor

React Doctor

React Doctor found 15 issues in 5 files.

Score Issues Errors Warnings Affected Files Scope
98 / 100 (Great) 15 0 15 5 66 files changed on pn/react-doctor vs. main

Top Findings

Rule Severity Category Count
react-doctor/jsx-no-jsx-as-prop warning Performance 9
react-doctor/prefer-tag-over-role warning Accessibility 2
react-doctor/anchor-has-content warning Accessibility 2
react-doctor/control-has-associated-label warning Accessibility 2

View workflow run

Generated by React Doctor. Questions? Contact founders@million.dev.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Actionable comments posted: 6

🤖 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 @.husky/pre-commit:
- Around line 29-34: The pre-commit hook is swallowing react_doctor failures
because the else branch deletes "$react_doctor_output" and only prints messages
without returning a non-zero status; update the failing path in the block that
calls react_doctor_scan_staged_files and uses "$react_doctor_output" so that
after printing the three error lines it exits with a non-zero code (e.g., exit
1) to fail the hook and prevent lint-staged from passing when react-doctor
reports regressions.

In `@packages/ui/src/components/alert-variants.ts`:
- Line 4: The base alert geometry string in alert-variants.ts is using raw
Tailwind utilities (gap-0.5, rounded-lg, px-2.5, py-2) instead of design tokens;
update the alert base class entry to replace those raw utilities with the
corresponding token-backed classes defined in packages/ui/src/tokens.css (per
DESIGN.md) so spacing, radius and padding are expressed via tokens; ensure you
replace gap-0.5, rounded-lg, px-2.5 and py-2 with their token equivalents, keep
the rest of the compound selector intact, and run the UI build to verify no
visual/regression changes.

In `@packages/ui/src/components/button-group-variants.ts`:
- Line 4: The CSS utility string in button-group-variants.ts uses raw values
(e.g., has-[>[data-slot=button-group]]:gap-2 and the rounded-r-md / rounded-b-md
usages in the select-trigger selectors); replace those raw spacing and radius
utilities with the corresponding token-backed classes defined in
packages/ui/src/tokens.css (use the design system token names from DESIGN.md),
update the selectors that reference gap-2 and rounded-*-md to the token class
names, and ensure any other hard-coded spacing/radius in that file is similarly
mapped to token classes so all UI values come from tokens.css.

In `@packages/ui/src/components/button-variants.ts`:
- Line 4: The button variant string in button-variants.ts uses raw utility
values (e.g., rounded-md, px-2.5, h-9, h-11, gap-2); replace those ad-hoc
utilities with the corresponding token-backed classes defined in
packages/ui/src/tokens.css per DESIGN.md (use the design tokens for radius,
spacing, and sizing instead of literal utilities), updating the base
variant/constant that contains the long class string so all occurrences
(including the group/inline-flex variant and the sizes referenced on lines
22–28) reference token classes rather than raw values.

In `@packages/ui/src/components/progress.tsx`:
- Line 7: The ProgressIndicator component is hardcoding the bg-accent background
class which conflicts with the tone-based class passed from Progress; update
ProgressIndicator to remove the hardcoded "bg-accent" and instead rely on the
tone/className passed in (or merge classes so the passed tone background wins).
Locate the ProgressIndicator JSX (referenced by the ProgressIndicator component
and the parent Progress component) and remove the fixed background utility,
ensuring className composition uses the incoming tone/className prop (or a
utility like classNames/twMerge) so only the correct tone background is applied.

In `@web/src/systems/knowledge/components/knowledge-detail-panel.tsx`:
- Around line 220-233: The memoryIdentity built from just
`${memory.scope}:${memory.filename}` is not collision-resistant and can cause
dialog state to leak between different memories; update the construction of
memoryIdentity (used in the KnowledgeDialogState, dialogState, setDialogState,
isCurrentDialogState, confirmDeleteOpen, and editOpen logic) to include a unique
identifier for the memory (e.g., memory.id or a stable hash of the memory object
like `${memory.scope}:${memory.filename}:${memory.id}` or a short hash of
JSON.stringify(memory)) so comparisons only match the exact memory instance and
dialog open/edit/delete state cannot cross-apply to other records.
🪄 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: 051cb6a5-dad8-4ff2-8dd0-450b40f9add2

📥 Commits

Reviewing files that changed from the base of the PR and between a71b6a7 and 0574383.

⛔ Files ignored due to path filters (8)
  • .agents/skills/react-doctor/SKILL.md is excluded by !**/*.md, !.agents/**
  • .github/workflows/react-doctor.yml is excluded by !**/*.yml
  • bun.lock is excluded by !**/*.lock, !**/*.lock
  • package.json is excluded by !**/*.json
  • packages/site/content/runtime/core/configuration/config-toml.mdx is excluded by !**/*.mdx
  • packages/site/package.json is excluded by !**/*.json
  • react-doctor.config.json is excluded by !**/*.json
  • web/package.json is excluded by !**/*.json
📒 Files selected for processing (55)
  • .husky/pre-commit
  • packages/ui/src/components/__tests__/sonner.test.tsx
  • packages/ui/src/components/alert-variants.ts
  • packages/ui/src/components/alert.tsx
  • packages/ui/src/components/button-group-variants.ts
  • packages/ui/src/components/button-group.tsx
  • packages/ui/src/components/button-variants.ts
  • packages/ui/src/components/button.tsx
  • packages/ui/src/components/custom/__tests__/chat-message-bubble.test.tsx
  • packages/ui/src/components/custom/__tests__/data-surface.test.tsx
  • packages/ui/src/components/custom/__tests__/description-card.test.tsx
  • packages/ui/src/components/custom/chat-message-bubble.tsx
  • packages/ui/src/components/custom/data-surface-state.ts
  • packages/ui/src/components/custom/data-surface.tsx
  • packages/ui/src/components/custom/description-card.tsx
  • packages/ui/src/components/custom/index.ts
  • packages/ui/src/components/custom/markdown-config.tsx
  • packages/ui/src/components/custom/markdown.tsx
  • packages/ui/src/components/custom/pill-group-variants.ts
  • packages/ui/src/components/custom/pill-group.tsx
  • packages/ui/src/components/custom/pill-types.ts
  • packages/ui/src/components/custom/pill-variants.ts
  • packages/ui/src/components/custom/pill.tsx
  • packages/ui/src/components/custom/stories/chat-message-bubble.stories.tsx
  • packages/ui/src/components/progress-variants.ts
  • packages/ui/src/components/progress.tsx
  • packages/ui/src/components/sonner-toast.ts
  • packages/ui/src/components/sonner.tsx
  • packages/ui/src/components/stories/sonner.stories.tsx
  • packages/ui/src/components/toggle-group.tsx
  • packages/ui/src/components/toggle-variants.ts
  • packages/ui/src/components/toggle.tsx
  • packages/ui/src/index.ts
  • web/src/components/design-system-showcase.tsx
  • web/src/integrations/tanstack-query/root-context.ts
  • web/src/integrations/tanstack-query/root-provider.tsx
  • web/src/main.tsx
  • web/src/systems/knowledge/components/knowledge-detail-panel.tsx
  • web/src/systems/network/components/directs/direct-room.tsx
  • web/src/systems/network/components/directs/directs-list.tsx
  • web/src/systems/network/components/directs/new-direct-dialog.tsx
  • web/src/systems/network/components/shell/channel-rail.tsx
  • web/src/systems/network/components/timeline/__tests__/message-avatar.test.tsx
  • web/src/systems/network/components/timeline/message-avatar.tsx
  • web/src/systems/network/components/timeline/message-row.tsx
  • web/src/systems/network/contexts/network-list-filters-context-value.ts
  • web/src/systems/network/contexts/network-list-filters-context.tsx
  • web/src/systems/network/hooks/use-network-list-filters-context.ts
  • web/src/systems/session/contexts/session-create-context-value.ts
  • web/src/systems/session/contexts/session-create-context.tsx
  • web/src/systems/session/hooks/use-session-create.ts
  • web/src/systems/session/hooks/use-session-transcript-thread-messages.ts
  • web/src/systems/session/lib/session-transcript-thread-context-value.ts
  • web/src/systems/session/lib/session-transcript-thread-context.tsx
  • web/src/systems/tasks/components/tasks-inbox-view.tsx
💤 Files with no reviewable changes (1)
  • packages/ui/src/components/sonner.tsx

Comment thread .husky/pre-commit
Comment thread packages/ui/src/components/alert-variants.ts
Comment thread packages/ui/src/components/button-group-variants.ts
Comment thread packages/ui/src/components/button-variants.ts
Comment thread packages/ui/src/components/progress.tsx
Comment thread web/src/systems/knowledge/components/knowledge-detail-panel.tsx Outdated
@pedronauck pedronauck merged commit 5105e7a into main Jun 1, 2026
1 of 3 checks passed
@pedronauck pedronauck deleted the pn/react-doctor branch June 1, 2026 17:37
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.

1 participant