feat(studio): anonymizer builder live preview panel [ASTD-332]

[marcusds]

Builds the right-hand Preview panel of the anonymizer builder (/anonymizer/new), replacing the "Your records preview will appear here" placeholder.

Closes ASTD-332.

What it does

Preview (beside the Source | Model Settings tabs) streams the current form config through the anonymizer /preview endpoint and renders:

• Original vs Replaced columns with inline PII tags on detected/replaced entities
• Replacement Map table (Label | Original | → | Replacement)
• Record pager (‹ Record 1 of N ›), loading skeletons, empty state, error banner
• Collapsible Logs panel fed by the stream's log frames

While a run is in flight the button becomes Stop. Full Run moves into the panel header per the Figma and still submits the create-job form — the panel is inside the same <form>. The left panel footer is dropped: Figma marks that frame hidden and moves its only visible button into the preview header, which left Cancel stranded. Exit is via the breadcrumb.

Why previewApi.ts is hand-written rather than generated

The request half is generated — PreviewRequest comes from the SDK. Only the transport and the frame types are hand-rolled, for two reasons:

The generated client can't stream. anonymizerPreviewfunctionRoute exists, but it routes through the axios mutator in generated/fetchers/anonymizer.ts, which buffers the whole body. A preview streams log frames for minutes; through that client you'd see nothing until it finished, which defeats the panel.

The frames aren't in the spec to generate from. plugins/nemo-anonymizer/openapi/openapi.yaml declares the 200 as:

content:
  application/json:   # the route actually returns application/x-ndjson
    schema: {}

so orval emits customFetch<unknown> and no frame schemas. That traces to functions/routes.py:203, where the shared NemoFunction route factory registers streaming functions with response_model=None.

Worth fixing upstream, not here. If the factory declared the frame union and application/x-ndjson in responses=, orval would generate LogFrame | PreviewDatasetFrame | TraceDatasetFrame | FailedRecordsFrame | Heartbeat | Done | Error and roughly 60 lines of hand-written types and guards would come out of previewApi.ts. That's a platform-wide change affecting every streaming function plus a spec/SDK regen, so it wants its own ticket. The streaming transport itself would stay hand-written either way — orval doesn't generate incremental readers.

Notes for review

Replaced-side spans are searched, not replayed. Each entity is located in the replaced text by scanning forward for its synthetic value. Replaying the original offsets drifts the moment a replacement changes length — a bug the upstream library already hit and worked around, so parse.ts mirrors its display.py logic: the exact → value-only → case-insensitive lookup ladder, plus the build-from-replacement-map fallbacks used when detection returns no spans but the map is populated.

PII tags use Badge, not Tag. Code Connect on the Figma PII Tag component maps to Badge (solid for the value, outline for the label); Tag is the interactive pill and rendered noticeably heavier than the mock.

Stop is real, not cosmetic — but not instant. Aborting makes Starlette close the response generator, cancelling the drain task and unwinding the function's task group until the worker's next frame send raises PreviewMessageDeliveryError. Because the anonymizer runs under abandon_on_cancel=True, the worker thread is abandoned rather than joined, so an in-flight model call still finishes.

The shared-URL-param hazard. useStudioDataViewState syncs to unprefixed params (page, page_size, sort, …). That bit inside this PR: with a map that overflows a page, going to ?page=2 then advancing the record pager to a shorter map sliced past the end and rendered an empty table — with the map's pager hidden below page size, nothing was left to recover with. Clamped, with a regression test confirmed to fail without the fix. The broader collision remains for when ASTD-330 reuses this table alongside ResultsPreviewTable; that wants a paramPrefix option on the shared hook.

Reuse audit. Four things this branch had reimplemented now use what Studio already ships: isAbortError (common's version also handles APIUserAbortError, mine only caught DOMException), the NDJSON read loop (extracted as readLineDelimitedStream, now shared with the data designer preview and given the chunk-boundary test neither call site had), OUTPUT_SUFFIXES (was declared here and in AnonymizerJobDetailRoute), and StackedSkeleton.

The record view lives in components/AnonymizerRecordView/ so the job detail page (ASTD-330) and evaluation results (ASTD-322) can reuse it.

No progress indicator is available

The stream carries no progress frame — frames.py reserves the kind but the plugin never emits one — and records arrive only after the run completes, so "3 of 10" isn't derivable. The library does compute an ETA, but it's gated on total >= 50 while preview caps at 10, so it can never fire. Only phase log lines and a 5s heartbeat are available today.

Testing

• 78 unit tests across parse, previewApi, lineStream, the record view and the tab/heading helpers
• Verified in a real browser against a mocked NDJSON stream: empty, loading, populated, stop-mid-run, validation routing, and the rewrite-mode skeleton heading
• Full studio suite green (302 files, 2706 tests), typecheck and lint clean

[github-actions]

Suite	Lines Covered	Line Rate	Branch Rate
Unit Tests	29340/37347	78.6%	63.2%
Integration Tests	17284/36065	47.9%	20.6%