{
  "id": "workspace-doctolib/you-are-a-senior-harmonic-dolphin-subagent-ad8a57fc",
  "slug": "you-are-a-senior-harmonic-dolphin-subagent-ad8a57fc",
  "title": "Session: you-are-a-senior-harmonic-dolphin-subagent-ad8a57fc — 2026-04-27",
  "type": "source",
  "project": "workspace-doctolib",
  "date": "2026-04-27",
  "started": "2026-04-27T13:23:34.914000+00:00",
  "ended": "2026-04-27T13:25:32.872000+00:00",
  "model": "claude-sonnet-4-6",
  "cwd": "/Users/USER/workspace/doctolib/treatment-plan",
  "git_branch": "HEAD",
  "permission_mode": "",
  "user_messages": 1,
  "tool_calls": 28,
  "tools_used": [
    "Read",
    "Bash"
  ],
  "is_subagent": true,
  "wikilinks_out": [],
  "body_text": "Project: workspace-doctolib · Branch: HEAD · Mode:  · Model: claude-sonnet-4-6\n\nStats: 1 user messages, 28 tool calls, tools used: Read, Bash.\n\nConversation\n\nTurn 1 — User\n\nReview the following recently modified files for compliance with Doctolib's UpFront frontend architecture patterns.\n\nFiles to review:\n1. /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentList/NhrDocumentCategoryFilter/NhrDocumentCategoryFilter.tsx\n2. /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentList/NhrDocumentCategoryFilter/NhrDocumentCategoryFilter.test.tsx\n3. /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/business/factories/filters/createNhrDocumentCategoryFilterConfig.tsx (unchanged, but related)\n\nContext: This is a multi-select combobox filter component. The trigger is <input type=\"text\" role=\"combobox\"> (not a design system InputText — intentional, as InputText has no right-element slot). Uses oxygen-input-field__ CSS classes directly (same classes used by InputText internally). Uses dl-new-dropdown on the dropdown fieldset (same class used by Select/BetaComboBox). Clear button uses IconButton from @doctolib/design-system/IconButton/v2.\n\nCheck for:\n- Component directory structure (index.ts re-exporter, file naming conventions)\n- Named vs default exports\n- Separation of concerns: is the component correctly presentational? Does it hold any business logic it shouldn't?\n- Use of design system components vs raw HTML — where the deviations are intentional vs accidental\n- Tailwind arbitrary variant usage [&_label]:!py-[1.2rem] — is this pattern acceptable in UpFront, or should it use a CSS module?\n- The oxygen-input-field__ CSS classes used directly — acceptable or should go through a design system component?\n- Any anti-patterns in the React component structure\n\nTurn 1 — Assistant\n\nI'll read all three files plus the component directory structure to perform a thorough review.\n\nTools used:\n\n- Read: /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentList/NhrDocumentCategoryFilter/NhrDocumentCategoryFilter.tsx\n\nTool results:\n\n  → result (ok): 1\timport { ChevronDownRegularIcon } from '@doctolib/design-system-icons/ChevronDownRegularIcon'\n2\timport { Checkbox } from '@doctolib/design-system/Checkbox/v2'\n3\timport { IconButton } from '@doctolib/design-system/IconButton/v2'\n4\timport type { Option } from '@doctolib/design-system/Option'\n5\timport { useEffect, useId, useRef, useState } from 'react'\n6\t\n7\ttype NhrDocumentCategoryFilterProps = {\n8\t  label: string\n9\t  values: string[]\n10\t  options: Option[]\n11\t  placeholder?: string\n12\t  onToggle\n…(truncated, 4401 more chars)\n\nTools used:\n\n- Read: /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentList/NhrDocumentCategoryFilter/NhrDocumentCategoryFilter.test.tsx\n\nTool results:\n\n  → result (ok): 1\timport { setup } from '@doctolib/test-helpers'\n2\timport { screen } from '@testing-library/react'\n3\timport { describe, expect, it, vi } from 'vitest'\n4\t\n5\timport { NhrDocumentCategoryFilter } from './NhrDocumentCategoryFilter'\n6\t\n7\tconst sampleOptions = [\n8\t  { value: 'A', label: 'Report A' },\n9\t  { value: 'B', label: 'Report B' },\n10\t  { value: 'C', label: 'Report C' },\n11\t]\n12\t\n13\tdescribe('NhrDocumentCategoryFilter', () => {\n14\t  const renderComponent = (props: Partial<React.ComponentProps<t\n…(truncated, 7296 more chars)\n\nTools used:\n\n- Read: /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/business/factories/filters/createNhrDocumentCategoryFilterConfig.tsx\n\nTool results:\n\n  → result (ok): 1\timport type { Option } from '@doctolib/design-system/Option'\n2\t\n3\timport { NhrDocumentCategoryFilter } from '../../../components/NhrDocumentList/NhrDocumentCategoryFilter'\n4\timport type { FilterConfig } from '../../../types'\n5\t\n6\texport const createNhrDocumentCategoryFilterConfig = ({\n7\t  options = [],\n8\t  label = 'Document Category',\n9\t  placeholder,\n10\t}: {\n11\t  options?: Option[]\n12\t  label?: string\n13\t  placeholder?: string\n14\t} = {}): FilterConfig => ({\n15\t  key: 'typeCodes',\n16\t  render:\n…(truncated, 653 more chars)\n\nNow let me check the directory structure for the component to verify index.ts, file naming, and sibling files.\n\nTools used:\n\n- Bash: ls /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentList/NhrDocumentCategoryFilter/\n\nTool results:\n\n  → result (ok): index.ts\nNhrDocumentCategoryFilter.stories.tsx\nNhrDocumentCategoryFilter.test.tsx\nNhrDocumentCategoryFilter.tsx\n\nTools used:\n\n- Bash: ls /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentList/\n\nTool results:\n\n  → result (ok): NhrDocumentCategoryCell\nNhrDocumentCategoryFilter\nNhrDocumentList.stories.tsx\nNhrDocumentList.test.tsx\nNhrDocumentList.tsx\nNhrDocumentNameCell\nNhrDocumentStatusFilter\nNhrProcedureDateCell\nNhrShareDateCell\nNhrSharedByCell\nNhrStatusCell\nNhrVisibilityCell\n\nTools used:\n\n- Bash: ls /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/business/factories/filters/\n\nTool results:\n\n  → result (ok): createNhrDateSelectionFilterConfig.test.tsx\ncreateNhrDateSelectionFilterConfig.tsx\ncreateNhrDocumentCategoryFilterConfig.test.tsx\ncreateNhrDocumentCategoryFilterConfig.tsx\ncreateNhrDocumentStatusFilterConfig.test.tsx\ncreateNhrDocumentStatusFilterConfig.tsx\ncreateNhrDocumentVisibilityFilterConfig.test.tsx\ncreateNhrDocumentVisibilityFilterConfig.tsx\n\nTools used:\n\n- Read: /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentList/NhrDocumentCategoryFilter/index.ts\n\nTool results:\n\n  → result (ok): 1\texport  from './NhrDocumentCategoryFilter'\n2\n\nTools used:\n\n- Bash: ls /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentList/NhrDocumentStatusFilter/\n\nTool results:\n\n  → result (ok): NhrDocumentStatusFilter.stories.tsx\nNhrDocumentStatusFilter.test.tsx\nNhrDocumentStatusFilter.tsx\n\nTools used:\n\n- Bash: ls /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentList/NhrDocumentStatusFilter/\n\nTool results:\n\n  → result (ok): NhrDocumentStatusFilter.stories.tsx\nNhrDocumentStatusFilter.test.tsx\nNhrDocumentStatusFilter.tsx\n\nTools used:\n\n- Read: /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentList/NhrDocumentStatusFilter/NhrDocumentStatusFilter.tsx (1–30)\n\nTool results:\n\n  → result (ok): 1\timport { Checkbox } from '@doctolib/design-system/Checkbox/v2'\n2\timport { Heading } from '@doctolib/design-system/Heading'\n3\t\n4\timport type { NhrDocumentStatusFilterProps } from '../../../types'\n5\t\n6\texport const NhrDocumentStatusFilter = ({ label, statuses, value, onChange }: NhrDocumentStatusFilterProps) => (\n7\t  <>\n8\t    <Heading level='h5'>{label}</Heading>\n9\t    <div className='flex flex-col'>\n10\t      {statuses.map((status) => (\n11\t        <Checkbox\n12\t          key={status.filterKey}\n13\n…(truncated, 327 more chars)\n\nTools used:\n\n- Bash: grep -r \"NhrDocumentCategoryFilter\" /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/index.ts 2>/dev/null || echo \"not in index.ts\"\n\nTool results:\n\n  → result (ok): /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/index.ts:export { createNhrDocumentCategoryFilterConfig } from './business/factories/filters/createNhrDocumentCategoryFilterConfig'\n\nTools used:\n\n- Bash: grep -rn \"oxygen-input-field\\|dl-new-dropdown\" /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/ 2>/dev/null | grep -v \".test.\"\n\nTool results:\n\n  → result (ok): /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentList/NhrDocumentCategoryFilter/NhrDocumentCategoryFilter.tsx:84:      <label htmlFor={triggerId} className='oxygen-input-field__label mb-1 block'>\n/Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentList/NhrDocumentCategoryFilter/NhrDocumentCategoryFilter.tsx:87:      <div className='oxygen-input-field__inputWrapper'>\n/Users/U\n…(truncated, 941 more chars)\n\nTools used:\n\n- Bash: grep -rn \"\\[&_label\\]\\|arbitrary.variant\\|\\[&>\" /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/ 2>/dev/null | grep -v \".test.\" | grep -v \".stories.\"\n\nTool results:\n\n  → result (ok): /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentList/NhrDocumentCategoryFilter/NhrDocumentCategoryFilter.tsx:122:          className='dl-new-dropdown flex flex-col border-0 p-0 [&_label]:!py-[1.2rem] [&_label]:!px-[1.6rem] [&_label>span:last-child]:![font-size:1.4rem]'\n\nTools used:\n\n- Bash: grep -rn \"\\[&\" /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/ 2>/dev/null | grep -v \".test.\" | grep -v \".stories.\" | grep -v \"NhrDocumentCategoryFilter\n…(truncated, 1 more chars)\n\nTool results:\n\n  → result (ok): (Bash completed with no output)\n\nTools used:\n\n- Bash: grep -rn \"useEffect\\|useState\\|useRef\\|useId\" /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/ 2>/dev/null | grep -v \".test.\" | grep -v \".stor\n…(truncated, 43 more chars)\n\nTool results:\n\n  → result (ok): /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentList/NhrDocumentList.tsx:4:import { useMemo, useState } from 'react'\n/Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentList/NhrDocumentList.tsx:39:  const [currentPage, setCurrentPage] = useState(1)\n/Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentList/NhrDocumen\n…(truncated, 2406 more chars)\n\nTools used:\n\n- Read: /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/business/factories/filters/createNhrDocumentCategoryFilterConfig.test.tsx\n\nTool results:\n\n  → result (ok): 1\timport { setup } from '@doctolib/test-helpers'\n2\timport { screen } from '@testing-library/react'\n3\timport { describe, expect, it, vi } from 'vitest'\n4\t\n5\timport { mockPatientInfo } from '../../../test-helpers'\n6\timport { createNhrDocumentCategoryFilterConfig } from './createNhrDocumentCategoryFilterConfig'\n7\t\n8\tconst ctx = { patient: mockPatientInfo }\n9\t\n10\tconst sampleOptions = [\n11\t  { value: 'A', label: 'Report A' },\n12\t  { value: 'B', label: 'Report B' },\n13\t  { value: 'C', label: 'Report \n…(truncated, 3910 more chars)\n\nTools used:\n\n- Bash: grep -n \"getByPlaceholderText\\|queryByPlaceholderText\" /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentList/NhrDocumentCategoryFilt\n…(truncated, 37 more chars)\n\nTool results:\n\n  → result (ok): 35:    expect(screen.getByPlaceholderText('Ex. Laboratory report')).toBeInTheDocument()\n\nTools used:\n\n- Bash: grep -rn \"getByPlaceholderText\\|queryByPlaceholderText\" /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/ 2>/dev/null | grep -v \".stories.\"\n\nTool results:\n\n  → result (ok): /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/business/factories/filters/createNhrDocumentCategoryFilterConfig.test.tsx:79:    expect(screen.getByPlaceholderText('Ex. Laboratory report')).toBeInTheDocument()\n/Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentList/NhrDocumentCategoryFilter/NhrDocumentCategoryFilter.test.tsx:35:    expect(screen.getByPlaceholderText('Ex. Laboratory report')).to\n…(truncated, 17 more chars)\n\nTools used:\n\n- Bash: grep -rn \"style=\" /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/ 2>/dev/null | grep -v \".test.\" | grep -v \".stories.\"\n\nTool results:\n\n  → result (ok): /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentList/NhrDocumentCategoryFilter/NhrDocumentCategoryFilter.tsx:123:          style={{ position: 'absolute', top: '100%', left: 0, width: '100%', marginTop: '0.4rem' }}\n\nTools used:\n\n- Bash: grep -rn \"import.#\" /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentList/ 2>/dev/null\n\nTool results:\n\n  → result (ok): /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentList/NhrDocumentList.tsx:1:import { getPagedData } from '#utils/nhrPaginationHelpers'\n/Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentList/NhrProcedureDateCell/NhrProcedureDateCell.tsx:1:import { formatNhrDate } from '#utils/nhrDateHelpers'\n/Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-\n…(truncated, 127 more chars)\n\nTools used:\n\n- Bash: grep -n \"import\" /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/business/factories/filters/createNhrDocumentCategoryFilterConfig.tsx\n\nTools used:\n\n- Bash: grep -n \"import\" /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentList/NhrDocumentCategoryFilter/NhrDocumentCategoryFilter.tsx\n\nTool results:\n\n  → result (ok): 1:import type { Option } from '@doctolib/design-system/Option'\n3:import { NhrDocumentCategoryFilter } from '../../../components/NhrDocumentList/NhrDocumentCategoryFilter'\n4:import type { FilterConfig } from '../../../types'\n\nTool results:\n\n  → result (ok): 1:import { ChevronDownRegularIcon } from '@doctolib/design-system-icons/ChevronDownRegularIcon'\n2:import { Checkbox } from '@doctolib/design-system/Checkbox/v2'\n3:import { IconButton } from '@doctolib/design-system/IconButton/v2'\n4:import type { Option } from '@doctolib/design-system/Option'\n5:import { useEffect, useId, useRef, useState } from 'react'\n\nTools used:\n\n- Bash: cat /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/package.json | grep -A 20 '\"aliases\"\\|\"#\"'\n\nTool results:\n\n  → result (ok): (Bash completed with no output)\n\nTools used:\n\n- Bash: grep -n \"\\\"#\\|paths\\|aliases\" /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/tsconfig.json 2>/dev/null || echo \"tsconfig not found\"\n\nTool results:\n\n  → result (ok): tsconfig not found\n\nTools used:\n\n- Bash: find /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui -name \"tsconfig.json\" -o -name \"vite.config.\" 2>/dev/null | head -10\n\nTool results:\n\n  → result (ok): /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/tsconfig.build.json\n/Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/tsconfig.json\n/Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/vite.config.ts\n/Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/node_modules/.federation/tsconfig.49b96c6b01b2bca969b9810e5b24def3.json\n/Users/USER/workspace/doctolib/trea\n…(truncated, 912 more chars)\n\nTools used:\n\n- Bash: find /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui -name \"package.json\" -maxdepth 1 | xargs grep -A 5 '\"imports\"\\|\"#utils\"' 2>/dev/null\n\nTool results:\n\n  → result (ok): \"imports\": {\n    \"#i18n\": \"./src/i18n.ts\",\n    \"#data/\": \"./src/data/.ts\",\n    \"#utils/\": \"./src/utils/.ts\"\n  },\n  \"exports\": {\n\nTools used:\n\n- Bash: grep -n \"imports\" /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/package.json | head -5\n\nTool results:\n\n  → result (ok): 56:  \"imports\": {\n\nTools used:\n\n- Bash: grep -A 30 '\"imports\"' /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/package.json | head -30\n\nTool results:\n\n  → result (ok): \"imports\": {\n    \"#i18n\": \"./src/i18n.ts\",\n    \"#data/\": \"./src/data/.ts\",\n    \"#utils/\": \"./src/utils/.ts\"\n  },\n  \"exports\": {\n    \".\": {\n      \"development\": \"./src/index.ts\",\n      \"import\": \"./dist/index.js\",\n      \"types\": \"./dist/index.d.ts\",\n      \"default\": \"./dist/index.js\"\n    },\n    \"./package.json\": \"./package.json\"\n  },\n  \"deliciousImportSort\": {\n    \"customGroups\": \"@doctolib\",\n    \"mainOrder\": [\n      \"absolute\",\n      \"relative\",\n      \"bare\"\n    ]\n  },\n  \"importSort\": {\n    \n…(truncated, 142 more chars)\n\nNow I have a complete picture of all the relevant files and patterns. Here is the structured review.\n\n---\n\nArchitecture Review: NhrDocumentCategoryFilter\n\nCritical Issues (must fix)\n\n1. NhrDocumentStatusFilter directory is missing its index.ts re-exporter — and this establishes the local pattern inconsistency\n\nThe component directory at /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentList/NhrDocumentStatusFilter/ has no index.ts. NhrDocumentCategoryFilter correctly has one. The factory at /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/business/factories/filters/createNhrDocumentCategoryFilterConfig.tsx imports via:\n\nimport { NhrDocumentCategoryFilter } from '../../../components/NhrDocumentList/NhrDocumentCategoryFilter'\n\nThis import resolves to the index.ts, which is correct. However, the 3-level ../../../ traversal from src/business/factories/filters/ to src/components/… qualifies for a path alias under the package's own convention. The package defines #utils/ and #data/ in package.json \"imports\" but does not define #components/. This means there is no alias available to clean up this import. This is an omission in the alias configuration, not a violation the component author can fix unilaterally — but it is worth flagging for the package owner to add \"#components/\": \"./src/components/.ts\" (or .tsx).\n\n2. Tailwind arbitrary variant selector [&_label]:!py-[1.2rem] on a design system component is a fragile coupling\n\n/Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentList/NhrDocumentCategoryFilter/NhrDocumentCategoryFilter.tsx, line 122:\n\nclassName='dl-new-dropdown flex flex-col border-0 p-0 [&_label]:!py-[1.2rem] [&_label]:!px-[1.6rem] [&_label>span:last-child]:![font-size:1.4rem]'\n\nThree !important overrides targeting the internal <label> and <span> DOM structure of @doctolib/design-system/Checkbox/v2 via descendant selectors. This is a violation regardless of whether Tailwind arbitrary variants are used elsewhere in the codebase (they are not — this is the only occurrence in the package). The problems are:\n\n- !important overrides on design system internals create an invisible dependency on the DS component's private DOM structure. If Checkbox/v2 changes its label markup, this silently breaks.\n- The [font-size:1.4rem] override uses a raw CSS property string inside Tailwind, bypassing the design token system entirely. Font sizes should come from a DS prop or a token, not a hardcoded rem value.\n- Arbitrary variant descendant selectors belong in a CSS Module, not inline in JSX, specifically because they encode structural knowledge about a child component that should be opaque.\n\nRequired fix: Move these overrides to a NhrDocumentCategoryFilter.module.scss file. Document in a comment why the DS Checkbox size needs to be overridden here, and open a ticket to request a size or density prop in the DS component instead of owning the override long-term.\n\n3. Inline style prop for absolutely-positioned dropdown\n\nLine 123:\n\nstyle={{ position: 'absolute', top: '100%', left: 0, width: '100%', marginTop: '0.4rem' }}\n\nAll other layout in this component uses Tailwind classes. The position: absolute and related values are fully expressible as Tailwind utilities (absolute top-full left-0 w-full mt-[0.4rem]). The inline style prop here is inconsistent with the rest of the component and with the package's hybrid approach (Tailwind + CSS Modules). There is no justification for bypassing Tailwind here.\n\nRequired fix:\n\nclassName='dl-new-dropdown absolute top-full left-0 w-full mt-[0.4rem] flex flex-col border-0 p-0'\n\n(The [&_label] overrides should be moved to a CSS Module as noted above.)\n\n---\n\nWarnings (should fix)\n\n4. oxygen-input-field__ CSS classes used directly without documentation\n\nLines 84, 87, 95, 102: The component uses oxygen-input-field__label, oxygen-input-field__inputWrapper, oxygen-input-field__input, and oxygen-input-field__iconWrapper directly. The context note acknowledges this is intentional because InputText has no right-element slot. This is an acceptable deviation when the DS component genuinely cannot accommodate the requirement — but the deviation must be documented at the point of use so future maintainers know it was a deliberate decision and not accidental.\n\nRequired fix: Add a comment block before the JSX explaining the constraint:\n\n{/\n  Uses oxygen-input-field__ BEM classes directly because @doctolib/design-system/InputText\n  does not expose a right-element slot that accepts multiple icons. These classes are the same\n  ones used internally by InputText. If InputText gains a right-slot API, migrate here.\n/}\n\n5. NhrDocumentCategoryFilter does not follow the Container/Presentational split despite holding non-trivial UX state\n\nThe component owns four pieces of state (isOpen, searchQuery, two useEffect handlers for keyboard and pointer-down) plus three derived values (firstLabel, displayLabel, filteredOptions). Under the UpFront component patterns rule, when a component has \"complex state\" it should be split into a public component and a UI.tsx presentational variant. The rule is \"Container/Presentational split when component has data access or complex state.\"\n\nThis component has no data access, but the UX state (open/close, search filtering, outside-click detection, escape-key handling) is more than trivial. The split would be:\n\n- NhrDocumentCategoryFilter.tsx — manages isOpen, searchQuery, derives displayLabel and filteredOptions, forwards everything as props\n- NhrDocumentCategoryFilterUI.tsx — pure presentational, receives all computed values as props\n\nThe index.ts re-exports only NhrDocumentCategoryFilter, which is correct.\n\nThis is a \"should fix\" rather than critical because the component is self-contained with no data access, the state is tightly coupled to rendering, and the team may have a local convention of keeping UX state in presentational components. However, the UX hooks (handlePointerDown, handleKeyDown) are reasonable candidates for extraction into a NhrDocumentCategoryFilter.hooks.ts file, which is explicitly called out in the component patterns rule.\n\nRecommended fix: Extract the useEffect logic into NhrDocumentCategoryFilter.hooks.ts as a useNhrDocumentCategoryFilterInteractions hook. The component file itself then stays focused on rendering.\n\n6. getByPlaceholderText used as an assertion query in both test files\n\n/Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentList/NhrDocumentCategoryFilter/NhrDocumentCategoryFilter.test.tsx, line 35, and /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/business/factories/filters/createNhrDocumentCategoryFilterConfig.test.tsx, line 79:\n\nexpect(screen.getByPlaceholderText('Ex. Laboratory report')).toBeInTheDocument()\n\nThe project testing rules explicitly state: \"getByPlaceholderText — Placeholders are NOT accessible labels\" and prohibit it for selection. The test at line 35 is an assertion (.toBeInTheDocument()), not a selection for interaction, but the stated intent of this test is \"should show placeholder when no values are selected.\" The correct way to assert that the input renders with a given placeholder is toHaveAttribute('placeholder', '...') on the element found by role:\n\nexpect(screen.getByRole('combobox', { name: 'Category' })).toHaveAttribute('placeholder', 'Ex. Laboratory report')\n\nThis applies to both occurrences.\n\n---\n\nSuggestions (consider improving)\n\n*7. handleClear closes the dropdown but onClear is a prop callbac\n…(truncated, 3606 more chars)",
  "sha256": "ffb7eb7ae1d28df2",
  "source_url": "sessions/workspace-doctolib/2026-04-27T13-23-workspace-doctolib-you-are-a-senior-harmonic-dolphin-subagent-ad8a57fc.html"
}