Session: you-are-a-senior-harmonic-dolphin-subagent-a634d7cc — 2026-04-27

Project: workspace-doctolib · Branch: HEAD · Mode: ` · **Model:**claude-opus-4-7`

Stats: 1 user messages, 21 tool calls, tools used: Bash, Read.

Conversation

Turn 1 — User

Review the following files from a recent refactor in the treatment-plan repo (package: tpf-national-health-records-ui). The feature is a custom multi-select dropdown for filtering document categories in the French DMP.

Files to review: 1. /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentList/NhrDocumentCategoryFilter/MultiSelectDropdown.tsx 2. /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentList/NhrDocumentCategoryFilter/NhrDocumentCategoryFilter.tsx 3. /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentList/NhrDocumentCategoryFilter/hooks.ts 4. /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentList/NhrDocumentCategoryFilter/helpers.ts 5. /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentList/NhrDocumentCategoryFilter/MultiSelectDropdown.test.tsx 6. /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentList/NhrDocumentCategoryFilter/NhrDocumentCategoryFilter.test.tsx 7. /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentList/NhrDocumentCategoryFilter/hooks.test.tsx 8. /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentList/NhrDocumentCategoryFilter/helpers.test.ts 9. /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/business/factories/filters/createNhrDocumentCategoryFilterConfig.tsx 10. /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/business/factories/filters/createNhrDocumentCategoryFilterConfig.test.tsx

Check for: correctness, TypeScript type safety, accessibility (ARIA), performance (unnecessary re-renders, missing memos), edge cases, code style. Do not flag eslint-disable comments (there are none). Report actionable findings only.

Turn 1 — Assistant

I'll review the treatment-plan refactor files. Let me start by exploring the project structure and reading the files in parallel.

Tools used:

• Bash: ls /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentList/NhrDocumentCategoryFilter/ && find /Users/USER/workspace/doctolib/trea …(truncated, 52 more chars)

Tool results:

→ result (ok): helpers.test.ts helpers.ts hooks.test.tsx hooks.ts index.ts MultiSelectDropdown.test.tsx MultiSelectDropdown.tsx NhrDocumentCategoryFilter.stories.tsx NhrDocumentCategoryFilter.test.tsx NhrDocumentCategoryFilter.tsx /Users/USER/workspace/doctolib/treatment-plan/CLAUDE.md /Users/USER/workspace/doctolib/treatment-plan/backend/cda-validator/CLAUDE.md /Users/USER/workspace/doctolib/treatment-plan/.claude/worktrees/stupefied-lewin/CLAUDE.md /Users/USER/workspace/doctolib/treatment-plan/.claude/worktr …(truncated, 30 more chars)

Tools used:

• Read: /Users/USER/workspace/doctolib/treatment-plan/CLAUDE.md

Tool results:

