Session: majestic-whistling-beaver-subagent-a8b07931 — 2026-04-13

workspace-doctolib · Claude · branch HEAD · claude-haiku-4-5-20251001 · 2026-04-13 16:02 · 1 msgs · 20 tools · 12 min read · updated 3 weeks ago

Explore the tpf-national-health-records-ui package at /Users/USER/workspace/doctolib/treatment-plan/packages/tpf...

tools: Bash, Read
← workspace-doctolib Download .md .txt .json
Tool calls
Read Read: 12 calls (60.0%) 12 Bash Bash: 8 calls (40.0%) 8
Token usage2.7M total
Input140
Cache creation234.3K
Cache read2.5M
Output6.3K
Cache hit ratio91%· healthy

Project: workspace-doctolib · Branch: HEAD · Mode: ` · **Model:**claude-haiku-4-5-20251001`

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

Conversation

Turn 1 — User

Explore the tpf-national-health-records-ui package at /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src and find all React components related to NHRDocumentList. I need to understand:

  1. The directory structure of the src folder
  2. The main NHRDocumentList component and its children (header, table, pagination, filter panel)
  3. How they are composed together (which wraps what)
  4. The current CSS classes / Tailwind classes applied to the layout containers (flex, height, overflow, etc.)
  5. Any existing height/overflow/flex related styling

Please read the actual file contents for the key component files and report: - File paths - Component hierarchy - Current className strings especially around layout (flex, h-, overflow-, min-h-, max-h-) - How the modal container is set up (if any)

Be thorough - read the actual source files, not just list them.

Turn 1 — Assistant

I'll explore the NHRDocumentList component package thoroughly. Let me start by understanding the directory structure and then reading the key component files.

Tools used:

  • Bash: find /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src -type f -name "*.tsx" -o -name "*.ts" -o -name "*.jsx" -o -name "*.js" | head -50

Tool results:

→ result (ok): /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/locales/loadNamespace.ts /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/i18n.ts /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/entry.ts /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/business/formatters/patientFormatter.ts /Users/USER/workspace/doctolib/treatment-plan/packages/tpf …(truncated, 6830 more chars)

Let me continue exploring the directory structure and find the main NHRDocumentList component.

Tools used:

  • Bash: find /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentList -type f \( -name "*.tsx" -o -name "*.ts" \) | sort

Tool results:

→ result (ok): /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentList/NhrDocumentCategoryCell/index.ts /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentList/NhrDocumentCategoryCell/NhrDocumentCategoryCell.stories.tsx /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentList/NhrDocumentCategoryCell/NhrDocumentCategoryCell.test.tsx …(truncated, 5399 more chars)

Now let me read the main NHRDocumentList component and the key related components:

Tools used:

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

Tool results:

