---
id: CONTENT-WP-0002
type: workplan
title: "UI extraction and experience skeleton"
domain: infotech
repo: content-explorer
status: active
flavor: implementation
depends_on:
  - CONTENT-WP-0000
  - CONTENT-WP-0001
created: "2026-10-12"
updated: "2026-10-13"
state_hub_workstream_id: "55c1d92f-fe1a-552a-998d-2d6905fb6b99"
---

# UI extraction and experience skeleton

Deliver the strongest OnCo-style interaction patterns on generic data. CONTENT-WP-0000 and CONTENT-WP-0001 are finished, so this plan is eligible. T01 through T04 have landed under `ui/`. T04 keeps search, facet selection, and sort in the page URL, and back and forward restore that view. T05 is next. See `workplans/evidence/CONTENT-WP-0002-ImplementationNotes.md`.

## Work packages

### Extract or port UI tokens, layout, header, hero, and the reusable table from the pinned upstream.

```task
id: CONTENT-WP-0002-T01
status: done
priority: high
state_hub_task_id: "12db582c-24d1-5a93-a70b-e944c3e88535"
```

### Create a registry-based kind index and entity detail with no oncology imports.

```task
id: CONTENT-WP-0002-T02
status: done
priority: high
state_hub_task_id: "3a8dcdb5-f4b0-5a5d-99e6-7fd62ea7d002"
```

### Adapt BrowserRow through a pure mapper and add configurable generic cell renderers.

```task
id: CONTENT-WP-0002-T03
status: done
priority: high
state_hub_task_id: "f3ccb974-153a-5dae-aa52-7a985175ca52"
```

### Preserve shareable URL query, facets, and sorting, and test browser back and forward.

```task
id: CONTENT-WP-0002-T04
status: done
priority: high
state_hub_task_id: "bacd58df-4834-5157-834e-26da4c6ba470"
```

### Implement keyboard search, empty, loading, and error states, and responsive layouts.

```task
id: CONTENT-WP-0002-T05
status: todo
priority: high
state_hub_task_id: "bbbc39cd-c47f-541d-b43d-df9e7ff646c3"
```

## Acceptance gates

### Browse, search, filter, sort, and detail work for both dataspaces.

```task
id: CONTENT-WP-0002-T06
status: todo
priority: high
state_hub_task_id: "3474ef62-53ae-59f5-8a19-55e21ade728a"
```

### A component dependency check prohibits oncology, cancer, drug, and target domain imports in generic code.

```task
id: CONTENT-WP-0002-T07
status: todo
priority: high
state_hub_task_id: "bd6b4dd8-e897-5c08-9e07-a0246def0faf"
```

### Copied upstream components retain provenance headers and notices.

```task
id: CONTENT-WP-0002-T08
status: todo
priority: high
state_hub_task_id: "16172ffd-23e0-5c4f-8cac-2991e589fcdb"
```

### Keyboard and small-screen smoke tests pass.

```task
id: CONTENT-WP-0002-T09
status: todo
priority: high
state_hub_task_id: "5694c902-f76a-5df2-a309-c0c6333f83cc"
```

## Key risk

R4: extraction too expensive. Use a greenfield component where warranted. Log evidence and deviations in the workplan review before marking complete.

## Evidence

Pull requests, test logs, pinned artifacts, screenshots, or a comparison report where applicable. Add `ImplementationNotes.md` and `Review.md` on completion. Do not mark a gate passed without a verifiable link.