→ result (ok): 1 # CLAUDE.md 2
3 This is a full-stack healthcare treatment plan application (Kotlin/Spring Boot backend + React/TypeScript frontend) built as a modular monolith using the "hive" pattern with hexagonal architecture. It handles prescription creation, document management, and clinical workflows for the French and German markets. 4
5 Refer to @AGENTS.md for complete project overview, architecture, tech stack, and development guidelines. 6
7 ## Language Rule 8
9 All Claude stack files (C …(truncated, 664 more chars)

Tools used:

• Read: /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentList/NhrDocumentCategoryFilter/MultiSelectDropdown.tsx

Tool results:

→ result (ok): 1 import { ChevronDownRegularIcon } from '@doctolib/design-system-icons/ChevronDownRegularIcon' 2 import { Checkbox } from '@doctolib/design-system/Checkbox/v2' 3 import { IconButton } from '@doctolib/design-system/IconButton/v2' 4 import type { Option } from '@doctolib/design-system/Option' 5 import { useId, useMemo, useRef, useState } from 'react' 6
7 import { normalize } from './helpers' 8 import { useDropdownClose } from './hooks' 9
10 export type MultiSelectDropdownProps = { 11 label: s …(truncated, 4058 more chars)

Tools used:

• Read: /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentList/NhrDocumentCategoryFilter/NhrDocumentCategoryFilter.tsx

Tool results:

→ result (ok): 1 import type { ComponentProps } from 'react' 2
3 import { MultiSelectDropdown } from './MultiSelectDropdown' 4
5 export type NhrDocumentCategoryFilterProps = ComponentProps<typeof MultiSelectDropdown> 6
7 export const NhrDocumentCategoryFilter = (props: NhrDocumentCategoryFilterProps) => <MultiSelectDropdown {...props} /> 8

Tools used:

• Read: /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentList/NhrDocumentCategoryFilter/hooks.ts

Tool results:

→ result (ok): 1 import { type RefObject, useEffect, useRef } from 'react' 2
3 export const useDropdownClose = ( 4 containerRef: RefObject<HTMLDivElement | null>, 5 onClose: () => void, 6 isOpen: boolean 7 ) => { 8 const onCloseRef = useRef(onClose) 9 // Sync ref so the stable event listeners always call the latest onClose. 10 useEffect(() => { 11 onCloseRef.current = onClose 12 }, [onClose]) 13
14 useEffect(() => { 15 if (!isOpen) return undefined 16
17 const handlePointerDown = …(truncated, 625 more chars)

Tools used:

• Read: /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentList/NhrDocumentCategoryFilter/helpers.ts

Tool results:

→ result (ok): 1 export const normalize = (s: string) => 2 s 3 .normalize('NFD') 4 .replace(/\p{Diacritic}/gu, '') 5 .toLowerCase() 6

Tools used:

• Read: /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentList/NhrDocumentCategoryFilter/MultiSelectDropdown.test.tsx

Tool results:

→ result (ok): 1 import { setup } from '@doctolib/test-helpers' 2 import { screen } from '@testing-library/react' 3 import { afterEach, describe, expect, it, vi } from 'vitest' 4
5 import { MultiSelectDropdown } from './MultiSelectDropdown' 6
7 const sampleOptions = [ 8 { value: 'A', label: 'Report A' }, 9 { value: 'B', label: 'Report B' }, 10 { value: 'C', label: 'Report C' }, 11 ] 12
13 describe('MultiSelectDropdown', () => { 14 afterEach(() => { 15 vi.clearAllMocks() 16 vi.restoreAllMocks …(truncated, 15698 more chars)

Tools used:

• Read: /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentList/NhrDocumentCategoryFilter/NhrDocumentCategoryFilter.test.tsx

Tool results:

→ result (ok): 1 import { setup } from '@doctolib/test-helpers' 2 import { screen } from '@testing-library/react' 3 import { afterEach, describe, expect, it, vi } from 'vitest' 4
5 import { NhrDocumentCategoryFilter } from './NhrDocumentCategoryFilter' 6
7 const sampleOptions = [ 8 { value: 'A', label: 'Report A' }, 9 { value: 'B', label: 'Report B' }, 10 ] 11
12 describe('NhrDocumentCategoryFilter', () => { 13 afterEach(() => { 14 vi.clearAllMocks() 15 vi.restoreAllMocks() 16 }) 17
18 co …(truncated, 1920 more chars)

Tools used:

• Read: /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentList/NhrDocumentCategoryFilter/hooks.test.tsx

Tool results:

→ result (ok): 1 import { setup } from '@doctolib/test-helpers' 2 import { screen } from '@testing-library/react' 3 import { useRef } from 'react' 4 import { afterEach, describe, expect, it, vi } from 'vitest' 5
6 import { useDropdownClose } from './hooks' 7
8 const DropdownCloseFixture = ({ isOpen, onClose }: { isOpen: boolean; onClose: () => void }) => { 9 const containerRef = useRef<HTMLDivElement>(null) 10 useDropdownClose(containerRef, onClose, isOpen) 11 return ( 12 <div ref={containerRef} da …(truncated, 2647 more chars)

Tools used:

• Read: /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentList/NhrDocumentCategoryFilter/helpers.test.ts

Tool results:

→ result (ok): 1 import { describe, expect, it } from 'vitest' 2
3 import { normalize } from './helpers' 4
5 describe('normalize', () => { 6 it('should return an empty string for empty input', () => { 7 expect(normalize('')).toBe('') 8 }) 9
10 it('should lowercase ASCII text', () => { 11 expect(normalize('HELLO')).toBe('hello') 12 }) 13
14 it('should strip French diacritics', () => { 15 expect(normalize('Médecin')).toBe('medecin') 16 }) 17
18 it('should strip German diacritics', …(truncated, 351 more chars)

Tools used:

• Read: /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/business/factories/filters/createNhrDocumentCategoryFilterConfig.tsx

Tool results:

→ result (ok): 1 import { NhrDocumentCategoryFilter } from '#components/NhrDocumentList/NhrDocumentCategoryFilter' 2 import type { Option } from '@doctolib/design-system/Option' 3
4 import type { FilterConfig } from '../../../types' 5
6 export const createNhrDocumentCategoryFilterConfig = ({ 7 options = [], 8 label = 'Document Category', 9 placeholder, 10 }: { 11 options?: Option[] 12 label?: string 13 placeholder?: string 14 } = {}): FilterConfig => ({ 15 key: 'typeCodes', 16 // ctx is requi …(truncated, 718 more chars)

Tools used:

• Read: /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/business/factories/filters/createNhrDocumentCategoryFilterConfig.test.tsx

Tool results:

→ result (ok): 1 import { setup } from '@doctolib/test-helpers' 2 import { screen } from '@testing-library/react' 3 import { afterEach, describe, expect, it, vi } from 'vitest' 4
5 import { mockPatientInfo } from '../../../test-helpers' 6 import { createNhrDocumentCategoryFilterConfig } from './createNhrDocumentCategoryFilterConfig' 7
8 const ctx = { patient: mockPatientInfo } 9
10 const sampleOptions = [ 11 { value: 'A', label: 'Report A' }, 12 { value: 'B', label: 'Report B' }, 13 { value: 'C', labe …(truncated, 4677 more chars)

Now let me check related files to better understand context.

Tools used:

• Bash: ls /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/business/factories/filters/ && cat /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-nat …(truncated, 190 more chars)

Tool results:

→ result (ok): createNhrDateSelectionFilterConfig.test.tsx createNhrDateSelectionFilterConfig.tsx createNhrDocumentCategoryFilterConfig.test.tsx createNhrDocumentCategoryFilterConfig.tsx createNhrDocumentStatusFilterConfig.test.tsx createNhrDocumentStatusFilterConfig.tsx createNhrDocumentVisibilityFilterConfig.test.tsx createNhrDocumentVisibilityFilterConfig.tsx import type { DesignSystemIconComponent } from '@doctolib/design-system-icons' import type { NhrDocument, NhrResultStatus } from '@doctolib/tpf-nation …(truncated, 1307 more chars)

Tools used:

• Bash: grep -n "FilterConfig" /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/types.ts | head -20 ; cat /Users/USER/workspace/doctolib/treatment-plan/packa …(truncated, 116 more chars)

Tool results:

→ result (ok): 21:/* Passed to every FilterConfig.render() — country variant casts to its own patient type / 48:export type FilterConfig = { import { NhrDocumentStatusFilter } from '../../../components/NhrDocumentList/NhrDocumentStatusFilter/NhrDocumentStatusFilter' import type { FilterConfig, StatusOption } from '../../../types'

export const createNhrDocumentStatusFilterConfig = (statuses: StatusOption[], label: string): FilterConfig => ({ key: 'documentStatus', render: (filters, onChange) => ( <Nh …(truncated, 250 more chars)

Tools used:

• Read: /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/types.ts (48–73)

Tool results:

→ result (ok): 48 export type FilterConfig = { 49 key: string 50 render: ( 51 /* generic — DMP variant casts to DmpServerFilters / 52 filters: Record<string, unknown>, 53 onChange: (patch: Record<string, unknown>) => void, 54 ctx: FilterRenderContext 55 ) => ReactNode 56 } 57
58 export type SearchDocumentsResult = { 59 data: NhrDocument[] 60 total?: number 61 status: NhrResultStatus 62 message?: string 63 code?: string 64 } 65
66 export type SearchDocumentsFn = (appliedFilte …(truncated, 187 more chars)

Tools used:

• Bash: grep -rn "Option" /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/node_modules/@doctolib/design-system/Option 2>/dev/null | head -5 ; find /Users/USER/w …(truncated, 176 more chars)

Tool results:

→ result (ok): /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDateSelectionFilter/NhrDateSelectionFilter.tsx /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDateTypeFilter/NhrDateTypeFilter.tsx /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/business/factories/filters/createNhrDateSelectionFilterConfig.tsx /Users/USER/workspace/doctolib/treatment-plan/packag …(truncated, 273 more chars)

Tools used:

• Bash: find /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/node_modules/@doctolib/design-system/Option -type f 2>/dev/null | head ; cat /Users/USER/workspace/ …(truncated, 141 more chars)

Tool results:

→ result (ok): (Bash completed with no output)

Tools used:

• Bash: find /Users/USER/workspace/doctolib/treatment-plan -path '*design-system/Option*' -not -path '*/node_modules/.cache/*' 2>/dev/null | head -10 ; find /Users/USER/workspace/doctolib/treatment- …(truncated, 51 more chars)

Tool results:

→ result (ok): /Users/USER/workspace/doctolib/treatment-plan/node_modules/@mui/material/Checkbox /Users/USER/workspace/doctolib/treatment-plan/node_modules/@mui/material/esm/Checkbox /Users/USER/workspace/doctolib/treatment-plan/node_modules/@mui/material/node/Checkbox /Users/USER/workspace/doctolib/treatment-plan/node_modules/@mui/material/legacy/Checkbox /Users/USER/workspace/doctolib/treatment-plan/node_modules/@mui/material/modern/Checkbox

Tools used:

• Bash: find /Users/USER/workspace/doctolib/treatment-plan -path '*design-system*' -name 'Option*' -not -path '*/node_modules/.cache/*' 2>/dev/null | head ; find /Users/USER/workspace/doctolib/treat …(truncated, 135 more chars)

Tool results:

→ result (ok): /Users/USER/workspace/doctolib/treatment-plan/node_modules/@doctolib/design-system-b2b/src/dataEntry/Option.ts /Users/USER/workspace/doctolib/treatment-plan/node_modules/@doctolib/design-system-b2b/dist/dataEntry/Option.d.ts.map /Users/USER/workspace/doctolib/treatment-plan/node_modules/@doctolib/design-system-b2b/dist/dataEntry/Option.js /Users/USER/workspace/doctolib/treatment-plan/node_modules/@doctolib/design-system-b2b/dist/dataEntry/Option.d.ts /Users/USER/workspace/doctolib/treatment-plan …(truncated, 1013 more chars)

Tools used:

• Read: /Users/USER/workspace/doctolib/treatment-plan/node_modules/@doctolib/design-system/dist/dataEntry/private/Option.d.ts

Tool results:

→ result (ok): 1 export type Option = { 2 label: string; 3 value: string; 4 disabled?: boolean; 5 }; 6 export type OptionGroup = { 7 label: string; 8 options: Option[]; 9 disabled?: boolean; 10 }; 11 / 12 * Type guard for Option and OptionGroup 13 * @param option 14 */ 15 export declare const isOptionGroup: (option: Option | OptionGroup) => option is OptionGroup; 16 / 17 * Flattens options and option groups into an option array 18 * @param options 19 */ 20 export declare const …(truncated, 822 more chars)

Now I have a good understanding. Let me also check if there's a story file and the existing index file.

Tools used:

• Read: /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentList/NhrDocumentCategoryFilter/index.ts

Tool results:

→ result (ok): 1 export * from './NhrDocumentCategoryFilter' 2

I have enough context. Let me complete the review.

Code Review: NhrDocumentCategoryFilter Refactor

Files reviewed: - /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentList/NhrDocumentCategoryFilter/MultiSelectDropdown.tsx - /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentList/NhrDocumentCategoryFilter/NhrDocumentCategoryFilter.tsx - /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentList/NhrDocumentCategoryFilter/hooks.ts - /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentList/NhrDocumentCategoryFilter/helpers.ts - /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentList/NhrDocumentCategoryFilter/MultiSelectDropdown.test.tsx - /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentList/NhrDocumentCategoryFilter/NhrDocumentCategoryFilter.test.tsx - /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentList/NhrDocumentCategoryFilter/hooks.test.tsx - /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentList/NhrDocumentCategoryFilter/helpers.test.ts - /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/business/factories/filters/createNhrDocumentCategoryFilterConfig.tsx - /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/business/factories/filters/createNhrDocumentCategoryFilterConfig.test.tsx

Critical (90-100)

1. ARIA combobox does not own/reference its listbox children — popup uses dialog + checkboxes (Confidence: 92)

File: MultiSelectDropdown.tsx lines 73-76, 102-120

The input has role='combobox' with aria-haspopup='dialog' and aria-controls={popupId}. The popup is a <fieldset> containing <Checkbox> items. There are several distinct accessibility problems:

• A combobox that controls a dialog is allowed by ARIA 1.2, but the dialog content (the fieldset) is missing role='dialog' and the dialog naming/landmark requirements. Screen readers will announce "popup dialog" but no dialog will be found in the accessibility tree.
• Per the WAI-ARIA combobox pattern, when the popup contains selectable options, those options should be exposed as role='option' inside a role='listbox' (or similar) — checkboxes inside a fieldset are a non-standard pattern. There is no aria-activedescendant, no keyboard arrow-key navigation, and no Tab/Enter/Home/End handling.
• Only Escape is handled. Users cannot move focus through options with ArrowDown/ArrowUp (a fundamental combobox keyboard expectation).
• Focus is never moved into the popup after opening, so keyboard-only users open the dropdown and have no obvious way to reach the checkboxes other than Tab-ing through the icon button first.

Fix: Either (a) drop the combobox role and treat the input as a search field above an exposed role='group'/checkbox list (then add a separate trigger button with aria-expanded), or (b) implement the full combobox-with-listbox pattern (arrow-key navigation, aria-activedescendant, focus management). The current hybrid is misleading to assistive tech.

2. aria-haspopup='dialog' is incorrect for the rendered popup (Confidence: 90)

File: MultiSelectDropdown.tsx line 75

The element rendered when isOpen is a <fieldset> with no role='dialog', no aria-modal, no focus trap, and no labelled name as a dialog. Announcing aria-haspopup='dialog' is therefore false. For an interactive group of checkboxes, aria-haspopup='listbox' (with the corresponding listbox/option roles) is the correct value, or omit the haspopup if you keep the fieldset/group pattern.

Fix: Either implement the popup as an actual dialog (with focus trap and role='dialog'), or change aria-haspopup to match the actual rendered structure.

Important (80-89)

3. aria-controls is dropped when closed — breaks programmatic association (Confidence: 84)

File: MultiSelectDropdown.tsx line 76

aria-controls={isOpen ? popupId : undefined} only attaches the attribute while open. While it is technically valid to remove it (since the popup does not exist in the DOM when closed), this prevents AT users from being told ahead of time which element will be revealed. More importantly, the test on line 308-312 hard-codes this behavior, freezing a debatable accessibility choice.

Fix: Always render aria-controls={popupId}. The id remains stable via useId(). ARIA attributes pointing to non-existent ids are ignored gracefully and the relationship is still meaningful when the popup opens.

4. Outside-click handler uses pointerdown — closes before child clicks register (Confidence: 86)

File: hooks.ts lines 17-21, 27

Listening on pointerdown (rather than click or mouseup) means the dropdown closes on the down phase of a click. If the user mousedowns on the trigger, releases over the body, the dropdown will close before the trigger's click fires. More problematically, on touch devices, pointerdown fires immediately on touch — scrolling near the dropdown will close it. The Checkbox label in the popup performs its toggle on click, not pointerdown, so the handler is fine for the common path, but in test (line 200) user.click(document.body) works because RTL's userEvent synthesizes a full click sequence on document.body.

Fix: Use mousedown + touchstart, or a delayed click listener attached on the next tick after open. The more conventional approach is mousedown for desktop close-on-outside-click since it avoids the double-toggle on the trigger.

5. displayLabel ignores option order regression risk: find returns the first option whose value is in values, not the option matching values[0] (Confidence: 88)

File: MultiSelectDropdown.tsx lines 40-44

const firstLabel = options.find((o) => values.includes(o.value))?.label ?? ''

This intentionally picks "the first option in options order whose value is selected" (test at line 61-65 documents this). However, a user who selects in order [B, A] then sees the label "Report A, +1" — i.e. the displayed first label depends on the static options array order, not the order the user selected. Combined with +N based on values.length (which counts unknown values too — see test at line 73-77), the trigger label becomes inconsistent: the count includes unknowns but the label cannot.

This is a logic / UX design issue rather than a bug per se, but the asymmetry between "first label is the first known option" and "+N is the total count including unknown values" produces misleading output (e.g. selecting ["A", "UNKNOWN"] shows "Report A, +1" implying two known selections). The test on line 73 enshrines this behavior.

Fix: Either (a) compute firstLabel from values[0] so the displayed label tracks the user's first selection, and only fallback to find-first-known when values[0] is unknown; or (b) filter values against known options before computing both firstLabel and the +N count so they stay in sync. Recommend option (b) for correctness.

6. Checkbox value prop usage may be incorrect — likely should be checked/isChecked (Confidence: 80)

File: MultiSelectDropdown.tsx line 113

<Checkbox
  ...
  value={values.includes(option.value)}
  ...
/>

The Checkbox from @doctolib/design-system/Checkbox/v2 typically follows React conventions where value is the form value and checked/isChecked controls state. Passing a boolean to value may work by accident (Checkb …(truncated, 6118 more chars)