→ result (ok): 1 import { getPagedData } from '#utils/nhrPaginationHelpers' 2 import { SpinnerLoader } from '@doctolib/design-system/SpinnerLoader' 3 import type { NhrDocument } from '@doctolib/tpf-national-health-records' 4 import { useMemo, useState } from 'react' 5
6 import type { ActionConfig, ColumnConfig, FilterConfig, NhrPatientInfo } from '../../types' 7 import { NhrDocumentListFilterPanel } from '../NhrDocumentListFilterPanel/NhrDocumentListFilterPanel' 8 import { NhrDocumentListHeader } from '../Nhr …(truncated, 3084 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 { BetaComboBox } from '@doctolib/design-system/BetaComboBox' 2 import type { Option } from '@doctolib/design-system/Option' 3
4 type NhrDocumentCategoryFilterProps = { 5 value: string 6 options: Option[] 7 onSelectionChange: (option: Option) => void 8 onSearchChange: (search: string) => void 9 } 10
11 export const NhrDocumentCategoryFilter = ({ 12 value, 13 options, 14 onSelectionChange, 15 onSearchChange, 16 }: NhrDocumentCategoryFilterProps) => ( 17 <BetaComboBox 1 …(truncated, 192 more chars)

Tools used:

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

Tool results:

→ result (ok): 1 import { Checkbox } from '@doctolib/design-system/Checkbox/v2' 2 import { Heading } from '@doctolib/design-system/Heading' 3
4 import type { NhrDocumentStatusFilterProps } from '../../../types' 5
6 export const NhrDocumentStatusFilter = ({ label, statuses, value, onChange }: NhrDocumentStatusFilterProps) => ( 7 <> 8 <Heading level='h5'>{label}</Heading> 9 <div className='flex flex-col'> 10 {statuses.map((status) => ( 11 <Checkbox 12 key={status.filterKey} 13 …(truncated, 306 more chars)

Now let me read the NhrDocumentListHeader, NhrDocumentListTable, and NhrDocumentListFilterPanel components:

Tools used:

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

Tool results:

→ result (ok): 1 import { SlidersRegularIcon } from '@doctolib/design-system-icons/SlidersRegularIcon' 2 import { Button } from '@doctolib/design-system/Button/v2' 3 import { Divider } from '@doctolib/design-system/Divider' 4 import { Paragraph } from '@doctolib/design-system/Paragraph' 5 import { Pill } from '@doctolib/design-system/Pill' 6
7 import { formatAge, formatGender } from '../../../business/formatters/patientFormatter' 8 import type { NhrPatientInfo } from '../../../types' 9
10 export type NhrDocu …(truncated, 1416 more chars)

Tools used:

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

Tool results:

→ result (ok): 1 import { PAGE_SIZE } from '#utils/nhrPaginationHelpers' 2 import { Pagination } from '@doctolib/design-system/Pagination' 3 import { Table } from '@doctolib/design-system/Table' 4 import type { NhrDocument } from '@doctolib/tpf-national-health-records' 5
6 import type { ActionConfig, ColumnConfig } from '../../../types' 7 import { NhrDocumentListTableBody } from './NhrDocumentListTableBody/NhrDocumentListTableBody' 8 import { NhrDocumentListTableHead } from './NhrDocumentListTableHead/NhrDocu …(truncated, 856 more chars)

Tools used:

  • Bash: find /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components -name "*FilterPanel*" -type f | grep -E "\.(tsx|ts)$"

Tool results:

→ result (ok): /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentListFilterPanel/NhrDocumentListFilterPanel.tsx /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentListFilterPanel/NhrDocumentListFilterPanel.test.tsx /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentListFilterPanel/NhrDocumentListFilterPanel.stories.tsx

Tools used:

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

Tool results:

→ result (ok): 1 import { ArrowRotateLeftRegularIcon } from '@doctolib/design-system-icons/ArrowRotateLeftRegularIcon' 2 import { Button } from '@doctolib/design-system/Button/v2' 3 import { IconButton } from '@doctolib/design-system/IconButton/v2' 4 import { Paragraph } from '@doctolib/design-system/Paragraph' 5 import { useEffect, useState } from 'react' 6
7 import type { FilterConfig } from '../../types' 8
9 export type NhrDocumentListFilterPanelProps = { 10 isOpen: boolean 11 onClose: () => void 12
…(truncated, 3859 more chars)

Tools used:

  • Bash: find /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentListModal -name "*.tsx" -type f | sort

Tool results:

→ result (ok): /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentListModal/NhrDocumentListHeader/NhrDocumentListHeader.stories.tsx /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentListModal/NhrDocumentListHeader/NhrDocumentListHeader.test.tsx /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentListModal/NhrDocumentListHeader/Nhr …(truncated, 2201 more chars)

Now let me read the NhrDocumentListModal wrapper and the table body/head:

Tools used:

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

Tool results:

→ result (ok): 1 import { Modal } from '@doctolib/design-system/Modal' 2 import { ModalBody } from '@doctolib/design-system/ModalBody' 3 import type { NhrDocument } from '@doctolib/tpf-national-health-records' 4 import { useEffect, useMemo, useState } from 'react' 5
6 import type { ActionConfig, ColumnConfig, FilterConfig, NhrPatientInfo, SearchDocumentsFn } from '../../types' 7 import { NhrDocumentList } from '../NhrDocumentList/NhrDocumentList' 8
9 export type NhrDocumentListModalProps = { 10 isOpen: boo …(truncated, 2194 more chars)

Tools used:

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

Tool results:

→ result (ok): 1 import { TableHead } from '@doctolib/design-system/TableHead' 2 import { TableHeadCell } from '@doctolib/design-system/TableHeadCell' 3 import { TableHeadSelectAllCell } from '@doctolib/design-system/TableHeadSelectAllCell' 4 import { TableRow } from '@doctolib/design-system/TableRow' 5
6 import type { ColumnConfig } from '../../../../types' 7
8 export type NhrDocumentListTableHeadProps = { 9 columns: ColumnConfig[] 10 } 11
12 export const NhrDocumentListTableHead = ({ columns }: NhrDocum …(truncated, 321 more chars)

Tools used:

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

Tool results:

→ result (ok): 1 import { IconButton } from '@doctolib/design-system/IconButton/v2' 2 import { TableBody } from '@doctolib/design-system/TableBody' 3 import { TableCell } from '@doctolib/design-system/TableCell' 4 import { TableRow } from '@doctolib/design-system/TableRow' 5 import { TableSelectCell } from '@doctolib/design-system/TableSelectCell' 6 import type { NhrDocument } from '@doctolib/tpf-national-health-records' 7
8 import type { ActionConfig, ColumnConfig } from '../../../../types' 9
10 export type …(truncated, 1436 more chars)

Perfect! Now let me check the directory structure overview and look for any CSS or styling-related files:

Tools used:

  • Bash: tree -L 3 -d /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src 2>/dev/null || find /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national …(truncated, 41 more chars)

Tool results:

→ result (ok): /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src ├── tests ├── business │   ├── factories │   │   ├── actions │   │   ├── columns │   │   └── filters │   └── formatters ├── components │   ├── NhrDateRangeFilter │   ├── NhrDateSelectionFilter │   ├── NhrDateTypeFilter │   ├── NhrDocumentList │   │   ├── NhrDocumentCategoryCell │   │   ├── NhrDocumentCategoryFilter │   │   ├── NhrDocumentNameCell │   │   ├── NhrDocumentStatusFilter │   │   ├── NhrProced …(truncated, 435 more chars)

Perfect! Now let me verify there are no CSS Module files and check the complete component hierarchy:

Tools used:

  • Bash: find /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src -name "*.scss" -o -name "*.css" 2>/dev/null | head -20

Tool results:

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

Good! No CSS/SCSS files. Now let me verify the component exports and check the package.json to understand the full structure:

Tools used:

  • Read: /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/package.json

Tool results:

→ result (ok): 1 { 2 "name": "@doctolib/tpf-national-health-records-ui", 3 "version": "12.1.0", 4 "repository": { 5 "type": "git", 6 "url": "git+https://github.com/doctolib/treatment-plan.git" 7 }, 8 "keywords": [ 9 "upfront", 10 "modular frontend", 11 "smaller-scope" 12 ], 13 "author": "@doctolib/fire", 14 "license": "Doctolib", 15 "doctolib": { 16 "upfront-type": "smaller-scope" 17 }, 18 "type": "module", 19 "sideEffects": [ 20 "./src/i18n.ts" 21 ], 22
…(truncated, 3864 more chars)

Tools used:

  • Bash: ls -la /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentList/

Tool results:

→ result (ok): drwxr-xr-x clertonra staff 448 B Mon Apr 13 15:03:05 2026 . drwxr-xr-x clertonra staff 352 B Wed Apr 1 10:05:06 2026 .. drwxr-xr-x clertonra staff 192 B Wed Apr 1 10:05:06 2026 NhrDocumentCategoryCell drwxr-xr-x clertonra staff 160 B Wed Apr 1 10:05:06 2026 NhrDocumentCategoryFilter .rw-r--r-- clertonra staff 14 KB Mon Apr 13 15:03:05 2026 NhrDocumentList.stories.tsx .rw-r--r-- clertonra staff 9.9 KB Mon Apr 13 15:03:05 2026 NhrDocumentList.test.tsx .rw-r--r-- clertonra staff 3.2 KB Mon …(truncated, 583 more chars)

Now let me check if there's an index file and look at one more cell component to understand the rendering pattern:

Tools used:

  • Bash: ls -la /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentList/ | grep -E "^-"

Tool results:

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

Tools used:

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

Tool results:

→ result (ok): 1 type Props = { 2 title: string | undefined 3 } 4
5 export const NhrDocumentNameCell = ({ title }: Props) => (title === undefined ? null : <span>{title}</span>) 6

Tools used:

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

Tool results:

→ result (ok): 1 import type { PillColor } from '@doctolib/design-system/Pill' 2 import { Pill } from '@doctolib/design-system/Pill' 3
4 type StatusConfig = { 5 label: string 6 color?: PillColor 7 } 8
9 type Props = { 10 rawStatus: string | undefined 11 splitStatus: ((status: string) => string[]) | undefined 12 statusMap: Record<string, StatusConfig> 13 defaultStatus: StatusConfig 14 } 15
16 const resolveStatuses = ( 17 rawStatus: string | undefined, 18 splitStatus: ((status: string) => stri …(truncated, 994 more chars)

Perfect! Now I have comprehensive understanding. Let me create a detailed summary report:

Summary: NHRDocumentList Component Architecture

Based on my thorough exploration of the source code at /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src, here's the complete breakdown:


1. Directory Structure

src/
├── components/
│   ├── NhrDocumentList/                          # Main list component
│   │   ├── NhrDocumentList.tsx                  # Primary exported component
│   │   ├── NhrDocumentList.test.tsx
│   │   ├── NhrDocumentList.stories.tsx
│   │   ├── NhrDocumentCategoryCell/             # Cell renderers
│   │   ├── NhrDocumentNameCell/
│   │   ├── NhrProcedureDateCell/
│   │   ├── NhrShareDateCell/
│   │   ├── NhrSharedByCell/
│   │   ├── NhrStatusCell/
│   │   ├── NhrVisibilityCell/
│   │   ├── NhrDocumentCategoryFilter/           # Filter components
│   │   └── NhrDocumentStatusFilter/
│   │
│   ├── NhrDocumentListFilterPanel/               # Side panel filter UI
│   │   ├── NhrDocumentListFilterPanel.tsx
│   │   ├── NhrDocumentListFilterPanel.test.tsx
│   │   └── NhrDocumentListFilterPanel.stories.tsx
│   │
│   └── NhrDocumentListModal/                     # Modal wrapper
│       ├── NhrDocumentListModal.tsx              # Fullscreen modal container
│       ├── NhrDocumentListHeader/                # Patient info + filter button
│       │   └── NhrDocumentListHeader.tsx
│       └── NhrDocumentListTable/                 # Table wrapper
│           ├── NhrDocumentListTable.tsx
│           ├── NhrDocumentListTableHead/         # Table header
│           │   └── NhrDocumentListTableHead.tsx
│           └── NhrDocumentListTableBody/         # Table body + rows
│               └── NhrDocumentListTableBody.tsx
├── business/
│   ├── factories/
│   │   ├── actions/    # Action config factories
│   │   ├── columns/    # Column config factories
│   │   └── filters/    # Filter config factories
│   └── formatters/
├── utils/
├── locales/
└── test-helpers/

No CSS/SCSS files exist — styling is done entirely with Tailwind CSS classes.


2. Component Hierarchy & Composition

The component tree flows from the modal wrapper down to individual cells:

NhrDocumentListModal (fullscreen modal container)
│   └─ ModalBody (design-system wrapper)
│       └─ NhrDocumentList (main composition component)
│           ├─ NhrDocumentListHeader (fixed header with patient info)
│           │   └─ Patient name, age, gender, filter count, result count
│           │
│           ├─ div (relative mt-16 - positions table below header)
│           │   ├─ Overlay spinner (when isActionLoading)
│           │   └─ NhrDocumentListTable (scrollable table area)
│           │       ├─ Table (design-system component)
│           │       │   ├─ NhrDocumentListTableHead
│           │       │   │   ├─ TableHeadSelectAllCell
│           │       │   │   ├─ TableHeadCell (one per column)
│           │       │   │   └─ TableHeadCell (empty for actions)
│           │       │   │
│           │       │   └─ NhrDocumentListTableBody
│           │       │       └─ TableRow (one per document)
│           │       │           ├─ TableSelectCell
│           │       │           ├─ TableCell (column content)
│           │       │           │   └─ col.render(row) → renders cells like:
│           │       │           │       • NhrDocumentNameCell
│           │       │           │       • NhrStatusCell
│           │       │           │       • etc.
│           │       │           └─ TableCell (actions)
│           │       │               └─ IconButton[] (actions)
│           │       │
│           │       └─ Pagination (mt-32 margin)
│           │
│           └─ NhrDocumentListFilterPanel (overlay on top)
│               └─ Backdrop + fixed width panel (w-[400px] h-full)
│                   ├─ FilterPanelHeader
│                   ├─ FilterPanelBody (flex-1 overflow-y-auto)
│                   └─ FilterPanelFooter

3. Key Files & Component Details

Main List Component (Primary entry point for this package)

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

Key Props: - columns: ColumnConfig[] — Column definitions injected from business layer - filters: FilterConfig[] — Filter definitions injected from business layer - patient: NhrPatientInfo — Patient metadata - data?: NhrDocument[] — Document data (optional for local state) - isLoading?: boolean — Loading state - appliedFilters?: Record<string, unknown> — Controlled filters (for server-side filtering) - onApplyFilters?: (filters) => void — Filter callback (server-side) - actions?: ActionConfig[] — Row actions (view, download, etc.) - resultCount?: number — Total from server

Component renders: - Header, table with pagination, and filter panel - Local state for pagination & filter panel visibility - Can be controlled (server-side filters) or uncontrolled (local)


File: /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentListModal/NhrDocumentListModal.tsx

Wrapper over NhrDocumentList — adds: - NhrDocumentListModal component (fullscreen modal) - Server-side document fetching via searchDocuments callback - Action loading overlay when actions execute - Passes controlled filters to NhrDocumentList


Header Component (Patient info + filter button)

File: /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentListModal/NhrDocumentListHeader/NhrDocumentListHeader.tsx

Container Classes: flex items-center justify-between

Renders: - Left: Patient name (Title/S/Bold), gender, birthDate, age - Right: Filter button with count, Divider, Results pill - All from design-system components (Paragraph, Pill, Button, Divider)


Table Component (Wraps head + body + pagination)

File: /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentListModal/NhrDocumentListTable/NhrDocumentListTable.tsx

Container: <div> with Table inside, Pagination below with mt-32

Pagination: Uses PAGE_SIZE constant from utils, positioned with mt-32 margin


Table Head

File: /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentListModal/NhrDocumentListTable/NhrDocumentListTableHead/NhrDocumentListTableHead.tsx

Structure:

TableHead
└─ TableRow
   ├─ TableHeadSelectAllCell
   ├─ TableHeadCell (per column)
   └─ TableHeadCell (empty for actions column)

Table Body

File: /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentListModal/NhrDocumentListTable/NhrDocumentListTableBody/NhrDocumentListTableBody.tsx

Loading State: Returns TableBody with loading prop + skeleton (8 rows)

Rendered Rows:

TableBody
└─ TableRow (per document)
   ├─ TableSelectCell
   ├─ TableCell (per column)
   │  └─ col.render(row)  ← renders cell content
   └─ TableCell (actions)
      └─ div (flex items-center)
         └─ IconButton[] (per action)

Cell Components (Presentational)

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

Simple presentational renderers: - NhrDocumentNameCell — just renders <span>{title}</span> - NhrStatusCell — renders design-system <Pill> or fallback <span> with inline-flex flex-col gap-4 - All receive data, render HTML, no side effects


Filter Panel (Overlay slide-out panel)

File: `/Users/USER/workspace/doctolib/treatment-plan …(truncated, 4702 more chars)

Keyboard shortcuts

⌘K / Ctrl+KOpen command palette
/Focus search
g hGo to home
g pGo to projects
g sGo to sessions
j / kNext / prev row (tables)
?Show this help
EscClose dialogs

Structured queries

Mix key:value filters with free text in the palette:

type:sessionOnly session pages
project:llm-wikiFilter by project name (substring)
model:claudeFilter by model name (substring)
date:>2026-03-01Sessions after a date
date:<2026-04-01Sessions before a date
tags:rustPages mentioning a tag/topic
sort:dateSort results by date (newest first)

Example: type:session project:llm-wiki date:>2026-04 sort:date